V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ivanlw
V2EX  ›  JavaScript

关于浏览器并行加载文件,还有 CSS/Javascript 放 head/body 的问题

  •  
  •   ivanlw · 2014-04-29 22:55:40 +08:00 · 3212 次点击
    这是一个创建于 3885 天前的主题,其中的信息可能已经有所发展或是发生改变。
    找到Yahoo的一篇很有名的文章: Best Practices for Speeding Up Your Web Site, https://developer.yahoo.com/performance/rules.html

    里面Put Scripts on Bottom这一段讲到了根据HTTP/1.1 specification,浏览器从一个host name最多只能同时下载两个文件。而script不同,无论从几个host name,只能同时下载一个,不会开始其他的。

    但是经过测试的时候,发现js都是同时下载的,请问这个是浏览器违反规定来提升performance吗?
    " target="_blank">" class="imgly" style="max-width: 660px;" border="0" />

    还有,根据http://stackoverflow.com/questions/14328449/when-do-you-put-javascript-in-body-when-in-head-and-when-use-doc-load,js放在头部的话,会在大多数HTML加载之前被加载,而放在底部的话,会等全部HTML加载完再加载javascript,但是实际中也是不一样的:
    放在底部:
    " target="_blank">" class="imgly" style="max-width: 660px;" border="0" />

    放在头部:
    8 条回复    2014-04-30 10:35:33 +08:00
    zzNucker
        1
    zzNucker  
       2014-04-29 23:00:14 +08:00
    一般情况来说:是你的浏览器太高端了。
    你应该用比较落后的浏览器来测。
    ivanlw
        2
    ivanlw  
    OP
       2014-04-29 23:02:48 +08:00   ❤️ 1
    @Livid 图片链接有问题?微博图床和imgur都试过了,都是这样子的乱码,请麻烦查看和编辑我的帖子。
    qq286735628
        3
    qq286735628  
       2014-04-30 00:11:41 +08:00
    瀑布图,里面看到的只能同时并行下载两个文件,讲的是IE6。
    因为当年IE6如此苛刻,才有减少HTTP请求这条规则,才诞生了雪碧图这个优化手段。

    不同版本浏览器,这个并发数不一样。
    现在Chrome的并发数已经提高了很多,但依旧使用雪碧图,因为雪碧图合并请求之后,可以减少TCP握手时间,同时,并不是所有公司的静态资源服务器都是那么的牛逼,能够快速响应并返回静态资源。

    图例,wait的时间,可以想象成服务器去找这个资源的时间。用Nginx比Apache会快一点,用了SSD也会比HDD快一点。



    假以时日,SPDY的推广,让HTTP请求可以复用TCP的握手。同时,资源服务器上面的Nginx和SSD配合,减少这个wait时间,雪碧图基本上就没有存在意义了。
    qq286735628
        4
    qq286735628  
       2014-04-30 00:16:59 +08:00
    刚才瀑布图带了缓存,下面这个是没缓存的

    qq286735628
        5
    qq286735628  
       2014-04-30 00:26:33 +08:00
    至于第二个问题,JS放头部,会阻塞HTML。
    并不是指阻塞当前这个HTML文件,而是指阻塞html渲染过程中的后续资源文件,例如你BODY中的各种IMG标签,肯定要等这个JS加载完才能加载(IE6下面),如果JS传输时间久,就会造成页面空白期,用户看起来就觉得卡
    jsonline
        6
    jsonline  
       2014-04-30 00:37:45 +08:00 via Android
    你看的文章太旧了
    mfaner
        7
    mfaner  
       2014-04-30 01:13:31 +08:00
    script那句好像没在specs里面,应该是作者自己说的
    Livid
        8
    Livid  
    MOD
       2014-04-30 10:35:33 +08:00
    @ivanlw 如果同样的图片链接在文章中出现两次以上就会这样。确实是一个 bug。4 小时内解决。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5604 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 03:32 · PVG 11:32 · LAX 19:32 · JFK 22:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.