前端性能优化方面建议

Posted 2020-06-11

• 字符串拼接会比较影响性能，这时可以采用将每段字符串放入数组中，最后调用join方法输出整段字符串

• 采用事件委托来提高性能，当遇到比如给某个table下面所有的tr绑定事件处理函数，这时候如果全部绑定，由于绑定的事件处理函数比较多，会占用太多内存。因为事件是会冒泡的，所以可以在table元素上面绑定事件处理函数，其中IE浏览器中使用event.srcElement，兼容DOM的浏览器中可以使用event.target来获取事件的目标元素。其中event对象在IE中的attachEvent函数中可以使用window.event来获取，在兼容DOM的浏览器中的addEventListener函数中event对象是传入的第一个参数，通过判断target来检查是否是在tr元素上面触发事件，进行下面的逻辑

• 与后端做交互时尽量使用异步的方式

• 将js和css文件压缩，来缩短加载js和css文件的时间

• 使用惰性载入函数：比如创建XMLHttpRequest对象，因为浏览的差异，每次创建都要包含大量的if语句，很影响性能。这时可以使用惰性载入函数，在第一次调用时在if语句判断后，将创建XMLHttpRequest对象的方法换成在该浏览器下特定的创建方法，下一次进来就不需要判断了

• 避免过多的DOM操作，遍历数据而非遍历DOM

• 合并文件来减少http的请求，比如将多个css文件合并成一个文件，使用css sprites技术，比如设置图表的背景图时，使用背景图绝对定位，而非一个图标使用一个背景图。

• 减少DOM数量