Yslow性能测试前端调优23大规则(6)将脚本放在底部

前端优化

本小节主要讨论在处理HTTP请求时脚本应该放在什么位置比较合理。因为当脚本正在下载时,浏览器交示会启动任何其它的下载,也就是说当下载脚本时浏览器并行下载的功能将被禁用的,即使是在不同的主机名上。

当然阻塞脚本并行下载通常有以下两种原因:

第一:脚本可能使用document.write来修改页面内容,因此浏览器会等待,以确保页面能够正确的布局。

第二:为了保证脚本能够按照正确的顺序执行,如果并行下载多个其它的脚本,就无法保证响应是按照指定的顺序到达浏览器。例如,如果后面的脚本比前面的脚本更小时,那么后面的脚本可能先下载好并执行,这样如果这两个脚本存在依赖关系时,脚本运行就可以会出现JavaScript的相关错误。

现在的浏览器是不能一次性将所有的请求都下载下来的,但浏览器一般都支持并行下载。对响应时间影响最大的是页面中组件的数量,如果缓存为空,那么每个组件都会产生一个HTTP请求,有时即便缓存是完整的也是如此。

HTTP 1.1规范指明:浏览器应允许每个主机名(hostname)可以支持至少两个并发连接(尽管新的浏览器支持更多的并发数)。如果一个HTML文档包含的资源引用(如CSS、Javascript、图片等)比主机允许的最大并发数多,浏览器则发出允许的最大并发数的请求,并将剩余的请求加入队列中。一旦有请求完成,浏览器会立即发出队列中的下一批允许的最大并发数的请求,它会一直重复这个过程直到下载完所有的资源。也就是说,如果一个页面从一个主机引用了超过N数量(N为每个主机允许的最大连接数)的HTTP请求,那么浏览器就必须按顺序依次下载它们。每N个资源耗费1个往返时间(RTT,Round-Trip Time),所以总的请求往返时间为M/N(M为从一个主机上获取的资源数);例如:如果一个浏览器允许每个主机名可以有6个并发连接,并且一个页面可以引用同域的90个资源,那么每6个资源会占用1个往返时间,总的下载时间为15个往返时间。

在Firefox浏览器中,可以在about:config页面中设置最大并发连接数,在Firefox浏览器的地址栏中输入“about:config”,会显示出所有相关参数。

network.http.max-connections:表示最大连接数

network.http.keep-alive.timeout:表示保持长连接的超时时间

network.http.max-persistent-connections-per-server:表示支持的最大并发连接数,默认值为6。

在Chrome浏览器中,可以在chrome://flags/页面中设置并发连接的情况,在Chrome浏览器的地址栏中输入“chrome://flags/”,会显出所有相关参数。

参数Parallel downloading用于设置并发下载的情况。

主流浏览器所支持的并发连接数见表。

HTTP1.1规范中一般是建议浏览器从每个主机名并行下载两个组件,但实际上现在市场上主流的浏览器都支持更多的并行下载组件,如果支持并行下载组件的话,我们会看到HTTP请求是呈阶梯状态的,以Chrome为例,捉到的HTTP请求的情况如图所示。

Chrome默认是支持6个请求同时并发,所以我们可以看到HTTP请求很明显的呈阶梯状态,每次同时下载6个组件,这样可以大大的提高响应时间。

并行下载组件的目的是提高下载组件的响应时间,但当我们在下载JS脚本组件时会将浏览器并发下载组件的功能禁用,看下面一个实例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>并行加载测试</title>

</head>

<body>

<h1>并行加载测试</h1>

<img src="images/tenpay.gif"/> //加载图片

<img src="images/tenpayc2c.jpg"/> //加载图片

<script src="js/test.js"></script> //加载JS文件,睡10秒

<img src="images/wap_logo.png"/> //加载图片

</body>

</html>

捉到的HTTP请求结果如图所示。

从图中可以看到图片tenpay.gif和tenpayc2c.jpg加载完成后,是加载test.js文件和wap_logo.png图片。正常理解这四个组件应该是同时下载的,但是当我们有JS文件在中间时后面的wap_logo.png图片并没有并行下载,而应该是等test.js文件加载完成后才开始下载,这样就会阻止后面的组件下载,直到test.js下载完成后才能开始下载。

为了解决这个阻塞的问题,最好的办法是将JS脚本放在页面的底部,这样不会阻止页面内容的呈现,并且这样页面中的可视组件可以迟早下载。

最糟糕的情况是将JS脚本放在页面顶部,这样脚本会阻塞对其后面内容的呈现,也会阻塞对其后面组件的下载。所以一般情况下我们建议将JS脚本文件放在页面底部。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,681评论 6 517
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,205评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 169,421评论 0 362
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,114评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,116评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,713评论 1 312
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,170评论 3 422
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,116评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,651评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,714评论 3 342
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,865评论 1 353
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,527评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,211评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,699评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,814评论 1 274
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,299评论 3 379
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,870评论 2 361

推荐阅读更多精彩内容