JavaScript 性能优化2

最新推荐文章于 2022-07-30 10:57:39 发布

置顶 Jack おう

最新推荐文章于 2022-07-30 10:57:39 发布

阅读量189

点赞数 1

分类专栏： js 拉钩大前端

本文链接：https://blog.csdn.net/weixin_45345105/article/details/109965210

版权

拉钩大前端同时被 2 个专栏收录

30 篇文章 12 订阅

订阅专栏

20 篇文章 1 订阅

订阅专栏

JSBench 使用

https://jsbench.me/

堆栈中的 JS 执行过程

普通值存放栈内存，引用类型堆内存GC负责回收
在这里插入图片描述

减少判断层级

在我们编写的过程中，有可能会出现判断条件嵌套的场景，而往往这种场景都可以提前 return 掉那些无效的条件来达到嵌套层级的优化效果。

// 嵌套 IF
function doSomething(part, chapter) {
    const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']
    if(part) {
        if(parts.includes(part)){
            console.log('属于当前的前端课程')
            if(chapter > 5){
                console.log('您需要提供 VIP 身份')
            }
        }
    } else {
        console.log('请确认模块信息')
    }
}

// 提前 return 的 IF 
function doSomething(part, chapter) {
    const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']
    if(!part) {
        console.log('请确认模块信息')
        return 
    }

    if(!parts.includes(part)) return 
    console.log('属于当前的前端课程')
    if(chapter > 5){
        console.log('您需要提供 VIP 身份')
    }
}

doSomething('ES2016', 6)

在这里插入图片描述

减少作用域链查找层级

在这里插入图片描述

// 优化前

var name = 'zce'
function foo() {
    name = 'zce666' // 属于全局的 name
    function baz() {
        var age = 38
        console.log(age)
        console.log(name)
    }
    baz()
}

foo()


// 优化后

var name = 'zce'
function foo() {
    var name = 'zce666' // 变成局部的 name
    function baz() {
        var age = 38
        console.log(age)
        console.log(name)
    }
    baz()
}

foo()

在这里插入图片描述
代码量大的话效果是很明显的。
通过 ops 可以看出来优化后的速度会更快一些，但是：

当前只是关注的时间，如果是关注内存的情况下，反而是优化前更好一些，因为优化后是又单独开辟了一片空间存放的 name 。

但是另外再说一点，如果说 foo 在其他地方没有被引用，那么这个内存消耗只是暂时的。

总结一下：每当一个函数执行的时候都会生成一个执行上下文，定义这个函数的执行环境，当这个函数执行完成以后，这个执行上下文就会被销毁掉(取决于是否有闭包存在)，因此，多次调用同一个函数的时候，就会创建多个执行上下文，这些上下文都是有自己的作用域的，作用域之间，又可以通过作用域链进行连接，所以，在函数执行过程中，每遇到一个变量，都会先搜索自己的作用域，如果没有，会沿着作用域链往上找，一层层的往上找。

如果说变量存在离当前的执行上下文更近的地方，查找所消耗的时间就更小一些，但是这只是从时间上来看的，从空间上来看就是占据更多一点的空间，具体看当时的一个需求，是用空间换时间还是用时间换空间。

减少数据读取次数

在 JS 中，经常使用到的数据形式主要分为：字面量，局部的变量，以及数组元素，和对象属性这四种。

访问字面量和访问局部的变量，速度是最快的，因为他们直接存放于栈区当中，而访问数组元素和对象成员，就会显得相对较慢一些，这是因为我们需要按照引用的关系，需要先到堆区当中所存储的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减少数据读取次数</title>
</head>
<body>
    <div id="skip" class="skip"></div>
    <script>
        var oBox = document.getElementById('skip')
        function hasEle(ele, cls) {
            return ele.className == cls //如果classname嵌套很深的话 查找更久
        }

        function hasEle(ele, cls) {
            var clsname = ele.className
            return clsname == cls
        }

        console.log(hasEle(oBox, 'skip'))
    </script>
</body>
</html>

在这里插入图片描述

可以看到，将 className 缓存起来，不让它每次都读取一下，效率会高一些。

字面量与构造式

这里说的是不同的声明方式和性能之间的关系：


var test = () => {
    var obj = new Object()
    obj.name = 'zce'
    obj.age = 38
    obj.slogan = '声明一个 obj'
    return obj
}


var test = () => {
    var obj = {
        name: 'zce',
        age: 38,
        slogan: '声明一个 obj'
    }
    return obj
}

console.log(test())

在这里插入图片描述

可以看到，直接通过字面量来创建的执行速度远比 new 关键字创建的速度快。因为new相当于调用一个函数，字面量是直接开辟一个空间往里存。

再看一个更明显的 demo：

var str = '声明一个 str'

var str = new String('声明一个 str')

在这里插入图片描述
返回对象也有好处，就是可以沿着原型链调用方法。字面量就不可以。
即使不转也会找到这个实力，找到原型链。

减少循环体中活动

把重复使用的值做一个缓存，2.循环体内应该少放一些修改操作的值。
在这里插入图片描述

var test = () => {
    var i
    var arr = ['aaa', 33, 'hahaha']
    for(i = 0; i < arr.length; i++){
        console.log(i)
    }
}

var test = () => {
    var i
    var arr = ['aaa', 33, 'hahaha']
    var len = arr.length
    for(i = 0; i < len; i++){
        console.log(i)
    }
}

test()

再看一个从循环的方式来进行优化（不考虑顺序）：

var test = () => {
    var i
    var arr = ['aaa', 33, 'hahaha']
    var len = arr.length
    for(i = 0; i < len; i++){
        console.log(i)
    }
}

var test = () => {
    var arr = ['aaa', 33, 'hahaha']
    var i = arr.length
    while(i --){
        console.log(i);
    }
}

test()

如果考虑顺序，先进行一次反转，再从后往前：

在这里插入代码片

在这里插入图片描述

可以看到，结果还是后边的更快一点，因为代码量更少了，做的事少了。

这就是循环结构在优化的时候最常见的两种思路：

把循环体里边重复的事情，如果说值不变，没必要每次都重新获取一遍
采用另一种思路(从后往前)，可以少做一些操作

减少声明及语句数

减少声明

程序语言是可以记录保存以及修改状态的，而正是这些状态，让我们可以去完成很多的复杂的功能；很明显的，如果我们想记录这些状态，就需要消耗更多的空间，因此对于那些后续不需要频繁使用的数据，建议在使用的时候直接进行获取而不是进行缓存。

这样说和以前讲的缓存可能有一些违背，但是它也有一定的道理。

这样做的目的是程序在执行时降低对当前内存的消耗。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减少声明及语句数</title>
</head>
<body>
    <div id="box" style="width:100px;height:100px;"></div>
    <script>
        var oBox = document.getElementById('box')
        var test = (ele) => {
            var w = ele.offsetWidth
            var h = ele.offsetHeight
            return w * h
        }
        
        var test = (ele) => {
            return ele.offsetWidth * ele.offsetHeight
        }
        console.log(test(oBox));
    </script>
</body>
</html>

之前建议（针对某些对象属性值访问，应该尽可能去减少访问层级。所以建议做缓存 let a = obj.xxx），
虽然js是解释性语言，但运行前也是要编译的，在编译简单如果代码量多了，例如let w = ele.offsetWidth js还要分析语法进行拆分要拆除let 空格 a 等号等等，然后转语法树，然后在转成代码执行，所有第一种时间消耗就是这样浪费了。
第二种只需要对ele进行词法分析就行了。
在这里插入图片描述

减少语句数

var test = () => {
    var name = 'zce'
    var age = 38
    var slogan = '这是一个字符串'
    return name + age + slogan
}

var test = () => {
    var name = 'zce', 
        age = 38, 
        slogan = '这是一个字符串'
    return name + age + slogan
}
test()

在这里插入图片描述
原理也是因为词法的转换。第二种语法分析会更快一些更快分析完去执行代码了。

实际情况的话得看当时的一个需求，如果说要从考虑维护性方面来看的话，上边的那种方式可能更清晰明了一点。

惰性函数与性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惰性函数与性能</title>
</head>
<body>
    <button id="btn">点击</button>
    <button id="btn2">点击2</button>
    <button id="btn3">点击3</button>
    <script>
        var oBtn = document.getElementById('btn')
        var oBtn2 = document.getElementById('btn2')
        var oBtn3 = document.getElementById('btn3')

        function foo() {
            console.log(this);
        }

        // function addEvent(obj, type, fn) {
        //     if(obj.addEventListener) {
        //         obj.addEventListener(type, fn, false) // false 去掉冒泡
        //     } else if(obj.attachEvent) {
        //         obj.attachEvent('on' + type, fn)
        //     } else {
        //         obj['on' + type] = fn
        //     }
        // }

        function addEvent(obj, type, fn) {
            if(obj.addEventListener) {
                addEvent = (obj, type, fn)=>{
                    obj.addEventListener(type, fn, false) // false 去掉冒泡
                }
            } else if(obj.attachEvent) { //是否支持attachEvent
                addEvent = (obj, type, fn)=>{
                    obj.attachEvent('on' + type, fn)
                }
            } else {
                addEvent = (obj, type, fn)=>{ 
                    obj['on' + type] = fn
                }
            }
            return addEvent(oBtn, 'click', foo)
        }

        addEvent(oBtn, 'click', foo)
        addEvent(oBtn2, 'click', foo)
        addEvent(oBtn3, 'click', foo)
    </script>
</body>
</html>

在这里插入图片描述

可以看到，惰性函数速度上是更慢的。

不过，速度慢并不能否定它是一种高阶的用法，只是说基于当前的场景下看到的结果是下边这种方式速度慢。

采用事件绑定

事件委托的本质就是利用 JS 冒泡的机制，把原本需要绑定在子元素的响应事件去委托给了父元素，让父元素完成事件的监听，这样做的好处就是大量减少内存的占用，从而减少事件的注册。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采用事件委托</title>
</head>
<body>
    <ul id="ul">
        <li>ZCE</li>
        <li>38</li>
        <li>这是一个ul li</li>
    </ul>
    <script>
        var list = document.querySelectorAll('li')

        function showText(e){
            console.log(e.target.innerHTML)
        }

        // for(var item of list){  //传统方法一个个加
        //     item.onclick = showText
        // }

        var ul = document.getElementById('ul')
        ul.addEventListener('click', showText1, true)
        function showText1(e){
            var obj = e.target
            if(obj.nodeName.toLowerCase() === 'li'){
                console.log(obj.innerHTML)
            }
        }
    </script>
</body>
</html>

Jack おう

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 性能优化2

JSBench 使用https://jsbench.me/堆栈中的 JS 执行过程普通值存放栈内存，引用类型堆内存GC负责回收减少判断层级在我们编写的过程中，有可能会出现判断条件嵌套的场景，而往往这种场景都可以提前 return 掉那些无效的条件来达到嵌套层级的优化效果。// 嵌套 IFfunction doSomething(part, chapter) { const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']
复制链接

扫一扫

专栏目录