如何加速JavaScript 代码运行速度

如何加速JavaScript 代码运行速度

  • 前言
  • 减少DOM访问
  • 避免不必要的变量
  • 延迟script加载
  • 异步和同步
  • 使用异步编程
  • 避免使用With关键词

前言

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

减少DOM访问

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

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

可以使用这种方式,只访问一次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>

在上述代码中,有一个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 关键词。

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)