【20年品牌建站】找北京网站建设公司就选新鸿儒/提供北京网站建设报价/北京网站制作/北京网站设计/网站开发、北京网站建设公司电话【010-51267718】有优惠哦!
简体
繁体 简体
我们的服务遍布中国

我们的服务遍布中国
乃至世界

新鸿儒所服务的品牌地域与城市
北京 天津 上海 广州 深圳 香港 厦门 江苏 浙江 山东
重庆 长沙 武汉 成都 西安 宁夏 丽江 青海 云南 乌鲁木齐
黑龙江 内蒙古 河北 ...
新鸿儒服务与合作的全球各地
美国 加拿大 德国 法国 英国 瑞士 意大利 荷兰
印度 日本 韩国 ...

不论你的品牌在何处
我们都可以提供完善的服务与帮助

致电

010-51267718

《高性能网站建设指南》阅读笔记_规则1-减少HTTP请求

发布时间:2013-11-22 浏览:229打印字号:

序言:

可能很多人跟我们一样,一直以为性能主要是后端问题。但是这本书中的实例表明,前端问题可能消耗掉整体时间的80%到90%,而只有10%到20%的时间花在了下载HTML文档上。一般我们认为前端性能无非就是坚持使用外部的CSS和JS,尽量减少CSS和JS引用的数量,还有对JS的压缩。但是这本书告诉我们,我们要做的工作远不止这些。

本书按照优先级顺序介绍了14个性能规则。但是并非每个规则都要应用于每个网站,也不是每个网站都应该按照同一种方式运用一个规则,但是每个规则都值得考虑。

我们自己做了下实验:

百度:0.013/0.075=17%     0.014/0.040=35%

page speed 评分:99

淘车买车首页:0.699/7.559=9%       0.667/2.978=22%  

page speed 评分:68

淘车网车源列表页:0.057/4.734=1.2%     0.055/2.112=2.6%    

page speed 评分:84

二手车之家车源列表页:0.068/2.164=3%       0.063/1.183=5%   

page speed 评分:82


我们的问题大概在一下这几个方面:

启用 Keep-Alive

由同一网址提供资源

将图片组合为 CSS贴图定位

优化图片


我们做到了:


暂缓 JavaScript解析

压缩 JavaScript

压缩 CSS

压缩 HTML

指定图片大小

将查询字符串从静态资源中删除

优化样式表和脚本的排列顺序

使用浏览器缓存

使目标网页重定向可缓存

内嵌小型 CSS

内嵌小型 JavaScript

启用压缩

将 CSS放在文档标头处

将图片组合为 CSS贴图定位

尽量减少请求的数据量

尽量减少重定向

指定字符集

请指定一个“Vary: Accept-Encoding”标头

请指定缓存验证工具

避免出现错误的请求

避免在 CSS中使用 @import

首选异步资源


下面是对以上提到的14条规则的具体介绍:


规则1-减少HTTP请求

既然有80%-90%的时间花在为HTML文档所引用的所有组建(图片,脚本,样式表,Flash等)进行的HTTP请求上,因此改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求数量。这是最重要的原则,如果14条规则里只能选一条,那就是它了.

图片地图:如果用图片做导航链接,我们们可以将多个图片完成的功能,使用一个图片,根据的不同区域来响应不应的请求。因为一个图片只有一次HTTP请求,而多个图片需要有多次请求。


CSS Sprites

原理同上,但比上面的更灵活

CSS Sprites方式处理例子:

书中的示例:

 

内联图片 是将简单图片的编码数据直接保存在URL自身之中。(需要内联编码技术)

合并脚本和样式表:每个文件都会导致一个HTP请求,尽量将css和js合并到一个文件中;

把原有的多个样式表文件合成一个,可以使用户在浏览网页时只需下载一个CSS文件。这样减少了HTTP请求,速度自然就快了些。Javascript文件也一样。不过这样做似乎不符合模块化的开发原则。


小结:前三种方法的起到的效果差不多,根据书中提供的例子,理论上都能节约将近一半的时间。但是图片地图中的图片必须是连续的,在定义区域坐标时,如果采取手工的方式则很难而且容易出错,而且除了举行之外几乎无法完成其它形状,通过DHTML创建的图片地图IE不支持。CSS精灵没有图片连续的限制,非常灵活,而且它还有个额外的优点,合并后的图片会比分离的图片的总和要小。这是因为它降低了图片自身的开销(颜色表,格式信息等)。内联图片的缺点是IE不支持,而且对图片的大小也有限制。所以CSS精灵是优质选择,我们要求合并脚本和样式表,要求不超过三个,包括头部一个,框架一个,页面里只能用一个了。

现在就与新鸿儒客服交流

01051267718

您也可进行在线咨询或预约项目顾问
我要预约
在线咨询