前端性能优化

前端性能优化

• 这两天看了一本《高性能网站建设指南》，主要讲关于前端方面性能优化的内容，在这里简单做一个总结整理

规则1. 减少HTTP请求

​ 一个页面的展现，只有10%-20%的最终用户响应时间花在了接受请求的HTML文档上，剩下的时间都花在了HTML中所引用的其他组件的请求上，所以我们优化的最简单的方式就是减少请求的数量。

• 使用CSS Sprites即雪碧图，减少了请求数量的同时也降低了下载量。合并后的图片会比分离的图片的总和要小，这是因为它降低了图片自身的开销（颜色表、格式信息等）
• 使用base64内联图片
• 合并脚本和样式表

规则2. 使用内容发布网络

• 如果服务器离用户更近，则一个HTTP请求的响应时间将缩短。

• 内容发布网络（CDN）是一组分布在多个不同地理位置的Web服务器，用于更加有效地想用户发布内容。

• 除了缩短响应时间之外，备份、扩展能力和进行缓存

• 还有助于缓和Web流量峰值压力。

• CDN用于发布静态内容。

规则3. 添加Expires头

• 使用缓存来减少HTTP请求的数量以及大小，是页面加载得更快。
• Expires头使用一个特定的时间，它要求服务器和客户端的时钟严格同步。而且过期日期需要经常检查。
• 强缓存在HTTP1.1引入了Cache-control使用max-age来指定缓存多久，相当于定义了一个更新窗口。
• 如果我们将组件配置为强缓存，当改变时用户如何获得更新？
  • 当设置强缓存没过期，浏览器就会一直使用缓存中的版本，浏览器不会检查任何更新。
  • 为了确保用户能拿到最新的，需要修改相关文件的文件名。

规则4. 压缩

• 通过减少HTTP响应的大小来减少响应时间
• HTTP1.1开始，可以通过HTTP请求中的Accept-Encoding头来表示对压缩算法的支持
• 服务器在看到这个头，就会使用客户端支持的压缩算法中的一种来压缩响应，通过响应中的Content-Encoding头来通知客户端
• 压缩的成本有 服务端需要消耗额外的CPU来完成压缩，客户端需要解压缩

规则5. 将样式表放在顶部

• 我们期望页面能逐步加载，为用户提供可视化回馈，可以让让用户知道系统没有崩溃，指出了大概还需要多久，最后能为用户提供一些可以看的东西，使等待不那么无聊。在我们这里HTML页面就是进度指示器。
• 将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现。为避免当样式变化时重绘页面中元素，浏览器会阻塞内容逐步呈现。这样就会导致白屏现象。
• 如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容就会遇到FOUC即无样式内容闪烁。
• 白屏就是浏览器在尝试修改前端工程师犯的错误，白屏就是对FOUC问题的弥补
• 我们应该使用LINK标签将样式表放在文档HEAD中

规则6. 将脚本放在底部

• 脚本会阻塞对其后内容的呈现
• 脚本会阻塞对其后相关文件的下载
• 如果将脚本放在顶部，整个页面的呈现和下载都会被阻塞，直到脚本加载完毕，也会产生白屏

规则7. 避免CSS表达式

规则8. 使用外部js和css

• 纯粹而言，内联更快一些
• 但是使用外部js和css可以利用缓存来让二次访问速度大大提升

规则9. 减少DNS查找

• 通过使用Keep-Alive来保持长连接，从而避免TCP/IP开销，也能减少DNS查找
• dns在本地 浏览器和操作系统一般都有缓存

规则10. 精简JavaScript

• 移除代码中的不必要字符以减小其大小
• 精简css
  • 移除注释和空白
  • 使用缩写 0px -> 0 #660066 -> #606

规则11. 避免重定向

规则12. 删除重复脚本

规则13. 配置ETag

• HTTP1.1中协商缓存
• ETag的问题
  • ETag通常使用某些属性来构造它，对于特定的服务器来说时唯一的，当浏览器从一台服务器上获取原始组件（即文件），之后又向另外一台不同的服务器发起请求，ETag是不会匹配的，而对于服务器集群来处理请求的网站来说，这是很常见的一种情况。所以现在大多网站都在使用Last-modified

规则14. 使ajax可缓存