前端性能优化
作为前端工程师，拥有巨大的能力和责任，是用户的最后一道防线，前端直接决定用户的体验
前端性能的重要性
事实上，只有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，这样不会影响其他元素的布局