前端性能优化知识梳理

特性提升前端开发升阶中不可或缺的一块知识结构，这一段时间准备专研一下。实际上平常看的文章内容，及其新项目中的实践活动也或多或少有一些，仅仅不了管理体系，不足深层次。此篇先做一个大致的梳理，然后各个击破。

前置知识

1. 浏览器渲染原理

这个不必多说，优化是建立在对渲染原理的理解之上的，所以需要知道从发出请求到渲染出完整界面都发生了些什么，然后才能定位分析哪个阶段出现了瓶颈，并针对优化。

2. 性能分析与统计

没有统计的性能优化是没意义的，总不能用肉眼去观察前后的区别吧。所以要拿一把标尺去衡量。常用的方式有：

1. 通过devtool分析渲染瓶颈
2. 上报用户真实环境信息
3. 用phantomjs统计性能

基本的优化手段

一些优化手段是分场景的，比如动画、滚动。但是一些基本手段是哪里都通用的，不分PC和移动端。这算是编程规范吧，例如：

1. <link><script>标签的位置
2. 内联关键css，比如loading的样式
3. DOM缓存
4. 避免是for循环中操作DOM
5. 简化布局层级
6. 释放无用的内存
7. 合并渲染层
8. ...

资源加载处理

如果制定合理的资源加载策略，比如：

1. 资源预加载
2. 资源懒加载
3. 缓存资源

静态资源处理

这一部分工作的目的是为了减少资源体积，减少http请求数，常规手段有：

1. 资源压缩与打包
2. 图片的压缩
3. css sprite
4. 中文字体的压缩

动画性能优化

动画是最考验性能的，因为要频繁渲染，这其中涉及的知识很多，但都很基础。大致包含以下内容：

1. 重绘与回流的理解
2. opacity和transform的优先使用
3. 对requestAnimationFrame与setTimeout的理解
4. 避免读取属性触发渲染
5. 所谓的硬件加速
6. 合并渲染层

滚动优化

滚动优化尤其在移动端比较重要，这也是老生常谈的一个话题。由于滚动的时候可能会附加各种js逻辑，所以场景就有可能错综复杂，除去基本的优化手段外，还需额外考虑：

1. 函数节流
2. 模拟滚动的技术细节
3. 动态删节点技术

渐进式渲染

这个话题较为开放吧，所谓渐进式渲染就是把用户最先看到的，以及最先使用的功能首先呈现。一般来讲会针对几个指标进行优化，如：

1. 白屏时间
2. 首屏时间
3. 关键功能可用时间
4. DOM树构建完成时间
5. 首页资源加载完毕时间

这些指标的优化，更多的是对具体页面的分析，有些还跟业务相关。依靠的还是对渲染过程的深入理解，以及对优化手段的合理使用。

大致梳理出来的就这些，大家还有补充的吗？

后续的一段时间，我将对以上知识进行逐个剖析，产出文章、示例代码，乃至PPT、视频。只为将这块知识体系进行彻底理解。

本文来源于：前端性能优化知识梳理-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。