前端性能优化方面建议

时间:2021-08-08 06:12:22
  • 字符串拼接会比较影响性能,这时可以采用将每段字符串放入数组中,最后调用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数量


前端悟饭