优化JavaScript总结分享（上）

2019年9月1日 97次阅读 来源: yuefengsu

本来想整顿一篇完全的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>

《优化JavaScript总结分享（上）》

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()
    原文作者：yuefengsu
    原文地址: https://segmentfault.com/a/1190000019240914
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞