js sendBeacon


頁面性能日志:

DNS解析耗時 TCP鏈接耗時 SSL安全鏈接耗時 網絡請求耗時 DOM解析耗時 資源加載耗時 首包時間 白屏時間 首次可交換時間 Dom Ready時間 頁面完全加載時間。

如某些統計系統,在頁面unload時,如果要上報當前數據,采用xhr的同步上報方式,會阻塞當前頁面的跳轉;使用new Image有可能遇到aborted,導致無法成功發送。

現在好了,可以使用瀏覽器來提供發送保障的更簡潔的sendBeacon方法。sendBeacon是異步的,不會影響當前頁到下一個頁面的跳轉速度,且不受同域限制。

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

sendBeacon 如果成功進入瀏覽器的發送隊列后,會返回true;如果受到隊列總數、數據大小的限制后,會返回false。返回ture后,只是表示進入了發送隊列,瀏覽器會盡力保證發送成功,但是否成功了,不會再有任何返回值。目前暫無具體的數據長度限制標准。

考慮到對目前瀏覽器的支持情況,需要做一下降級支持(如同步模式下的xhr,如果不是同域則要支持CORS):

navigator.sendBeacon || new Function('var xhr=new XMLHttpRequest();xhr.open("POST",arguments[0],true);r.send(arguments[1]);'); 

當前瀏覽器對sendBeacon的支持情況(最新進展見:http://caniuse.com/#search=sendBeacon):

  • Chrome 37+
  • Firefox (Gecko) 31+
  • Internet Explorer 不支持
  • Opera 24+
  • Safari 不支持
  • 手機端常用瀏覽器不支持:Android瀏覽器支持了,但是iOS尚無支持

Google Analytics已經使用了navigator.sendBeacon()來上報數據:http://www.thyngster.com/google-analytics-added-sendbeacon-functionality-universal-analytics-javascript-api/

via:
W3標准描述:https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/Beacon/Overview.html
MDN介紹:https://developer.mozilla.org/en-US/docs/Web/API/navigator.sendBeacon


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM