Web前端的性能优化

这个世界上有很多编辑语言，几乎在任意一个编程语言中都有性能优化这个课题。性能优化需要根据语言、系统等具体的特性来具体对待的，但尽管如此，在不同的编程语言中，仍有大量的相同的优化方案；本文先讲这些相同的优化方案，然后再讲针对Web前端的具体优化方案；如下：

---

目录

一. 项目优化方案的分类
二. 所有语言共同的优化方案
三. JavaScript的代码片断优化方案
四. CSS的代码片断优化方案
五. Angular的代码片断优化
六. Vue的代码片断优化

---

内容

一. 项目优化方案的分类

若对一个项目进行充分的性能优化，我认为需要从以下几个方面来进行优化：

1. 应用程序架构优化；
2. 设计模式优化；
3. 代码片断优化；
4. 应用效果的展现速度优化；
5. 应用程序体积优化；

其中，我认为 应用程序架构 和 设计模式 的优化原则者属性优秀代码原则(详见《优秀代码的原则》)，优秀代码的原则如下：

1. 高复用；
2. 低耦合；

二. 所有语言共同的优化方案

1. 应用效果展现速度的优化

1. 提高应用启动速度；
   尽量减少应用启动时非必须的逻辑和运算，以提高应用的启动速度；

2. 对于运算开销较大的业务，在使用前提前计算；

3. 动画的时间不要设置太长；

4. 在执行耗时的逻辑时，尽量添加动画提示；

2. 应用程序体积的优化

1. 尽量给标识符（如：变量名、属性名、函数名等）取较短的名字，这样代码的体积更小；

2. 压缩代码，比如：除去多余的空格、换行等等；

3. 合并零碎的需要通过网络请求的小文件；

4. 压缩文件体积；

5. 尽量把各种背景图拼合成一张；

3. 代码片断优化方案

1. 对于大开销的操作，尽量在执行这些操作前先判断下操作的执行条件，以减少大开销操作的频率；
   如：因为加锁操作要比普通代码耗费更多的资源，所以，如果锁内的操作有执行条件时，尽量再把执行条件在加锁之前再判断一次，以减少不必要的加锁操作；

2. 对于频繁执行的操作，可以在这些操作前加个开销较小的必要条件，以减少操作的执行频率；
   如：假设有需要频繁判断字符串string1是否包含字符串string2；由于这种处理操作会涉及到字符级别的遍历和比较，所以也算是一个较耗性能的处理，为了减少这个操作的执行频率，我们可以加个执行条件：string1.length >= string2.length；因为获取length仅仅是获取一个属性值，相对判断是否包含另外一个字符的操作所需的处理资源要少很多，所以在频繁执行是否包含字符串的操作时，加此判断条件能大大提升性能；

3. 对于可能用到的对象尽量使用懒加载；

4. 合理的充分利用线程；

5. 对于经常使用的对象和通过密集型计算得来的不常变的数据，尽量进行缓存；

6. 对于经常被实例化的类，尽量通过设置此类已有的实例的属性来重用已有的实例，从而避免重新创建对象；

7. 选择合适的数据持久化技术；

8. 在密集型创建对象的地方，适时手动释放自动释放池，或者使用单独的自动释放池；

9. 尽量使用代码量少的方案；

10. 尽量把for语句的初始化语句、条件语句、递增语句中的多层访问和计算放在for语句外面；

11. 如果不考虑可读性，应尽量使用连续调用（如链式调用），这样可以减少查找变量的次数，从而可以提高性能；

以上内容源自我的另一篇文章《性能优化—公共部分》

---

以下内容是针对Web前端的优化方案：

三. JavaScript的代码片断优化方案

1. 用局部变量保存 访问开销较大的值；
   如：对于DOM元素的访问需要很大的查找开销，如果需要重复访问某些DOM元素，则可以声明个局部变量保存这些DOM元素，然后通过这个局部变量访问这些DOM元素；

2. 如果在内层函数中经常访问全局属性，则在函数内部创建局部变量保存window对象，然后通过该变量访问全局属性；

3. 如果一个操作需要大量地访问某个对象的属性或方法，则可以用with操作符把该对象加到作用域链的最前端，然后把那些大量的访问操作放在with操作符的代码块里；
   如：

       for(var i = 0; i < largerNum; i++){
           obj.attr1 ...
           obj.attr2 ...
           obj.attr3 ...
           obj.attr4 ...
           ...
       }
       
   

   该代码片断可优化为：

    with (obj){
        for(var i = 0; i < largerNum; i++){
            attr1 ...
            attr2 ...
            attr3 ...
            attr4 ...
        ...
        }
    }
   

4. 因为undefined是JavaScript中的全局属性且经常被访问。所以可以将undefined作为参数传递给函数，这样在函数内部在使用undefined的时候就不会再查找到全局作用域中了，从而提高访问速度；

5. 闭包的嵌套不要太深；因为闭包嵌套越深，占用的内存空间就越大；

6. 不要使用过多的闭包；因为闭包较占内存；

7. 尽量减少执行字符串的拼接操作；
   因为字符串是不可变的，所以在进行字符串连接时，需要创建临时字符串。频繁创建、销毁临时字符串会导致性能低下；

8. 当连续的if分支语句较多时，尽量用switch语句实现if的逻辑，并且把执行频率较高的分支放在较上面；

9. 对于多个DOM的操作，优先考虑使用重用机制；

10. 避免重复创建相同的逻辑的函数对象；

11. 当多个DOM元素需要添加相同的事件处理程序时，尽量把事件添加到这些DOM最近的共同评选上，避免给每个DOM元素添加事件处理程序；

12. 合理使用短路操作符；

13. 对于if判断语句和三元运算符? :，优先使用三元运算符? :；

14. 同样的效果，对于 CSS实现方案 和 JS实现方案，优先使用CSS实现方案；

15. 如果需要用JS实现动画，尽量使用requestAnimationFrame函数实现动画驱动，避免使用setTimeout 和 setInterval 函数实现；

16. 对于 innerHTML、innerText、textContent，因为innerHTML会把文本解析为HTML，而 innerText 会受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会，而textContent不会被作为HTML解析，也不会触发重排（reflow），所以，当向元素中插入纯文本时，优先考虑使用textContent；

四. CSS的代码片断优化方案

1. 尽量使用独立属性代替复合属性，因为复合属性相对独立属性有更大的解析开销；

五. Angular的代码片断优化

1. 缩小变化监测范围；
   通过变化监测类ChangeDetectorRef的实例的markForCheck(): void方法标记变化监测的路径为根组件到该组件；

2. 缩小变化监测时间；
   通过变化监测类ChangeDetectorRef的实例的detach(): void 分离变化监测器，然后在适当的时机通过 detectChanges(): void 手动监测变化 或者 通过reattach(): void 再重新安装上变化监测器；

3. 变化监测策略能用OnPush的不用Default；

4. 模板中的表达式的计算量能少则少；因为Angular的变化监测机制，使得模板中的表达式执行频率很高；

5. 尽量使用NgForTrackBy指令来替代NgFor指令；

六. Vue的代码片断优化

1. 相对于计算属性computed、方法methods、观察watch，优先考虑使用计算属性实现，因为计算属性会缓存它的值，只有当计算属性的相关依赖发生改变时才会重新求值；

2. 尽可能最大化地让Vue复用可用的元素，即，在用key管理可利用元素的地方看是否有其它更快速的替代方案；

3. 适当地选择v-if和v-show，当元素被渲染后，需要经常被切换时，使用v-show；否则，使用v-if；

4. 对于不会变化的组件或元素，尽量使用v-once指令以使其路过重新渲染；

5. 对于仅使用JavaScript钩子进行过渡和动画的元素，尽量添加v-bind:css="false"，这样Vue就会跳过css的检测；从而提高性能；

6. 对于界面布局相同的路由组件，尽可能用同一个路由组件通过路由参数来实现与渲染多个路由组件的效果，因为这不需要销毁再创建路由组件；