优化专题

总结了下工作当中遇见的几个优化的思路和方法

缓存优化

性能优化第一步，便是管理好页面的缓存，避免重复下载资源。否则，即增加服务器压力，又消耗用户的流浪，这点尤其是做手机端的时候需要格外注意。

浏览器缓存机制

1. 访问页面，请求各种资源，浏览器检查本地是否有缓存。

2. 如果有，检查资源是否过期。没过期，直接使用缓存。过期了，便向服务器发出请求。

3. 发出的请求中会带上etag和last-modified首部字段。

4. 服务器会通过Etag和last-modified来判断浏览器缓存的资源是否已经不可用。

5. 如果资源仍然有效，便返回304告知浏览器使用缓存。否则返回更新后的资源。

按照这一套逻辑，便可规划好网站的缓存。

如果资源提前过期，如何通知浏览器更新资源？

通常无法做到这一点，因为浏览器发现资源没过期，根本不会发出请求。 但是可以通过修改资源的网址来实现。所以需要给资源文件名加上版本号或者随机标记。例如 style.1234.css。 也就是说，不要让浏览器缓存html文件，否则，过期之前，浏览器都不会请求服务器。

加载时优化

消灭不必要的下载

最近做的项目，属于二次开发，本身比较臃肿，又是以前的MVC框架开发的，所以依赖特别多，只是加载js文件就能有将近四百个左右。

原来的处理方法是放在cdn上，如果再次优化考虑从构建和合并文件的思路上来做。

最好的优化，便是根本不下载资源。所以要尽量减少比不要的资源。

1. 评估所有依赖是否必要，权衡利弊。

2. 依赖的下载路径是否可靠，不可用时候是否会阻碍整个页面。

3. 产品设计时候就需要抛弃浪费带宽的设计。

压缩所有可以压缩的资源

代码自不用说，都是文本，全部压缩。

优化图片

1. 去掉不必要的图片

2. 多使用css3来代替图片

3. 使用压缩率更高的图片。特别是gif动图，一些视频格式（H.264或WebM）的体积比gif小很多。

4. 用艺术字字体，不要用图片

5. 仔细权衡图片和文字的关系。要表达一个意思，可能一图胜千言。多了一张图片，反而节省了大量文字。

6. 使用progressive jpeg。相比随着数据下载从上到下显示的baseline jpeg，progressive jpeg是由模糊到清晰，用户体验好，也不会导致reflow。

7. 图片分辨率要尽可能小，避免图片分辨率大于显示分辨率。

8. 为使用更新浏览器的用户提供更现代的图片格式。

9. 多种分辨率的位图供不同页面大小使用。

10. 要给标签指明宽高，否则会导致reflow。

11. 使用HTTP/2。比如，精灵图是由很多小图片组成的一张大图片，可以减少http请求。但是却难以缓存，修改一个小图片，导致所有小图片缓存失效。HTTP/2，一个链接内可以发起多个请求，便无需使用精灵图。

优化字体

1. @font-face 中unicode-range可以制定字符范围，用来避免下载不需要的语言的字符。

2. 确保字体都被压缩过。

3. 用@font-face的display属性和FontFace对象管理好字体加载时的逻辑。

关键渲染路径

浏览器渲染一张网页通过以下步骤。

1. 处理 HTML 标记并构建 DOM 树。

2. 处理 CSS 标记并构建 CSSOM 树。

3. 将 DOM 与 CSSOM 合并成一个渲染树。

4. 根据渲染树来布局，以计算每个节点的几何信息。

5. 将各个节点绘制到屏幕上。

优化关键渲染路径，便是指优化这个渲染过程，让网页尽快呈现出来。

css

• CSS文件会阻塞渲染。浏览器构建好DOM树后，必须等待CSSOM树构建完成。

• 在文档顶部放置外联CSS的标签，让浏览器尽快请求CSS文件。

• 避免在css文件中使用@import，因为只有包含import的文件被下载编译后，浏览器才会发现并下载import的css。

• 可以考虑使用内联CSS，无需额外请求，不会阻塞渲染。

js

• 在CSSOM构建完成前，js不会开始执行。

• js也会阻止DOM树构建。除非在