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

算法听星使
• 阅读 1673

一直忙于工作,最近这段时间终于可以静下心来细读一些与工作相关的书籍。本篇文章是《高性能网站建设指南》一书的梳理。
希望自己收获的同时,也能给对这块知识感兴趣的童鞋给与入门指导。
关于《高性能网站建设指南》的梳理共有两部分内容,本篇为第一部分。第二部分见提升网站页面速度的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表达式。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Django之Django模板
1、问:html页面从数据库中读出DateTimeField字段时,显示的时间格式和数据库中存放的格式不一致,比如数据库字段内容为2012082616:00:00,但是页面显示的却是Aug.26,2012,4p.m.答:为了页面和数据库中显示一致,需要在页面格式化时间,需要添加<td{{dayrecord.p\_time|date:
Stella981 Stella981
3年前
Nginx + lua +[memcached,redis]
精品案例1、Nginxluamemcached,redis实现网站灰度发布2、分库分表/基于Leaf组件实现的全球唯一ID(非UUID)3、Redis独立数据监控,实现订单超时操作/MQ死信操作SelectPollEpollReactor模型4、分布式任务调试Quartz应用
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这