• 如何加速JavaScript 代码运行速度

    如何加速JavaScript 代码运行速度

    前言

    本文主要通过五个方面来讲解如何使Js代码得到性能优化，从而实现加快Js代码运行速度的作用。那么好，本文正式开始。

    减少DOM访问

    减少DOM访问的意思就是如果说，我们要多次调用一个DOM节点使用，那么可以把这个DOM节点定义到一个变量中下次直接调用这个变量即可，这样就可以减少DOM节点的调用，多次调用DOM节点会影响性能，因为它会从HTML文档结构渲染树中找到对应的DOM节点，代码如下：

    var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello"; 

    • 1
    • 2
    • 3

    可以使用这种方式，只访问一次DOM节点，下次直接访问变量。

    避免不必要的变量

    能不定义全局变量就不定义全局变量，因为全局变量有内存冗余和内存泄漏的风险，全局变量只有等页面被关闭才会被释放。

    <body>
	<div id="a"></div>
	<div id="b"></div>
	<script>
		var a = document.getElementById('a')
		var b=document.getElementById('b')
		let hello='hello'
		let world='world'
		a.innerHTML=hello+''+world
		
		let hellos='hellos'
		let worlds='world'
		let ans=hellos+''+worlds
		b.innerHTML=ans
	</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在上述代码中，有一个DOMa和DOMb我们做了innerHTML操作，DOM用了ans变量作为中间值，但这个中间值不是必要的，而且这个中间值ans只用了一次，所以我们可以不通过中间值，直接赋值a的HTML结构中。

    延迟script加载

    把script放在页面底部，使得页面先于sript被加载，或者放在顶部，在script标签中加上defer或async标签，defer标签的意思是指在浏览器中先按HTML顺序下载，但是等页面加载完后才加载这些js，async也是类似，不同的是async是异步加载。
    defer：同步属性，先下载js文件，然后渲染HTML，最后渲染js文件，按照顺序。
    async：异步属性，先解析HTMl，但当js下载完成后会停止HTML解析，执行脚本，解析脚本后才继续渲染HTML。

    异步和同步

    同步是指按顺序加载，而异步是指不按顺序加载。两者都能加载完，只不过加载的方式不同，如果我们某个js文件需要依托另一个文件的内容调用，需要用同步，否则同步异步都可以。

    使用异步编程

    使用异步编程可以很好的解决js可能造成的阻塞问题，因为js是单线程的语言，所以它对于同步代码会按顺序处理，那同时因为它的运行机制，可以利用事件循环来进行解决，大体就是先执行同步任务，再执行异步任务。也就是说，当执行完所有的同步任务后，才会执行异步任务，异步任务又分为宏任务和微任务，先执行微任务，后执行宏任务，所以说，在特定情况下，多使用异步编程会解决页面阻塞问题。

    避免使用With关键词

    避免使用 with 关键词。它对速度有负面影响。它也将混淆 JavaScript 作用域。
    严格模式中不允许 with 关键词。

  • 相关阅读:
    清华大佬力荐的JVM学习路线+实战笔记+阿里真题，吃透吊打面试官
    Vue_Bug VUE-ELEMENT-ADMIN默认是英文模式
    正则表达式?: ?= ?! 的用法详解
    【面试题 - mysql】进阶篇 - 分库分表
    模板再认识
    Python函数
    LabVIEW使用PID对激振器控制
    MQTT vs. XMPP，哪一个才是IoT通讯协议的正解
    《深度学习进阶：自然语言处理》读书笔记：第2章 自然语言和单词的分布式表示
    VR全景如何助力乡村振兴，VR全景推动农业发展
  • 原文地址：https://blog.csdn.net/lplovewjm/article/details/134533190