乐趣区

优化JavaScript总结分享上

jiezi

本来想整理一篇完整的 JavaScript 优化知识点出来跟大家讨论分享一下的，但是由于最近个人的时间比较少，所以先整理了两个知识点，之后有时间了再继续整理后面的。不喜欢勿喷，有错误的欢迎大佬指点。

1. 引用 script 标签的优化

2019/05/14/01:30

  • 多数浏览器都是使用单一的进程来处理用户界面（UI）和 JavaScript 脚本执行，所以同一时刻只能做一件事，因此就会造成浏览器的堵塞状态，JavaScript 脚本执行过程耗时越久，浏览器等待响应的时间就越长。（也就是说当页面加载的时候，遇到 script 标签的时候，页面加载就会被终止，等到 JavaScript 脚本执行完毕后，再继续加载页面，这样给用户的体验特别不会，很容易首次加载页面的时候出现白屏状态。）

优化方式

  • 传统的方式
    传统的方式就是，把 JavaScript 的脚本放到 head 标签之后 </body> 之前，也就把 script 标签放到最尾处，来确保页面加载完之后才执行 JavaScript 脚本，从而达到一些不必要的阻塞。（可能这也是我们平时用得比较多的方式）

  • 延迟 JavaScript 脚本执行

       1.HTML4 为 script 标签扩展了一个 Defer 属性，指定这个属性的 script 标签的脚本不会修改 DOM，因此代码能安全的延迟执行。加上这个属性的 script 标签的脚本可以放在 DOM 的任意位置，当浏览器加载到它是，它会被下载，但不会被执行，所以不能阻塞页面的方面，它会等到页面加载完成后，在 windown 的 load()函数之后执行。
<script type="text/javascript" src="./a.js" defer="defer"></script>

<script type="text/javascript">
    console.log("b")
</script>

<script type="text/javascript">
    window.onload = function () {console.log("c")
    }
// 这个例子，最终输出的顺序是 b,a,c
</script>

 2. 在 H5 的时候，script 又扩展了一个 async 属性，它与 defer 相同点就是都是采用并行下载，不会在下载的过程造成页面的阻塞情况；不同点就是，它们的执行时机：async 加载完之后，自动执行（也就是说，当加载到它的时候，浏览器可以继续往下加载页面，当它加载完之后，它就会自动执行，而不需要等到页面加载完之后再执行，也不用页面加载等它执行完再往后执行）；而 dafer 要等页面加载完成后才会执行。
  • 合拼 JavaSript 脚本
    因为每个 script 标签初始下载是 = 时都会阻塞页面渲染，所以减少页面包含的 script 标签数量也有助于页面加载性能的优化。（如果页面有很多的 script 标签，没个 script 标签都会发送一次 http 请求（http://tool.oschina.net/jscom…），从而浪费了很多没必要的时间，我们可以通过某些在线工具将多个 script 标签合拼成一个 script 标签，最终页面只引用了一个 script，也就是只发送了一次 http 请求，这样加载性能会比之前加载多个 script 标签快）

2. 作用域 / 链的优化

2019/05/15/02:05

  • JavaScript 的作用域同样关系到性能的问题

    • 在 es6 之前 JavaScript 没有什么块级作用域所说，只有全局作用域和函数作用域。（没什么块级作用域有时会给我们带很多莫民奇妙的东西），例如：一个经典的面试题：
// 结果输出什么？for(var i = 0; i<10;i++){setTimeout(function () {console.log(i)
            },1000)
        }

我们期望的结果是输出 0 -9。但是结果拼不是我们想这样，这玩（diao）意 (mao) 既然输出十次 10. 为什么会这样？因为当 setTimeout 执行的时候，for 循环已经完成，已经变成了 10。

怎样解决？（在 es6 没有到来之前，一般都是同闭包的方法把作用域缓存起来）

for(var i = 0; i<10;i++){(function(i){setTimeout(function () {console.log(i)
            },1000)
        })(i)
    }
// 结果输出为 0 -9

最后输出的结果就跟我们期待的一样了，但是上面使用了闭包，闭包也涉及到作用域链的性能问题；因为闭包的属性包含了与执行环境作用域相同的对象的引用，因此导致闭包里面的变量没办法被销毁，从而占用了更多的内存空间，也有可能导致内存泄漏问题，所以使用闭包时还是要谨慎，它关系到内存以及执行速度。

// 上面代码优化后
for(let i = 0; i<10;i++){setTimeout(function () {console.log(i)
            },1000)
        }

2. 尽量使用局部变量缓存全局变量

  • 在实际开发中尽量使用局部变量缓存全局变量，因为，到一个函数多次访问全局变量的时候，会出现一个作用域练查找的过程，全局作用域位置越深找到的时间就越久，因此这也会涉及到性能的执行速度问题。例如：下面这段简单的代码，在浏览器打开执行看到还是挺快的，没什么问题；但是，它三次引用了 obj.name 这个全局变量，在这个查找的过程中必须遍历整个作用域链，直到找到为止（幸亏这个全局变量比较浅，幸亏，这段代码只引用了三次；要这个全局变量在 window 对象上面呢，要是这个全局变量会被引用几千万次呢），然后我们可以将这个多次被引用的全局变量，用局部变量存起来，这样无论这个全局变量被引用多次，它都只会查找一次。
let obj = {name:"July"}

function Person() {console.log(obj.name +"去吃饭",obj.name +"去睡觉",obj.name +"去打篮球")
}

Person()

// 改

let obj = {name:"July"}

function Person() {
    let name = obj.name
    console.log(name +"去吃饭",name +"去睡觉",name +"去打篮球")
}

Person()

3. 尽量不要使用动态作用域，因为他们会改变执行环境的作用域链。比如 with()语句和 try{}catch(){}的 catch(){}字句 …, 它们都会改变执行环境的作用域链。比如下面这段代码：with 会把一个包含了 obj 全部属性的新的可变变量置于作用域链的头部，使得访问 obj 对象属性速度非常快，但是访问局部变量则变慢了，因此还是尽量避免使用。

let obj = {name:"July"}

function Person() {with(obj){console.log(name +"去吃饭",name +"去睡觉",name +"去打篮球")
    }
}
Person()
退出移动版