优化JavaScript总结分享（上）

jackwang 发布于2019-08-26 13:52 / 2288人阅读

摘要：上面代码优化后尽量使用局部变量缓存全局变量在实际开发中尽量使用局部变量缓存全局变量，因为，到一个函数多次访问全局变量的时候，会出现一个作用域练查找的过程，全局作用域位置越深找到的时间就越久，因此这也会涉及到性能的执行速度问题。

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

1.引用 script标签的优化

2019/05/14/01:30

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

优化方式

传统的方式

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

延迟JavaScript脚本执行

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

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()

GPU云服务器云服务器 javascript学习总结 javascript分享 javascript优化 JavaScript代码优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109707.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端开发周报：JavaScript编程术语和web图片优化

摘要：函数式编程术语大全函数式编程有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。作用域有两种类似全局作用域和局部作用域。目前最重要的应用场景之一，就是在的握手阶段，客户端服务端利用算法交换对称密钥。 1、JavaScript 函数式编程术语大全函数式编程(FP)有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。...

kbyyd24 2019-08-21 12:05 评论0 收藏0
前端开发周报：JavaScript编程术语和web图片优化

摘要：函数式编程术语大全函数式编程有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。作用域有两种类似全局作用域和局部作用域。目前最重要的应用场景之一，就是在的握手阶段，客户端服务端利用算法交换对称密钥。 1、JavaScript 函数式编程术语大全函数式编程(FP)有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。...

kelvinlee 2019-08-29 13:21 评论0 收藏0