網站加入CNZZ的JS統計代碼后,Chrome瀏覽器出現警告:阻止跨站解析器阻斷腳本通過document.write調用(A parser-blocking, cross site script,XXXX.js is invoked via document.write.)。該警告有時候可能會使HTTPS頁面出現不安全因素,甚至讓使用EV SSL證書的網站出現不顯示綠色地址欄等問題。本文將帶您找出錯誤原因,解決Chrome對CNZZ統計代碼報錯的問題。
今天業務部門加CNZZ代碼時,一直出現統計不到的問題,加入的代碼如入:
<script src="https://s19.cnzz.com/z_stat.php?id=XXXXXXXX&web_id=XXXXXXXX" language="JavaScript"></script>
另外也試了
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_XXXXXXXX'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3DXXXXXXXX' type='text/javascript'%3E%3C/script%3E"));</script>
放了幾種代碼都不行,
也檢查了HTML頁面中是否存在ERROR,都解決之后,
瀏覽器仍然報下面的警告,一直以為警告可以不處理,不過統計不到相關數據。
A parser-blocking, cross site (i.e. different eTLD+1) script, https://c.cnzz.com/core.php?web_id=XXXXXXXX
&t=z, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
排查思路是
1、首頁檢查HTML頁面是否錯誤,
2、檢查HTML標簽對是否完整
3、檢查META標簽是否有特殊標簽,刪除了一部分。
4、查看警告信息中的https://www.chromestatus.com/feature/5718547946799104 這個地址,不過要翻牆一下。
5、通過上面的文檔,發現是瀏覽器升級之后才出現的問題。
谷歌從Chrome 55版本開始干預“通過document.write插入的跨站解析器阻斷腳本”的加載,提升頁面加載速度。
根據Chromestatus的表述,對於諸如2G之類的連接速度較慢的用戶來說,通過document.write加載的第三方腳本,性能損失通常非常嚴重,以至於主頁內容的顯示會延遲數十秒。
在瀏覽器呈現頁面之前,必須通過解析HTML標記來構建DOM樹。無論何時解析器遇到腳本,它都必須停止並執行腳本,才能繼續解析HTML。如果腳本動態插入另一個腳本,解析器將被迫等待更長時間才能下載資源,這可能會導致一次或多次網絡往返並延遲首次呈現頁面的時間。
Chrome從第55版開始代表所有用戶進行干預,具體來說,當滿足以下所有條件時,Chrome將不執行通過document.write()插入的<script>元素:
- 用戶處於慢速連接,特別是用戶使用2G網絡(未來這種干預可能延伸到其他使用慢速連接的用戶,如慢速3G或WiFi)。
- Document.write()在Top層文檔中。
- Document.write()中的腳本是解析器阻斷腳本。但具有“異步”或“延遲”屬性的腳本仍將正常執行。
- 該腳本不是托管在同一站點上。換句話說,Chrome瀏覽器不會針對匹配eTLD+1的腳本進行干預(例如,托管在js.example.org上腳本插入到www.example.org上)。
- 該腳本尚未在瀏覽器HTTP緩存中。緩存中的腳本不會導致網絡延遲,所以仍會執行。
- 該頁面的請求不是重新加載。如果用戶觸發了重新加載Chrome不會干預,會像平常一樣執行頁面。
- 第三方片段有時使用Document.write()加載腳本。第三方通過提供異步加載替代方案,可以允許第三方腳本加載而不會阻止頁面剩余內容的顯示。
將以上統計代碼改為異步即可。
<script> var cnzz_s_tag = document.createElement('script'); cnzz_s_tag.type = 'text/javascript'; cnzz_s_tag.async = true; cnzz_s_tag.charset = 'utf-8'; cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=XXXXXXXX&async=1'; var root_s = document.getElementsByTagName('script')[0]; root_s.parentNode.insertBefore(cnzz_s_tag, root_s); </script>