存储架构

提升网站页面速度的14条最佳实践(一)

微信扫一扫,分享到朋友圈

提升网站页面速度的14条最佳实践(一)
0

一直忙于工作,最近这段时间终于可以静下心来细读一些与工作相关的书籍。本篇文章是《高性能网站建设指南》一书的梳理。

希望自己收获的同时,也能给对这块知识感兴趣的童鞋给与入门指导。

关于《高性能网站建设指南》的梳理共有两部分内容,本篇为第一部分。第二部分见提升网站页面速度的14条最佳实践(二)。

《高性能网站建设指南》一书共列举了14条提升网站速度的方法,本篇就前7种进行总结。

一、减少http请求

1.图片地图

2.CSS Sprites

3.内联图片

4.合并脚本和样式表

二、使用内容发布网络

内容发布网络(CDN)是一组分布在不同地理位置的web服务器,用于更加有效地像用户发布内容。即利用就近原则,响应发送给用户需要的数据,进而缩短响应时间,来提高网站性能。

三、添加Expires头

浏览器(和代理)使用缓存来减少HTTP请求的数量,并减少HTTP响应的大小,使web页面加载得更快。web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本。

注意:Expires头使用的是一个特定的时间,它要求客户端与服务器的时钟严格同步,一旦两个时间统一,Expires头的时间将没有意义。

为了解决Expires头的限制,HTTP1.1 引入了Cache-Control使用max-age指令指定组件缓存多久。它以秒为单位定义更新窗。如果从组件请求开始过去的秒数小于max-age,浏览器就可以使用缓存的版本。

注意:
    1.在小于HTTP1.1版本之前仍需要设置Expires头,为了做更好的兼容,最好同时使用HTTP1.1和max-age,在支持max-age的版本中,如果两者同时存在max-age会重写Expires头。
    2.利用Apache模块mod_expires可以使Expires头能够像max-age那样以相对的方式设置日期。通过Expires_Default指令来实现。时间可以用年/月/周/日/时/分/秒为单位来设置。

四、压缩组件

1.从HTTP1.1开始,web客户端可以通过HTTP请求中的Accept-Encoding头来识别对压缩的支持。

Accept-Encoding:gzip,deflate;

2.配置

a.Apache1.3的gzip压缩由mod_gzip模块提供

b.Apache2.x中压缩通过mod_deflate模块来完成。

3.代理缓存

在Web服务器的响应中添加Vary头。Web服务器可以告诉代理根据一个或者多个请求头来改变缓存的响应。

Vary:Accept-Encoding

这种情况下代理服务器会缓存每个响应的两个版本——Accept-Encoding为gzip时的压缩内容和没指定Accept-Encoding时的非压缩内容。

五、将样式表放在顶部

由于浏览器总是在样式表加载并解析完之后才会绘制页面内容,所以把样式表放在底部才会出现白屏或者无样式内容的闪烁问题。

六、将脚本放在页面底部

浏览器总是从上到下执行页面内容,如果将脚本放置在页面顶部,则在加载脚本的这段时间内,页面的内容呈现将被阻塞!

七、避免css表达式

css表达式也会影响页面的加载时间。如果必须要在页面加载记载的时候对css样式进行重置,可以考虑使用时间处理器来代替css表达式。

阅读原文...


微信扫一扫,分享到朋友圈

提升网站页面速度的14条最佳实践(一)
0

SegmentFault博客

What is the difference between a let block statement and an equivalent with statement?

上一篇

11月底前全国携号转网,你会转投谁家怀抱?

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

提升网站页面速度的14条最佳实践(一)

长按储存图像,分享给朋友