js常见简单的优化总结

前言

一般在做项目时，要考虑js性能方面的问题，所以就来了解并掌握js编写代码的优化

1. 巧用|| 和&&布尔运算符

function eventHandler(e) {
	if(!e) {
		e = window.event
	}
}
//可优化替换为
function eventHandler(e) {
	e = e || window.event;
}

2. 减少重绘和重排（回流）

浏览器根据HTML结构生成DOM树，根据CSS生成CSSOM，再将DOM和CSSOM整合形成RenderTree，再根据RenderTree开始渲染和展示，得知节点的样式，之后就计算这些节点在页面上的大小和位置，最后将节点绘制到页面上。

重绘：当Render Tree中部分或全部的元素的尺寸，结构或某些属性发生改变，浏览器就会重新渲染部分或全部文档的过程

重排：当页面中元素样式的改变并不影响其在文档流中的位置时（如：color、background-color、visibility等等），浏览器将新样式赋予给元素并重新绘制页面的过程

导致重排和重绘的因素：

• 页面初次渲染
• 添加或删除可见的DOM元素
• 浏览器窗口大小发生改变
• 元素尺寸或者位置发生改变
• 元素内容发生（图片，文字等）
• 元素字体大小变化

减少重绘和重排：

• 避免频繁的样式操作；
• 最好一次性重写style或者一次性更改class；
• 避免频繁操作dom；
• 对于具有复杂动画的元素使用绝对定位，使其脱离文档流，否则会引起父元素及后续元素频繁重排（回流）。

3.提升js文件的加载性能

脚本放在html代码之后引入，因为JS执行从上到下，如果一段JS代码引入外部链接，那么会先下载JS文件后执行，期间其它的代码会发生阻塞(导致其它外部资源css、image下载暂停)，所以优先将script部分放在页面代码之后。

4.尽量避免闭包的使用

for(var i = 0; i < 5; i++) {
	(function(i){
		setTimeout(function() {
			console.log(i)  //输出0-4
		},1000)
	})(i)
}

这个例子就使用到了闭包，因闭包的属性包含了与执行环境作用域相同的对象的引用，因此会导致闭包里的变量无法被销毁，从而导致占用了更多内存空间，也有可能导致内存泄漏等问题，它关系到内存以及执行速度，所以在使用闭包时要慎重考虑这些问题。

所以不推荐上面的写法，推荐使用let优化之后是这样的

for(let i= 0; i < 5; i++) {
	setTimeout(function(){
		console.log(i);
	}, 1000)
}

5. 使用事件委托减少事件绑定
之前的博客有谈到js事件委托，链接如下：
https://blog.csdn.net/qq_41238274/article/details/103338133
6. 使用事件的节流或防抖进行优化
https://blog.csdn.net/qq_41238274/article/details/105606577