如何解决Chrome对HTTPS页面的CNZZ 统计代码报错?

不少站长会遇到一个问题,网站加入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>元素:浏览器

  • 用户处于慢速链接,特别是用户使用2G网络(将来这种干预可能延伸到其余使用慢速链接的用户,如慢速3G或WiFi)。
  • Document.write()在Top层文档中。
  • Document.write()中的脚本是解析器阻断脚本。但具备“异步”或“延迟”属性的脚本仍将正常执行。
  • 该脚本不是托管在同一站点上。换句话说,Chrome浏览器不会针对匹配eTLD+1的脚本进行干预(例如,托管在js.example.org上脚本插入到www.example.org上)。
  • 该脚本还没有在浏览器HTTP缓存中。缓存中的脚本不会致使网络延迟,因此仍会执行。
  • 该页面的请求不是从新加载。若是用户触发了从新加载Chrome不会干预,会像日常同样执行页面。
  • 第三方片断有时使用Document.write()加载脚本。第三方经过提供异步加载替代方案,能够容许第三方脚本加载而不会阻止页面剩余内容的显示。

图片描述

解决方法
为了完整显示网站绿色地址栏,只能放弃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

相关文章
相关标签/搜索