在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
前言 看了一下之前发布的文章,关于前端性能优化的,有网站前端性能优化之javascript和css及jquery的 jquery编程的标准写法和最佳实践 。前端性能优化是一个不断追求的过程,前面的文章虽然讲解了一些性能优化,但是关于性能优化的路还有很长,很多东西都没有提及。今天,我在前面的基础之上,再来简单总结一些常用的性能优化方式。 1、使用运算符时,尽量使用+=,-=、*=、\=等运算符号,而不是直接进行赋值运算。 常规优化 function getCategory(age) { var category = ""; switch (true) { case isNaN(age): category = "not an age"; break; case (age >= 50): category = "Old"; break; case (age <= 20): category = "Baby"; break; default: category = "Young"; break; }; return category; } getCategory(5); //Baby 这样的稍微复杂一些的,我们尽量就不用if/else了,当然,简单的判断,还是推荐if/else。 var str = "<div>这是一个测试字符串</div>"; /**效率低**/ var obj = document.getElementsByTagName("body"); for(var i = 0; i < 100; i++){ obj.innerHTML += str + i; } /**效率高**/ var obj = document.getElementsByTagName("body"); var arr = []; for(var i = 0; i < 100; i++){ arr[i] = str + i; } obj.innerHTML = arr.join(""); 3、传递方法取代方法字符串 /**不提倡**/ var i = 1; var j = "hello"; var arr = [1,2,3]; var now = new Date(); /**提倡**/ var i = 1, j = "hello", arr = [1,2,3], now = new Date(); 插入迭代值 /**不提倡**/ var name = values[i]; i++; /**提倡**/ var name = values[i++]; 使用数组和对象字面量,避免使用构造函数Array(),Object() /**不提倡**/ var a = new Array(); a[0] = 1; a[1] = "hello"; a[2] = 45; var o = new Obejct(); o.name = "bill"; o.age = 13; /**提倡**/ var a = [1, "hello", 45]; var o = { name : "bill", age : 13 }; 类型转换 1、把数字转换成字符串。 String()属于内部函数,所以速度很快。 .toString()要查询原型中的函数,所以速度略慢。 new String()最慢。 2、浮点数转换成整型。 /**效率低**/ var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ ... } /**效率高,适用于获取DOM集合,如果纯数组则两种情况区别不大**/ var divs = document.getElementsByTagName("div"); for(var i = 0, len = divs.length; i < len; i++){ ... } 2、避免在循环中使用try-catch。 try { for ( var i = 0; i < 200; i++) {} } catch (e){} 3、避免遍历大量元素,尽量缩小遍历范围。 函数的调用 with语句 with会创建自已的作用域,因此会增加其中执行代码的作用域的长度。 全局作用域。 以下代码为例: var foo = function() { var local = {}; }; foo(); console.log(local); //=> undefined var bar = function() { local = {}; }; bar(); console.log(local); //=> {} /**这里我们定义了foo()函数和bar()函数,他们的意图都是为了定义一个名为local的变量。在foo()函数中,我们使用var语句来声明定义了一个local变量,而因为函数体内部会形成一个作用域,所以这个变量便被定义到该作用域中。而且foo()函数体内并没有做任何作用域延伸的处理,所以在该函数执行完毕后,这个local变量也随之被销毁。而在外层作用域中则无法访问到该变量。而在bar()函数内,local变量并没有使用var语句进行声明,取而代之的是直接把local作为全局变量来定义。故外层作用域可以访问到这个变量。**/ local = {}; // 这里的定义等效于 global.local = {}; 2、作用域链 function foo() { var val = 'hello'; function bar() { function baz() { global.val = 'world;' }; baz(); console.log(val); //=> hello }; bar(); }; foo(); /**在`JAVASCRIPT`中,变量标识符的查找是从当前作用域开始向外查找,直到全局作用域为止。所以`JAVASCRIPT`代码中对变量的访问只能向外进行,而不能逆而行之。baz()函数的执行在全局作用域中定义了一个全局变量val。而在bar()函数中,对val这一标识符进行访问时,按照从内到外的查找原则:在bar函数的作用域中没有找到,便到上一层,即foo()函数的作用域中查找。然而,使大家产生疑惑的关键就在这里:本次标识符访问在foo()函数的作用域中找到了符合的变量,便不会继续向外查找,故在baz()函数中定义的全局变量val并没有在本次变量访问中产生影响。**/ 3、减少作用域链上的查找次数 /**效率低**/ for(var i = 0; i < 10000; i++){ var but1 = document.getElementById("but1"); } /**效率高**/ /**避免全局查找**/ var doc = document; for(var i = 0; i < 10000; i++){ var but1 = doc.getElementById("but1"); } /**上面代码中,第二种情况是先把全局对象的变量放到函数里面先保存下来,然后直接访问这个变量,而第一种情况是每次都遍历作用域链,直到全局环境,我们看到第二种情况实际上只遍历了一次,而第一种情况却是每次都遍历了,而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显。在作用域链查找的次数是`O(n)`。通过创建一个指向`document`的局部变量,就可以通过限制一次全局查找来改进这个函数的性能。**/ 4、闭包 function foo() { var local = 'Hello'; return function() { return local; }; } var bar = foo(); console.log(bar()); //=> Hello /**这里所展示的让外层作用域访问内层作用域的技术便是闭包(Closure)。得益于高阶函数的应用,使foo()函数的作用域得到`延伸`。foo()函数返回了一个匿名函数,该函数存在于foo()函数的作用域内,所以可以访问到foo()函数作用域内的local变量,并保存其引用。而因这个函数直接返回了local变量,所以在外层作用域中便可直接执行bar()函数以获得local变量。**/ 闭包是JAVASCRIPT的高级特性,因为把带有内部变量引用的函数带出了函数外部,所以该作用域内的变量在函数执行完毕后的并不一定会被销毁,直到内部变量的引用被全部解除。所以闭包的应用很容易造成内存无法释放的情况。 循环绑定事件,我们假设一个场景:有六个按钮,分别对应六种事件,当用户点击按钮时,在指定的地方输出相应的事件。 var btns = document.querySelectorAll('.btn'); // 6 elements var output = document.querySelector('#output'); var events = [1, 2, 3, 4, 5, 6]; // Case 1 for (var i = 0; i < btns.length; i++) { btns[i].onclick = function(evt) { output.innerText += 'Clicked ' + events[i]; }; } /**这里第一个解决方案显然是典型的循环绑定事件错误,这里不细说,详细可以参照我给一个网友的回答;而第二和第三个方案的区别就在于闭包传入的参数。**/ // Case 2 for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(index) { return function(evt) { output.innerText += 'Clicked ' + events[index]; }; })(i); } /**第二个方案传入的参数是当前循环下标,而后者是直接传入相应的事件对象。事实上,后者更适合在大量数据应用的时候,因为在JavaScript的函数式编程中,函数调用时传入的参数是基本类型对象,那么在函数体内得到的形参会是一个复制值,这样这个值就被当作一个局部变量定义在函数体的作用域内,在完成事件绑定之后就可以对events变量进行手工解除引用,以减轻外层作用域中的内存占用了。而且当某个元素被删除时,相应的事件监听函数、事件对象、闭包函数也随之被销毁回收。**/ // Case 3 for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(event) { return function(evt) { output.innerText += 'Clicked ' + event; }; })(events[i]); } 避开闭包陷阱 ;(function() { // 主业务代码 })(); 有的甚至更高级一点: ;(function(win, doc, $, undefined) { // 主业务代码 })(window, document, jQuery); 甚至连如RequireJS, SeaJS, OzJS 等前端模块化加载解决方案,都是采用类似的形式: /**RequireJS**/ define(['jquery'], function($) { // 主业务代码 }); /**SeaJS**/ define('module', ['dep', 'underscore'], function($, _) { // 主业务代码 }); 善用回调函数 function getData(callBack){ $.ajax({ url:"", data:{}, dataType:"json", type:"get", success:function(data){ callBack(null,data) } }) } 我们在调用的时候可以如下: getData(function(error,data){ console.log(data) }) 数组中插入元素最快的方法 var arr = [1,2,3,4,5]; var arr2 = []; 测试如下: arr[arr.length] = 6; // 最快 arr.push(6); // 慢34.66% arr2 = arr.concat([6]); // 慢85.79% 前面插入元素 var arr = [1,2,3,4,5]; arr.unshift(0); [0].concat(arr); 发现: [0].concat(arr); // 快 arr.unshift(0); // 慢64.70% 向数组中间添加元素 var items = ['one', 'two', 'three', 'four']; items.splice(items.length / 2, 0, 'hello'); |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论