V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
xmbaozi
V2EX  ›  前端优化

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

  •  
  •   xmbaozi · 2015-10-26 11:03:44 +08:00 · 4302 次点击
    这是一个创建于 3077 天前的主题,其中的信息可能已经有所发展或是发生改变。
    17 条回复    2015-10-27 09:33:25 +08:00
    imn1
        1
    imn1  
       2015-10-26 11:13:20 +08:00
    我一直都是把统计代码优化掉,少一个连接算一个
    xmbaozi
        2
    xmbaozi  
    OP
       2015-10-26 11:20:06 +08:00
    @imn1 能这样是最好的。但我们基本上都要加载自己内部的统计代码、百度统计,有时候还用上 google analytics 的事件追踪(国内的统计平台都抄袭不来的)
    imn1
        3
    imn1  
       2015-10-26 11:30:34 +08:00
    @xmbaozi
    你是站主角度,我是用户角度
    domty
        4
    domty  
       2015-10-26 13:21:01 +08:00
    有一个小技巧,把你的 js 统计代码全部扔到 html 的尾部,貌似这样可以保证页面加载先于统计代码的加载.
    不过我没试过,因为没遇到过这样的需求.
    xmbaozi
        5
    xmbaozi  
    OP
       2015-10-26 14:00:18 +08:00
    @domty 是的。里面提到了,但会影响 会影响 DOMContentLoaded , 比如 $(document).ready() 延迟
    luoway
        6
    luoway  
       2015-10-26 14:25:30 +08:00
    @domty 要是用户等不及, DOM 加载的时候点击链接,这时没有加载统计 js ,就捕获不到事件了。

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

    按原来的异步加载,是下载 js ,加载 DOM ,异步加载 js ;
    改动后是加载 DOM ,下载 js ,异步加载 js 。
    这样理解正确吗?
    otakustay
        7
    otakustay  
       2015-10-26 14:58:55 +08:00
    @imn1 事实上只要是异步的,你加个统计代码一丁点儿也不会影响用户,链接是按域算的,不是全局算的
    xmbaozi
        8
    xmbaozi  
    OP
       2015-10-26 15:00:17 +08:00
    @luoway 之所以加 setTimeout 是因为 “在 Chrome 、 Firefox 、 Opera 、 IE11+ 会影响 onload ,像 Chrome 的 favicon 就一直在转圈圈。”
    honeycomb
        9
    honeycomb  
       2015-10-26 15:04:26 +08:00
    @xmbaozi

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

    所以基本上所有的第三方统计代码,和相当程度的第一方统计代码都被优化了
    imn1
        10
    imn1  
       2015-10-26 15:07:39 +08:00
    @otakustay
    网页内容加载完成,剩下一个 cnzz 或 google analysis 转圈几十秒,这情况遇到多了
    otakustay
        11
    otakustay  
       2015-10-26 15:09:01 +08:00
    @imn1 你的考虑主要在于这个转圈让用户从视觉上感到不爽吗?因为毕竟功能上完全是没有影响的,性能上也一样
    luoway
        12
    luoway  
       2015-10-26 15:16:03 +08:00
    @xmbaozi 文字上我明白哪段说的哪段……问这样改的原理是什么。我知道异步不会像同步那样阻塞接下来的内容加载,但 js 是单线程的,异步也不能做到并发,总有个新的顺序吧。

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

    @imn1 “剩下一个 cnzz 或 google analysis 转圈几十秒”,这样我也选择去掉。
    xmbaozi
        13
    xmbaozi  
    OP
       2015-10-26 15:26:14 +08:00
    @luoway 你是问 setTimeout 吧?
    我是经过测试,可以解决 onload 的。至于原理嘛,我觉得是让浏览器以为这个动作是要延迟执行的,不至于阻塞 onload 。
    xmbaozi
        14
    xmbaozi  
    OP
       2015-10-26 15:29:51 +08:00
    @honeycomb 我是从开发者角度,优化用户体验的同时兼顾统计数据。
    honeycomb
        15
    honeycomb  
       2015-10-26 17:29:32 +08:00
    @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
        16
    iyangyuan  
       2015-10-27 09:18:41 +08:00
    楼上各位大哥, js 的确是单线程,但浏览器不是啊。。。浏览器不会傻到用一个线程去加载所有的 js 、 css 、图片等等,否则 callback 就没有意义了,要不为啥叫异步啊!
    还有 setTimeout 是把需要执行的函数放到执行队列中,等待执行。如果不加 setTimeout ,浏览器执行源文件中的 js 的栈就会等待资源加载完,否则退不出去,加上 setTimeout 0 ,相当于把此函数延迟到了下一次任务,不再属于当前任务栈,所以顺利完成页面加载。
    个人愚见。。。
    xmbaozi
        17
    xmbaozi  
    OP
       2015-10-27 09:33:25 +08:00
    @iyangyuan 浏览器是可以同时加载资源。但传统的 js 载入会阻塞 DOMContentLoaded ,导致 $(document).ready() 延后
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5223 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 1017ms · UTC 07:20 · PVG 15:20 · LAX 00:20 · JFK 03:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.