改善百度统计引入代码

我完全没理解百度为什么还不改进它的统计代码引入方式,在最糟糕的情况,我发现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.

参考

http://mathiasbynens.be/notes/async-analytics-snippet

posted @ 2011-12-21 21:03  ambar  阅读(1408)  评论(0编辑  收藏  举报