前端性能优化

图片

1. 可以考虑图片的备选技术，例如CSS效果，CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得很清晰，占用空间也很小。网络字体，很多图标哭也是用字体的方式提供，保持文字的可搜索性的同时扩展显示的样式。

2. 各类图片特别总结：

• jpg：体积比较小
• png: 可以透明，体积比较大（需要清晰显示颜色丰富的图片使用png）
• gif：只支持全不透明或者全透明，不支持半透明
• svg：矢量图，地图类用的比较多，很小

3. 页面中图片的加载效果，是图片文件本身决定的

• 小波算法：从模糊变清晰
• 离散余弦变换：逐行加载显示

4. CSS-Sprites
   雪碧图通过合并文件减少网络请求，提升页面加载性能。
   推荐
   鹅厂的gopng。http://alloyteam.github.io/gopng（手动）
   狼厂的fis。http://fis.baidu.com （自动）

5. 未来响应式图片设计思路（未被浏览器支持）：

<picture>  
    <source srcset="large.jpg" media="(min-width: 800px)">  
    <source srcset="medium.jpg" media="(min-width: 600px)">  
    <img srcset="small.jpg">  
</picture> 

视频

1. 播放器形式

• video标签：HTML5引入的标签。
  优点：不需要下载额外资源，控制简单有较为完整的API。
  缺点：每个浏览器的外观不一样。
• Flash播放器：
  优点：兼容性好，只要有flash player播放器插件，都可以进行播放
  缺点：需要下载额外的swf播放文件才可以播放，浏览器必须有flash player插件。UI定制需要写as。flash player版本碎片化。

2. 目前的方案：
   Flash+HTML5两种方案结合。
   Flowplayer 功能简介，使用方便。
   https://flowplayer.org/player/
   VideoJs功能强大，使用复杂。
   http://videojs.com/

3. video标签的UI定制
   自定义工具栏，将播放器相关事件绑定到自定义的工具栏上。

4. 让视频第一时间加载

• 把初始化播放器的代码执行顺序提前。
• 把播放器播放时所需要的资源提前。
  因为浏览器会默认把多媒体的资源放在最后加载，所以选用样式表的类型来提前加载多媒体资源。

缓存技术选型

1. 前端最常用的资源：
   CSS Javascripts
2. SessionStorage
   优点：临时存储，关闭页面标签自动回收，不可以跨页面交互。（刷新 时不会释放）
   缺点：不能存储持久化的信息。
3. cookie
   优点：兼容性最好，几乎所有浏览器都支持。
   缺点：大小有限制。每次发送请求，请求头里都会带着cookie。
4. HTML5本地数据库(IndexedDB)
   优点：就是一个完整的数据库。
   缺点：学习成本高。
   存在浏览器的缓存文件中。
5. Localstorage
   优点：兼容性中等，操作简单，key-value形式。
   缺点：存在大小限制。(5M左右)
   存在浏览器的缓存文件中。

高性能DOM

1. reflow:render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
2. repaint:当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
3. DOM元素的添加、修改、删除会触发回流+重绘
4. 仅修改DOM元素的字体颜色，只会触发重绘。
5. 回流一定触发重绘，但是重绘不一定触发回流。
6. 减少回流和重绘

• display只会影响render树，不影响dom树。
• 使用DocumentFragment创建完之后一次性加入document

7. 在chrome开发者工具中，可以看到重绘：

   
   image.png