高性能JavaScript 简单学习

痛定思痛。 2021-09-03 06:54 319阅读 0赞

# 一. 加载和运行 #

## （1）脚本的位置 以及注意点，减少性能损失 ##

HTML加载中，无法预知js是否给html标签添加内容，所以浏览器会停下来，运行加载js代码，然后解析js代码， 这个过程需要发时间，这时页面解析和用户交互是被完全阻塞，页面呈现是空白的

所以建议是：

1. 把script 放在</body>前,这个时候页面HTML 有解析，页面呈现不是空白

2.  多个js文件 压缩在同一个js，然后用一个script引用，减少性能损失  
3.如果是文件在服务器上是2个分离的文件，可以采用以下方式，（当服务器接收到url请求时，2个文件将被合并一起返回给客服端）  
<script src="https://198.10.1.123:8080/file?2.7.0/build/js/files1.js&2.7.0/build/js/uplauding.js" />

4. **非阻塞脚本 模式**【等页面完成加载之后，再加载 JavaScript 源码】如下方式 可以实现

A .延期脚本  增加defer

注意： defer 只兼容Internet Explorer 4 和 Firefox 3.5 更高版本的浏览器所支 持

B.动态脚本

新的 <script> 元素加载  file1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于： 无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在 <head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的  HTTP  连接）

一个新的<script>元素可以非常容易地通过标准 DOM 函数创建：
    var script = document.createElement ("script"); 
    script.type = "text/javascript"; 
    script.src = "file1.js"; 
    document.getElementsByTagName_r("head")[0].appendChild(script);

封装动态加载多个文件以及回调函数的方法

注意，浏览器不保证文件加载的顺序。所有主流浏 览器之中，只有 Firefox  和  Opera 保证脚本按照你指定的顺序执行。其他浏览器将按照服务器返回它们的次 序下载并运行不同的代码文件。 如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成 一 个文件。

动态脚本加载是非阻塞  JavaScript  下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

C.用  XHR  对象下载代码，并注入到页面中 【使用XMLHttpRequest(XHR)对象】

首先创建一个 XHR  对象，然后下载  JavaScript  文件，接着用一个动态<script> 元素将  JavaScript  代码注入页 面

这种方法的主要优点是，你可以下载不立即执行的  JavaScript 代码，推迟执行，可以等一切准备好在执行

推荐使用非阻塞，动态加载方式使用，

**第三方非阻塞库**

1.   [LazyLoad ][LazyLoad]： LazyLoad 是一个更强大的 loadScript() 函数

2[.LABjs ][.LABjs]: Kyle Simpson 写的一个开源库，由 Steve Souders 赞助。此库对加载过程进行更精细的控制，并尝试并行下载尽可能多的代码。LABjs 也相当小，只有 4.50KB

# 二.数据访问 #

## （1）在 JavaScript 中有四种基本的数据访问 位置 ##

1.直接量

JavaScript  的直接量包括：字符串，数字，布尔值，对象， 数组，函数，正则表达式，具有特殊意义的空值，以及未定义。

2.变量：  var 关键字创建用于存储数据值

3.数组项： 具有数字索引，存储 一 个  JavaScript  数组对象

4. 对象成员： 具有字符串索引，存储 一 个  JavaScript  对象

对直接量和局部变量的访问成本是比较低的，而对数组和对象的访问成本稍大一些，当然不同的浏览器对这四种方式的访问差异也是不一样的，下图对这四种数据类型进行200'000 次操作所用的时间。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

从上图可以看出，对直接量和局部变量的访问成本比另外两种要低很多，所以应该尽量使用直接量或局部变量。

## （2）作用域 ##

1. **设置局部变量**

一般来说，js中会将所有的变量保存在一条作用域链上，当需要访问一个数据时，它会从离它最近的作用域找，如果找到就停止，没找到就会一直沿着作用域链找先去，**全局变量是位于作用域链的最底部。所以访问全局变量的成本是相当高的，特别是在深层函数中访问全局变量，因此要避免访问全局变量**。

就不得不提起**js中可以临时改变上下文的作用域的两个表达式，一个是with，另一个是try catch**。

with 表达式为所有对象属性创建一个默认操作变量，在其他语言中，类似的功能通常用来避免书写一些重复的代码。但是这种方式会造成很多问题，不建议使用，而且在Ecmscript5中的严格模式下，with已经不能使用。在JavaScript 中不只是with 表达式人为地改变运行期上下文的作用域链，try-catch 表达式的catch 子句具有相同效果。当try 块发生错误时，程序流程自动转入catch 块，并将异常对象推入作用域链前端的一个可变对象中。但是请注意，只要catch 子句执行完毕，作用域链就会返回到原来的状态。

另外一种对性能可能产生影响的方式就是使用闭包。闭包在js中可以说是个神奇的东西，它会对解决问题提供很好的帮助，但是对性能和内存都有很大影响。所以要慎用闭包。

## （3） 闭包 ##

闭包：函数里包着一个函数（闭包长得像函数，但是闭包不是函数）

function a(){
            var num = 0;
            function b(){
                console.log("ss")
            }
        }
        b() 就是闭合

简单的例子：

function add(){
        var sum =4;
        var func = function (var num) {
            return sum + num
        }
        func（）
    }
    
    func 闭包，他可以访问父函数的环境变量，只是生命周期比较特殊，父函数执行完毕，闭包的生命周期就结束了。
    
    function add(){
        war sum =4;
        func = function (var num) {
            return sum + num
        }
        func（）
    }
    闭包函数虽然没有被显式的return，但是由于func 没有var关键修饰，所以func 变量是全局变量，全局变量的生命周期直到整个页面文件被销毁才结束，因此，这个闭包的生命周期比父函数要长。这是一种非常不好的变成习惯，使用全局变量会降低程序的执行速度，而且内存得不到及时的释放。

总结： 一般的闭包 函数：父函数执行完毕，闭包的生命周期就结束，除非这个闭包函数是全局变量，那则要整个页面文件执被销毁后才结束。

**正确使用闭包**：

闭包可以使的程序更加简洁优雅，提升程序效率；闭包是一种特殊的对象，通过闭包可以模拟对象的行为。

这个例子模拟了对象的get与set方法。通过闭包，实现了对object内部变量的封装，只能通过闭包定义的内部函数访问object。

var object1 = newObject();
    object1.setName("newName");
    
    
    var object2 = newObject();
    object2.setName("newName");

面向对象的编程语言都提供类的机制，不同对象有不同的属性，表示不同的状态。上面的例子实现了面向对象中的对象

## **（4）js内存模型** ##

js闭包函数可以访问不属于自己的变量，主要是因为闭包函数的存储机制比较特殊。

### **1. 普通函数的内存模型** ###

**普通函数的创建**

首先了解一下普通函数从创建到执行一直到消亡内存的变化过程。通过这个过程，可以解决有关于变量的作用域、重名变量的问题

function add(num){
         var sum = 5;
         return sum + num;
     }

js函数也是对象，对象拥有自己的属相。scope属性是每个函数都有的属相，这个属性只供js引擎使用。scope属性指向了一个链表(scopeChain),scopeChain保存了函数被创建的时的全局变量。

![普通函数的的创建时上下文][e1bd4bc690206cd7286be63ab78216f6.png]

在add函数创建的时候，scopeChain中index为0的引用指向的是Global Object，global object保存的是函数创建的时候全局变量。注意，此时函数还没有被执行

普通函数的执行

var sum = add(4)

![函数执行时的上下文][b81f875618e777ac4fa6f1b66dcf7e59.png]

函数被创建之后才能被执行。函数执行时，会创建一个运行时上下文(execution context),这个运行时上下文做两件事情：

1.运行时上下文会创建自己的scopeChain，然后将创建时的scopeChain中的globalObject拷贝过来

2.创建activation object(活动对象)，活动对象的作用是记录函运行时的形参实参与定义的局部变量，然后将活动对象插入到运行时上下文的scopeChain中index为0的位置。每当函数执行过程中遇到变量时，先去搜索活动对象，也就是局部变量，然后再去搜索全局变量。

### 2.闭包函数的内存模型 ###

function add(){
        var sum =5;
        var func = function (var num) {
            return sum + num
        }
        return func（）
    }
    var addFunc = add()
    addFunc(4)

**闭包函数的创建**

父函数执行的时，**js引擎发现在函数的内部定义了函数，闭包函数也是函数，也需要为闭包函数记录创建时的上下文**，比较特殊的是，**此时的父函数处于执行期，父函数的执行期上下文还没有被销毁，刚好，闭包函数就直接引用了父函数的执行器上下**文。

![0126acfe090fc69ff8384abd6e80e7e7.png][]

闭包函数的执行

![13e5b4b938aa3067750dd45e4bb71316.png][]

闭包函数执行的时候会创建自己的运行时上下文，然后将自己的形参实参局部变量包装成活动对象，然后将这个活动对象加到scopeChain的index为0的位置。

根据这个过程，我们可以解释为什么闭包函数可以访问自身的参数与局部变量，父函数的环境以及全局变量。闭包函数遇到一个变量的时候，会从上到下由内而外的搜索变量，因此，尽量将变量定义成局部变量，定义成局部变量可以提高访问速度，局部变量会被gc及时的释放，不会长期的占用内存。闭包能够访问反函数是因为闭包保存了父函数的环境变量的引用。没有内存，就没有闭包。

### **3.性能问题：** ###

在作用域链和闭包中的性能问题主要表现在数据读写的速度上。

由于作用域链的原因，我们访问全局作用域的数据（这里为什么不说变量呢？因为不仅包括变量，还有函数，对象等其他内容）时，效率是最低的，而访问局部数据时的效率是最高的。

所以一个非常经典的解决数据访问性能问题的方案出现了：**将需要访问的数据尽量的以局部数据的方式缓存起来**。这样当标识符解析程序在作用域链中寻找数据时，直接就可以在作用域链的最上层找到想要的数据，效率自然就提升了。

这句话可以解决很多性能问题：**设置缓存，将数据保存在局部变量中。**

主要是参考[这里][Link 1]，里面的例子做了少许的修改

## （5）原型与原型链 ##

查看： [JavaScript中的原型与原型链][JavaScript]

## （6）总结： ##

在  JavaScript  中，数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型：直接量，变 量，数组项，对象成员。它们有不同的性能考虑。

1.直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。

2.  局部变量比域外变量快，因为它位于作用域链的第 一 个对象中。变量在作用域链中的位置越深，访问所需  的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后 一 环。

3. 避免使用  with  表达式，因为它改变了运行期上下文的作用域链。而且应当小心对待  try-catch 表达式的  catch 子句，因为它具有同样效果。

4.嵌套对象成员会造成重大性能影响，尽量少用。

5. 一 个属性或方法在原形链中的位置越深，访问它的速度就越慢。

6. 一般来说，你可以通过这种方法提高 JavaScript  代码的性能：将经常使用的对象成员，数组项，和域外变 量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。

通过使用这些策略，你可以极大地提高那些需要大量  JavaScript  代码的网页应用的实际性能。

# 三. DOM 编程 #

## （1）重排  重绘 ##

浏览器运行机制：构建DOM树（就是html渲染 ，简称内容树）---》构建渲染树（就是css渲染）---》布局渲染树（就是节点位置渲染，div的坐标）---》绘制渲染树（就是把所有的节点绘制起来）

重排（回流）:改变元素的大小 位置的时候触发【left,width,height】； 添加或删除可见的 DOM 元素；元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）； 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代；浏览器窗口改变尺寸；最初的页面渲染；

重绘：就是改变元素外观属性(颜色)时候触发。如：color，background-color等。\*\*\*\*

重排与重绘浪费性能 ，耗时，导致浏览器卡慢。优化：减少重绘和重排就是要减少对渲染树的操作

a. 将多个  DOM  和风格改变合并到一个批次中一次性执行 。如： **cssText 属性**

var el = document.getElementById('mydiv'); 
    el.style.borderLeft = '1px'; 
    el.style.borderRight = '2px'; 
    el.style.padding = '5px';
    
    将所有改变合并在一起执行，只修改 DOM 一次。可通过使用
    
    cssText 属性实现：
    var el = document.getElementById('mydiv'); 
    el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
    
    修改 cssText 属性，覆盖已存在的风格信息。如果你打算保持当前的风格，你可以将
    它附加在 cssText 字符串的后面。
    
    
    el.style.cssText += '; border-left: 1px;';

b .直接改变元素的className ( 这种方法适用于那些 风格不依赖于运行逻辑，不需要计算的情况)

var el = document.getElementById('mydiv'); 
    el.className = 'active';

c.将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；

d.动画效果的处理方式

使用以下步骤可以避免对大部分页面进行重排版：

1、页面顶部可以“折叠/展开”的元素称作“动画元素”，用绝对坐标对它进行定位，当它的尺寸改变时，就
    不会推移页面中其他元素的位置，而只是覆盖其他元素。
    
    2、展开动作只在“动画元素”上进行。这时其他元素的坐标并没有改变，换句话说，其他元素并没有因为“动
    画元素”的扩大而随之下移，而是任由动画元素覆盖。
    
    3、“动画元素”的动画结束时，将其他元素的位置下移到动画元素下方，界面“跳”了一下。

e.如果大量 的元素使用了:hover 那么会降低反应速度

## (2) 事件托管 ##

一个简单而优雅的处理 DOM 事件的技术是事件托管。它基于这样一个事实：事件逐层冒泡总能被父元 素捕获。采用事件托管技术之后，你只需要在一个包装元素上挂一个句柄，用于处理子元素发生的所有 事件。，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；

**事件冒泡**

前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？

在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]**

如上图所示，事件模型是指分为三个阶段：

*  捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
 *  目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
 *  冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；\#\#\# 事件

简单的例子 事件委托

<ol id="ol">
    	        <li>目标一</li>
    	        <li>目标二</li>
    	        <li>目标三</li>
    	        <li>目标四</li>
    	        <li>目标五</li>
    	        <li>目标六</li>
    	        <li>目标七</li>
    	        <li>目标八</li>
    	        <li>目标九</li>
    	        <li>目标十</li>
        </ol>
    
    
        //不使用事件托管
    	var  li=document.getElementsByTagName("li");
    	for(var i=0;i<li.length;i++){
                li[i].addEventListener("click",function () { //10个li的“click”事件，需要10个事件监听器，分配10份内存；
                    this.style.backgroundColor = "yellow";
                });
            }
    
    	//利用事件冒泡原理，在ol上代理所有li的“click”事件
    	var ol = document.getElementById("ol");
             ol.addEventListener("click",function (e) {
             		if(e.target.parentNode==this){	//e.target点击到的元素，this为事件绑定的元素（ol），				
             		//判断点击到的元素（目标一~目标十）的父节点是不是ol,防止触发父级元素的点击事件
                 			e.target.style.backgroundColor = "yellow";
                 			console.log(e.target.innerHTML);
                		 }
            })

## （3）总结 ##

为减少  DOM  编程中的性能损失，请牢记以下几点：

1.最小化  DOM  访问，在  JavaScript  端做尽可能多的事情。

2.在反复访问的地方使用局部变量存放 DOM 引用

3.对底层文档重新查询。将集合的 length 属性缓 存到一个变量中，在迭代中使用这个变量。如果经常操作这个集合，可以将集合拷贝到数组中。

var el =document.getElementsByTagName("li");
    
    // len=el.length;
    
    for(var i =0;el<len;len=el.length;i++ ){
    
    ...
    
    }

.3.使用速度更快的  API ，诸如  querySelectorAll() 和  firstElementChild

4.注意重绘和重排版；批量修改风格，离线操作  DOM  树，缓存并减少对布局信息的访问。

5.动画中使用绝对坐标，使用拖放代理。

6.使用事件托管技术最小化事件句柄数量。

# 四 算法和流程控制 #

## （1）JavaScript四种类型的循环 ##

for 循环， while 循环，  do-while 循环， for \- in  循环

for (var i=0, len=items.length; i < len; i++){ 
     process(items[i]); 
    } 
    
    var j=0, 
    count = items.length; 
    while (j < count){ 
     process(items[j++]]); 
    } 
    
    
    var k=0, 
    num = items.length; 
    do { 
     process(items[k++]); 
    } while (k < num)
    
    
    for (var prop in object){ 
     //loop body 
    }

## （2）循环性能： ##

for \-in 循环比较慢（ 由于每次迭代操作要搜索实例或原形的属性， for-in 循环每次迭代都要付出更多开销，所以慢），除非你需要对数目不详的对象属性进行操作，否则避免使用  for-in 循环

## （3）if-else 与 switch 比较 ##

条件数量较大，倾向于使用  switch  而不是 if-else

if-else 适用于判断两个离散的值或者判断几个不同的值域。如果判断多于两个离散值， switch 表达式将是更理想的选择。

## （4）查表法 ##

与if-else 和  switch  相比，查表法不仅非常快，而且当需要测试的离散值数量非常大时，也有助于保持代 码的可读性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

或是

var results = [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9, result10] 
    
    return results[value];

查表法最常用于一个键和一个值形成逻辑映射的领域（如前面的例子）。 switch  表达式更适合于每 个键需要一个独特的动作，或者一系列动作的场合。

## （5）递归 ##

复杂算法通常比较容易使用递归实现

诸如阶乘函数：
    function factorial(n){ 
     if (n == 0){ 
     return 1; 
     } else { 
     return n * factorial(n-1); 
     } 
    }

## （6）总结 ##

1.for，while，do-while 循环的性能特性相似，谁也不比谁更快或更慢

2.除非你要迭代遍历一个属性未知的对象，否则不要使用 for-in 循环

3.改善循环性能的最好办法是减少每次迭代中的运算量，并减少循环迭代次数

4.一般来说，switch 总是比 if-else 更快，但并不总是最好的解决方法;当判断条件较多时，查表法比 if-else 或者 switch 更快。

5.浏览器的调用栈尺寸限制了递归算法在 JavaScript 中的应用；栈溢出错误导致其他代码也不能正常执行

6.如果你遇到一个栈溢出错误，将方法修改为一个迭代算法或者使用制表法可以避免重复工作。运行的代码总量越大，使用这些策略所带来的性能提升就越明显

# 五 字符串和正则表达式 #

## （1）字符串连接 ##

加和加等于操作

str += "one" + "two";
    str = str + "one" + "two";

这就避免了使用临时字符串（+= 这种会创建一个临时字符串 ，等“onetwo”），因为赋值表达式开头以str为基础，一次追加一个字符串，从左至右依次连接。**如果改变连接顺序(例如: str = “one” + str + “two”). 本优化将失效.** 这与浏览器合并字符串时分配的内存方法有关. 除IE外, 其他浏览器会尝试为表达式左侧的字符串分配更多的内存. 然后简单地将第二个字符串拷贝至它的末尾. 如果在一个循环中, 基础字符串位于最左端的位置, 就可以避免重复拷贝一个逐渐变大的字符串,**当这个IE不适用**。

(2)Array.prototype.join 和 String.prototype.concat

1.Array.prototype.join
    
    var str = ["a","b","c"].join(""); 
    console.log(str)//输出 abc
    
    2.String.prototype.concat
    
    var s1="1", s2="2", s3="3",str="";
    str = str.concat(s1, s2, s3);
    console.log(str)//123

[LazyLoad]: http://github.com/rgrove/lazyload/
[.LABjs]: http://labjs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/0327358a822d4813ab2df2902271c6eb.png
[e1bd4bc690206cd7286be63ab78216f6.png]: /images/20210813/dccc61ca627543ac9b5807ba4b4900c7.png
[b81f875618e777ac4fa6f1b66dcf7e59.png]: /images/20210813/80a275dc580443f895bcbac356733f01.png
[0126acfe090fc69ff8384abd6e80e7e7.png]: /images/20210813/caf8ef4acd27449e902fab2e6eb480db.png
[13e5b4b938aa3067750dd45e4bb71316.png]: /images/20210813/f05f5649d9324ea187aa6a2195f66996.png
[Link 1]: http://www.cnblogs.com/mrsunny/archive/2011/11/03/2233978.html
[JavaScript]: https://blog.csdn.net/gao_xu_520/article/details/78316084
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/bda5d59e310d4524840f47fa5467bc7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/7b90cb85a0234222ae5b04f649036371.png