前端性能优化基础知识--幕课网

作为一个前端小码农，在页面样式都能实现以后，就开始考虑：同一个效果，我该用什么样的方式和代码去实现它比较规范？前两天逛幕课网发现了两门课程–《前端性能优化-基础知识认知》和《前端性能优化-通用缓存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. 避免使用表格布局（记住只是布局哦，我们数据还是应该用表格的）
4. 请绝对不要使用CSS表达式，性能杀手啊，特别是IE
5. 在最末改变元素
   因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。
6. 动画移动时候，要控制
   比如我们拖动元素时候，我是在他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

浏览器的加载通道有限，js绘制dom节点会阻塞通道，加载较大的图片等资源会占用通道很长时间，导致页面加载缓慢。（这就是使用缩略图的原因啊）

优化出发点

前端复用：文件复用—模块复用
后端复用：通用接口复用，ui模块复用，通用工具api复用
选择加载方式（提升用户体验）：

• 同步加载
• 分级加载（先给用户重要信息，后加载不重要的信息）

• 按需加载（不触发就不加载）

  

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的域下

其它

其它的一些知识，做一些简单的了解吧

有时候我们看到一些网站的图片加载效果是不同的，这是因为图片的压缩算法不同：
模糊到清晰–小波算法
逐行显示—离散余弦变换

对于网站内的播放器的一些优缺点
vidwo:
优点：不需要下载额外的资源
缺点：每个浏览器的外观不一样，需要自己写ui来统一样式
flash:
优点：兼容性好，有flash player就可进行播放
缺点：需要下载swf谢谢文件才可以播放，浏览器必须有flash player插件,flash player版本碎片化，ui定制需要写AS

目前方案：
flowplayer 功能简洁，使用方便
https://flowplayer.org/player/
videoJs功能强大，使用复杂
http://videojs.com