[譯] 用 sendBeacon 發(fā)送分析信息的優(yōu)點(diǎn)
在實(shí)踐中，我們使用 HTTP 請求將一些匿名指標(biāo)從瀏覽器發(fā)送到服務(wù)器端。這些收集來的信息用于驗(yàn)證應(yīng)用的行為是否正常、監(jiān)控其質(zhì)量和速度、服務(wù)惡化時(shí)發(fā)出警告等，也有助于通過統(tǒng)計(jì)分析和研究改善平臺(tái)服務(wù)質(zhì)量。
最近我們開始使用 sendBeacon API 來取代 XMLHttpRequests 完成以上任務(wù)。在本文中，我們將細(xì)數(shù)一些從此次轉(zhuǎn)換中帶來的好處。
sendBeacon 功能簡介
sendBeacon 以一種將分析信息回傳給服務(wù)端而無需響應(yīng)的方式被創(chuàng)建出來。這種專注的設(shè)計(jì)目的和需要考慮行為、安全、性能和優(yōu)先級的 XHR 有巨大的不同，這些稍后會(huì)詳述。
首先值得強(qiáng)調(diào)的是其不需要響應(yīng)的顯著特性。當(dāng)瀏覽器需要來自 web 服務(wù)器的響應(yīng)時(shí)，就意味著應(yīng)用可能會(huì)依照得到的信息行事 -- 這也是為何瀏覽器廠商們要實(shí)現(xiàn)某些防御機(jī)制以保護(hù)用戶的原因，因而 sendBeacon API 也得以不受那些相同的約束。
下面的 Chrome Network 面板截圖展示了截獲的從 XHR 轉(zhuǎn)向 sendBeacon 工作中，發(fā)往監(jiān)控服務(wù)的請求。sendBeacon 請求被描述為 “ping” 類型，可以看到各種請求和它們之間的區(qū)別。
CORS 規(guī)定了一個(gè)域間（或子域間）發(fā)送數(shù)據(jù)的復(fù)雜協(xié)議，包含一個(gè)預(yù)檢 OPTIONS 請求及默認(rèn)不發(fā)送相關(guān) cookie 頭等策略。考慮到分析信息常被發(fā)送到不同的子域甚至完全跨域，這些限制還是必要的。
可以在 Network 面板中看到和每個(gè) XHR 請求相伴而生的預(yù)檢請求，也能發(fā)現(xiàn) XHR 請求忽略了整個(gè) cookie 頭；而 sendBeacon 請求則沒有這些限制 -- 不用預(yù)檢請求，也攜帶了 cookie 頭。
優(yōu)先級
一旦瀏覽器能感知到某些請求是無關(guān)用戶體驗(yàn)的，就能分出輕重緩急了，和用戶體驗(yàn)相關(guān)的請求會(huì)被優(yōu)先執(zhí)行完畢。
在 Network 頁簽的 Priority 列中，這些請求的不同顯而易見。
行為
因?yàn)?sendBeacon 請求無需響應(yīng)，瀏覽器也就不用像對待 XHR 或 fetch 那樣，每當(dāng)頁面一 unload 就得中斷它們。Network 頁簽中包含了一個(gè) status 和 time 列都為 (unknown) 的請求。該請求就是頁面切換之前被執(zhí)行而沒來得及中斷的；當(dāng)下一個(gè)頁面的請求被處理完后，瀏覽器才在后臺(tái)將其完成了。
下面展示的，是一個(gè)發(fā)送頁面有效期內(nèi)累計(jì)指標(biāo)的例子。我們在頁面的生命周期內(nèi)收集信息，并在頁面可見性改變?yōu)殡[藏時(shí)發(fā)送這些信息。這一事件發(fā)生在用戶切換頁簽之時(shí) -- 以及至關(guān)重要的是，在頁面跳走并 unload 之前發(fā)生。這同時(shí)意味著你可以并行不悖地發(fā)送信息和跳轉(zhuǎn)鏈接。
下圖展示了這一特性如何增加了我們能夠收集到的累積指標(biāo)的數(shù)量。
限制
由于這個(gè)請求函數(shù)不接受響應(yīng)，使得我們要設(shè)法讓瀏覽器獲知請求是否成功抵達(dá)服務(wù)端；這是切換到 sendBeacon 后為數(shù)不多需要應(yīng)付的問題。通過函數(shù)返回值，我們將能夠判斷是否成功。
盡管 sendBeacon 規(guī)范 (https://www.w3.org/TR/beacon/#sec-sendBeacon-method) 沒有規(guī)定數(shù)據(jù)大小，但瀏覽器廠商一般會(huì)限制請求體積，這樣一來 sendBeacon 函數(shù)將在傳輸失敗時(shí)返回 false ，反之則是 true。
如果以上限制妨礙到了某些信息的收集，則 fetch 函數(shù)提供的 “keepalive” 選項(xiàng)，可以作為 sendBeacon 的一種 替代方案，該選項(xiàng)允許請求的存活長于頁面。
在最后一個(gè)例子中，我對比了三種方法：
普通 fetch 請求 配置了 keepalive 的 fetch 請求 beacon (ping)
- 總結(jié)
sendBeacon 為通過 HTTP 發(fā)送分析信息而生，善以用之可以改善站點(diǎn)的用戶體驗(yàn)并增加應(yīng)用曝光度。
原文：https://medium.com/fiverr-engineering/benefits-of-sending-analytical-information-with-sendbeacon-a959cb206a7a