真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

如何進行數(shù)據(jù)采集和數(shù)據(jù)上報

本篇內(nèi)容介紹了“如何進行數(shù)據(jù)采集和數(shù)據(jù)上報”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!

成都創(chuàng)新互聯(lián)公司專注于郊區(qū)企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,成都商城網(wǎng)站開發(fā)。郊區(qū)網(wǎng)站建設公司,為郊區(qū)等地區(qū)提供建站服務。全流程按需設計網(wǎng)站,專業(yè)設計,全程項目跟蹤,成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

數(shù)據(jù)采集

性能數(shù)據(jù)采集

性能數(shù)據(jù)采集需要使用 window.performance  API

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance 

Performance 接口可以獲取到當前頁面中與性能相關的信息,它是 High Resolution Time API 的一部分,同時也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

從 MDN 的文檔可以看出,window.performance.timing 包含了頁面加載各個階段的起始及結束時間。

如何進行數(shù)據(jù)采集和數(shù)據(jù)上報

這些屬性需要結合下圖一起看,更好理解:

如何進行數(shù)據(jù)采集和數(shù)據(jù)上報

在這里插入圖片描述

為了方便大家理解 timing 各個屬性的意義,我在知乎找到一位網(wǎng)友對于 timing 寫的簡介,在此轉載一下。

timing: {          // 同一個瀏覽器上一個頁面卸載(unload)結束時的時間戳。如果沒有上一個頁面,這個值會和fetchStart相同。   navigationStart: 1543806782096,   // 上一個頁面unload事件拋出時的時間戳。如果沒有上一個頁面,這個值會返回0。  unloadEventStart: 1543806782523,   // 和 unloadEventStart 相對應,unload事件處理完成時的時間戳。如果沒有上一個頁面,這個值會返回0。   unloadEventEnd: 1543806782523,   // 第一個HTTP重定向開始時的時間戳。如果沒有重定向,或者重定向中的一個不同源,這個值會返回0。   redirectStart: 0,   // 最后一個HTTP重定向完成時(也就是說是HTTP響應的最后一個比特直接被收到的時間)的時間戳。   // 如果沒有重定向,或者重定向中的一個不同源,這個值會返回0.    redirectEnd: 0,   // 瀏覽器準備好使用HTTP請求來獲取(fetch)文檔的時間戳。這個時間點會在檢查任何應用緩存之前。  fetchStart: 1543806782096,   // DNS 域名查詢開始的UNIX時間戳。          //如果使用了持續(xù)連接(persistent connection),或者這個信息存儲到了緩存或者本地資源上,這個值將和fetchStart一致。   domainLookupStart: 1543806782096,   // DNS 域名查詢完成的時間.   //如果使用了本地緩存(即無 DNS 查詢)或持久連接,則與 fetchStart 值相等   domainLookupEnd: 1543806782096,   // HTTP(TCP) 域名查詢結束的時間戳。          //如果使用了持續(xù)連接(persistent connection),或者這個信息存儲到了緩存或者本地資源上,這個值將和 fetchStart一致。   connectStart: 1543806782099,   // HTTP(TCP) 返回瀏覽器與服務器之間的連接建立時的時間戳。          // 如果建立的是持久連接,則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結束。   connectEnd: 1543806782227,   // HTTPS 返回瀏覽器與服務器開始安全鏈接的握手時的時間戳。如果當前網(wǎng)頁不要求安全連接,則返回0。   secureConnectionStart: 1543806782162,   // 返回瀏覽器向服務器發(fā)出HTTP請求時(或開始讀取本地緩存時)的時間戳。   requestStart: 1543806782241,   // 返回瀏覽器從服務器收到(或從本地緩存讀?。┑谝粋€字節(jié)時的時間戳。          //如果傳輸層在開始請求之后失敗并且連接被重開,該屬性將會被數(shù)制成新的請求的相對應的發(fā)起時間。   responseStart: 1543806782516,   // 返回瀏覽器從服務器收到(或從本地緩存讀取,或從本地資源讀?。┳詈笠粋€字節(jié)時          //(如果在此之前HTTP連接已經(jīng)關閉,則返回關閉時)的時間戳。   responseEnd: 1543806782537,   // 當前網(wǎng)頁DOM結構開始解析時(即Document.readyState屬性變?yōu)椤發(fā)oading”、相應的 readystatechange事件觸發(fā)時)的時間戳。   domLoading: 1543806782573,   // 當前網(wǎng)頁DOM結構結束解析、開始加載內(nèi)嵌資源時(即Document.readyState屬性變?yōu)椤癷nteractive”、相應的readystatechange事件觸發(fā)時)的時間戳。   domInteractive: 1543806783203,   // 當解析器發(fā)送DOMContentLoaded 事件,即所有需要被執(zhí)行的腳本已經(jīng)被解析時的時間戳。   domContentLoadedEventStart: 1543806783203,   // 當所有需要立即執(zhí)行的腳本已經(jīng)被執(zhí)行(不論執(zhí)行順序)時的時間戳。   domContentLoadedEventEnd: 1543806783216,   // 當前文檔解析完成,即Document.readyState 變?yōu)?nbsp;'complete'且相對應的readystatechange 被觸發(fā)時的時間戳   domComplete: 1543806783796,   // load事件被發(fā)送時的時間戳。如果這個事件還未被發(fā)送,它的值將會是0。   loadEventStart: 1543806783796,   // 當load事件結束,即加載事件完成時的時間戳。如果這個事件還未被發(fā)送,或者尚未完成,它的值將會是0.   loadEventEnd: 1543806783802  }

通過以上數(shù)據(jù),我們可以得到幾個有用的時間

// 重定向耗時  redirect: timing.redirectEnd - timing.redirectStart,  // DOM 渲染耗時 dom: timing.domComplete - timing.domLoading,  // 頁面加載耗時  load: timing.loadEventEnd - timing.navigationStart,  // 頁面卸載耗時  unload: timing.unloadEventEnd - timing.unloadEventStart,  // 請求耗時  request: timing.responseEnd - timing.requestStart,  // 獲取性能信息時當前時間  time: new Date().getTime(),

還有一個比較重要的時間就是白屏時間,它指從輸入網(wǎng)址,到頁面開始顯示內(nèi)容的時間。

將以下腳本放在 前面就能獲取白屏時間。

通過這幾個時間,就可以得知頁面首屏加載性能如何了。

另外,通過 window.performance.getEntriesByType('resource') 這個方法,我們還可以獲取相關資源(js、css、img...)的加載時間,它會返回頁面當前所加載的所有資源。

如何進行數(shù)據(jù)采集和數(shù)據(jù)上報

在這里插入圖片描述

它一般包括以下幾個類型:

  •  sciprt

  •  link

  •  img

  •  css

  •  fetch

  •  other

  •  xmlhttprequest

我們只需用到以下幾個信息:

// 資源的名稱  name: item.name,  // 資源加載耗時  duration: item.duration.toFixed(2),  // 資源大小  size: item.transferSize,  // 資源所用協(xié)議  protocol: item.nextHopProtocol,

現(xiàn)在,寫幾行代碼來收集這些數(shù)據(jù)。

// 收集性能信息  const getPerformance = () => {      if (!window.performance) return      const timing = window.performance.timing      const performance = {          // 重定向耗時          redirect: timing.redirectEnd - timing.redirectStart,          // 白屏時間          whiteScreen: whiteScreen,          // DOM 渲染耗時          dom: timing.domComplete - timing.domLoading,          // 頁面加載耗時          load: timing.loadEventEnd - timing.navigationStart,          // 頁面卸載耗時          unload: timing.unloadEventEnd - timing.unloadEventStart,          // 請求耗時          request: timing.responseEnd - timing.requestStart,          // 獲取性能信息時當前時間          time: new Date().getTime(),      }      return performance  }  // 獲取資源信息  const getResources = () => {      if (!window.performance) return      const data = window.performance.getEntriesByType('resource')      const resource = {          xmlhttprequest: [],          css: [],          other: [],          script: [],          img: [],          link: [],          fetch: [],          // 獲取資源信息時當前時間          time: new Date().getTime(),      }     data.forEach(item => {          const arry = resource[item.initiatorType]          arry && arry.push({              // 資源的名稱              name: item.name,              // 資源加載耗時              duration: item.duration.toFixed(2),              // 資源大小              size: item.transferSize,              // 資源所用協(xié)議              protocol: item.nextHopProtocol,          })      })      return resource  }

小結

通過對性能及資源信息的解讀,我們可以判斷出頁面加載慢有以下幾個原因:

  1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術社區(qū)

  2.  資源過多、過大

  3.  網(wǎng)速過慢

  4.  DOM 元素過多

除了用戶網(wǎng)速過慢,我們沒辦法之外,其他兩個原因都是有辦法解決的,性能優(yōu)化的文章和書籍網(wǎng)上已經(jīng)有很多了,有興趣可自行查找資料了解。

PS:其實頁面加載慢還有其他原因,例如沒有使用按需加載、沒有使用 cdn 等等。不過這里我們強調(diào)的僅通過對性能和資源信息的解讀來獲取原因。

錯誤數(shù)據(jù)采集

目前所能捕捉的錯誤有三種:

  1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術社區(qū)

  2.  資源加載錯誤,通過 addEventListener('error', callback, true) 在捕獲階段捕捉資源加載失敗錯誤。

  3.  js 執(zhí)行錯誤,通過 window.onerror 捕捉 js 錯誤。

  4.  promise 錯誤,通過 addEventListener('unhandledrejection', callback)捕捉 promise 錯誤,但是沒有發(fā)生錯誤的行數(shù),列數(shù)等信息,只能手動拋出相關錯誤信息。

我們可以建一個錯誤數(shù)組變量 errors 在錯誤發(fā)生時,將錯誤的相關信息添加到數(shù)組,然后在某個階段統(tǒng)一上報,具體如何操作請看下面的代碼:

// 捕獲資源加載失敗錯誤 js css img...  addEventListener('error', e => {      const target = e.target     if (target != window) {          monitor.errors.push({              type: target.localName,              url: target.src || target.href,              msg: (target.src || target.href) + ' is load error',              // 錯誤發(fā)生的時間              time: new Date().getTime(),          })      }  }, true)  // 監(jiān)聽 js 錯誤  window.onerror = function(msg, url, row, col, error) {      monitor.errors.push({          type: 'javascript',          row: row,          col: col,          msg: error && error.stack? error.stack : msg,          url: url,          // 錯誤發(fā)生的時間          time: new Date().getTime(),     })  }  // 監(jiān)聽 promise 錯誤 缺點是獲取不到行數(shù)數(shù)據(jù)  addEventListener('unhandledrejection', e => {      monitor.errors.push({          type: 'promise',          msg: (e.reason && e.reason.msg) || e.reason || '',          // 錯誤發(fā)生的時間          time: new Date().getTime(),      })  })

小結

通過錯誤收集,可以了解到網(wǎng)站發(fā)生錯誤的類型及數(shù)量,從而做出相應的調(diào)整,以減少錯誤發(fā)生。完整代碼和 DEMO 會在文章末尾放出,大家可以復制代碼(HTML文件)在本地測試一下。

數(shù)據(jù)上報

性能數(shù)據(jù)上報

性能數(shù)據(jù)可以在頁面加載完之后上報,盡量不要對頁面性能造成影響。

window.onload = () => {      // 在瀏覽器空閑時間獲取性能及資源信息      // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback      if (window.requestIdleCallback) {          window.requestIdleCallback(() => {              monitor.performance = getPerformance()              monitor.resources = getResources()          })      } else {          setTimeout(() => {              monitor.performance = getPerformance()              monitor.resources = getResources()          }, 0)      }  }

當然,你也可以設一個定時器,循環(huán)上報。不過每次上報最好做一下對比去重再上報,避免同樣的數(shù)據(jù)重復上報。

錯誤數(shù)據(jù)上報

我在 DEMO 里提供的代碼,是用一個 errors 數(shù)組收集所有的錯誤,再在某一階段統(tǒng)一上報(延時上報)。

其實,也可以改成在錯誤發(fā)生時上報(即時上報)。這樣可以避免“收集完錯誤,但延時上報還沒觸發(fā),用戶卻已經(jīng)關掉網(wǎng)頁導致錯誤數(shù)據(jù)丟失”的問題。

// 監(jiān)聽 js 錯誤  window.onerror = function(msg, url, row, col, error) {      const data = {          type: 'javascript',          row: row,          col: col,          msg: error && error.stack? error.stack : msg,          url: url,          // 錯誤發(fā)生的時間          time: new Date().getTime(),      }         // 即時上報      axios.post({ url: 'xxx', data, })  }

經(jīng)網(wǎng)友提醒,可以使用 navigator.sendBeacon() 來進行上報。

window.addEventListener('unload', logData, false);  function logData() {      navigator.sendBeacon("/log", analyticsData);  }

它的技術特點是:

使用 sendBeacon() 方法會使用戶代理(瀏覽器)在有機會時異步地向服務器發(fā)送數(shù)據(jù),同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了提交分析數(shù)據(jù)時的所有的問題:數(shù)據(jù)可靠,傳輸異步并且不會影響下一頁面的加載。

擴展

SPA

window.performance API 是有缺點的,在 SPA 切換路由時,window.performance.timing 的數(shù)據(jù)不會更新。所以我們需要另想辦法來統(tǒng)計切換路由到加載完成的時間。拿 Vue 舉例,一個可行的辦法就是切換路由時,在路由的全局前置守衛(wèi) beforeEach 里獲取開始時間,在組件的 mounted 鉤子里執(zhí)行 vm.$nextTick 函數(shù)來獲取組件的渲染完畢時間。

router.beforeEach((to, from, next) => {   store.commit('setPageLoadedStartTime', new Date())  })
mounted() {   this.$nextTick(() => {    this.$store.commit('setPageLoadedTime', new Date() - this.$store.state.pageLoadedStartTime)   })  }

除了性能和錯誤監(jiān)控,其實我們還可以收集更多的信息。

用戶信息收集

navigator

使用 window.navigator 可以收集到用戶的設備信息,操作系統(tǒng),瀏覽器信息...

UV(Unique visitor)

是指通過互聯(lián)網(wǎng)瀏覽這個網(wǎng)頁的訪客,00:00-24:00 內(nèi)相同的設備訪問只被計算一次。一天內(nèi)同個訪客多次訪問僅計算一個 UV。

在用戶訪問網(wǎng)站時,可以生成一個隨機字符串+時間日期,保存在本地。在網(wǎng)頁發(fā)生請求時(如果超過當天24小時,則重新生成),把這些參數(shù)傳到后端,后端利用這些信息生成 UV 統(tǒng)計報告。

PV(Page View)

即頁面瀏覽量或點擊量,用戶每 1 次對網(wǎng)站中的每個網(wǎng)頁訪問均被記錄 1 個PV。用戶對同一頁面的多次訪問,訪問量累計,用以衡量網(wǎng)站用戶訪問的網(wǎng)頁數(shù)量。

頁面停留時間

傳統(tǒng)網(wǎng)站

用戶在進入 A 頁面時,通過后臺請求把用戶進入頁面的時間捎上。過了 10 分鐘,用戶進入 B 頁面,這時后臺可以通過接口捎帶的參數(shù)可以判斷出用戶在 A 頁面停留了 10 分鐘。

SPA

可以利用 router 來獲取用戶停留時間,拿 Vue 舉例,通過 router.beforeEach、destroyed 這兩個鉤子函數(shù)來獲取用戶停留該路由組件的時間。

瀏覽深度

通過 document.documentElement.scrollTop 屬性以及屏幕高度,可以判斷用戶是否瀏覽完網(wǎng)站內(nèi)容。

頁面跳轉來源

通過 document.referrer 屬性,可以知道用戶是從哪個網(wǎng)站跳轉而來。

小結

通過分析用戶數(shù)據(jù),我們可以了解到用戶的瀏覽習慣、愛好等等信息,想想真是恐怖,毫無隱私可言。

DEMO

                                        Document          錯誤測試按鈕1      錯誤測試按鈕2      錯誤測試按鈕3                    

“如何進行數(shù)據(jù)采集和數(shù)據(jù)上報”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!


標題名稱:如何進行數(shù)據(jù)采集和數(shù)據(jù)上報
當前URL:http://weahome.cn/article/jsjeph.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部