Home思洋影视事业部网站建设知识库
0 Comments

如何优化你的JS代码(3)

发布于：2013-11-20  |   作者：广州网站建设  |   已聚集：人围观

3、减少页面的重绘

减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的，而重绘的情况往往是严重影响页面性能的，所以完全有必要拿出来，我们看下面例子：



    
	
  1. 
		<div id="demo"></div>   
    2. 
	
  2. 
		<input type="button" value="效率低" onclick="func1()" />   
    3. 
	
  3. 
		<input type="button" value="效率高" onclick="func2()" /> 
    4. 





    
	
  1. 
		var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";   
    2. 
	
  2. 
		//效率低的   
    3. 
	
  3. 
		function func1(){   
    4. 
	
  4. 
		    var obj = document.getElementById("demo");   
    5. 
	
  5. 
		    var start = new Date().getTime();   
    6. 
	
  6. 
		    for(var i = 0; i < 100; i++){   
    7. 
	
  7. 
		        obj.innerHTML += str + i;   
    8. 
	
  8. 
		    }   
    9. 
	
  9. 
		    var end = new Date().getTime();   
    10. 
	
  10. 
		    alert("用时 " + (end - start) + " 毫秒");   
    11. 
	
  11. 
		}   
    12. 
	
  12. 
		//效率高的   
    13. 
	
  13. 
		function func2(){   
    14. 
	
  14. 
		    var obj = document.getElementById("demo");   
    15. 
	
  15. 
		    var start = new Date().getTime();   
    16. 
	
  16. 
		    var arr = [];   
    17. 
	
  17. 
		    for(var i = 0; i < 100; i++){   
    18. 
	
  18. 
		        arr[i] = str + i;   
    19. 
	
  19. 
		    }   
    20. 
	
  20. 
		    obj.innerHTML = arr.join("");   
    21. 
	
  21. 
		    var end = new Date().getTime();   
    22. 
	
  22. 
		    alert("用时 " + (end - start) + " 毫秒");   
    23. 
	
  23. 
		} 
    24. 




	在例子中，我只是用了100次的循环，因为如果用10000次循环的话，浏览器基本上就卡住不动了，但是即使是100次的循环，我们看看下面的执行结果。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	



	可以看到的是，这简直是一个惊人的结果，仅仅100次的循环，不管是在什么浏览器下，都出现了如此之大的差别，另外我们还发现，在这里，IE6的执行效率居然比起Firefox还要好很多，可见Firefox在页面重绘这方面并没有做一些的优化。这里还要注意的是，一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机