ECMAScript|JavaScript性能优化具体实现-第二篇 JavaScript性能优化|javascript|前端

文章图片

前言

在之前的文章中介绍了代码的编写方式，在本篇文章中将继续介绍更多的性能优化小技巧

循环优化

循环主要是用来遍历数据，遍历数据又比较浪费性能，我这里呢有一些小技巧供大家参考//普通写法const arr2 = [1, 2, 3, 6, 9, 5, 4]; for (let index = 0; index < arr2.length; index++) {console.log(arr2[index]); }//优化写法const arr = [1, 2, 3, 6, 9, 5, 4]; let index; //提前声明indexlet len = arr.length //提前保存数组的长度for (index = 0; index < len; index++) {console.log(index); }//不考虑顺序的前提下，使用while循环代替for循环const arr = [1, 2, 3, 6, 9, 5, 4]; let len = arr.length //保存数组的长度while (len--) {console.log(arr[len]); //result=> 输出顺序相反 }

减少声明和语句

//普通写法普通写法有一个好处，代码更便于阅读，也更好地维护const arr3 = () => {let a = 1; let b = 3; let c = 4; log(a + b + c)}; arr3()//reult => 8//优化写法const arr3 = () => {let a = 1,b = 3,c = 4; log(a + b + c)}; arr3(); //reult => 8

惰性函数的使用

//模拟函数function addEvent(obj, type, fn) {if (obj.addEventListener) {obj.addEventListener(obj, type, false)} else if (obj.attachEvent) {obj.attachEvent('on' + type, fn)} else {obj['on' + type] = fn} }//改造成惰性函数单次调用性能损失较小多次调用的话性能损失较大还是要根据实际情况使用function addEvent(obj, type, fn) {if (obj.addEventListener) {addEvent = obj.addEventListener(obj, type, false)} else if (obj.attachEvent) {addEvent = obj.attachEvent('on' + type, fn)} else {addEvent = obj['on' + type] = fn}return addEvent }

事件委托

//事件委托的本质就是利用js的冒泡机制，本来应该给子元素添加的事件，//实际上给父元素添加事件，通过冒泡机制让子元素执行并且绑定举例//普通写法 function showText(event) {console.log(event.target.innerHTML) } let list = document.querySelectorAll('li'); for (const item of list) { item.onclick = showText }//优化写法 let list = document.querySelectorAll('li'); let oul = document.getElementById('ul'); oul.addEventListener('click', showText, true); function showText(event) {let obj = event.targetif (obj.nodeName.toLowerCase() === "li") {console.log(obj.innerHTML)}}

【ECMAScript|JavaScript性能优化具体实现-第二篇】谢谢观看，如有不足，敬请指教