精华内容
下载资源
问答
  • js 代码优化点滴记录

    2020-12-03 15:50:53
    1、简单示例如下: switch用例 代码如下: var caseContent = ”;//条件判断后处理内容 var caseValue = 5 ;//条件判断值 switch(caseValue){ case 0: caseContent = “鞋子”; break; case 1: caseContent = “裤子...
  • Javascript代码优化大全

    2021-04-14 13:20:43
    在学习JavaScript代码优化之前,我们先应该知道JavaScript语言的特性: JavaScript中的内存管理自动完成 执行引擎会使用不用的GC算法 算法工作的目的是为了实现内存空间良性循环 Performance工具检测内存变化 ...

    在学习JavaScript代码优化之前,我们先应该知道JavaScript语言的特性:

    • JavaScript中的内存管理自动完成
    • 执行引擎会使用不用的GC算法
    • 算法工作的目的是为了实现内存空间良性循环
    • Performance工具检测内存变化
    • JavaScript是单线程机制的解释性语言。

    正是由于JavaScript属于解释性语言,因此在性能方面天生具有一定的弱点,因此这就使得我们在编写代码的过程中更加注重一定的细节,这样让我们代码在运行过程中,不然浏览器完成太多的超负荷工作。

    因此我总结了以下的代码优化方案:

    1. 避免全局变量
    2. 避免全局查找
    3. 避免循环引用
    4. 采用字面量替换new构造方式
    5. 使用requestAnimationFrame代替setTimeout和setInterval
    6. 采用事件委托代替大量绑定
    7. 使用文档碎片代替多次append
    8. 使用clone代替creat
    9. 减少判断层级
    10. 减少循环体中的活动
    11. 减少声明及语句数

    下面分别来一一讲解上述内容,在此之前,先给大家介绍一个可以检测代码运行速度、检测性能的网站JSBench,大家可以点击进入,或者输入网址https://jsbench.me

    JSBench网站使用说明及注意实现:

    我们写一串代码来模拟要测试的内容,来教大家简单快速的使用JSBench

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>代码优化</title>
    	</head>
    	<body>
    		<ul class="ul"></ul>
    	</body>
    	<script type="text/javascript">
    		// 需求:在ul中插入1000个li
    		// 优化前,使用append方法插入
    		let ul = document.querySelector(".ul")
    		for(let i =0;i<10;i++){
    			let li = document.createElement("li")
    			li.innerText = i
    			ul.appendChild(li)
    		}
    		
    		//优化后,使用文档碎片方法
    		let dom = document.createDocumentFragment()
    		for(let i =0;i<10;i++){
    			let li = document.createElement("li")
    			li.innerText = i
    			dom.appendChild(li)
    		}
    		ul.appendChild(dom)
    	</script>
    </htm
    

    首先,我们先简单看一下JSBench网站功能布局
    在这里插入图片描述

    然后按照上述指引将代码放上去后为:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210414173107234.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80
    PS:在使用本网站时,耐心等待一下结果,不要去切屏,不然会影响线程,进而影响结果的准确率。


    学会使用JSBench之后,接下来我们开始学习代码优化:

    一. 避免全局变量

    我们先来了解一下全局变量的特点:

    • 全局变量挂在在window上
    • 全局变量至少有一个引用变量
    • 全局变量存活更久,因此也会持续性的占用内存

    因此无论从性能还是从空间利用来说,应该尽可能的减少大量的全局变量。

    我们所熟悉的es5中的var变量,就是将变量直接挂载到window对象上。但es6中的letconst变量具有作用域,因此也可以被垃圾回收机制所回收,因此尽可能的使用letconst进行定义。

    var a = 1
    let b = 1
    console.log(window.a) //1
    console.log(window.b) //undefined
    

    在函数局部作用域内,根据需求进行选择,如果是函数外部需要的变量,那么定义为全局变量,如果是函数外部不需要的变量,那么就定义为局部变量,这样在函数执行完之后被垃圾回收机制所回收,不会影响内存

    //如果在内部不使用变量定义将变量转化成局部变量的时候,那么外部也会访问到的,进而影响函数执行完毕后垃圾的正常回收。
    function text(){
      a = 1
    console.log(a)        // 1
    }
    text()
    console.log(a)   // 1 
    //上面这种方式会影响垃圾的正常回收,因此我们使用变量声明改成局部变量
    function text(){
     let a = 1
     console.log(a) //1 	
    }
    text()
    console.log(a) //报错:a is not defined
    

    二. 避免全局查找

    什么是全局查找?

    • 当目标变量不在当前所在作用域内,就会通过作用域链或者原型链向上查找,这样会增加时间的消耗。但类似于用空间换去执行效率,因为这样虽然减少了沿着作用域链或原型链查找的时间,但是却为创建局部变量开辟了空间。
    //需求:获取浏览器窗口的大小
    // 优化前
    function winSize(){
    	console.log(window.innerWidth,window.innerHeight)
    }
    winSize()
    

    由于每次查找的时候,在当前作用域内并没有该值,那么就会返回到全局中进行查找,因此,我们可以使用局部变量提前定义并缓存该值,也就是提前建立一个数据缓冲区,不必使得每次大范围查找,节约了时间,提升了效率,但是会使得空间使用增大,因此需要看情况来使用,是追求空间还是追求效率

    //优化后
    function winSize(){
    	let w = window.innerWidth
    	let h = window.innerHeight
    	console.log(w,h)
    }
    winSize()
    

    三. 避免循环引用

    循环引用是指程序中对象互相引用的一种现象,存在于两个或两个以上的对象。我用我们最常使用dom事件进行演示。例如:我们在一个函数中定义了一个dom节点,然后又利用该dom节点进行其他的dom操作,这样就是对象的互相引用。由于这样存在着引用关系,容易使得垃圾回收机制在工作时造成一些问题,不会被回收,这样就使得该对象的内存一直占据着程序内存,直到我们将浏览器进行关闭。

    //需求,在fun函数中定义一个dom节点,并且添加监听事件
    //优化前
    function fun(){
    	let dom = document.querySelector(".box")
    	dom.addEventListener("click",function(){
    		console.log(this)
    	},false)
    }
    fun()
    

    分析:我们定义了一个dom元素,并且doom元素中又有一个监听事件指向另一个函数对象,因此存在着dom和内部function函数之间的互相引用,所以会导致GC(垃圾回收机制)工作时无法将dom进行回收。因此我们可以采用下面两种方式实现对dom的回收
    方案一:在dom监听事件之后,让dom指向null,这样可以告诉GC该对象没人引用,可以被回收

    function fun(){
    	let dom = document.querySelector(".box")
    	dom.addEventListener("click",function(){
    		console.log(this)
    	},false)
    	dom = null
    }
    fun()
    

    方案二:将监听事件的定义函数定义到外部。

    function fn(){
    	console.log(this)
    }
    function fun(){
    	let dom = document.querySelector(".box")
    	dom.addEventListener("click",fn,false)
    }
    

    四. 采用字面量替换new构造方式

    由于每一个内置对象都会有自己的属性和成员方法,因此js在预解析的时候需要进行额外的操作,但是采用字面量的写法会比较直接,将当前的存在对应的空间内,然后让变量对象指向该空间即可。但是对于不同的类型会有不同的差距。js中的数据类型分为基本数据类型引用数据类型,下面我们分别对两种类型进行测试。

    基本数据类型:

    在这里插入图片描述

    引用数据类型:
    在这里插入图片描述

    因此我们得出结论:

    • 引用类型会有差距,但差距不是很大
    • 但是使用基础数据类型会有相当大的差距

    五. 使用requestAnimationFrame代替setInterval和setTimeout

    requestAnimationFrame(请求动画帧)的优势:

    1. 由系统来决定回调函数的执行时机
    2. CPU节能
    3. 函数节流

    详细介绍如下:
    1.requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。
    2.使用setTimeout实现的动画,当页面被隐藏或最小化时,setTimeout 仍然在后台执行动画任务,由于此时页面处于不可见或不可用状态,刷新动画是没有意义的,完全是浪费CPU资源。而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了CPU开销。
    3.在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。


    六. 采用事件委托代替大量绑定

    传统的绑定方法需要先找到所有的子元素,然后利用循环监听事件进行dom操作,但是当相同的一类元素大量的循环监听时,无异于对性能和内存都很不友好,因此我们可以采用事件委托的形式来进行监听,这样就免去了大量的重复性的循环监听。下面来看实例:

    假设需求:一个ul里面有多个li标签和一个p标签,要求我们在点击每一个li标签的时候,打印出当前li标签的内容,当点击p标签的时候,不做任何处理。

    //优化前,采用循环监听
    let li = document.querySelectorAll("li")
    for(let item of li){
    	item.addEventListener("click",function(){
    	console.log(this.innerText)
    	},false)
    }
    
    //优化后,使用事件委托
    let ul = document.querySelector(".ul")
    ul.addEventListener("click",function(even){
    	let target = even.target
    	//判断是不是li元素
    	if(target.nodeName.toLowerCase()==="li"){
    		console.log(target.innerText)
    	}
    },false)
    

    注意:事件委托方法采用jsben测试的时候,反而上面的方法要比下面的方法快,因此这里不再从时间上对其进行测试,但是我们可以从逻辑思维上进行理解,但一个元素列表的数量相当多的时候,需要绑定大量的事件,进而影响性能,但是利用事件委托来做的话,就可以很好的解决这一个问题


    七. 使用文档碎片代替多次append

    大量的dom操作是很消耗性能的,每当往页面中添加一个元素,就会使得页面进行重绘,反复的添加大量的元素后,会使得性能大大降低。因此我们要使用文档碎片,也称文本代码片段。利用这样的一个缓冲机制,先将所有的需要添加的元素添加到文档碎片里,最后再将文档碎片添加到页面中,这样就不会一直使页面重绘,从而提升了性能。我们来看实例:

    假设有一个矩形,需要往里面插入若干个p标签(p标签有形状和大小),直到填充满。

    方案一:使用appendChild

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>代码优化</title>
    		<style type="text/css">
    			*{
    				margin: 0;padding: 0;
    			}
    			.banner{
    				width: 486px;
    				height: 300px;
    				border: 5px solid #000000;
    				margin: 20px auto;
    				padding: 5px;
    			}
    			.banner p{
    				width: 50px;
    				height: 30px;
    				background-color: #0000FF;
    				margin: 2px;
    				float: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="banner"></div>
    	</body>
    	<script type="text/javascript">
    		let banner = document.querySelector(".banner")
    		// 计算填充p标签的个数
    		let len = Math.floor(banner.offsetWidth/54)*Math.floor(banner.offsetHeight/34)
    		for(let i=0;i<len;i++){
    			let p = document.createElement("p")
    			p.innerHTML = i
    			banner.appendChild(p)
    		}
    	</script>
    </html>
    

    方案二:使用文档碎片

    //优化后的js代码
    let dom = document.createDocumentFragment()
    	for(let i=0;i<len;i++){
    		let p = document.createElement("p")
    		p.innerHTML = i
    		dom.appendChild(p)
    	}
    banner.appendChild(dom)
    

    八. 使用clone代替creat

    碰见需要大量生成相同元素的情况下,如果有模板,就使用克隆,这样就省去了创建大量的dom节点,从而节省了性能和内存。我们来看实例:

    有一个ul元素,里面有一个li元素,需要往里面再添加1000个li元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>代码优化</title>
    	</head>
    	<body>
    		<ul>
    			<li></li>
    		</ul>
    	</body>
    	<script type="text/javascript">
    		let ul = document.querySelector("ul")
    		let li = document.querySelectorAll("li")[0]
    		let fff = document.createDocumentFragment()
    		for(let i=0;i<1000;i++){
    			let dom = document.createElement("li")
    			dom.innerText = i
    			fff.appendChild(dom)
    		}
    		ul.appendChild(fff)
    	</script>
    </html>
    
    //优化后
    for(let i=0;i<1000;i++){
    	let dom = li.cloneNode(false)
    	dom.innerHTML = i
    	fff.appendChild(dom)
    }
    

    九. 减少判断层级

    大量的判断层级不仅会使得代码臃肿,也不利于后期的维护和阅读。能使用switch代替的就使用switch,这样可以使得代码没有太多的else if判断。或者是使用提前return的方法。下面我们来看实例:

    我们以最常见的数组递归来举例子,并且在此基础上加上一个条件,那就是数组降维后只保存大于5的元素。

    //优化前:未使用提前return方法
    let arr = [6,2,8,[1,[9,2],3]]
    let newArr = []
    function arrFlat(arr){
    	if(Array.isArray(arr)){
    		while(arr.length){
    		let val = arr.shift()
    		if(Array.isArray(val)){
    			arrFlat(val)
    		}else{
    			if(val>5){
    			newArr.push(val)
    					}
    			}
    		}
    	}
    }		
    arrFlat(arr)
    
    //优化后:使用提前return方法
    function arrFlat(arr){
    	if(!Array.isArray(arr)) return
    	while(arr.length){
    	let val = arr.shift()
    		if(Array.isArray(val)){
    			arrFlat(val)
    		}else{
    			if(val<=5) return
    				newArr.push(val)
    			}
    		}
    	}
    

    我们利用JSBench对上述两段代码进行测试:
    在这里插入图片描述
    发现的确使用提前return方法会使得代码执行速度变快,因此在判断层级中,能使用提前return退出循环的就使用。


    十: 减少循环体中的活动

    以for循环为例,因为循环体内的内容,都是我们想要多次执行的内容,在循环次数固定的情况下,循环体内容越多,循环体执行效率越低,反之越高。因此我们提前把一个经常使用的值提取出来进行缓存好。我们来看实例:

    定义一个数组,使用for循环打印出数组的每一项

    // 优化前
    let arr = [1,4,2,6,2,4,2]
    for(let i=0;i<arr.length;i++){
    	console.log(arr[i])
    }
    

    我们可以提前先把循环体内的变量缓存出来

    //优化后
    let arr = [1,4,2,6,2,4,2]
    let len = arr.length
    for(let i=0;i<len;i++){
    	console.log(arr[i])
    }
    

    十一: 减少声明及语句数

    咋一看起来好像与上一条所说的提前缓存有些冲突,但是不然。由于js虽然是一门解释性语言,但是也需要预编译的,只不过时间非常短而已,因此语句的声明、解析也需要一定的时间,对于上述所提到的利用缓存,那是针对相比来说经常使用的数据,但是对于不会每次用到的数据没有必要使用缓存,这样反而只会增加内存与执行时间。

    //优化前:
    function text(){
    	let name = "web"
    	let eat = "干饭人"
    	let paly = "干饭魂"
    	let method = "干饭的都是人上人"
    	return name+eat+paly+method
    }
    text() 
    

    我们可以使用逗号来代替

    //优化后:
    function text(){
    	let name = "web",
    	eat = "干饭人",
    	paly = "干饭魂",
    	method = "干饭的都是人上人"
    	return name+eat+paly+method
    }
    text()
    

    我们使用JSBenc对比后得:
    在这里插入图片描述

    减少声明是因为每次执行var,let和const时不用拆分解析编译,这样用逗号代替来说,相比起来就会简单,只不过这样的话再后期维护或者是阅读的时候相比第一种方法来说不是很直观,所以还是那句话,根据需求进行选择,尽管下面这种方法执行效率会更高,但还是尽量推荐上面这种写法,因为这样写会更加直观。


    展开全文
  • js代码优化

    2014-10-27 12:49:27
     为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件。跟十个5k的js文件相比,合并成一个50k的文件更好。虽然代码总字节数没变,却避免了多个HTTP请求造成的开销。每个请求都会在客户端和服务器两边有...

    1.合并js文件

            为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件。跟十个5k的js文件相比,合并成一个50k的文件更好。虽然代码总字节数没变,却避免了多个HTTP请求造成的开销。每个请求都会在客户端和服务器两边有个建立和消除的过程,导致请求和响应header带来开销,还有服务器端更多的进程和线程资源消耗(可能还有为压缩内容耗费的cpu时间)。除了HTTP请求,并发问题也很重要。默认情况下,在使用持久连接(persistent connections)时,ie和firefox在同一域名内只会同时下载两个资源。这就意味着,在我们等待下载2个js文件的同时,将无法下载图片资源。也就是说,这段时间内用户在页面上看不到图片。

    (这个方法有缺点:把所有资源一起打包,将强制用户一次下载完所有资源,造成某些用户不必要的开销)

     

    2、减缓代码下载时间:

            Web浏览器下载的是javaScript的源码、其中包含的长变量名、注释、空格和换行等多余字符大大减缓了代码下载的时间。这些字符对于团队编写时十分有效、但在最后工程完成上传到服务器时、应当将它们全部删除。例如:

    1
    2
    3
    4
    5
    6
    7
    function showMeTheMoney(){ 
             if (!money){ 
                     return false
             } else
                     ... 
            
    }

    Javascript代码   可优化成: 

    function showMeTheMoney(){if(!money){return false;}else{...}}   
            这样、优化后就节约了25个字节、倘若是一个大的javaScript工程、将节省出非常大的空间、不但提高了用户的下载速度、也减轻了服务器的压力。相信这样的代码大家见过不少、很多优秀的js插件源码都这么干! 

            另外、对于布尔型的值true和false、true都可以用1来代替,而false可以用0来代替。对于true节省了3个字节、而false则节省了4个字节、例如 

    1
    2
    3
    4
    5
    var bSearch = false
             for ( var i=0;i<aChoices.length&&!bSearch;i++){ 
                 if (aChoices[i] == vValue) 
                     bSearch = true
             }

    替换成:

    1
    2
    3
    4
    5
    var bSearch = 0; 
             for ( var i=0;i<aChoices.length&&!bSearch;i++){ 
                 if (aChoices[i] == vValue) 
                     bSearch = 1 ; 
             }

            替换了布尔值之后、代码的执行效率、结果都相同、但节省了7个字节。 

            代码中常常会出现检测某个值是否为有效值的语句、而很多条件非的判断就判断某个变量是否为"undefined"、"null"、或者"false"、例如: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    if (myValue != undefined){ 
                 //...  
            
               
             if (myValue != null ){ 
                 //...  
            
               
             if (myValue != false ){ 
                 //...  
            

            这些虽然都正确、但采用逻辑非操作符"!"也可以有同样的效果、代码如下: 

    1
    2
    3
    if (!myValue){  
                 //...   
             }



      


            这样的替换也可以节省一部分字节、而且不太影响代码的可读性。类型的代码优化还有将数组定义时的 new Array()直接用"[]"代替、对象定义时的 new Object()用"{}"代替等、例如: 

    var myArray = new Array();   
            var myArray = [];   
            var myObject = new Object();   
            var myObject = {};   
      
            显然、第二行和第四行的代码较为精简、而且也很容易理解。 

      

            另外、在编写代码时往往为了提高可读性、函数名称、变量名称使用了很长的英文单词、同时也大大增加了代码的长度、例如:
    1
    2
    3
    function AddThreeVarsTogether(firstVar,secondVar,thirdVar){ 
                 return (firstVar+secondVar+thirdVar); 
             }

    可优化成: 

    1
    function A(a,b,c){ return (a+b+c);}




            注意:在进行变量名称替换时、必须十分小心、尤其不推荐使用文本编辑器的"查找"、"替换"功能、因为编辑器不能很好地区分变量名称或者其他代码。例如、希望将变量"tion"全部替换成"io"、很可能导致关键字"function"也被破坏。 

            对于上面说的这些减少代码体积的方法、有一些很实用的小工具可以自动完成类似的工作、例如ECMAScript Cruncher、JSMin、Online JavaScript Compressor等。 

      

    3、合理声明变量 

            减少代码的体积仅仅只能使得用户下载的速度变快、但执行程序的速度并没有改变。要提高代码执行的效果、还得在各方面做调整。 

            在浏览器中、JavaScript默认的变量范围是window对象、也就是全局变量。全局变量只有在浏览器关闭才释放。而JavaScript也有局部变量、通常在function中执行完毕就会立即被释放。因此在函数体中要尽可能使用var关键字来声明变量: 
    1
    2
    3
    4
    5
    6
    7
    8
    function First(){  
                 a = "" ;   //直接使用变量   
             }  
             function Second(){  
                 alert(a);  
             }  
             First();  
             Second();



       
            这样、变量"a"就成为了全局变量、直到页面关闭时才会被销毁、浪费了不必要的资源、如果在"a"的前面加上"var"、这样"a"就成为了当前function的局部变量。在执行完First()便立即被销毁。因此、在函数体中、如果不是特别需要的全局变量、都应当使用"var"进行声明、从而节省系统资源。 

      

    4、使用内置函数缩短编译时间 

            只要可能、应当尽量使用JavaScript的内置函数。因为这些内置的属性、方法都是用类似C、C++之类的言语编译过的、运行起来比实时编译的JavaScript快很多。例如计算指数函数、可以自己编写: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    < html
       < head
         < base href="<%=basePath%>"> 
         < title >内置函数</ title
         < meta http-equiv = "pragma" content = "no-cache"
         < meta http-equiv = "cache-control" content = "no-cache"
         < meta http-equiv = "expires" content = "0" >     
         < meta http-equiv = "keywords" content = "keyword1,keyword2,keyword3"
         < meta http-equiv = "description" content = "This is my page"
         < script type = "text/javascript"
             function myPower(iNum,n){ 
                 var iResult = iNum ; 
                 for(var i=0;i< n ;i++) 
                     iResult *= iNum ; 
                 return iResult; 
            
             var myDate1 = new Date(); 
             for(var i = 0 ;i<150000;i++){ 
                 myPower(7,8);  //自定义方法 
            
             var myDate2 = new Date(); 
             document.write(myDate2 - myDate1); 
             document.write(""); 
             myDate1 = new Date(); 
             for(var i = 0 ;i<150000;i++){ 
                 Math.pow(7,8);  //采用系统内置方法 
            
             myDate2 = new Date(); 
             document.write(myDate2 - myDate1); 
         </script> 
       </ head
       < body
       </ body
    </ html >

            运行的结果:在IE上使用定义的方法耗时2156ms,使用内置方法为750ms;  在firefox浏览器上,使用定义的方法耗时3625ms,使用内置方法为766ms; 

    5、合理书写if语句 

            if语句恐怕是所有代码中使用最频繁的、然而很可惜的是它的执行效率并不是很高。在用if语句和多个else语句时、一定要把最有可能的情况放在第一个、然后是可能性第二的、依此类推。例如预计某个数值在0~100之间出现的概率最大、则可以这样安排代码: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (iNum>0&&iNum <100){  
                 alert( "在0和100之间" );  
             } else if (iNum>99&&iNum<200){  
                 alert( "在100和200之间" );  
             } else if (iNum>199&&iNum<300){  
                 alert( "在200和300之间" );  
             } else {  
                 alert( "小于等于0或者大于等于300" );  
             }



       
            总是将出现概率最多的情况放在前面、这样就减少了进行多次测试后才能遇到正确条件的情况。当然也要尽可能减少使用else if 语句、例如上面的代码还可以进一步优化成如下代码: 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    if (iNum>0){  
                 if (iNum<100){  
                     alert( "在0和100之间" );  
                 } else {  
                     if (iNum<200){  
                         alert( "在100和200之间" );  
                     } else {  
                         if (iNum<300){  
                             alert( "在200和300之间" );  
                         } else {  
                             alert( "大于等于300" );  
                         }  
                     }  
                 }  
             } else {  
                 alert( "小于等于0" );  
             }




      
            上面的代码看起来比较复杂、但因为考虑了很多代码潜在的判断问题、执行问题、因此执行速度要较前面的代码快。另外、通常当超过两种情况时、最好能够使用switch语句。经常用switch语句代替if语句、可令执行速度快甚至10倍。另外、由于case语句可以使用任何类型、也大大方便switch语句的编写。 

      

    6、最小化语句数量 

            脚本找哦个的语句越少执行的时间就越短、而且代码的体积也会相应减少。例如使用var定义变量时可以一次定义多个、代码如下 
    1
    2
    3
    4
    var iNum = 365; 
             var sColor = "yellow"
             var aMyNum = [8,7,12,3] ; 
             var oMyDate = new Date();

            上面的多个定义可以用var关键字一次性定义、代码如下: 


    var iNum = 365, sColor = "yellow" , aMyNum = [8,7,12,3],oMyDate = new Date() ;   
            同样在很多迭代运算的时候、也应该尽可能减少代码量、如下两行代码: 

    var sCar = aCars[i];   
            i++;   
      
            可优化成: 

    var sCar = aCars[i++];   
      



    7、节约使用DOM 

            JavaScript对DOM的处理可能是最耗费时间的操作之一。每次JavaScript对DOM的操作都会改变页面的表现、并重新渲染整个页面、从而有明显的时间消耗。比较快捷的方法就是尽可能不在页面进行DOM操作、如下例中为ul添加了10个条目 

    1
    2
    3
    4
    5
    6
    var oUl = document.getElementById( "ulItem" ); 
             for ( var i=0;i<10;i++){ 
                 var oLi = document.createElement( "li" ); 
                 oUl.appendChild(oLi); 
                 oLi.appendChild(document.createTextNode( "Item " +i)); 
             }

             以上代码在循环中调用oUl.appendChild(oLi)、每次执行这条语句后、浏览器就会重新渲染页面、其次给列表添加文本节点oLi.appendChild(document.createTextNode("Item "+i))、这也会造成页面被重新渲染。因此每次运行都会造成两次重新渲染页面、共20次。 

            通常应当尽可能减少DOM的操作、将列表项目在添加文本节点之后在添加、并合理地使用createDocumentFragment()、代码如下: 

    1
    2
    3
    4
    5
    6
    7
    8
    var oUl = document.getElementById( "ulItem" ); 
             var oTemp = document.createDocumentFragment(); 
             for ( var i=0;i<10;i++){ 
                 var oLi = document.createElement( "li" ); 
                 oLi.appendChild(document.createTextNode( "Item " +i)); 
                 oTemp.appendChild(oLi); 
            
             oUl.appendChild(oTemp);


    8、JS代码压缩
    网上有很多工具,包括在线压缩js代码的工具,可以将我们写好的js代码压缩,去掉空格和回车符,减少js代码的体积。当我们完成项目并通过测试后,将js代码压缩后替换进项目,然后再测试,通过则可以上线了。
       
    1
    2
    3
    4
    5
    6
    7
    8
    var oUl = document.getElementById( "ulItem" ); 
             var oTemp = document.createDocumentFragment(); 
             for ( var i=0;i<10;i++){ 
                 var oLi = document.createElement( "li" ); 
                 oLi.appendChild(document.createTextNode( "Item " +i)); 
                 oTemp.appendChild(oLi); 
            
             oUl.appendChild(oTemp);
    展开全文
  • 本篇主要内容是JavaScript的性能优化,包含Performance工具及JavaScript代码优化

    Part2 · 前端工程化实战

    JavaScript性能优化-工具及代码优化

    文章说明:本专栏内容为本人参加【拉钩大前端高新训练营】的学习笔记以及思考总结,学徒之心,仅为分享。如若有误,请在评论区支出,如果您觉得专栏内容还不错,请点赞、关注、评论。共同进步!

    上一篇:【JavaScript性能优化-内存管理】

    本篇主要内容是JavaScript的性能优化,包含Performance工具及JavaScript代码优化

    超长文、多图预警!!!超长文、多图预警!!!

    一、Performance工具

    1.Performance工具介绍

    使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。

    为什么我们需要使用Performance工具,其原因有以下几点:

    • GC的目的是为了实现内存空间的良性循环
    • 良性循环的基石是合理使用
    • 时刻关注才能确定是否合理
    • 由于ECMAScript中未向开发者提供操作内存空间的API
    • Performance工具提供了多种监控方式

    Performance使用步骤为:

    1. 打开浏览器输入目标地址
    2. 进入开发人员工具面板(F12),选择performance
    3. 开启录制功能,访问具体界面
    4. 执行用户行为,一段时间后停止录制
    5. 分析界面中记录的内存信息

    2.内存问题的体现

    内存问题的体现分为外在表现和内在表现。

    内存问题的外在表现:

    • 页面出现延迟加载或经常性暂停
    • 页面持续性出现糟糕的性能
    • 页面的性能随时间延长越来越差

    内存问题的内在表现:

    • 内存泄漏:内存使用持续升高
    • 内存膨胀:在多数设备上都存在性能问题
    • 频繁垃圾回收:通过内存变化图进行分析

    3.监控内存的几种方式

    3.1任务管理器监控内存

    打开浏览器,按键【Shift】+ 【Esc】,调出浏览器任务管理器。找到我们的目标标签页,刚开始可能没有JavaScript内存,可以在目标标签页任务上右键,然后选择JavaScript内存。

    记录JavaScript内存(JavaScript堆占用的内存,表示界面中所有可达对象占用的内存)及内存占用空间(原生内存,DOM节点占用的内存),点击按钮,记录每次内存的变化。

    在这里插入图片描述

    3.2Timeline记录内存

    上述浏览器任务管理器更多的是用于判断当前脚本是否存在内存问题,而不能具体定位到问题。我们使用Timeline时间线记录内存变化,更精确的记录到内存变化。

    在这里插入图片描述

    3.3堆快照查找分离DOM

    什么是分离DOM

    • 界面元素存货在DOM树上
    • 垃圾对象时的DOM节点(当前DOM从存活的DOM树上分离,且js中没有应用这个DOM)
    • 分离状态的DOM节点(当前DOM节点从当前DOM树分离,但js中还在应用它)

    在这里插入图片描述

    在点击按钮后,DOM中生成了分离的DOM,造成内存空间的浪费,因此我们需要将代码中的temEle置空,这样让GC对垃圾进行回收即可。

    3.4判断是否存在频繁GC

    为什么要确定频繁垃圾回收

    • GC工作时应用程序是停止的
    • 频繁且过长的GC会导致应用假死
    • 用户使用中感知应用卡顿

    确定频繁的垃圾回收:

    • Timeline中频繁的上升下降
    • 任务管理器中的数据频繁增加减小

    二、代码优化

    1.代码优化介绍

    如何精准测试JavaScript性能:

    • 本质上就是采集大量的执行脚本进行数学统计和分析
    • 使用基于Benchmark.js的https://jsbench.me/使用

    在这里插入图片描述

    代码需要优化的原因:

    • JavaScript中的内存管理自动完成
    • 执行引擎会使用不同的GC算法
    • 算法工作的目的是为了实现内存空间良性循环
    • Performance工具检测内存变化
    • JavaScript是单线程机制的解释性语言

    2.慎用全局变量及缓存全局变量

    全局变量的特点:

    • 全局变量挂载在window下
    • 全局变量至少有一个引用计数
    • 全局变量存货更久,但持续占用内存

    全局查找相关:

    • 目标变量不存在于当前作用域内,通过作用域链向上查找
    • 减少全局查找降低的时间消耗
    • 减少不必要的全局变量定义
    • 全局变量数据局部化

    慎用全局变量:

    • 全局变量定义在全局执行上下文,是否有作用域链的顶端
    • 全局执行上下文一直存在于上下文执行栈,指导程序退出
    • 如果某个局部作用于初夏了同名的变量则会遮蔽或午饭全局

    慎用全局变量代码演示:

    function fn() {
      name = 'lg'
      console.log(`${name} is a coder`)
    }
    
    fn() 
    
    
    function fn() {
      const name = 'lg'
      console.log(`${name} is a coder`)
    }
    
    fn() 
    

    测试结果:

    在这里插入图片描述

    var i, str = ''
    for (i = 0; i < 1000; i++) {
      str += i
    }
    
    for (let i = 0; i < 1000; i++) {
      let str = ''
      str += i
    }
    
    

    在这里插入图片描述

    缓存全局变量代码演示:

    <!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>
      <input type="button" value="btn" id="btn1">
      <input type="button" value="btn" id="btn2">
      <input type="button" value="btn" id="btn3">
      <input type="button" value="btn" id="btn4">
      <p>1111</p>
      <input type="button" value="btn" id="btn5">
      <input type="button" value="btn" id="btn6">
      <p>222</p>
      <input type="button" value="btn" id="btn7">
      <input type="button" value="btn" id="btn8">
      <p>333</p>
      <input type="button" value="btn" id="btn9">
      <input type="button" value="btn" id="btn10">
    
      <script>
        function getBtn() {
          let oBtn1 = document.getElementById('btn1')
          let oBtn3 = document.getElementById('btn3')
          let oBtn5 = document.getElementById('btn5')
          let oBtn7 = document.getElementById('btn7')
          let oBtn9 = document.getElementById('btn9')
        }
    
        function getBtn2() {
          let obj = document
          let oBtn1 = obj.getElementById('btn1')
          let oBtn3 = obj.getElementById('btn3')
          let oBtn5 = obj.getElementById('btn5')
          let oBtn7 = obj.getElementById('btn7')
          let oBtn9 = obj.getElementById('btn9')
        }
      </script>
    
    </body>
    </html>
    

    测试结果:

    在这里插入图片描述

    3.通过原型对象添加附加方法

    代码演示:

    var fn1 = function() {
      this.foo = function() {
        console.log(11111)
      }
    }
    
    let f1 = new fn1()
    
    
    var fn2 = function() {}
    fn2.prototype.foo = function() {
      console.log(11111)
    }
    
    let f2 = new fn2()
    

    测试结果:

    在这里插入图片描述

    4.避开闭包陷阱

    关于闭包:

    • 闭包是一种强大的语法
    • 闭包使用不当很容易出现内存泄漏
    • 不要为了闭包而闭包

    代码示例:

    function test(func) {
      console.log(func())
    }
    
    function test2() {
      var name = 'lg'
      return name
    }
    
    test(function() {
      var name = 'lg'
      return name
    })
    
    test(test2)
    

    5.避免属性访问方法使用

    • JavaScript不需要属性的访问方法,所有属性都是外部可见的
    • 使用属性访问方法只会增加一层重定义,没有访问的控制力

    代码示例:

    function Person() {
      this.name = 'icoder'
      this.age = 18
      this.getAge = function() {
        return this.age
      }
    }
    
    const p1 = new Person()
    const a = p1.getAge()
    
    
    
    function Person() {
      this.name = 'icoder'
      this.age = 18
    }
    const p2 = new Person()
    const b = p2.age
    

    测试结果:

    在这里插入图片描述

    6.For循环优化及选择最优循环方法

    代码示例:

    var arrList = []
    arrList[10000] = 'icoder'
    
    for (var i = 0; i < arrList.length; i++) {
      console.log(arrList[i])
    }
    
    for (var i = arrList.length; i; i--) {
      console.log(arrList[i])
    }
    

    测试结果:

    在这里插入图片描述

    选择最优循环方法

    代码示例:

    var arrList = new Array(1, 2, 3, 4, 5)
    
    arrList.forEach(function(item) {
      console.log(item)
    })
    
    for (var i = arrList.length; i; i--) {
      console.log(arrList[i])
    }
    
    for (var i in arrList) {
      console.log(arrList[i])
    }
    

    测试结果(forEach效率最高):

    在这里插入图片描述

    7.文档碎片优化节点添加、克隆优化节点操作

    代码示例:

    <!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>
      <script>
    
        for (var i = 0; i < 10; i++) {
          var oP = document.createElement('p')
          oP.innerHTML = i 
          document.body.appendChild(oP)
        }
    
        const fragEle = document.createDocumentFragment()
        for (var i = 0; i < 10; i++) {
          var oP = document.createElement('p')
          oP.innerHTML = i 
          fragEle.appendChild(oP)
        }
    
        document.body.appendChild(fragEle)
    
      </script>
    </body>
    </html>
    

    测试结果:

    在这里插入图片描述

    克隆优化节点操作

    代码示例:

    <!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>
      <p id="box1">old</p>
    
      <script>
    
        for (var i = 0; i < 3; i++) {
          var oP = document.createElement('p')
          oP.innerHTML = i 
          document.body.appendChild(oP)
        }
    
        var oldP = document.getElementById('box1')
        for (var i = 0; i < 3; i++) {
          var newP = oldP.cloneNode(false)
          newP.innerHTML = i 
          document.body.appendChild(newP)
        }
    
      </script>
    
    </body>
    </html>
    

    测试结果:

    在这里插入图片描述

    8.直接量替换new Object

    代码示例:

    var a = [1, 2, 3]
    
    var a1 = new Array(3)
    a1[0] = 1
    a1[1] = 2
    a1[2] = 3
    

    测试结果:
    在这里插入图片描述

    9.堆栈中的JS执行过程

    let a = 10;
    function foo(b) {
        let a = 2;
        function baz(c) {
            console.log(a+b+c);
        }
        return baz
    }
    let fn = foo(2);
    fn(3);
    

    在这里插入图片描述

    10.减少判断层

    function doSomething(part, chapter) {
        const parts = ['ES2015', '工程化', 'Vue', 'Reach', 'Node'];
        if (part) {
            if (parts.includes(part)) {
                console.log('属于当前课程')
                if (chapter > 5) {
                    console.log('您需要提供VIP身份')
                }
            }
        } else {
            console.log('请确认模块信息')
        }
    }
    
    doSomething('ES2015', 6)
    
    function doSomething2(part, chapter) {
        const parts = ['ES2015', '工程化', 'Vue', 'Reach', 'Node'];
        if (!part) {
            console.log('确认模块信息')
            return
        }
        if (!parts.includes(part)) return;
        console.log('属于当前课程')
        if (chapter > 5) {
            console.log('您需要提供VIP身份')
        }
    }
    
    doSomething2('ES2015', 6)
    

    11.减少作用域链查找层级

    代码示例:

    var name = 'zce';
    
    function foo() {
        name = 'zce666'  // 这里的name是全局的
        function baz() {
            var age = 28
            console.log(age)
            console.log(name)
        }
        baz()
    }
    foo()
    
    var name = 'zce';
    
    function foo() {
        var name = 'zce666'  // 这里的name是全局的
        function baz() {
            var age = 28
            console.log(age)
            console.log(name)
        }
        baz()
    }
    foo()
    

    测试结果:

    在这里插入图片描述

    12.减少数据读取次数

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>减少数据读取次数</title>
    </head>
    <body>
    	<div id="skip" class="skip"></div>
    	<script>
    		var oBox = document.getElementById('skip')
    		function hasEle(ele, cls) {
    				return ele.className === cls
        }
        
        function hasEle(ele, cls) {
    		    var className = ele.className
    		    return className === cls
        }
    
        console.log(hasEle(oBox, 'skip'))
    	</script>
    </body>
    </html>
    

    测试结果:

    在这里插入图片描述

    13.字面量与构造式

    代码示例:

    var test = () => {
        let obj = new Object();
        obj.name = 'zce';
        obj.age = '28';
        obj.slogan = '我为前端而活'
        return obj
    }
    
    var test = () => {
        let obj = {
            name: 'zce',
            age : '28',
            slogan: '喔喔前端而活'
        }
        return obj
    }
    
    console.log(test())
    

    测试结果:

    在这里插入图片描述

    14.减少循环体中活动

    代码示例:

    var test = () => {
        var i
        var arr = ['zce', 28, '我为前端而活']
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }
    }
    
    var test = () => {
        var i
        var arr = ['zce', 28, '我为前端而活']
        var len = arr.length
        for (let i = 0; i < len; i++) {
            console.log(arr[i])
        }
    }
    

    测试结果:

    在这里插入图片描述

    15.惰性函数与性能

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    </head>
    <body>
    	<button id="btn"></button>
    	<script>
    		var oBtn = document.getElementById('btn');
    		function foo() {
            console.log(this)
        }
        
        function addEvent(obj, type, fn) {
    		    if (obj.addEventListener()) {
    		        obj.addEventListener(type, fn, 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.addEventListener(type, fn, false)
            } else if (obj.attachEvent) {
                addEvent = obj.attachEvent('on'+type, fn)
            } else {
                addEvent = obj['on' + type] = fn
            }
            return addEvent
        }
        
    	</script>
    </body>
    </html>
    

    16.减少声明及语句数

    代码示例:

    var test = () => {
        let w = 200
        let h = 300
        return w * h
    }
    
    var test = () => {
        return 200 * 300
    }
    

    17.采用事件绑定

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    </head>
    <body>
    <ul id="ul">
    	<li>Leo</li>
    	<li>28</li>
    	<li>我为前端而活</li>
    </ul>
    <script>
    	var list = document.querySelectorAll('li')
    	function showText(ev) {
          console.log(ev.target.innerHTML)
      }
    
      for (let listElement of list) {
    		  item.onclick = showText
      }
      
      var oUl = document.getElementById('ul')
    	oUl.addEventListener('click', showText, true)
    </script>
    </body>
    </html>
    

    今日分享就到了这里,上面很多的概念性问题,要完全的理解并使用这些新的知识,需要很长一段时间。多用、多查、多做!
    Part1 JavaScript部分分享完成,后面进行前端工程化的分享,共同进步!

    记录:2020/11/16

    展开全文
  • 前端js代码优化方法

    千次阅读 2020-11-26 17:46:20
    净化代码方法 1. IF语句简化 假设我们有下面的代码 if(value === 'duck' || value === '...将判断条件过长的条件判断放到一个变量中存储,比看臃肿的表达式要舒服的多 2. 使用默认参数和解构赋值 在JavaScript中我们

    本篇笔记不定期更新

    一、IF语句简化

    假设我们有下面的代码

    • 1. 使用includes简化if判断
    if(value === 'duck' || value === 'dog' || value === 'cat') {
      // ...
    }
    

    我们可以这样解决

    let options = ['duck', 'dog', 'cat' ]
    if (options.includes(value)) {
    	//....
    }
    

    将判断条件过长的条件判断放到一个变量中存储,比看臃肿的表达式要舒服的多

    • 2. 通过条件判断给变量赋值布尔值
    let b
    if (a === 'a') {
    	b = true
    } else {
    	b = flase
    }
    
    // 简写
    b = a === 'a'  // 代码简单明了
    
    • 3. 简单的条件判断使用三元运算
    let b
    if (a === 'a') {
    	b = 1
    } else {
    	b = 2
    }
    
    // 三元运算
    b = a === 'a' ? 1 : 2
    

    二、使用默认参数和解构赋值

    • 在JavaScript中我们总需要检查 null/undefined 值和指定默认值
    function test (fruit, num) {
    	if (!fruit) return
    	const n = num || 1
    	console.log(`we have ${n}${fruit}`)
    }
    test('banner') // we have 1 个 banner
    tset('banner', 10) // we have 10 个 banner
    

    事实上,我们可以通过声明默认的函数参数来消除变量n

    function test (fruit, num = 1) {
    	if (!fruit) return
    	console.log(`we have ${num}${fruit}`)
    }
    test('banner') // we have 1 个 banner
    tset('banner', 10) // we have 10 个 banner
    
    // 注意:每一个声明都有自己默认参数,例:我们也可以给fruit设置一个默认值 function test (fruit = 'apple', num = 1)
    
    // 如果 fruit是一个对象 
    function testObj ({name} = {}) { // 从对象中解构出name
    	console.log(name || 'unKnown')
    }
    test() // unKnown
    test({name: 'banner', color: 'red'}) // banner
    
    • 在javaScript中,我们可以对object 和 array 进行解构赋值。
    //  Object 对象解构赋值
    let obj = { name: 'zs', age: 18 }
    let {name, age} = obj
    console.log(name) // 'zs'
    console.log(age) // 18
    
    // array 数组解构赋值
    let arr = [ 1, 2, 3, 4, 5 ]
    let [one , two] = arr
    console.log(one) // 1
    console.log(two) // 2
    

    三、少嵌套,早返回

    假设我们有下面的代码

    function test (fruit, num) {
    	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
    	if (fruit) {
    		if (redFruit.includes(fruit)) {
    			console.log('red')
    			if (num > 10) {
    				console.log('多个红色水果')
    			}
    		}
    	} else {
    		throw new Error('没有水果')
    	}
    }
    
    test(null) // error: 没有水果
    test('apple') // red
    test('apple', 20) // red, 多个红色水果
    

    以上代码:

    • 1个if/eles语句筛出无效的条件语句
    • 3层嵌套的语句(条件1,2和3)

    及早返回使得我们的代码更加易读:

    • 通过及早return,我们减少了一层嵌套语句,尤其当你有很长的if语句(想象你需要滚动到很长才能知道有else语句)
    function tset (fruit, num) {
    	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
    	if (!fruit) throw new Error('没有水果')
    	if (redFruit.includes(fruit)) {
    		console.log('red')
    		if (num > 10) {
    			console.log('很多红色水果')
    		}
    	}
    }
    
    
    // 针对上面的例子,我们可以通过倒置判断条件和及早的return来进一步减少if嵌套
    function test (fruit, num) {
    	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
    	if (!fruit) throw new Error('没有水果')
    	if (!redFruit.includes(fruit)) return;
    	if (num > 10) {
    		console.log('很多红色水果')
    	}
    }
    

    四、 减少遍历,快速获取对象的属性名和属性值

    • 使用Object.keys快速获取对象的属性名
    • 使用Object.valuse快速获取对象的属性值
    let obj = {
    	name: 'zs',
    	age: 18
    }
    // 方法一:遍历对象
    let keys = []
    let values = []
    for (key in obj) {
    	keys.push(key) // keys: ['name', 'age']
    	values.push(obj[key]) // valuse:['zs', 18]
    }
    
    // 方法二:使用Objcet.keys和Object.valuse
    let keys = Object.keys(obj) // ['name', 'age']
    let values = Object.values(obj) // ['zs', 18]
    

    五、字符串拼接使用${}

    let person = {
    	name: 'zs',
    	age: 18
    }
    
    // 字符串拼接使用'+'号
    function say (person) {
    	console.log('大家好,我叫' + person.name + ',今年' + person.age + '岁')
    }
    
    // 字符串拼接使用${}, 显而易见清晰多了
    function say(person) {
    	console.log(`大家好,我叫${person.name},今年${person.age}岁`)
    }
    
    // 还可以结合解构赋值一起使用
    function say({name, age}}) {
    	console.log(`大家好,我叫${name},今年${age}岁`)
    }
    

    六、在数组中查找最大值和最小值

    let arr = [1,2,3,4,5,9]
    // 可遍历数组获取,但是使用Math对象方法和展开运算符(...)简洁明了
    Math.max(...arr) // 9 
    Math.min(...arr) // 1
    

    七、null / undefined 检查

    let a 
    if (a !== null || a !== undefined || a !== '') {
    	let b = a
    } else {
    	let b = ''
    }
    
    // 简写
    let b = a || ''
    

    八、给多个变量赋值

    let a, b, c
    a = 1
    b = 2
    c = 3
    
    // 简写
    let [a, b, c] = [1,2,3]
    // console.log(a) ⇒ 1
    

    九、其他

    • 命名规范
    • 保持代码的干净整洁:多余代码或多余注释
    • 代码风格:代码缩进,使用单引号、双引号等
    展开全文
  • 编写高质量可维护的代码优化逻辑判断1.1JavaScript 语法篇1.1.1嵌套层级优化1.1.2多条件分支的优化处理1.1.3使用数组新特性简化逻辑判断多条件判断判断数组中是否所有项都满足某条件判断数组中是否有某一项满足...
  • Javascript代码优化

    2008-11-14 10:40:31
    在看Nicholas C.Zakas写的曹力等翻译的javascript高级程序设计时学习到了一些javascript优化的方法特记录下来。希望大家讨论。 (一) 下载时间 Web浏览器下载的是js源码,因此所有长变量名和注释都回包含在内。这...
  • JS引擎理解并优化javascript代码

    千次阅读 2019-06-17 18:43:45
    序言:作为一名前端工程师,对于javascript大家都不陌生,这篇文章从更深层次的方向——JS引擎去理解javascript到底是怎么运行的,从而进行优化JS Engine—— JS 引擎介绍 一、基本介绍 js引擎是一个专门运行...
  • 小议Javascript代码优化方法及原则

    千次阅读 2007-12-26 11:54:00
    Javascript优化已经讨论了很多了,最近也频繁接触Javascript代码,对Javascript优化也有一些自己的想法,写出一个健壮、高效的代码是每个设计者的最终目标,酒窝最近遇到的一些问题,这里我想从更基础的角度总结在Web...
  • 大伙儿好~,我是小鹿,公众号:「小鹿动画学编程」 原创作者。...本篇文章整理了在日常开发中 30 个常见的 JavaScript 代码优化方案。 本文章已在 Github blog 收录,欢迎大伙儿~ Star,文章中若存在不足或者 issues.
  • Vue.js 代码优化浅谈

    千次阅读 2018-08-25 16:44:09
    前言 vue之火,不言而喻,框架给前端带来了方便,但是代码的漏洞也会很...一、代码优化方向 技术选型没有最好的,只有最适合业务的。目前我们的业务是用gulp+webpack打包构建的。目前有几个痛点: 1、代码冗余。 ...
  • 尽管用到了条件分支语句优化代码,但依然是有继续优化的空间的,无论是在代码执行效率上还是在后期项目管理上。 一、ES6的Map和原生object对象的异同点 ES6中引入了Map数据结构,对于Map,写...
  • 代码: ...优化代码: <script type="text/javascript"> var oCr = document.getElementById("contentRight"); var oWide = document.getElementById("wide"); var oNarrow = doc...
  • js中性能优化 页面级优化 页面级优化的方法有以下几种: CSS Sprites—使用雪碧图 具体的使用方法可以自行百度 教你来使用雪碧图 使用CDN 下图用bootstrap来举例 使用bootstrap的时候,下载bootstrap文件比...
  • 按速度优化JavaScript代码

    千次阅读 2006-09-21 23:38:00
    一旦你的JavaScript能运行,你就会想到使其运行得更快。在讲解加速代码的方法...简言之,如果你的 JavaScript运行得很慢,你可以用很多简单的方法来加速它,但是除非你的代码确实运行得很慢,我不会对它进行再优化
  • javascript中对条件判断语句的优化

    千次阅读 2015-06-07 09:54:12
    其实在平时的代码开发中这并没有什么问题,但是很多的时候我们都希望自己的代码能够变的优雅和简单易懂,并且尽可能少的减少重复的代码。对于以上的问题,在js中存在一个`switch`来代替这样的多`if`语句判断
  • 1、条件判断Array.includes() ...看代码: function isOk(color) { if(color=== 'red' || color === 'yellow') { return true; }else { return false; } } 一个简单的条件判断,如果判断条件较少时,...
  • ES6优化javascript的if判断

    千次阅读 2019-09-16 10:37:32
    最后一个小技巧更多地是利用新的(但不是那么新的)Javascript Array函数来减少代码行。 查看下面的代码,我们想检查所有水果是否都是红色的: const fruits = [ { name: 'apple', color: 'red' }, { name: '...
  • 尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法。 一、使用常见的三元操作符 代码...
  • Web前端开发学习3:SEO代码优化

    千次阅读 2015-10-31 18:28:17
    代码优化概述  关于代码优化的知识是纯理论的知识,学习的很枯燥。在学到CSS时,不免遇到CSS+div进行代码优化的知 识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化问题。  ...
  • 浏览器检测的问题由于各浏览器之间的行为差异,js代码中需要大量的 if 语句,检查浏览器特性,解决浏览器兼容问题。 比如为 dom 节点添加事件的函数:function addEvent (type, element, fun) { if (element....
  • if else的else会占用文件四个字节,但此由于代码加入了return,所以return之后的代码不会继续被解释执行,造成了资源浪费,js文件字节数越大,用户从服务器端请求下载的速度就越长,会影响用户体验 优化案例 .....
  • js中if判断优化写法

    2020-12-07 17:24:17
    (根据status判断执行哪种方法) const onButtonClick1 = (status)=>{ if(status == 1){ sendLog('processing') jumpTo('IndexPage') }else if(status == 2){ sendLog('fail') jumpTo('FailPage') }else ...
  • 代码 优化 指南 实践

    千次阅读 2012-02-04 11:53:46
    C代码优化方案                     华中科技大学计算机学院   姓名: 王全明 QQ: 375288012 Email: quanming1119@163.com 目录 目录 C代码优化方案 1、选择合适的算法和...
  • if判断以及for循环该如何写的更好大致介绍NO.1 接了上一任前端的坑(if判断的升级)接下来进行持续升级,出小干货!跳出反反复复一直写的for循环 大致介绍 这是小m马发布的第一篇文章,关于前端领域的开发习惯,这是...
  • 在ipad/iphone开发中我们往往需要判断用户目前的屏幕的位置,这样加以优化显示应用内容。今天这里我们分享一个jQuery的代码,能够有效帮助大家判断横屏或者竖屏。注意这里调用了jQuery的方法,所以你需要引用jQuery...
  • 程序编译与代码优化

    千次阅读 2016-05-31 15:20:23
    一早期(编译期)优化 1概述 Java语言的“编译期”是一段“不确定”的操作过程,因为它可能是指一个前端编译器(其实叫“编译器的前端”更准确一些)把*.java文件转变成*.class文件的过程;也可能是指虚拟机的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,168
精华内容 33,267
关键字:

js代码优化判断