从统计代码来谈 JS 加载的优化

[xmbaozi]

http://www.cnblogs.com/iBaozi/p/4905303.html
请大神轻拍

[imn1]

我一直都是把统计代码优化掉，少一个连接算一个

[xmbaozi]

@imn1 能这样是最好的。但我们基本上都要加载自己内部的统计代码、百度统计，有时候还用上 google analytics 的事件追踪（国内的统计平台都抄袭不来的）

[imn1]

@xmbaozi
你是站主角度，我是用户角度

[domty]

有一个小技巧,把你的 js 统计代码全部扔到 html 的尾部,貌似这样可以保证页面加载先于统计代码的加载.
不过我没试过,因为没遇到过这样的需求.

[xmbaozi]

@domty 是的。里面提到了，但会影响 会影响 DOMContentLoaded ， 比如 $(document).ready() 延迟

[luoway]

@domty 要是用户等不及， DOM 加载的时候点击链接，这时没有加载统计 js ，就捕获不到事件了。

@xmbaozi 看了文章，表示没看到解释“所以然”的部分
百度统计那块，本来是异步加载，再加上 setTimeOut 延时 0 ，有什么区别？

按原来的异步加载，是下载 js ，加载 DOM ，异步加载 js ；
改动后是加载 DOM ，下载 js ，异步加载 js 。
这样理解正确吗？

[otakustay]

@imn1 事实上只要是异步的，你加个统计代码一丁点儿也不会影响用户，链接是按域算的，不是全局算的

[xmbaozi]

@luoway 之所以加 setTimeout 是因为 “在 Chrome 、 Firefox 、 Opera 、 IE11+ 会影响 onload ，像 Chrome 的 favicon 就一直在转圈圈。”

[honeycomb]

@xmbaozi

我们一般 ublock/umatrix 屏蔽所有第三方域名内容和第一方脚本， cookie
然后根据需要一点点手工白名单

所以基本上所有的第三方统计代码，和相当程度的第一方统计代码都被优化了

[imn1]

@otakustay
网页内容加载完成，剩下一个 cnzz 或 google analysis 转圈几十秒，这情况遇到多了

[otakustay]

@imn1 你的考虑主要在于这个转圈让用户从视觉上感到不爽吗？因为毕竟功能上完全是没有影响的，性能上也一样

[luoway]

@xmbaozi 文字上我明白哪段说的哪段……问这样改的原理是什么。我知道异步不会像同步那样阻塞接下来的内容加载，但 js 是单线程的，异步也不能做到并发，总有个新的顺序吧。

@otakustay
“链接是按域算的，不是全局算的”，这是指“要是用户等不及， DOM 加载的时候点击链接，这时没有加载统计 js ，就捕获不到事件了。 ”结果不正确吗？

@imn1 “剩下一个 cnzz 或 google analysis 转圈几十秒”，这样我也选择去掉。

[xmbaozi]

@luoway 你是问 setTimeout 吧？
我是经过测试，可以解决 onload 的。至于原理嘛，我觉得是让浏览器以为这个动作是要延迟执行的，不至于阻塞 onload 。

[xmbaozi]

@honeycomb 我是从开发者角度，优化用户体验的同时兼顾统计数据。

[honeycomb]

@xmbaozi
建议必要的时候可以做成像淘宝的形式
把功能性的 js 和统计用 js 放在一个 post/get 里

比如这样的:
https://g.alicdn.com/kg/??search-suggest/6.0.22/mods/storage-min.js,search-suggest/6.0.22/mods/utils-min.js,flash/2.0.0/index-min.js

如此直接用简单屏蔽规则就无法有效优化掉统计代码的

像我这样屏蔽用户追踪代码的人只会越来越多(相比于此,广告代码反而是比较无害的)

[iyangyuan]

楼上各位大哥， js 的确是单线程，但浏览器不是啊。。。浏览器不会傻到用一个线程去加载所有的 js 、 css 、图片等等，否则 callback 就没有意义了，要不为啥叫异步啊！
还有 setTimeout 是把需要执行的函数放到执行队列中，等待执行。如果不加 setTimeout ，浏览器执行源文件中的 js 的栈就会等待资源加载完，否则退不出去，加上 setTimeout 0 ，相当于把此函数延迟到了下一次任务，不再属于当前任务栈，所以顺利完成页面加载。
个人愚见。。。

[xmbaozi]

@iyangyuan 浏览器是可以同时加载资源。但传统的 js 载入会阻塞 DOMContentLoaded ，导致 $(document).ready() 延后