1、数据存储的位置会对代码性能产生影响,为避免性能问题,应注意以下几点:
1) 变量在作用域中的位置越深,访问时长越长,如若多次调用深层次的变量,可以将该变量赋值给局部变量;
2)嵌套的对象成员会影响性能,嵌套层次越深对性能影响越大,尽量少用。
2、减少重绘和重排
当对元素频繁操作时:先让元素脱离文档,再执行频繁的dom操作,再把元素插入文档中。
容易被忽略的触发重排的js方法:
offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()、currentStyle等。
PS:因每次重排都会产生计算消耗,大多数浏览器通过队列化修改并批量执行来优化重排过程。获取布局信息的操作需要拿到最新的布局信息,因此浏览器需要强制刷新队列并立即执行任务,触发重排以返回正确的值。
3、减少DOM操作
1)减少DOM操作,如需多次访问同一个DOM节点,请使用变量存储它的引用。
2)使用事件委派来减少事件处理器的数量。
3)动画使用绝对定位,使DOM节点脱离文档流,减少重绘和重排