JavaScript 代碼優化和部署——“性能和部署”的注意要點

Baaaan 發布于2019-08-19 17:54 / 3114人閱讀

摘要：注意作用域避免全局查找以上代碼應該修改如下避免語句必須使用語句的情況很少，因為它主要用于消除額外的字符。將代碼分離稱多個文件只是為了提高可維護性，并非為了部署。要進行部署的時候，需要將這些源代碼合并為一個或幾個歸并文件。

注意作用域 避免全局查找

</>復制代碼 
function updateUI () {
    var images = document.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete";
}

以上代碼應該修改如下：

</>復制代碼 
function updateUI () {
    var doc = document; //doc
    var images = doc.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = doc.title + " image " + i; //doc
    }
    var msg = doc.getElementById("msg"); //doc
    msg.innerHTML = "Update complete";
}

避免with語句

必須使用with語句的情況很少，因為它主要用于消除額外的字符。

使用正確方法 避免不必要的屬性查找

算法的復雜度是使用O符號來表示的，最簡單快速的算法是常熟值O(1)。

使用變量和數組要比訪問對象上的屬性更有效率。

</>復制代碼 
var query = window.location.href.substring(window.location.href.indexOf("?"));

上面的代碼需要6次屬性查找，應該改為：

</>復制代碼 
var url = window.location.href;
var query = url.substring(url.indexOf("?"));

上面的代碼則減少為4次屬性查找。

優化循環

</>復制代碼 
for (var i = 0; i < Things.length; i++) {
    Things[i]
};
for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

應該才去上面第二種寫法。

</>復制代碼 
var id = Things.length - 1;
if (i > -1) {
    do {
        Things[i];
    } while (--i >= 0);
}

或者把循環改成后測試循環。

展開循環

使用Duff裝置

其他

避免雙重解釋

用原生方法C或C++等

用Switch代替if-else

位操作符代替布爾運算和算數運算

最小化語句數 多個變量聲明

</>復制代碼 
var count = 5;
var color = "red";
var value = [21, 3, 21, 4];
var count = 5,
    color = "red",
    value = [21, 3, 21, 4];

應該采用下面的方法

使用數組和對象字面量語法

</>復制代碼 
var values = new Array();
values[0] = 123;
values[1] = 456;
var obj = new Object();
obj.name = "Oli";
obj.age = 18;
var values = [123, 456];
var obj = {
    name: "Oli",
    age: 18
};

應該采用下面的方法

優化DOM交互 最小化現場更新

使用fragment方法更新DOM

使用innerHTML

</>復制代碼 
var list = document.getElementById("myList"),
    html = "",
    i;
for (var i = 10; i >= 0; i--) {
    html = html + "
listing...
";};
list.innerHTML = html;

類似fragment方法，要避免以下寫法：

</>復制代碼 
var list = document.getElementById("myList"),
    i;
for (var i = 10; i >= 0; i--) {
    list.innerHTML = list.innerHTML + "
listing...
";};

使用事件代理

任何可以冒泡的事件都可以在祖先節點上處理事件；

注意HTMLCollection

</>復制代碼 
var imgs = document.getElementsByTagName("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    //processing...
};

部署 構建過程

將每個對象或自定義類型分別放在多帶帶的文件中。

將代碼分離稱多個文件只是為了提高可維護性，并非為了部署。

要進行部署的時候，需要將這些源代碼合并為一個或幾個歸并文件。

Ant構建工具（http://ant.apache.org）

驗證

用JSLint（http://www.jslint.com）

壓縮 文件壓縮

使用YUI壓縮器（http://yuilibrary.com/projects/yuicompressor）

HTTP壓縮

在Apache Web服務器中可以用下面兩個模塊進行HTTP壓縮：mod_gzip和mod_deflate

云服務器 GPU云服務器 JavaScript代碼優化選云服務器的幾個注意和需求服務器云端部署技術要點云主機的要點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78960.html

JavaScript 代碼優化和部署——“可維護性”的注意要點

摘要：代碼約定可讀性以下地方需要進行注釋函數和方法注釋參數代表什么，是否有返回值大段代碼描述任務的注釋復雜的算法變量和函數命名變量用名詞函數名用動詞開頭等返回布爾值類型的函數用等合乎邏輯不用擔心太長變量類型透明化方法一初始化，如下推薦方法二匈牙利代碼約定可讀性以下地方需要進行注釋：函數和方法：注釋參數代表什么，是否有返回值；大段代碼：描述任務的注釋；復雜的算法； Hack 變...

scwang90 2019-08-19 17:53 評論0 收藏0
Javascript內存的注意要點

摘要：垃圾收集具有自動垃圾收集機制。管理內存優化內存的最佳方式，就是為執行中的代碼只保存必要的數據。一般適用于大多數的全局變量和全局對象的屬性。如執行完畢后，變量被銷毀手動解除的引用解除一個值的引用并不意味著自動回收該值所占的內存。垃圾收集 JavaScript 具有自動垃圾收集機制。標記清除 JavaScript 中最常用的垃圾收集方式是標記清除。當變量進入環境（如在函數中聲明一個...

liaosilzu2007 2019-08-21 10:46 評論0 收藏0
JavaScript 客戶端檢測——“能力檢測”的注意要點

摘要：能力檢測性能檢測基本模式語法目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。更可靠的能力檢測能力檢測對于想知道某個特性是否會按照適當方式行事非常有用。所以在可能的情況下，要盡量使用進行能力檢測。客戶端檢測不到萬不得已，就不要使用客戶端檢測。只要能夠找到更通用的方法，就應該優先采用更通用的方法。先設計最通用的方案，然后再使用特定于瀏覽器的技術增強該方案。能力檢測（性能檢測）基本模...

Pluser 2019-08-19 17:09 評論0 收藏0
編寫高質量Javascript的要點-Review深入理解Javascript系列(一)

摘要：編寫高質量的要點深入理解系列一知識點最小全局變量全局變量命名易與第三方的腳本引起沖突所以盡可能少的使用全局變量是很重要的相關策略有命名空間模式或是函數立即自動執行，但是要想讓全局變量少最重要的還是始終使用來聲明變量。 Title: 編寫高質量Javascript的要點-Review深入理解Javascript系列(一)date: 2017-6-9 14:14:20 status: p...

wh469012917 2019-08-21 11:44 評論0 收藏0
JavaScript函數表達式——“函數的遞歸和閉包”的注意要點

摘要：如調用函數聲明函數不會報錯使用函數表達式則不可以報錯創建函數的兩種方式，一個是函數聲明如第一種方式一個是函數表達式如第二種方式。第二種函數創建方式創建的函數叫匿名函數或拉姆達函數，因為關鍵字后面沒有標識符。函數表達式的基本概念 name屬性和函數提升首先，name屬性，通過這個屬性可以訪問到給函數指定的名字。（非標準的屬性）如： function People(){}; cons...

winterdawn 2019-08-19 17:07 評論0 收藏0