JavaScript性能优化具体实现-第一篇_具体实现性能优化-CSDN博客

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/108931974

在这里插入图片描述

前言

本篇文章主要是介绍JavaScript性能优化是怎么实现的，从代码编辑层面讲解，以及会有一些具体的代码演示

从根本上说，大多数 JavaScript 的性能问题，并不在于运行代码本身，而是在代码开始执行之前必须采取的一系列步骤。

我们在这里讨论抽象层次的问题。计算机上运行的大多数代码都是编译后的二进制格式。意思是说，除了所有的操作系统级别的抽象外，

代码都可以在硬件上本地运行，不需要准备工作，JavaScript 代码不是预编译的，它在浏览器上是可读的。

JavaScript 代码首先会被解析，也就是读取并转换成可用于编译的计算机索引的结构，然后再被编译成字节码，

最后被编译成机器码，用于设备/浏览器执行。

另一个非常重要的方面是：JavaScript 是单线程的，并且在浏览器的主线程上运行。这意味着一次只能运行一个进程。

所以说要尽量提高代码的执行效率

减少判断层级

//不当写法
const { log } = require('console');

function doSomeThing1(part, chapter) {
    const parts = ['ES2016', "Javascript", "node", 'java', 'TS'];
    if (part) {
        if (parts.includes(part)) {
            log('属于当前课程');
            if (chapter > 5) {
                console.log('权限不够，需要提供更高的权限等级');
            }
        }

    }
}

doSomeThing('ES2016',10);

//优化写法

function doSomeThing2(part, chapter) {
    const parts = ['ES2016', "Javascript", "node", 'java', 'TS'];
    if (!part) {
        log('请确认信息的准确性')
        return
    };
    if (!parts.includes(part)) return;

    log("属于当前课程")

    if (chapter > 5) console.log('权限不够，需要提供更高的权限等级');
}

doSomeThing2('ES2016',20);

减少作用域链查找层级

不当写法
var name = 'handsome';

function test1() {
    name = "Loki"; //这里的name是全局的

    function add() {
        let age = 20;
        log(name);
        log(age)
    };
    add()
}

test1();

//改造写法

function test2() {

    let name = "Loki"; //这里的name是全局的

    //重新开了一片内存区域 以空间换取时间

    function add() {
        let age = 20;
        log(name);
        log(age)
    };
    add()
}
test2();

减少数据读取次数

HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="skip" class="skip"></div>
<body>
</body>
</html>

不当写法

<script>

    let oBox = document.getElementById('skip');
    function test(elem, cls) {
        return elem.className === cls
    }

    console.log(test(oBox, 'skip')) //result => true;
</script>

优化写法

<script>
    let oBox = document.getElementById('skip');
    function test(elem, cls) {
        let elementName = elem.className //这里呢在内存里面重新开了一片区域 属于以空间换时间
        return elementName === cls
    };
    console.log(test(oBox, 'skip'))//result => true;
</script>

字面量和构造式

我们都知道自定义数据有两种方式一种是字面量另外一种是构造式其实这两种本质上的运行效率，有很大的不同

构造式写法
const { log } = require('console');

const fun1 = () => {
    let obj = new Object();
    obj.name = 'Loki';
    obj.age = 20;
    obj.slogan = '前端一门深似海，从此美女是路人';
    obj.mail = '17600@163.com'
    return obj
}

log(fun1());

字面量写法

const fun1 = () => {

    let obj = {
        name: 'Loki',
        name: 'Loki',
        age: 20,
        slogan: '前端一门深似海，从此美女是路人',
        mail: '17600@163.com'
    }
    return obj
};
log(fun1());

经实际检测字面量的写法运行效率更高一些，推荐大家使用字面量的写法