A Parser-blocking, cross-origin script is invoked via document.write. This may be blocked by the bro
阿新 • • 發佈:2019-01-06
使用Chrome訪問第三方的js庫時,在控制檯出現警告:
A Parser-blocking, cross-origin script, https://example.com/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.
問題解決在弱的網路連線環境下,比如2G網路,在頁面上使用
document.write()
來動態插入外部的指令碼會阻塞頁面的解析,延遲頁面的顯示,甚至載入指令碼失敗,最終導致頁面不能正確顯示。為了提高使用者的體驗,Chrome對於由
document.write()
動態插入的<script>
會做檢查,當滿足下面所有的條件下,Chrome不會執行載入<script>
裡的指令碼。
- 使用者處在弱網路連線的環境下,特別是2G網路。
document.write()
在主頁面裡,對於那些嵌入在iframe裡的頁面沒有影響。- 在
document.write()
插入的指令碼是阻礙解析的(parser-blocking)。如果插入的<script>
標籤加了 'async' 或著'defer'屬性,指令碼會非同步載入,不影響解析 ,所以也是能被執行的。- 載入的指令碼和站點不是同一個域名。
- 指令碼沒有在瀏覽器的快取裡
- 頁面不是重新載入
從Chrome 53開始,對於滿足2-5條件的程式碼,在控制檯會輸出問題裡的警告:
A Parser-blocking, cross-origin script, https://example.com/script.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.
解決方案:
- 最好的辦法就是不要使用
document.write()
動態載入指令碼- 如果一定要使用
document.write()
載入指令碼,使用非同步載入的方式,如<script src="..." async>
或使用DOM APIelement.appendChild()