前端性能优化

作为前端工程师，拥有巨大的能力和责任，是用户的最后一道防线，前端直接决定用户的体验

前端性能的重要性

事实上，只有10%--20%的最终用户响应时间是花在从web服务器获取html文档并传送到浏览器中的。如果希望有效减少页面响应时间，就必须关注剩余80%--90%的最终用户体验

了解用户时间都花在等待哪些地方？

• 5%html文档
• 95%等待页面组件下载（图片，脚本，样式表，flash等）
• 小部分时间花在解析html,脚本和样式表

因此，改善响应时间的最简单途径就是减少组件的数量，并由此减少http请求的数量

1. 减少http请求

• 图片地图

map,area 标签

• css sprites

将多个图片合并到一个单独的图片中
利用background-image,background-position将html元素放到背景图片中的期望位置上

• 内联图片
• 合并脚本和样式表

2.使用内容发布网络

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

3.添加expires头

如何配置组件，最大化利用浏览器缓存改善页面性能

1996 http 1.0 expires 日期

1999 http 1.1 cache-control：max-age=484200 时间数

header 里面设置'Cache-Control':'max-age=600', 来对请求进行缓存。

2015 http 2.0

缓存文档过期之前，缓存可以以任意频率使用这些副本，无需与服务器联系

3.1 条件再验证

• 客户端if-modified-since服务端last-modified

只有自某个日期之后资源发生了变化之后，才会指示服务器执行请求

• 客户端if-none-match服务端etag

3.2控制缓存的能力

• pragma:no-cache

cache-control:no-store

cache-control:no-cache

强制请求新资源，防止缓存提供未经证实的已缓存对象

• cache-control:max-age
• expires日期
• 不附加过期信息，让缓存确定自己的过期日期
• cache-control:must-revalidate的响应会被存储在本地缓存中，在后续请求时，该指令告知缓存：在事先没有与原始服务器进行再验证的情况下，不能提供这个对象的陈旧副本，但缓存仍然可以随意提供新鲜的副本。

4.压缩组件

减小http响应的大小来减少响应时间。如果http请求产生的响应包很小，传输时间就会减少，因为只需要将很小的包从服务器传送到客户端，这以效果对速度较慢的带宽尤其明显

content-encoding:gzip,default

压缩成本

服务端会花费额外的cpu周期来完成压缩，客户端要对压缩文件进行解压缩，要检测收益是否大于开销。经验是对大于1kb或2kb的文件压缩

5.将样式表放在顶部

使用link标签将样式表放在文档的head中，样式表在页面中的位置不影响下载时间，但是会影响页面的呈现

白屏：浏览器在等待所有样式表下载完成，反之浏览器可以逐步呈现，但要承担闪烁的风险

6.将脚本放在底部

将脚本从页面的顶部移到底部，页面可以逐步呈现，也可以提高下载的并行度

7.避免css表达式

css表达式是动态设置css的一种强大（并且危险）的方式

8.使用外部javascript和css

9.减少DNS查找

操作系统会缓存DNS

10.精简javascript

从代码中移除不必要的字符，优化css,合并相同的类，移除不使用的类

11.避免重定向

重定向会使得页面变慢

12.删除重复脚本

13.配置ETAG

14.避免重排和重绘

浏览器渲染的重排与重绘

浏览器渲染html

html解析成DomTree,css解析cssDomTree
DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。

节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
渲染绘制(重绘)，这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。

重排

实际上是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置。

• 页面首次渲染。
• 浏览器窗口大小发生改变。
• 元素尺寸或位置发生改变。
• 元素内容变化（文字数量或图片大小等等）。
• 元素字体大小变化。
• 添加或者删除可见的DOM元素。
• 激活CSS伪类（例如：:hover）。
• 设置style属性
• 查询某些属性或调用某些方法。

重绘

相比重排，重绘就简单多了，所谓重绘，就是当页面中元素样式的改变并不影响它在文档流中的位置时，例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。

position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局