改善百度统计引入代码
我完全没理解百度为什么还不改进它的统计代码引入方式,在最糟糕的情况,我发现9秒之后页面才有响应。
百度原始的代码
document.write的方式:
改善后的代码
不要暴露全局变量,用相对 URL 代替协议检测,优先使用 document.head 属性。
动态的script dom方式:
模拟服务器脚本
ruby sinatra,模拟网络响应延迟2秒,脚本执行消耗延迟2秒:
有什么选择
由于是跨域加载统计代码,有大概三种不同方式:
- document.write 会阻塞页面资源,当前百度所使用的,Google Analytics老版也用过的。
- script dom 广告植入、页面统计等的最佳选择,当前Google Analytics 采用的,改进后将借鉴的版本。
- script defer 所有浏览器已支持,测试中糟糕的情况直到 window onload 事件后才执行,太迟了,需放弃。
支持 async 的浏览器:
document.createElement('script')
时,async 的值默认是 true
。async 是最理想的,它能保证脚本不阻塞页面加载,但不能保证脚本执行顺序。
支持 defer 的浏览器:
document.createElement('script')
时,defer 的值默认是 false
。defer 也不阻塞页面加载,这只是指页面的其他的资源。它能保证脚本执行顺序,推迟了自己的执行时间,但有可能会阻塞其他脚本的执行。因此,它可能在 DOM 解析好就执行,先于 DOMContentLoaded,也可能被浏览器缓存起来,在 DOMContentLoaded 之后执行。特别情况有两点,IE 是它可以在 window onload 之后才执行;Firefox 会始终让 DOMContentLoaded 优先触发,让其他脚本执行。
输出顺序参考
* DOMContentLoaded 事件,此时文档可操纵,界面事件将绑定上,界面可操控 * window onload 事件,此时脚本、样式表、图片资源全部加载完成 document.write: h.js loaded. DOMContentLoaded window loaded script dom: DOMContentLoaded h.js loaded window loaded script defer: DOMContentLoaded window loaded h.js loaded.