提醒：本文发布于 3426 天前，文章内容可能 因技术时效性过期 或 被重新修改，请谨慎参考。

参考1:官方传送门在此,请肆意点击.
参考2:中文原文传送门在此,请肆意点击.
参考3:中文原文传送门在此,请肆意点击.

1.尽量减少HTTP请求次数

什么是HTTP请求?每一次网页内容的获取,就是HTTP请求的具体展现.
不同浏览器的请求并发数是有限的,知乎已经有大神解释这个问题了,拿去.
常见的优化有:

• 合并文件(典型案例:雪碧图)
• 图片Base64编码

2.减少DNS查找次数

访问域名的时候,DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

• 问题来了: 子域的数量和DNS查询效率?

3.避免跳转

• 对搜索引擎影响大
• 请求数变多
• 用户体验变差

4.使用Ajax缓存

• Get和Post请求,Get是可以被缓存的,没有被修改就返回304.
• 不是所有的Ajax请求都需要缓存,否则和静态资源没区别

5.推迟加载内容

• 按需加载/懒加载

6.预加载

• 提升用户体验

7.减少DOM元素

• DOM越多,查询越慢

8.划分子域

• 每个域的并发请求数量限制

9.减少iframe数量

• 这货是阻塞加载

10.避免重定向

• 301 永久重定向, 即: 假如我要请求a.com,但是却跳到了b.com,a.com会发请求到b.com,浪费时间. 但是搜索引擎可以智能跳过.
• 302 临时重定向, 即:页面找到,但是不在原始位置,重新查找.搜索引擎依然机械这一过程.
• 这两个状态码对搜索引擎差别非常大,这两个行为增加了服务器的访问次数.

11.使用CDN

内容分发网络.

12.为文件头指定Expires或Cache-Control

• 如过Apache开启了expire模块,浏览器发送资源请求的时候,服务器返回资源的同时,返回一个expire的http头,这是一个时间值,表示资源在本地的过期时间.这个值会存在本地,如果再返回来的值不超过规定时间,那么就一直使用这个资源不再发送HTTP请求
• Cache-Control,HTTP协议中常用头部之一,负责页面缓存机制.有更多的选项,处理方式也更多.

13.开启Gzip压缩

• 略

14.配置Etag(实体标签)

• Entity Tag,属于HTTP协议,受Web服务支持,它使用特殊的字符串来标识某个请求的版本.如果浏览器和服务器的Etag一致,那么该资源就没有改变,服务器便会发送回一个极短的响应，包含HTTP “304 未修改”的状态,前端使用本地缓存.生成ETag常用的方法包括对资源内容使用抗碰撞散列函数，使用最近修改的时间戳的哈希值，甚至只是一个版本号。为了避免使用过时的缓存数据，用于生成ETag的方法应保证（同时尽可能的实用）每一个ETag都是唯一的。
• 这里有一个浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

15.尽早刷新输出缓冲

• 待补充

16.使用GET来完成AJAX请求

• 因为可缓存

17.把样式表置于顶部

• 避免页面闪烁和重绘

18.避免使用CSS表达式（Expression）

• 吃性能

19.使用外部JavaScript和CSS

• 可缓存
• 重用率价值大
• 外部压缩价值大

20.压缩合并JavaScript和CSS

• 略

21.用代替@import

先来看看这两个的区别:
link:

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式.

@import:

• 语法:@import url(style.css)
• 增加请求
• 不支持DOM操作

22.避免使用滤镜

• IE的东西, 略

23.把脚本置于页面底部

• 略

24.剔除重复脚本

• 略

25.减少DOM访问

• DOM的操作很慢

26.开发智能事件处理程序

• 合理使用冒泡/捕获

27.减小Cookie体积

• 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
• 将cookie的大小减到最小
• 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
• 设置合适的过期时间，比较长的过期时间可以提高响应速度

28.对于页面内容使用无coockie域名

• 待补充

29.优化图像

• 这个不用说了吧…

30.优化CSS Spirite

• Spirite中水平排列图片，垂直排列会增加文件大小；
• Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
• 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。

31.不要在HTML中缩放图像

我们来看看W3school给出的解释

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于创作者来说，一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。

说了那么多,其实就是避免重绘

32.favicon.ico要小而且可缓存

• 网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以必须存在,以避免404
• 文件尽量小，最好小于1k
• 设置一个长的过期时间

33.保持单个内容小于25K

• 这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用上了。

34.打包组件成复合文本

• 略