前端运行效率优化小指南

前端运行效率小指南

• 近日，由于一老掉牙项目需求增多，而老旧的Jquery架构维护性差，结构性不好，遂产生将其Vue化重构的念头，但Vue化重构后的运行效率并不理想，虽然使得更可维护性变得更好，但低下的运行效率也是无法忍受的
• 所以，本文章特此来记录一下运行效率优化的小提示，非专业
• 提示：本项目Vue化并非工程化，而是以引入vuejs文件的方式将其重构，jQuery操作得以保留，降低了重构成本，增加了重构效率，所以工程化（脚手架）项目并不适用于此方法工程化项目的打包工具多数情况下已经能够满足运行效率需求

Tips

---

1. 抛弃 Vue.js 使用 Vue.min.js

• 这个在Vue官网的说明已经很清楚了，如果你害怕报错等问题，大可以在开发环境中使用Vue.js，而准备上线之后改用vue.min.js，由于体积的变小，所以大大增加了服务器的调用速度

2. 将less样式表编译为css样式表

• 很多时候由于需要提升开发效率和可管理能力，使用了 less sass等第三方样式表，但其js文件的编译器与现场编译的操作无疑为网页运行带来的更大的开销，所以，普通的css才是生产环境需要的

3. Echarts不要反复初始化

• 本项目原有特点就是每一次点击不同的机构或者不同的属性，将其Echarts所在的DOM元素进行重新初始化，都会发起ajax异步请求，等到请求返回之后，再将值赋给Echarts；这样的开销显然是没有必要的，所以，每次重新获取数据之前，如果为了防止混淆，直接将数据赋值为空数组就搞定了

4. 如非必要 避免大量的if elseif改采用 switch

• 这个涉及到底层原理，无论什么语言都有此特性，故不做过多赘述

5. 图片懒加载

• 避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制）是必要的，因为一次性过多的图片加载会对服务器带来不小的负担，同时返回速度慢，对前端体验不够友好，在H5页面上的懒加载可以参考jQueryLazyload，echo.js两种方式。

6. 避免大量且频繁的DOM清除插入工作

• 这次重构的重中之重也就在这里，此前采取的JQuery架构便是采用ajax调用完毕便向DOM结构中插入DOM元素的方法来实现数据的加载与刷新的，而现在Vue化之后，很多DOM只需要替换其中的值和判断一些数据切换样式就可以了，在运行开销不会加大多少的基础上，解决之前每次更新数据会闪屏的问题

99. 服务器加配 接口提速

• 此招乃能包治百病，如果有此条件，世间一切效率，皆为浮云，真理是力大砖飞