实战录 | 前端性能优化二三事儿

云端卫士的新栏目《实战录》将会定期分享一些我们的工程师伙伴们在产品研发的过程中总结的实践经验，希望对于热爱技术且关注安全领域的受众有所裨益。本期分享人为云端卫士工程师束海瑞，将带来前端性能优化的分享。

目标前端优化的目标

1.从用户角度而言，优化能够让页面加载的更快，对用户的操作相应更及时，给用户带来更为友好的体验，提高我们产品的市场竞争力。

2.从公司角度而言，优化减少了页面请求数，降低了系统负载，减少了资源所占的带宽，节省了客观的费用。所以适当的前端优化是重要的，也是必须的。

原则前端优化的原则

1.性能优化的时期不宜过早，从项目实践的角度考虑，过早的性能优化可能会给后期的项目扩展和维护带来麻烦。

2.避免过度的性能优化，特别是破化了了代码可读性和可维护性的性能优化更不可取。

本文将从工程，代码，策略方面对前端性能优化的一些方面展开简单论述。工程工程指的是我们通过工程化的方法对前端项目，运行环境进行调优。工程化的特点是简单易行。它不需要修改任何代码就可以应用在已有的任何前端项目上，是一种最直接和有效的前端优化方案。

服务器(server)端

1.开启web服务器的gzip压缩功能，减少网络传输资源消耗，提高网页加载速度

2.合理设置页面静态资源的过期时间，充分利用浏览器缓存，减少网络资源加载

客户端(client)端

1.压缩，合并页面静态资源，减少网络传输消耗(gulp)

2.利用浏览器加载策略，使用多域名提高静态资源并发传输数量(cdn)

3.引入模块加载方案，以异步，非阻塞的方式对页面资源进行加载(require)代码代码指的的是通过提高代码质量，优化相关算法，提升页面性能。代码级的性能优化涉及的方面比较多。我们没有办法保证我们的所有代码都是高性能的，但是我们可以在项目出现性能的时候对相关核心代码进行重构来提升整体的项目性能。前端方面比较容易出现性能为题的方面通常在一下方面。

DOM Scripting

DOM操作是前端开发工作中一个特别频繁的操作，合理的DOM操作可以帮助我们有效的提升页面性能。关于DOM操作，要求我们要掌握和了解页面的Reflow和Repaint原理，尽量避免页面的Reflow。DOM事件也是性能优化中一个比较重要的方面，我们要充分利用事件的冒泡特性进行事件绑定，避免大量的事件绑定，减少不必要的开销。

Data Access熟悉了解JS的闭包，原型琏等语言结构，优化数据存取操作。代码优化是个长期的过程，涉及到的方面也非常多，这里推荐大家一本书《High Performance JavaScript》。

策略当在资源一定的情况下，我们可以通过一定的策略，优化前端性能，提升用户体验。按需加载按需加载页面相关模块，避免不必要的资源消耗异步加载对页面中比较耗费资源的模块进行异步加载，从而提升页面整体的加载速度。异步渲染当页面内容比较多时，只对页面当前的可视区域进行渲染，可显著提高页面首屏展现速度。资源销毁对于单页面应用，应及时销毁闲置的或者不可见的组件资源。

缓存充分利用高级浏览器特性，sessionStorage, localStorage对于页面元素进行缓存。页面展现从设计方面，优化页面展现方式。避免太多的图表，动画出现在同一个页面，否则再好的优化依然不会有良好的性能。当在具体选择使用策略的时候，我们可以针对具体的情况，综合使用一种或几种策略进行优化。

最后前端优化涉及的方面还有很多，在具体的实践中，我们也可以发挥我们的想象和创新。不论我们使用何种策略和方法，只要最终达到了效果，就是好方法。正所谓白猫黑猫，能逮到老鼠就是好猫。