資訊專欄INFORMATION COLUMN
摘要：每當(dāng)解析器遇到腳本時(shí)，它必須停止并執(zhí)行它，然后才能繼續(xù)解析。如果腳本動(dòng)態(tài)地注入另一個(gè)腳本，解析器將被迫等待更長時(shí)間才能下載資源，這可能會(huì)導(dǎo)致一個(gè)或多個(gè)網(wǎng)絡(luò)往返并延遲首次渲染頁面的時(shí)間，導(dǎo)致頁面無法加載或花費(fèi)的時(shí)間長于用戶放棄。
本文是技術(shù)圈 google 瀏覽器前端新特性播報(bào)的推送，歡迎大家加入
為什么要避免使用 document.write()最近我們發(fā)現(xiàn)如果我們在頁面中使用了document.wirte(),那么在 chrome 的開發(fā)者控制臺(tái)會(huì)出現(xiàn)下面的警告信息
(index):34 A Parser-blocking, cross-origin script, https://paul.kinlan.me/ad-inject.js, is invoked via document.write(). This may be blocked by the browser if the device has poor network connectivity.
為啥要做這個(gè)提示呢，對(duì)于在2G，3G 或者是慢 wifi 環(huán)境下面，使用document.write()動(dòng)態(tài)加載資源會(huì)讓頁面的展現(xiàn)慢10秒以上，瀏覽器可以呈現(xiàn)頁面之前，必須通過解析HTML標(biāo)記來構(gòu)建DOM樹。每當(dāng)解析器遇到腳本時(shí)，它必須停止并執(zhí)行它，然后才能繼續(xù)解析HTML。如果腳本動(dòng)態(tài)地注入另一個(gè)腳本，解析器將被迫等待更長時(shí)間才能下載資源，這可能會(huì)導(dǎo)致一個(gè)或多個(gè)網(wǎng)絡(luò)往返并延遲首次渲染頁面的時(shí)間，導(dǎo)致頁面無法加載或花費(fèi)的時(shí)間長于用戶放棄。根據(jù)Chrome中的設(shè)備，我們了解到，通過第三方腳本插入的document.write()頁面的速度通常比2G的其他頁面載入速度慢兩倍。
去除document.write的效果chrome 開發(fā)者收集了28天chrome瀏覽器使用者的2G瀏覽數(shù)據(jù),從中發(fā)現(xiàn)7.6%的2G加載頁面中都包含了通過document.write()寫入頁面的跨網(wǎng)站，并且會(huì)中斷瀏覽器解析的腳本。通過把這些加載腳本進(jìn)行攔截加載，我們看到了以下的改進(jìn)：
頁面加載到達(dá)first contentful paint(視覺上讓用戶感覺正在加載的狀態(tài))t的狀態(tài)的數(shù)量增加10%，達(dá)到完全解析狀態(tài)的頁面數(shù)量增加25%，減少10%由于需要刷新頁面帶來的用戶失望
到達(dá)first contentful paint的時(shí)間減少了21%(加快速度大于1秒)
解析頁面所需的時(shí)間減少了38%，差不多加快了6秒，大大減少了向用戶展示內(nèi)容的時(shí)間
chrome 瀏覽器對(duì)于document.write的策略針對(duì)以上的測試數(shù)據(jù)，chrome 從 55版本開始，chrome 瀏覽器對(duì)用戶使用的document.write()進(jìn)行干預(yù)，如果符合以下所有的情況，頁面
?
更加全面的告警上面兩種方式結(jié)合之后可以對(duì)影響的用戶量有一個(gè)初步的判斷，如果要做精確的判斷，可以檢查 HTTP 頭部：
當(dāng)插入的腳本document.write被阻止時(shí)，Chrome會(huì)將以下標(biāo)頭發(fā)送到所請(qǐng)求的資源：
