性能优化体系

雅⻁军规

基本了解过性能优化的，都是到优化的雅⻁军规，其实就是雅⻁开发者日常总结的知识点，有兴趣的可     以直接去读原文

https://developer.yahoo.com/performance/rules.html?guccounter=1&guce_referrer=aHR0cHM6L y9naXRodWIuY29tL2NyZWVwZXJ5YW5nL2Jsb2cvaXNzdWVzLzE&guce_referrer_sig=AQAAAH95XrRI kgJ4tMOgNXfEXp8OUh0UdWivDIcUtvpdGMDiOEQ8StvA J3GxaEYeWoeRGcs5bT-I4MjYpy3m66n6iJQ 3fTTsniMvcr4TBgOYaWfy5KIKuOTfMZoyCuqlvQs4LFvssB3IgQ7RB4Yqv7NlLiK3MWANRqOFCzO2Tl_ vylyY

我们来解读一下

Image(图片)

图片主要就是压缩和优化

运行 pngcrush 或其它工具压缩 png。 https://tinypng.com/ 运行 jpegtran 或其它工具压缩 jpeg。大图用jpg

svg矢量图

webp兼容性 （降级）

Optimize CSS Sprites(优化CSS雪碧图)

图片合并，颜色相近的合并，颜色数更少，

CSS

css放在header里， 选择器性能

Cookie

减少cookie的体积 http cookie 的使用有多种原因，比如授权和个性化。cookie 的信息通过 http 头部在浏览器和服务器端交换。尽可能减小cookie的大小来降低响应时间。

消除不必要的 cookie。 尽可能减小 cookie 的大小来降低响应时间。 注意设置 cookie 到合适的域名级别，则其它子域名不会被影响。 正确设置 Expires 日期。早一点的 Expires 日期或者没有尽早的删除cookie，优化响应时间。

Server(服务端)

使用CDN

用户接近你的服务器会减少响应时间。把你的内容发布到多个地理上分散的服务器可以让⻚面加载更快

CDN 是一群不同地点的服务器，可以更高效地分发内容到用户。一些大公司有自己的 CDN。 Add an Expires or a Cache-Control Header(加Expires或者Cache-Control头部) 这条规则有两个方面：

对静态组件：通过设置 Expires 头部来实现“永不过期”策略。 对动态组件：用合适的 Cache-Control 头部来帮助浏览器进行有条件请求。

Gzip Components(传输时用gzip等压缩组件)

http  请求或响应的传输时间可以被前端工程师显著减少。终端用户的带宽，ISP，接近对等交换点等等没法被开发团队控制，但是，压缩可以通过减少 http 响应的大小减少响应时间。 从 HTTP/1.1 开始， 客户端通过http请求中的 Accept-Encoding 头部来提示支持的压缩： Accept-Encoding: gzip, deflate

如果服务器看到这个头部，它可能会选用列表中的某个方法压缩响应。服务器通过Content-Encoding 头部提示客户端： Content-Encoding: gzip

gzip 一般可减小响应的 70%。尽可能去gzip更多（文本）类型的文件。html，脚本，样式，xml 和json 等等都应该被gzip，而图片，pdf等等不应该被gzip，因为它们本身已被压缩过，gzip 它们只是浪费cpu，甚至增加文件大小。

Configure ETags(ETags 配置)

实体标记（Entity tags，ETag）是服务器和浏览器之间判断浏览器缓存中某个组件是否匹配服务器端原组件的一种机制。实体就是组件：图片，脚本，样式等等。ETag被当作验证实体的比最后更改（last- modified）日期更高效的机制。服务器这样设置组件的ETag： HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195

之后，如果浏览器要验证组件，它用 If-None-Match 头部来传 ETag 给服务器。如果 ETag 匹配，服务器返回304： GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified

ETag   的问题是它们被构造来使它们对特定的运行这个网站的服务器唯一。浏览器从一个服务器获取组件，之后向另一个服务器验证，ETag 将不匹配。然而服务器集群是处理请求的通用解决方案。

JavaScript

Put Scripts at the Bottom(把脚本放到底部) Make JavaScript and CSS External(使用外部JS和CSS) 这里的很多性能规则涉及外部组件怎么管理。但你首先要明白一个基本问题：JS 和 CSS 是应该包含在外部文件还是内联在⻚面本身？

Minify JavaScript and CSS(压缩JS和CSS)

压缩就是删除代码中不必要的字符来减小文件大小，从而提高加载速度。当代码压缩时，注释删除，不      需要的空格（空白，换行，tab）也被删除。    混淆是对代码可选的优化。它比压缩更复杂，并且可能产生 bug。在对美国 top10 网站的调查，压缩可减小 21%，而混淆可减小 25%。 除了外部脚本和样式， 内联的脚本和样式同样应该被压缩。

Minimize DOM Access(最小化DOM访问)

用 JS 访问 DOM 元素是缓慢的，所以为了响应更好的⻚面，你应该：

缓存访问过的元素的引用

在 DOM 树外更新节点，然后添加到 DOM 树（虚拟dom）

Reduce DNS Lookups(减少DNS查询)

就像电话簿，你在浏览器地址栏输入网址，通过 DNS 查询得到网站真实 IP。 DNS 查询被缓存来提高性能。这种缓存可能发生在特定的缓存服务器（ISP/local area network维护），或者用户的计算机。DNS 信息留存在操作系统 DNS 缓存中（在windows中就是 DNS Client Serve ）。大多浏览器有自己的缓存，独立于操作系统缓存。只要浏览器在自己的缓存里有某条DNS 记录，它就不会向操作系统发DNS 解析请求。

gzip 组件 减少 DNS 查找 压缩 JS 避免跳转 设置 ETags

Post-load Components(延迟加载组件)

再看看你的⻚面然后问问自己，“什么是⻚面初始化必须的？”。剩下的内容和组件可以延迟。JavaScript 是理想的（延迟）候选者，可以切分到 onload 事件之前和之后。比如拖放的 js 库可以延迟，因为拖动必须在⻚面初始化之后。其它可延迟的包括隐藏的内容，折叠起来的图片等等。

Tips：所有文章中提到的组件泛指各种文件，如：HTML、CSS、JavaScript、图片、视频、音频等等。

Preload Components(预加载组件)