不少站长会遇到一个问题,网站加入CNZZ的JS统计代码后,Chrome浏览器出现警告:阻止跨站解析器阻断脚本经过document.write调用(A parser-blocking, cross site script,XXXX.js is invoked via document.write.)。该警告有时候可能会使HTTPS页面出现不安全因素,甚至让使用EV SSL证书的网站出现不显示绿色地址栏等问题。本文将带您找出错误缘由,解决Chrome对CNZZ统计代码报错的问题。 javascript
该警告的具体内容
经过Chrome开发者工具查看器中(按F12查看console),能够查出网站是否存在这类警告(warnings)。在网络正常的状况下,这类报错不会影响HTTPS页面的展现,可是在网络链接较差等状况下,资源加载可能会被阻止,从而可能致使HTTPS页面出现不安全因素提示。php
该警告的具体内容:java
Aparser-blocking, cross site (i.e. different eTLD+1) script, https://s22.cnzz.com/z_stat.p... 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.
翻译过来就是:web
“一个跨站解析器阻断脚本XXXX.js经过document.write调用,若是设备的网络链接较差,该脚本的网络请求可能会被浏览器在此页面或将来页面加载中被阻止。”
为何会出现警告?
谷歌从Chrome 55版本开始干预“经过document.write插入的跨站解析器阻断脚本”的加载,提高页面加载速度。
根据Chromestatus的表述,对于诸如2G之类的链接速度较慢的用户来讲,经过document.write加载的第三方脚本,性能损失一般很是严重,以致于主页内容的显示会延迟数十秒。
在浏览器呈现页面以前,必须经过解析HTML标记来构建DOM树。不管什么时候解析器遇到脚本,它都必须中止并执行脚本,才能继续解析HTML。若是脚本动态插入另外一个脚本,解析器将被迫等待更长时间才能下载资源,这可能会致使一次或屡次网络往返并延迟首次呈现页面的时间。
Chrome从第55版开始表明全部用户进行干预,具体来讲,当知足如下全部条件时,Chrome将不执行经过document.write()插入的<script>元素:浏览器
解决方法
为了完整显示网站绿色地址栏,只能放弃CNZZ统计功能了吗?固然不是。
解决办法就是将网站的CNZZ普通JS代码更改成异步统计代码。示例以下:缓存
原统计代码:安全
<script src="https://s22.cnzz.com/z_stat.php?id=XXXXXXX&web_id=XXXXXX" language="JavaScript"></script>
改写为异步统计代码:网络
<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>
请复制以上代码,改写统计id后放置到须要统计的网站页面中,须要注意:添加好异步统计代码后,必定要删除原来的统计代码,不然统计数据会重复计算。
通过站点实测,更新异步统计代码后,Chrome对CNZZ统计代码的warnings已经消失,网站页面和统计功能都正常。剩下的一个warning是Chrome对百度商桥的SSL证书即将在赛门铁克证书制裁策略中失效的警告,不属于本文讨论范围。异步
至此,Chrome对使用CNZZ统计代码的HTTPS页面报错的问题,就完全解决了。async