js 代码的优化 ,完全是照搬,不过挺好使

来源:互联网 发布:java底层框架源码 编辑:程序博客网 时间:2024/04/30 10:20
<div class="one" id="one"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />

  <script type="text/javascript">

1、字符串的拼接
  字符串的拼接在我们开发中会经常遇到,所以我把其放在首位,我们往往习惯的直接用+=的方式来拼接字符串,其实这种拼接的方式效率非常的低,我们可以用一种巧妙的方法来实现字符串的拼接,那就是利用数组的join方法

  /*
  //效率低的
function func1(){
var start = new Date().getTime();
var template = "";
for(var i = 0; i < 100000; i++){
template += "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = template;
console.log("用时:" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
var array = [];
for(var i = 0; i < 100000; i++){
array[i] = "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = array.join("");
console.log("用时:" + (end - start) + "毫秒");
}
*/



2、for循环
  for循环是我们经常会遇到的情况,我们先看看下面例子:
 /*
var arr = [];


for(var i = 0; i < 100000; i++){
arr[i] = "<div>" + i + "</div>";
}
document.body.innerHTML += arr.join("");


//效率低的
function func1(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0; i < divs.length; i++){
//"效率低"
}
var end = new Date().getTime();
console.log("用时:" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
console.log("用时:" + (end - start) + "毫秒");
}

*/

以上代码已经测试 完整好使  加大循环次数,效果贴别明显



0 0
原创粉丝点击