前端性能优化基础知识(慕课网)
在页面样式都能实现以后，就开始考虑：同一个效果，该用什么样的方式和代码去实现它比较规范？前两天逛幕课网发现了两门课程–《前端性能优化-基础知识认知》和《前端性能优化-通用缓存SDK》
reflow和repaint
reflow（回流）：是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。因为回流可能导致整个dom树的重新构造，所以是性能的一大杀手
repaint（重绘）：简而言之就是重新绘制啦~
关系：位置改变触发回流，视觉改变触发重绘。回流一定触发重绘，重绘不一定触发回流。/* 这句话挺关键的*/
以下操作会引起回流：
1、改变窗口大小
2、font-size大小改变
3、增加或者移除样式表
4、内容变化（input中输入文字会导致）
5、激活CSS伪类（:hover）
6、操作class属性，新增或者减少
7、js操作dom
8、offset相关属性计算
9、设置style的值
如何减少页面回流：
1、一起变化 如果要改变一个元素的样式，可以将所有样式集中在一个class上面一次变化，而不是变化几次。
2、具有动画效果请使用absolute
因为absolute元素的改变对其它元素的回流影响不大，所以我们的动画效果的元素还是将他弄成absolute吧。
3、避免使用表格布局（记住只是布局哦，我们数据还是应该用表格的）
请绝对不要使用CSS表达式，性能杀手啊，特别是IE
4、在最末改变元素
因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。
5、动画移动时候，要控制
比如我们拖动元素时候，我是在他x或者y坐标改变5px才操作，这样虽说降低了平滑度，但是对性能有提高。
以下操作会触发重绘：
1、改变字体
2、增加或者移除样式表
3、内容变化
4、激活css伪类，比如：hover
5、脚本操作dom
6、计算offsetWidth和offsetHeight属性
7、设置style属性的值
尽量避免以上操作，若不能避免，尽量多把次操作组合成一次操作
图片与CSS
一张普通的照片比非常强大的效果库也大了许多。用html、css、svg效果代替图片，不但需要的空间很小，在多设备，多分辨率下都能很好的工作。并且css动画可以拿到回调，图片动画无法拿到回调。
图片：
jpg: 体积较小，全名jpeg (使用场景：颜色丰富) png: 可移植网络图形格式，体积较大（使用场景：清晰，显示颜色丰富）
gif: 图像互换格式，一般全透明或全不透明，不支持半透明（使用场景：需要较通用的动画）
svg: 可绽放矢量图形，体积小
apng,webp格式出现较晚，尚未被web标准所采纳
图片处理CSS-Sprites,雪碧图
雪碧图呢就是把多张图合并成一张，然后使用backgroung-position来定位显示它了，这样会减少图片的http请求数量。
以下是一些工具：
http://alloyteam.github.io/gopng
http://fis.baidu.com
http://gruntjs.com
yahoo军规
https://www.cnblogs.com/xianyulaodi/p/5755079.html 以下yahoo军规内容来自这篇博客，详情请看原链接。这些规范，我们在实际开发中，要根据自己网站的特性和需要来运用。
内容部分
1.尽量减少HTTP请求数（减少页面提交的HTTP请求数）
2.减少DNS查找
3.避免重定向 （因为重定向要重新加载）
4.让Ajax可缓存
5.延迟加载组件（什么才是一开始渲染页面所必须的？其余内容都可以等会儿）
6.预加载组件（通过预加载组件可以充分利用浏览器空闲的时间来请求将来会用到的组件（图片，样式和脚本）。用户访问下一页的时候，大部分组件都已经在缓存里了，所以在用户看来页面会加载得更快）
7.减少DOM元素的数量（在控制台输入，查看当前页的dom数量，按f12在控制台输入
document.getElementsByTagName(‘*’).length）
8.跨域分离组件
9.尽量少用iframe
10.杜绝404（因为没必要的请求就不要了吧~）
css部分
11.避免使用CSS表达式
12.选择舍弃@import
13.避免使用滤镜
14.把样式表放在顶部（把样式表放在head里能让页面逐步渲染，看起来加载地更快）
js部分
15.去除重复脚本
16.尽量减少DOM访问
（
用JavaScript访问DOM元素是很慢的，所以，为了让页面反应更迅速，应该：
● 缓存已访问过的元素的索引
● 先“离线”更新节点，再把它们添到DOM树上
● 避免用JavaScript修复布局问题
）
17.用智能的事件处理器（推荐使用事件委托）
18.把脚本放在底部
javascript, css
19.把JavaScript和CSS放到外面
20.压缩JavaScript和CSS
图片
21.优化图片
22.优化CSS Sprite
23.不要用HTML缩放图片（不要因为在HTML中可以设置宽高而使用本不需要的大图，加载会占用时间哟）
24.用小的可缓存的favicon.ico
cookie
25.给Cookie减肥
26.把组件放在不含cookie的域下
write by:tuantuan
