构建高性能网站，针对前台工程师--总结篇

首先从一次完整的的请求说起：（以此为例get,www,baidu.com）

1，webbrower 发出request，

2，然后解析www.baidu.com为ip,找到ip的服务器，

3，服务器处理请求资源并返回请求的内容，

4，browser接受请求内容过程，（返回内容是按顺序读取的）

4.1遇到外联css，就会并发去读取css内容（），

4.2遇到图片时，回去并发读取图片，目前浏览器的并发数为2，

4.3遇到js时则会阻塞其他请求。

4.4加载完css后，browse开始渲染页面，

4.5直到加载完页面中的文本资源，这时dom的结构已经确定，会出发 document.ready方法

4.6 browse继续加载 图片和js，完成后。页面就全部加载完成，这时会出发 window.onload()方法

 

来分析一下里面具体的时间开销：

1，从1--4.4 用户才开始看到页面上有内容，在这以前页面就是空白的

2，解析域名也是有一定时间开销的，如果是大机房的可以通过路由配置 dns 缓存，依赖于外部机房环境，可控性比较小。  

3，这是服务器处理的时间，优化程序代码可以减少这里的时间

   4，

4.1浏览器在接收完css之前，一般是不去渲染dom的，以避免无所谓的刷新和闪烁。所以直到4.4用户才真正在页面上看到内容。

4.2 浏览器的单域名并发访问数 为2，多域名下并发数没限制，可以通过定义域名别名改善

4.3 浏览器加载js时会阻塞其他请求，直到加载完成。改善的话可以把js放到页面下面去加载。

 

从上面的流程可以分析出以下建议：

1，减少连接数（原因：并发限制，dns开销）

2，将css放到 head中。（1,首先这符合w3c规范，2,应为css加载完后，遇到dom对象时就会直接显示，可以更快的显示页面。）

3，将js放到页面底部，（加载js时会阻塞其他请求，这段时间页面没有反映，如果js中没有write的话应该放到底部，页面渲染完后再加载js）

4，减少下载内容（网络是有速度限制的，内容越少当然加载越快）

 

针对上面4条建议给出具体做法：

1，使用 css sprite将小图片合并，合并css、js。使用浏览器缓存： cache-control、expires。不使用etag

2、3不用说了，上面已经解释清楚了。

4，采用gzip压缩，可以使用 jsmin 将js精简，使用工具将css，html精简，尽可能缩减图片。

按照 性能黄金法则 说明： 文本内容只占所有时间的10%-20%, 这样做以后 至少能将时间缩小40%-50%。能明显改善用户体验。

 

这只是一些建议参考，具体的需要你针对自己的网站进行分析，分析工具可以使用firedebug,yslow，（这两个可以集成）

yslow会直接给出你建议。

 

 

评论

11 楼 axxxx2000 2011-04-24  

int08h 写道

定义一个新的域名来加载图片，如果新域名和原域名依旧指向一台服务器的话，其实唯一的作用就是增大HTTP请求并行度，但是现在浏览器6的并行度完全够用了，除非你做淘宝搜索页之类的大量图片构成的页面
另外，如果新开域名的话，注意一个事，尽可能保证服务静态资源的域没有cookie，所以永远不要把cookie写到二级域名下去

嘿嘿,问下尽可能保证服务静态资源的域没有cookie  这个真不明白...能讲解下不?

10 楼 ltian 2011-04-24  

不管咋说，楼主的治学精神值得学习，至少提供一条比较不错的研究路径。

9 楼 feiyan35488 2011-04-24  

int08h 写道

feiyan35488 写道

int08h 写道

1、并发数并不是绝对的2，IE6-7为2，IE8、Firefox、Chrome为6，Opera为16
2、遇到js下载时不会阻塞其他请求（除IE6-7外）
3、用script标签写出来的js文件必须加载、解析、执行完成后，才会触发DOMReady，和你说的不一样
4、事实上link和style这2个标签只能放在head中，放在body中是不符合标准的，楼主说得很对，这里强调科普下~（除非style有scoped属性，不过很少人知道这属性）

总得来说，楼主还是仅仅从网上收集了一些“教条”和“圣经”，以及一些大家普遍在宣扬着的数据，似乎没有亲身实测过，这里还是自我推荐下我的研究：
http://www.otakustay.com/browser-strategy-loading-external-resource/

是没有测过。主要原因我是做后台的，只是最近了解一下前台优化的方案，这些数据来自《构建高性能网站-前台工程师》一书。 楼上是前端开发？

嗯，可以算是比较纯的前端吧，虽然也会后端但是公司的组织结构注定我99%的时间不用去关心后端了。构建高性能网站是猎狗书？那本如果再不出新版的话，里面的内容快要全面过时了……

做前端的，我始终坚持一个原则，“怀疑一切，但不轻易否定”，没办法，这是一个标准和实现都变化得太快的领域，可能晚上睡一觉，起来就发现一段脚本在偷偷升了级的某浏览器下输出不同了

确实是，标准变化快，各浏览器实现也不相同。本来刚开始就是因为这点自己不想学前端，目前自己也就用用，熟悉一下，不想太过深入。
是猎狗书那本，我还有一本 新版的 构建高兴能网站，还没来得及看，没想到第一版落后这么多了

8 楼 int08h 2011-04-24  

feiyan35488 写道

int08h 写道

1、并发数并不是绝对的2，IE6-7为2，IE8、Firefox、Chrome为6，Opera为16
2、遇到js下载时不会阻塞其他请求（除IE6-7外）
3、用script标签写出来的js文件必须加载、解析、执行完成后，才会触发DOMReady，和你说的不一样
4、事实上link和style这2个标签只能放在head中，放在body中是不符合标准的，楼主说得很对，这里强调科普下~（除非style有scoped属性，不过很少人知道这属性）

总得来说，楼主还是仅仅从网上收集了一些“教条”和“圣经”，以及一些大家普遍在宣扬着的数据，似乎没有亲身实测过，这里还是自我推荐下我的研究：
http://www.otakustay.com/browser-strategy-loading-external-resource/

是没有测过。主要原因我是做后台的，只是最近了解一下前台优化的方案，这些数据来自《构建高性能网站-前台工程师》一书。 楼上是前端开发？

嗯，可以算是比较纯的前端吧，虽然也会后端但是公司的组织结构注定我99%的时间不用去关心后端了。构建高性能网站是猎狗书？那本如果再不出新版的话，里面的内容快要全面过时了……

做前端的，我始终坚持一个原则，“怀疑一切，但不轻易否定”，没办法，这是一个标准和实现都变化得太快的领域，可能晚上睡一觉，起来就发现一段脚本在偷偷升了级的某浏览器下输出不同了

7 楼 int08h 2011-04-24  

定义一个新的域名来加载图片，如果新域名和原域名依旧指向一台服务器的话，其实唯一的作用就是增大HTTP请求并行度，但是现在浏览器6的并行度完全够用了，除非你做淘宝搜索页之类的大量图片构成的页面
另外，如果新开域名的话，注意一个事，尽可能保证服务静态资源的域没有cookie，所以永远不要把cookie写到二级域名下去

6 楼 feiyan35488 2011-04-24  

linvar 写道

feiyan35488 写道

4.2 浏览器的单域名并发访问数 为2，多域名下并发数没限制，可以通过定义域名别名改善

这个怎么说?
可以说详细一点吗
各种文件另起一个域名? image.domain.com, js.domain.com,

如果图片多的情况下：如电子商务网站。应该定义一个 image.domain.com来提高加载速度。js和css一般不需要，这里是强调将js和css的 合并和压缩，不会成为瓶颈的

5 楼 linvar 2011-04-24  

feiyan35488 写道

4.2 浏览器的单域名并发访问数 为2，多域名下并发数没限制，可以通过定义域名别名改善

这个怎么说?
可以说详细一点吗
各种文件另起一个域名? image.domain.com, js.domain.com,

4 楼 feiyan35488 2011-04-24  

int08h 写道

1、并发数并不是绝对的2，IE6-7为2，IE8、Firefox、Chrome为6，Opera为16
2、遇到js下载时不会阻塞其他请求（除IE6-7外）
3、用script标签写出来的js文件必须加载、解析、执行完成后，才会触发DOMReady，和你说的不一样
4、事实上link和style这2个标签只能放在head中，放在body中是不符合标准的，楼主说得很对，这里强调科普下~（除非style有scoped属性，不过很少人知道这属性）

总得来说，楼主还是仅仅从网上收集了一些“教条”和“圣经”，以及一些大家普遍在宣扬着的数据，似乎没有亲身实测过，这里还是自我推荐下我的研究：
http://www.otakustay.com/browser-strategy-loading-external-resource/

是没有测过。主要原因我是做后台的，只是最近了解一下前台优化的方案，这些数据来自《构建高性能网站-前台工程师》一书。 楼上是前端开发？

3 楼 int08h 2011-04-23  

1、并发数并不是绝对的2，IE6-7为2，IE8、Firefox、Chrome为6，Opera为16
2、遇到js下载时不会阻塞其他请求（除IE6-7外）
3、用script标签写出来的js文件必须加载、解析、执行完成后，才会触发DOMReady，和你说的不一样
4、事实上link和style这2个标签只能放在head中，放在body中是不符合标准的，楼主说得很对，这里强调科普下~（除非style有scoped属性，不过很少人知道这属性）

总得来说，楼主还是仅仅从网上收集了一些“教条”和“圣经”，以及一些大家普遍在宣扬着的数据，似乎没有亲身实测过，这里还是自我推荐下我的研究：
http://www.otakustay.com/browser-strategy-loading-external-resource/

2 楼 hustlxjaw 2011-04-23  

<div class="quote_title">feiyan35488 写道</div>
<div class="quote_div">
<p><span style="white-space: pre;"> </span>4.2 浏览器的单域名并发访问数 为2，多域名下并发数没限制，可以通过定义域名别名改善</p>
</div>
<p>学习了</p>

1 楼 lokinell2006 2011-04-23  

总结的不错！