前端性能优化之雅虎35条军规

页面内容

(1) 减少HTTP请求数

Web前端80%的响应时间花在图片，样式，脚本等资源上，最直接的方式是减少页面所需的资源，但并不现实，所以减少HTTP请求数主要途径是:

1 合并JS/CSS 文件，服务器CDN自动合并，通过把所有的脚本放在一个文件中来减少请求数

2 使用CSS雪碧图，合成一个文件 通过background-image和background-position控制

3 行内图片 Base64编码

• 1
• 2
• 3
• 4
• 5
• 6

减少页面HTTP请求数是个起点，这是提升站点返回访问速度的重要指导规则

(2)减少DNS查询

用户输入URL以后，浏览器要进行查询域名对应服务器的IP地址，一般需要耗费20-120ms

这是个同步行为，DNS查询完成之前，浏览器无法从服务器下载任何数据

(3)避免重定向

HTTP重定向是通过301和302状态码实现的

HTTP/1.1 301 Moved  Permanently
Location:http://example.com
Content-Type:text/html

• 1
• 2
• 3

浏览器会自定跳转到Location域指明的URL，重定向的所有信息都在HTTP头部，而响应体一般是空的。

客户端收到服务器的重定向响应后，会根据响应头中的Location的地址在次发送请求，DNS等 还要发生，会影响用户体验，尤其是多次重定向，用户在一段事件内看不到任何内容，只看到浏览器进度条一直在刷新

最浪费的重定向经常发生，而且容易被忽略，URL末尾应该添加/  但是没有添加。这时候就会被重定向

• 1

(4)缓存Ajax请求

最重要的优化方式是缓存响应结果，有尚未过期的Expires或者Cache-Controlde HTTP头，那么之前的资源就可以从缓存中读出，就必须通知浏览器，应该使用之前缓存的资源响应，还是去请求一个新的。可以通过给资源的AjaxURL里添加一个表明用户资源最后修改时间的时间戳来实现。如果资源从上一次下一之后没有修改，时间戳不变，就从浏览器缓存中读出

(5)延迟加载

页面初始加载时哪些内容时绝对必需的?不在答案之列的资源都可以延迟加载,比如:

• 非首屏使用的数据，样式，脚本，图片等
• 用户交互时才显示的内容

遵循渐进增强历理念开发的网站:JavaScript用于增强用户体验，但没有JS也能正常工作，完全可以延迟加载JS

(6)预加载

预加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快第响应.

• 无条件预先加载:页面加载完成后，马上获取其他资源。
• 有条件预先加载:根据用户行为去预判用户去向，预载相关资源。
• 有阴谋的预先加载:页面即将上线新版前预先加载新版内容。网站改版后由于缓存，使用习惯等原因，会有旧版的网站更快更流畅的返回，为缓解这一问题，在新版上线之前，旧版可以利用空闲提前加载一些新版的资源缓存到客户端，以便新版正式上线后更快的载入

(7)减少DOM元素数量

JSDOM操作很慢

从以下几个角度考虑移出不必要的标记:

• 使用语义化的标签
• 不要使用表格布局
• 能通过伪元素实现的功能，就没必要添加额外的元素，比如清除浮动

(8)划分内容到不同的域名

浏览器一般会限制每个域的并行线程(一般为6个，甚至更少)使用不同的域名可以最大化下载线程，但注意保持2-4个域名，以避免DNS查询损耗

比如动态内容放到一个域名下，静态资源放到一个域名下。这样还可以禁止静态资源域下的Cookie，减少数据传输

(9)尽量减少iframe的使用

优点

• 可以用来加载速度比较慢的第三方资源如广告
• 可以并行下载脚本

缺点

• 加载代价昂贵，即使是空的页面
• 阻塞页面load事件触发
• 缺乏语义

(10) 避免404错误

HTTP请求很昂贵，返回无效的响应完全没必要，降低用户体验毫无用处。尤其糟糕的是外部脚本返回404，不仅阻塞其他资源下载，浏览器还把404页面当做JS解析，消耗更多资源

服务器

1 使用CDN

2 添加Expires或者Cache-Control响应头

3 启动Gzip

前端工程师可以想办法解决网络传输HTTP请求和响应时间，但是终端用户的宽带速度，网络服务商我们是无法控制的，压缩可以通过减少HTTP响应的大小来缩短响应时间

Gzip压缩通常可以减少70%的大小

从HTTP/1.1 开始 Web客户端就有了支持压缩的Accept-Encoding HTTP请求头

4 配置Etag

5 Ajax请求使用GET

6 避免图片src为空

虽然scr属性为空，但是浏览器仍然会向服务器发送一个HTTP请求

Cookie

减少Cookie 的大小

Cookie通过HTTP头，在服务器和浏览器间来回传送，减少Cookie:

• 去除不必要的Cookie
• 尽量压缩Cookie
• 设置合适的过期时间
• 设置Cookie的domain级别

静态资源使用无Cookie域名

静态资源一般无需使用Cookie，可以吧他们放在使使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度

CSS

把样式表放到中

让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉

不要使用CSS表达式

使用link 替代@important

JavaScript

把脚本放在页面底部

浏览器下载脚本，会阻塞其他资源并行下载，及时是来自不同的域名的资源。

• defer
• async

使用外部的JavaScript和CSS

外部的JavaScript和CSS可以被浏览器缓存，在不同页面间重用，也能降低页面大小

压缩JavaScript和CSS

移出重复的脚本

重复的脚本会产生不要的HTTP请求，而且重复解析执行浪费时间和计算资源

减少DOM操作

使用高效的事件处理

减少事件监听的结点，可以通多事件委托

尽早处理事件，不用等到load以后，在DOMContentLoaded即可进行

图片

优化图片

gif格式是比较老的图片格式，它的色彩效果最低（就是不清楚！！！），如果想要使用gif保存鲜艳图片会让你的网站看上去非常可怕。 但是gif有着不可忽视的优点：体积小、有着极好的压缩效果，支持动画，并且支持透明效果，虽然这个透明没有PNG格式图片支持的强大。。。 动画选择gif没有错，如果你的图片只有单调的色彩, 没有渐变色，例如只有红蓝两色，那么选择gif就再好不过了。

另外，PNG图片可以说是最适合网络的图片了，优点就是 无损压缩，压缩比率很高， 可渐变透明， 几乎具备所有GIF的优点， 缺点是不如JPG格式的颜色色彩丰富， 同样的图片体积也比JPG略大，但是PNG图片应该是网站设计上最为推广的，比如Google就是一个很好的例子，它的所有站点中几乎都是使用的PNG格式， 而且8位的PNG完全可以替代掉GIF
　　
WebP也可以

雪碧图

不要再HTML中缩放图片

使用体积小的 可缓存的Favorite,ico图标

        </div>