欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

有效提高JavaScript執(zhí)行效率的幾點知識

 更新時間：2015年01月31日 11:30:31   投稿：junjie  
這篇文章主要介紹了有效提高JavaScript執(zhí)行效率的幾點知識,本文從JavaScript函數(shù)、JavaScript作用域、JavaScript字符串、JavaScript DOM操作、DOM重繪、DOM訪問、DOM遍歷等方面講解了提高JavaScript執(zhí)行效率的小技巧,需要的朋友可以參考下

為了提供新鮮、別致的用戶體驗，很多網(wǎng)站都會使用 JavaScript 來改善設計、驗證表單、檢查瀏覽器，以及Ajax請求，cookie操作等等，實現(xiàn)無刷新動態(tài)效果 。但是，要將大量內(nèi)容在瀏覽器呈現(xiàn)，如果處理不好，網(wǎng)站性能將會急劇下降。所以我們有必要了解下，如何提高JavaScript的執(zhí)行效率。

JavaScript 函數(shù)

在JavaScript 中，函數(shù)在使用前會預編譯。盡管有些時候下可以使用字符串代替函數(shù)，但是每次執(zhí)行這段JavaScript 代碼時都會重新解析，影響性能。

1、eval例子

復制代碼 代碼如下:

eval('output=(input * input)');
// 建議改成：
eval(new function() { output=(input * input)});

2、setTimeout例子

復制代碼 代碼如下:

setTimeout("alert(1)", 1000);
// 建議改成:
setTimeout(function(){alert(1)}, 1000);

使用函數(shù)代替字符串作參數(shù)確保新方法中的代碼能被 JavaScript 編譯器優(yōu)化。

JavaScript作用域

JavaScript作用域鏈中的每個作用域都包含幾個變量。理解作用域鏈很重要，這樣才能利用它。

復制代碼 代碼如下:

var localVar = "global"; //全局變量

function test() {

  var localVar = "local"; //局部變量

  //局部變量
  alert(localVar);

  //全局變量
  alert(this.localVar);

  //查找document在局部變量找不到，就查找全局變量
  var pageName = document.getElementById("pageName");
}

使用局部變量比使用全局變量快得多，因為在作用域鏈中越遠，解析越慢。下圖顯示了作用域鏈結構：

如果代碼中有 with 或 try-catch 語句，作用域鏈會更復雜，如下圖：

JavaScript字符串

JavaScript中一個非常影響性能的函數(shù)是字符串連接，一般情況都是使用 + 號來實現(xiàn)拼接字符串。但是早期瀏覽器沒有對這樣的連接方式做優(yōu)化，導致在連續(xù)創(chuàng)建和銷毀字符串嚴重降低JavaScript執(zhí)行效率。

復制代碼 代碼如下:

var txt = "hello" + " " + "world";

建議改成：

復制代碼 代碼如下:

var o = [];
o.push("hello");
o.push(" ");
o.push("world");
var txt = o.join();

我們再簡單封裝一下：

復制代碼 代碼如下:

function StringBuffer(str) {
    var arr = [];
    arr.push(str || "");
    this.append = function(str) {
        arr.push(str);
        return this;
    };
    this.toString = function() {
        return arr.join("");
    };
};

然后這樣子調用：

復制代碼 代碼如下:

var txt = new StringBuffer();
txt.append("Hello");
txt.append(" ");
txt.append("World");
alert(txt.toString());

JavaScript DOM操作

HTML Document Object Model (DOM) 定義了訪問和操作 HTML 文檔的標準方法。它將 HTML 文檔表示成節(jié)點樹，其中包含元素、屬性和文本內(nèi)容。通過使用 HTML DOM，JavaScript 能訪問 HTML 文檔中所有節(jié)點并操作它們。

DOM重繪

每次修改到頁面的DOM對象，都涉及到DOM重繪，瀏覽器都會重新渲染頁面。所以降低DOM對象的修改次數(shù)，可以有效地提高JavaScript 的性能。

復制代碼 代碼如下:

for (var i = 0; i < 1000; i++ ) {
  var elmt = document.createElement('p');
  elmt.innerHTML = i;
  document.body.appendChild(elmt);
}

建議改成：

復制代碼 代碼如下:

var html = [];
for (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

DOM訪問

通過DOM可以訪問到HTML文檔中的每個節(jié)點。每次調用getElementById()、getElementsByTagName()等方法，都會重新查找并訪問節(jié)點。所以將查找到的DOM節(jié)點緩存一下，也可以提高JavaScript 的性能。

復制代碼 代碼如下:

document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";

建議改成：

復制代碼 代碼如下:

var elmt = document.getElementById("p2");
elmt.style.color = "blue";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "larger";

DOM遍歷

DOM遍歷子元素通常都是按索引循環(huán)讀取下一個子元素，在早期瀏覽器下這種讀取方式執(zhí)行效率很低，利用nextSibling方式可以提高js遍歷DOM的效率。

復制代碼 代碼如下:

var html = [];
var x = document.getElementsByTagName("p");//所有節(jié)點
for (var i = 0; i < x.length; i++)  {
  //todo
}

建議改成：

復制代碼 代碼如下:

var html = [];
var x = document.getElementById("div");//上級節(jié)點
var node = x.firstChild;
while(node != null){
  //todo
  node = node.nextSibling;
}

JavaScript 內(nèi)存釋放

在web應用中，隨著DOM對象數(shù)量的增加，內(nèi)存消耗會越來越大。所以應當及時釋放對象的引用，讓瀏覽器能夠回收這些內(nèi)存。

釋放DOM占用的內(nèi)存

復制代碼 代碼如下:

document.getElementById("test").innerHTML = "";

將DOM元素的innerHTML設置為空字符串，可以釋放其子元素占用的內(nèi)存。

釋放javascript對象

復制代碼 代碼如下:

//對象：
obj = null
//對象屬性：
delete obj.property
//數(shù)組元素：
arr.splice(0,3);//刪除前3個元素

相關文章

最新評論