使用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>
里的脚本。app一、用户处在弱网络链接的环境下,特别是2G网络。异步
二、document.write()在主页面里,对于那些嵌入在iframe里的页面没有影响。async
三、在document.write()插入的脚本是阻碍解析的(parser-blocking)。若是插入的
<script>
标签加了 'async' 或着'defer'属性,脚本会异步加载,不影响解析 ,因此也是能被执行的。spa四、加载的脚本和站点不是同一个域名。code
五、脚本没有在浏览器的缓存里ip
六、页面不是从新加载 从Chrome 53开始,对于知足2-5条件的代码,在控制台会输出问题里的警告:element
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()
加载脚本,使用异步加载的方式,如<scriptsrc="..."async>
或使用DOM APIelement.appendChild()