文档章节

关于提高网站性能的几点建议

商者
 商者
发布于 2016/07/15 22:26
字数 1990
阅读 10
收藏 0
点赞 0
评论 0

最近在学习《高性能网站建设指南》这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看。

  性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上
  ——Steve Sounders

1 文件合并(减少HTTP请求数量)

  • CSS Sprites

  利用css sprites将网站用到的图片合并成一张图片,通过background-positionwidthheight控制背景图位置来使用某一个图标,这种方式可以将多个图片请求缩减为一次,生成css sprites的工具也很多,grunt和gulp中都有相关的插件,CssGaga也不错。

  • 合并js和css

  和精灵图一样,合并css和js文件也是减少HTTP请求很重要的方式,对css文件的合并目前来说没有什么争议,但是对于当前js模块化盛行,将所有js文件合并成一个文件,仿佛是一种倒退。正确的方式是遵守编译型语言的模式,保持js的模块化,在生成过程中只对初始请求用到的js文件生成目标文件。

2 使用内容发布网络(减少HTTP请求时间)

  HTTP请求时间另一个影响因素是你与网站web服务器所处的距离,显然距离越远,请求所需的时间也越久,通过CDN可以大大改善这一点。

  CDN是分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容。CDN最主要的功能是给终端用户存放静态文件,另外也提供下载、安全服务等功能。

3 设置浏览器缓存(避免重复HTTP请求)

  • 使用Expire/Cache-control

  浏览器通过使用缓存可以避免每次都进行重复的请求,HTTP 1.0和HTTP1.1分别有不同的缓存实现方式,Expires(1.0)和Cache-control(1.1)。Web服务器通过expires告诉客户端在指定的时间内,都使用该文件的缓存副本,不再向服务端重复发出请求,例如:

    Expires: Thu, 01 Dec 2016 16:00:00 GMT (GMT格式)

  这个设置意味着截止到2016年12月1日,都可以使用该缓存副本,无需再发出请求。

  Expires这种通过截止日期的方式,存在一个限制:要求客户端和服务端时钟严格同步,而HTTP 1.1引入的Cache-Control通过指定一个以秒为单位的时间指定缓存日期,则不存该限制,例如:

    Cache-Control: max-age=31536000

  这个设置意味缓存时间为一年,推荐使用Cache-Control,但是在支持HTTP 1.1的情况下,另外要注意的一点:Cache-Control和Expire同时存在时,Cache-Control具有更高的优先级

  • 配置或移除ETag

  使用Expire/Cache-Control可以避免第二次访问时,使用本地缓存避免重复HTTP请求,提高网站速度。然而,在用户点击了浏览器刷新或者在expire已过期的情况下,仍然会向服务端发出HTTP GET请求,而此时如果该文件并没有发生变化,服务端不会返回整个文件而是会返回304 Not Modified状态码。

  服务端判断该文件是否发生变化的依据有两个:Last-Modified(最新修改日期)和ETag(实体标签);

  ETag(Entity Tags)是在HTTP 1.1引入的,与Last-Modified同时存在时要有更高的优先级。服务端通过对比客户端发来的ETag(If-None-Match)和当前ETag,若相同返回304 Not Modifed,否则返回整个文件以及200 OK。

  ETag存在一个问题:当浏览器向一个服务器发送GET请求原始组件,之后又向另一台服务器请求该组件时,ETag是不匹配的,当然,如果你的网站寄宿在一台服务器上不存在这个问题,而现在很多网站使用多台服务器,ETag的存在就大大降低验证有效性的成功率。

  存在这个问题是时的解决办法是对ETag进行配置,移除服务器innode值只保留修改时间戳和大小作为ETag值,或者直接移除ETag,使用Last-Modified来验证文件有效性。

4 压缩组件(减小HTTP请求大小)

  通过对HTTP传输的文件进行压缩减小HTTP请求的大小,提高请求速度,GZIP是目前最常用也是最有效的压缩方式。

  然而,并非所有的资源文件都需要压缩,压缩的成本包括服务端需要花费CPU周期进行压缩,而客户端也需要对压缩文件进行解压缩,必须结合自己网站进行权衡。现在绝大多数网站都对其HTML文档进行压缩,部分网站选择对js、css进行压缩,几乎没有网站对图片、PDF等文件进行GZIP压缩,原因在于这些文件是已经被压缩过的,采用HTTP压缩已经被过压缩的东西并不能使它更小。事实上,添加标头,压缩字典,并校验响应体实际上使它变得更大,而且还浪费了CPU。

  如何对网站开启GZIP,需要在所使用的web服务器(IIS、Nginx、Apache等)中进行设置。

5 CSS文件放在首部

  将CSS文件放在首部和放在尾部,并不影响HTTP请求,因此从请求时间上来讲是一致的,然而从用户体验的角度,将CSS文件放在首部,会获得更好的用户体验。

  原因在于浏览器是从上到下依次解析html文档,将CSS文件置于头部,页面会首先对CSS文件发出请求,随后加载DOM树并对其进行渲染,页面会逐步呈现在用户面前。

  而与之相反,如果将CSS文件放置在尾部,页面加载完整DOM之后请求CSS文件,然后对整个DOM树渲染并呈现给用户,从用户的角度,在css文件没有请求完成之前,整个页面是出于白屏状态的,白屏是浏览器的一种行为,David Hyatt对其的解释是这样的

在样式树没有完全加载之前,渲染dom树就是一种浪费,因为在样式树加载完成之后会再次渲染,出现FOUC(无样式内容闪烁)问题。

  另外要注意的一点,使用link而不是@import引入css样式表,使用@import引入的样式即使写在首部,也会在文档最后加载。

6 JS文件放在尾部

  HTTP请求是并行的,不同浏览器并行下载的数目也不一样(2、4、或者8个),并行下载提高了HTTP请求的速度。而将JS文件放在首部,不仅会阻塞后面文件的下载而且会阻塞页面的渲染。

  为什么会这样呢?原因有两个:

  • JS文件中可能存在document.write修改页面的内容,因此页面会在脚本执行完成之后才可使渲染。
  • 不同JS文件不管大小如何,可能存在依赖关系,因此必须按照顺序进行执行,因此在加载脚本的时候并行下载是禁止的。

  所以,最好的方式是讲js文件放置在尾部,等页面所有可视化组件加载完成之后再进行请求,提高用户体验。

本文转载自:http://www.cnblogs.com/vicfeel/p/5674819.html

共有 人打赏支持
商者

商者

粉丝 39
博文 141
码字总数 43255
作品 0
海淀
架构师
CSS代码重构与优化之路

作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,...

数通畅联
2016/01/20
29
0
关于百度统计和BDP那些不为人知的事儿!

之前聊了很多的图表功能,今天我们聊点不一样的话题:关于百度统计的那些事儿! 小莉是一家互联网公司的网站运营童鞋,为了能够获取PV、UV等最新的流量数据,小莉需要经常登录百度统计后台进...

王小美
2017/06/01
0
0
如何购买VPS,现阶段是是学习用

最近想购买VPS, 主要用来搭建自己的django网站,流量不大, 学习为主,不知道各位大侠有什么建议? 希望能涉及到下面几点吧: 1. 怎么挑选VPS 2. 有没有VPS公司推荐,希望服务信用好点(最好自...

姐夫
2012/08/03
1K
15
MySQL数据库表结构设计优化技巧

由于MySQL数据库是基于行(Row)存储的数据库,而数据库操作 IO 的时候是以 page(block)的方式,也就是说,如果我们每条记录所占用的空间量减小,就会使每个page中可存放的数据行数增大,那么每...

Anthony__安东尼__
2017/12/12
0
0
设计网站的URL时应该注意的8个要点

对于一个网站的结构来说,URL的设计也非常的重要,在URL设计时我们应该事先做好规划,应该从用户体验和搜索引擎蜘蛛体验出发,在总体上边应该做到URL清晰、友好、方便记忆,然后还要适当的考...

小股儿
2014/01/06
17
0
设计网站的URL时应该注意的八个要点

对于一个网站的结构来说,URL的设计也非常的重要,在URL设计时我们应该事先做好规划,应该从用户体验和搜索引擎蜘蛛体验出发,在总体上边应该做到 URL清晰、友好、方便记忆,然后还要适当的考...

鉴客
2011/05/31
675
5
程序员怎样才能找到一个靠谱的创业公司

现在移动互联网已经进入了下半场,虽然是下半场,但是移动互联网的前途还是光明的,但是今年所谓的“资本寒冬”让大部分创业公司举步维艰,步履艰难,很多创业公司在此时此刻原形毕露,问题凸...

达尔文
2016/09/14
5K
24
测试网页打开速度的18种专业方法

网站的加载速度是决定网站等级的重要因素,值得站长特别关注。原因很简单,没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度 很慢,将流失大量的访客,甚至出现多米诺...

james_laughing
2016/12/14
76
0
Java 多线程编程 — 锁优化2

Java多线程编程-(13)- 关于锁优化的几点建议 一、背景 在《 Java多线程编程-(11)-从volatile和synchronized的底层实现原理看Java虚拟机对锁优化所做的努力》 这一篇文章中,我们大致介绍...

晨猫
04/26
0
0
官方正式发布 Firefox 5 正式版

经过几点等待,Mozilla 官方终于正式宣布 Firefox 5 的发布消息,没什么好说的了,官方网站和下载地址:http://www.mozilla.com/en-US/firefox/new/ 简体中文版下载: Windows , Mac OS X ,...

红薯
2011/06/21
5K
20

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(五)- 文字排版样式和效果

CoreText进阶(五)- 文字排版样式和效果 效果 以下是三个设置了不同属性的效果图 第一个设置了文字颜色为红色,字体为16号 第二个设置了文字颜色为灰色,字体为16号,对其为居中 第三个设置...

aron1992
28分钟前
1
0
10.23 linux任务计划cron~10.27 target介绍

crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查是...

洗香香
38分钟前
0
0
告警系统主脚本、告警系统配置文件、告警系统监控项目

20.20 告警系统主脚本 告警系统主脚本 main.sh内容 #!/bin/bash#Written by aming.# 是否发送邮件的开关export send=1# 过滤ip地址export addr=`/sbin/ifconfig |grep -A1 "en...

lyy549745
41分钟前
0
0
Don’t Repeat Yourself

在软件工程中,Don’t Repeat Yourself(DRY)是软件开发的原则,旨在减少重复,用抽象代替它,使用数据规范化来避免冗余。 这个原则在维基百科上是说是由Andy Hunt和Dave Thomas《The Pragmat...

woshixin
43分钟前
0
0
搭建webpack项目框架

作者:汪娇娇 时间:2018年6月4日 一、说明 随着业务发展和前端人员的增加,搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面,一开始好像就没考虑其他框架,直接选了webpack。w...

娇娇jojojo
50分钟前
0
0
Java基础——面向对象(内部类)

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 内部类: 1.有名内部类 2.无名内部类 内部类申请...

凯哥学堂
59分钟前
0
0
HttpClient内部三个超时时间的区别

RequestConfig requestConfig = RequestConfig.custom() .setConnectionRequestTimeout(config.connReqTimeout) //从连接池中获取连接的超时时间 ......

1713716445
今天
0
0
每天一个命令SCP

每天一个命令:SCP scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的。可能会稍微影响一下速...

河图再现
今天
0
0
cron/chkconfig/systemd/unit/target

linux任务计划 : cron工具 任务计划在运维工作中用到的比较多,大部分系统管理工作都是通过定期自动执行某个脚本来完成。 查看linux中任务计划的配置文件: /etc/crontab [root@yolks-001 ~]...

Hi_Yolks
今天
1
0
ftp攻略

Vsftpd完全攻略(一)ftp原理与vsftp安装:https://www.iyunv.com/thread-44698-1-1.html Vsftpd完全攻略(二)设置匿名用户也支持下载和上传与创建目录:https://www.iyunv.com/forum.php?mo...

寰宇01
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部