1、字符串的拼接
用数组join的方法代替+=的方法,可以提高执行效率;
实例:
- <div class="one" id="one"></div>
- <input type="button" value="效率低" οnclick="func1()" />
- <input type="button" value="效率高" οnclick="func2()" />
- //效率低的
- function func1(){
- var start = new Date().getTime();
- var template = "";
- for(var i = 0; i < 10000; i++){
- template += "<input type='button' value='a'>";
- }
- var end = new Date().getTime();
- document.getElementById("one").innerHTML = template;
- alert("用时:" + (end - start) + "毫秒");
- }
- //效率高的
- function func2(){
- var start = new Date().getTime();
- var array = [];
- for(var i = 0; i < 10000; i++){
- array[i] = "<input type='button' value='a'>";
- }
- var end = new Date().getTime();
- document.getElementById("one").innerHTML = array.join("");
- alert("用时:" + (end - start) + "毫秒");
- }
- 2、for循环 在我们使用for循环的时候,特别是需要计算长度的情况,我们应该开始将其保存到一个变量中。主要是因为for循环在执行中,第一种情况会每次都计算一下长度,而第二种情况却是在开始的时候计算长度,并把其保存到一个变量中,所以其执行效率要高点
-
- var arr = [];
- for(var i = 0; i < 10000; 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();
- alert("用时:" + (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();
- alert("用时:" + (end - start) + "毫秒");
- }
- 2、for循环 在我们使用for循环的时候,特别是需要计算长度的情况,我们应该开始将其保存到一个变量中。主要是因为for循环在执行中,第一种情况会每次都计算一下长度,而第二种情况却是在开始的时候计算长度,并把其保存到一个变量中,所以其执行效率要高点
-
- var arr = [];
- for(var i = 0; i < 10000; 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();
- alert("用时:" + (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();
- alert("用时:" + (end - start) + "毫秒");
- }
- 3、减少页面的重绘
- 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>";
- //效率低的
- function func1(){
- var obj = document.getElementById("one");
- var start = new Date().getTime();
- for(var i = 0; i < 100; i++){
- obj.innerHTML += str + i;
- }
- var end = new Date().getTime();
- alert("用时 " + (end - start) + " 毫秒");
- }
- //效率高的
- function func2(){
- var obj = document.getElementById("one");
- var start = new Date().getTime();
- var arr = [];
- for(var i = 0; i < 100; i++){
- arr[i] = str + i;
- }
- obj.innerHTML = arr.join("");
- var end = new Date().getTime();
- alert("用时 " + (end - start) + " 毫秒");
- }