js代碼優化方法（js代碼美化）

• 1、網站頁面代碼優化方法是怎樣的
• 2、js代碼的JS代碼在優化中：
• 3、Web前端性能優化的實用技巧匯總

網站代碼優化，去掉網站多餘的代碼，以減少網站的大小，提高網站的加載速度和用戶體驗。

網站代碼優化是站長必須要掌握的基本技能，這關係到搜索引擎蜘蛛是否會對網站感興趣，冗長無用的代碼會讓蜘蛛很難理解，增加蜘蛛抓取網站的難度，同時，網頁的精簡還關係到網站的加載速度，對用戶體驗至關重要。網站代碼優化主要從一下幾個方面進行優化。

1、HEAD部分代碼規範化

2、使用DIV+CSS布局網頁

一些網站會使用外部文件，將css和js放在外部文件中，頁面html中只要放一樣代碼調用就可以了，有時候我們去查看的一些源文件代碼，會看到很多css代碼以及javasript代碼，將javascript放置在網站頁面的html文件中的最前面，而真正能用到得一些文字部分這被推倒了html的後面，這種代碼都需要精簡。

3、CSS優化

CSS是頁面效果呈現中非常重要的組成部分，它包括顏色、大小尺寸、背景和字體等。寫CSS很簡單很容易，但是要想寫出精鍊的CSS代碼還是有很多技巧的。

(1)、CSS位置

CSS說明如果出現在網站之後，頁面需要重新渲染，打開速度受到影響，所有css定義代碼的位置要放到網站之前。

(2)、css sprite技術

網站上的一些圖片可以採用css sprite技術進行合併，減少加載請求次數，從而提高網頁的加載速度。

(3)、CSS代碼優化

通過對css代碼屬性的簡寫、移除多餘的結構(frameworks)和重設(resets)等一系列的方法和技巧來簡化css代碼，減小css文件的大小。

(4)、盡量不要使用內嵌式CSS

內嵌式CSS分為兩種，一是在head區域的普通內嵌式;二是在標籤內出現的行內內嵌式CSS，無論是何種內嵌CSS方式結果都會提升頁面的體積，對此，我們可以盡量使用外調式的CSS來為站點頁面的體積瘦身。

4、JS優化

JS優化與其他語言的優化也仍然有相同之處，JS優化的關鍵，仍然是要把精力放在最關鍵的地方，也就是瓶頸上，一般來說，瓶頸總是出現在大規模循環的地方，這倒不是說循環本身有性能問題，而是循環會迅速放大可能存在的性能問題。

(1)、JS位置

網頁代碼中對js進行優化的時候，建議將JS放在頁面最後，這樣可以加快頁面打開速度。

(2)、合併JS

合併相同域名下的js，通過減少網絡連接次數從而提高網頁的打開速度。

(3)、LazyLoad(延遲加載)技術

Lazy

Load是一個用JavaScript編寫的jQuery插件，它可以延遲加載長頁面中的圖片，在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置

(4)、JS代碼外部的調用

我們知道當前的搜索引擎還是不能夠識別JS代碼的，倘若在網站中出現大批量的js代碼網站在收錄上就會出現困難，而我們要做的就是將用到Javascript代碼用外部調用的形式放在網站中，這樣可以簡化搜索引擎的工作，也不會在無形中衍生出無效代碼累及網站。

不僅如此，可以採用外部調用的還有css代碼，建站之初可以將網站的文字、顏色定義在css代碼文件中，盡量不要在頁面代碼內出現過多的樣式代碼。

(5)、降低頁面對於JS的依賴性

現在來說，JS對於搜索引擎並不不友好，雖然有消息稱搜索引擎不會對JS有厭惡的情緒，但是多一事不如少一事，雖然JS可以製作出很多的效果，但是網頁中大量的JS將影響蜘蛛對頁面的抓取和增加網頁體積，尤其是頁面的關鍵位置如導航欄，盡量採用DIV+CSS的設計方法。

5、TABLE標籤的縮減

table標籤是現在大多數上線網站中最為常見的代碼形式，原因根本在於table在建立網站時比較快捷，但是這也就影響了網站的後期優化。

相對於div+css布局的精簡代碼網站來說，它的佔位比較大，所以，在建站時候，盡量是少用表格，即便是要使用表格時，嵌套式表格也要盡量少用，以免產生冗雜代碼

那麼，現在的網站用什麼做呢?很多程序員第一想法就是採用CSS去做，採用CSS去排版，這種做法呢，就使頁面中的表格大大的降低了，但是，網站也不能沒有表格，有些事必須使用到得，使用表格本身沒什麼，但是有很多網站都採用嵌套表格，一般這樣的表格形式會給網站產生大量的垃圾代碼，並且這些垃圾代碼都是沒有任何用處的代碼，這一類代碼也是我們網站需要精簡的代碼之一。

6、代碼注釋省略

很多程序人員在編寫代碼是都習慣在別人看不懂的地方給出一段注釋，這些代碼往往是為了幾個程序員之間的協同工作，對於外人以及搜索引擎來說沒有任何用處，相反還會給搜索引擎蜘蛛帶來一定的困擾。

打開頁面代碼我們經常會看到一些注釋代碼，這是程序員為了表明代碼意義而做的注釋，其實這些打開不必，因為對於搜索引擎而言，它們是不存在任何意義的，只是會增加了頁面代碼的容量，這樣對於網站不會有什麼利處，不如直接省略。

7、清除頁面中多餘的代碼

有的網站以為製作者的代碼書寫習慣問題，頁面會有很多空格代碼，比如：空格代碼、style和font重複定義的代碼，不要小看這些體積很小的代碼，積攢多了，也會使我們的網站異常的臃腫。

很多網站都是採用的DIV+CSS，在CSS中定義了文字的字體，顏色，以及頁面的排版，但是在網站的其他地方還用了以style以及font來再次定義字體字體，這些代碼完全沒有必要重複定義，屬於可以精簡的代碼。

8、將html控制方式轉換為CSS控制

很多網頁設計者習慣在標籤內對內容進行控制，比如img標籤里通過width和height來控制圖片的大小，盡量將這些代碼轉換成外調式的CSS，使網頁代碼更加的瘦身。

9、緩存靜態資源

通過設置瀏覽器緩存，將css、js等不太經常更新的文件緩存在瀏覽器端，這樣同一訪客再次訪問網站的時候，瀏覽器就可以從瀏覽器的緩存中獲取css、js等，而不必每次都從服務器讀取，這樣在一定程度上加快了網站的打開速度，又可以節約服務器流量。

10、網頁壓縮技術

對於網頁壓縮而言，相信各位站長都比較熟悉，主要是啟用服務器Gzip，對頁面Gzip壓縮，減少元素的體積，從而減少數據的傳輸，進而提高網頁的加載速度，這個功能需要服務器的支持，GZIP壓縮一般能對網頁進行30%-80%的壓縮，是最重要的一種優化效果。

總之，通過代碼優化來起到網站優化作用的方式還有很多，在這只是隨意的說了其中比較常見的而已。

一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化

eg：x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變量名方法名盡量在不影響語意的情況下簡單。（可以選擇首字母命名）

eg：定義數組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關於JS的循環，循環是一種常用的流程控制。

JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。當然，推薦使用for循環，如果循環變量遞增或遞減，不要單獨對循環變量賦值，而應該使用嵌套的++或–運算符。

四、 如果需要遍曆數組，應該先緩存數組長度，將數組長度放入局部變量中，避免多次查詢數組長度。

因為我們常常要根據字符串、數組的長度進行循環，而通常這個長度是不變的，比如每次查詢a.length，就要額外進行一個操作，而預先把var len=a.length，則就少了一次查詢。

五、 盡量選用局部變量而不是全局變量。

局部變量的訪問速度要比全局變量的訪問速度更快，因為全局變量其實是window對象的成員，而局部變量是放在函數的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性，所以a.b.c.d.e，需要進行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達式重複出現，只要可能，應該盡量少出現這樣的表達式，可以利用局部變量，把它放入一個臨時的地方進行查詢。

八、 字符串連接。

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要連接多個字符串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c；

而如果是收集字符串，比如多次對同一個字符串進行+=操作的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法連接起來，如下

var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join(“”);

九、 類型轉換

1. 把數字轉換成字符串，應用”” + 1，雖然看起來比較丑一點，但事實上這個效率是最高的，性能上來說：(“” +) String() .toString() new String()

盡量使用編譯時就能使用的內部操作要比運行時使用的用戶操作要快。

String()屬於內部函數，所以速度很快，而.toString()要查詢原型中的函數，所以速度遜色一些，new String()用於返回一個精確的副本。

2. 浮點數轉換成整型，這個更容易出錯，很多人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，我們應該使用Math.floor()或者Math.round()。Math是內部對象，所以Math.floor()其實並沒有多少查詢方法和調用的時間，速度是最快的。

3. 對於自定義的對象，如果定義了toString()方法來進行類型轉換的話，推薦顯式調用toString()，因為內部的操作在嘗試所有可能性之後，會嘗試對象的toString()方法嘗試能否轉化為String，所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象，而不是var obj=new Object()方法。

因為前者是直接複製，而後者需要調用構造器，因而前者的性能更好。

十一、 當需要使用數組時，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數組：[parrm,param,param…],而不是採用new Array(parrm,param,param…)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字符串進行循環操作，例如替換、查找，就使用正則表達式。

因為JS的循環速度比較慢，而正則表達式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低，如果需要直接插入HTML，可以找一個容器元素，比如指定一個div或者span，並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

十四、 對象查詢

使用[「」]查詢要比.items()更快

十五、 定時器

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval。setTimeout每次要重新設置一個定時器。

十六、 盡量減少DOM調用

在Web開發中，JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的，因為這會導致瀏覽器執行迴流 （reflow）操作。我們應該儘可能的減少DOM操作。

今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得複雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。

一.提高加載性能

1.IE8,FF,3.5,Safari4和Chrome都允許並行下載js文件，當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載，如圖片。儘管腳本下載不會互相影響，但頁面仍然必須等待所有js代碼下載並執行完才能繼續。因此仍然存在腳本阻塞問題.推薦將所有js文件放在body標籤底部以減少對整個頁面的影響。

2.減少頁面外鏈腳本文件的數量將會提高頁面性能：

http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。

3.動態腳本加載技術：

無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。

functionlaodScript(url,callback){

varscript=document.createElement(‘script’);_

_cript.type=’text/javascript’;

__f(script.readyState){//ie

____cript.onreadystatechange=function(){_____

if(script.readyState==’loaded’||script.readyState==’complete’){_______

_cript.onreadystatechange=null;_______

callback()_____

____

__

}else{//其他瀏覽器___

script.onload=function(){_____

_allback()

___}_

}_

script.src=url;_

document.getElementsByTagName(‘head’)[0].appendChild(script);

}

//使用

loadScript(‘./a.js’,function(){_

loadScript(‘./b.js’,function(){___

loadScript(‘./c.js’,function(){_____

console.log(‘加載完成’)___

})_

})

})

4.無阻塞加載類庫——LABjs,使用方法如下：

//鏈式調用時文件逐個下載，.wait()用來指定文件下載並執行完畢後所調用的函數

$LAB.script(‘./a.js’)_

.script(‘./b.js’)_

.wait(function(){__

_pp.init();

})

//為了保證執行順序，可以這麼做,此時a必定在b前執行

$LAB.script(‘./a.js’).wait()_

.script(‘./b.js’)_

.wait(function(){___

_pp.init();

})

二.數據存取與JS性能

1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變量，數組項，對象成員。他們有着各自的性能特點。

2.訪問字面量和局部變量的速度最快，相反，訪問數組和對象相對較慢

3.由於局部變量存在於作用域鏈的起始位置，因此訪問局部變量的比訪問跨域作用變量更快

4.嵌套的對象成員會明顯影響性能，應盡量避免

5.屬性和方法在原型鏈位置越深，訪問他的速度越慢

6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變量保存在局部變量中來改善js性能

三.DOM編程

1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。

註：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()

2.HTML集合優化

HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重複執行查詢操作，哪怕只是獲取集合里元素的個數。

①_優化一——集合轉數組collToArr

functioncollToArr(coll){_

for(vari=0,a=[],len=coll.length;i

a._ush(coll[i]);

__

returna

}

②緩存集合length

③訪問集合元素時使用局部變量（即將重複的集合訪問緩存到局部變量中，用局部變量來操作）

3.遍歷DOM

①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

tdp{text-align:left;}

tdpspan{text-align:center;display:block;}

屬性名

被替代屬性

children

childNodes

childElementCount

childNodes.length

firstElementChild

firstChild

lastElementChild

lastChild

nextElementSibling

nextSibling

previousElementSibling

previousSibling

_諮≡衿_PI——querySelectorAll()

querySelectorAll()方法使用css選擇器作為參數並返回一個NodeList——包含着匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，着也避免了HTML集合引起的性能問題。

let_rr=_ocument.querySelectorAll(‘div.warning,_iv.notice_’)

4.重繪和重排

瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之後，會解析並生成兩個內部數據結構——_OM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪製頁面元素（paint）.

①重排發生的條件：

添加或刪除可見的DOM元素位置變化元素尺寸改變內容改變頁面渲染器初始化瀏覽器窗口尺寸變化出現滾動條時會觸發整個頁面的重排_嘏瘧囟ㄖ鞀

5.渲染樹變化的排列和刷新

大多數瀏覽器通過隊列化修改並批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。

offsetTop,offsetWidth…

scrollTop,scrollHeight…

clientTop,clientHeight…

getComputedStyle()

一些優化建議：將設置樣式的操作和獲取樣式的操作分開：

//設置樣式

body.style.color=’red’;

body.style.fontSize=’24px’

//讀取樣式

letcolor=body.style.color

let_ontSize=_ody.style.fontSize

另外，獲取計算屬性的兼容寫法：

functiongetComputedStyle(el){_

varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,”);_

returncomputed

}

6.最小化重繪和重排

①.批量改變樣式

/*使用cssText

*/el.style.cssText=’border-left:1px;_order-right:2px;_adding:20px’;

②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶迴文檔

functionappendDataToEl(option){

vartargetEl=option.target||document.body,___

createEl,___

data=option.data||[];_//讓容器脫離文檔流，減少重繪重排_

vartargetEl_display=targetEl.style.display;_

targetEl.style.display=’none’;

_

//*****創建文檔片段來優化Dom操作****_

varfragment=document.createDocumentFragment();_//給元素填充數據_

for(vari=0,max=data.length;i

createEl=

document.createElement(option.createEl);___

for(varitemindata[i]){_____

if(item.toString()===’text’){_______

createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________

_f(item.toString()===’html’){_______

createEl.innerHTML=item,data[i][item];_______

continue;_____

}_____

_reateEl.setAttribute(item,data[i][item]);_______

//****將填充好的node插入文檔片段****___

fragment.appendChild(createEl);___

//****將文檔片段統一插入目標容器****_

targetEl.appendChild(fragment);_

//顯示容器，完成數據填充_

targetEl.style.display=

targetEl_display;

}

//使用

varwrap=document.querySelectorAll(‘.wrap’)[0];

vardata=[_

_name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’}];

appendDataToEl({_

target:wrap,_

createEl:’div’,

_ata:data

});

上面的優化方法使用了文檔片段:_蔽頤前鹽牡燈尾迦氳澆詰闃惺保導噬媳惶砑擁鬧皇歉悶蔚淖詠詰悖皇瞧偽舊懟？梢允溝_om操作更有效率。

②.緩存布局信息

//緩存布局信息

letcurrent=el.offsetLeft;

current++;

el.style.left=current+’px’;

if(current300){_

stop();

}

④.慎用:hover

如果有大量元素使用:hover,那麼會降低相應速度，CPU升高

⑤.使用事件委託（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間

functiondelegation(e,selector,callback){_

e=e||window.event;_

vartarget=e.target||e.srcElement;

_if(target.nodeName!==selector||

target.className!==selector||target.id!==selector){___

return;

_}_

if(typeofe.preventDefault===’function’){__

_.preventDefault();___

e.stopPropagation();

}else{___

e.returnValue=false;

e.cancelBubble=true;_

}

__allback()}

四.算法和流程控制

1.循環中減少屬性查找並反轉(可以提升50%-60%的性能)

//for循環

for(vari=item.length;i–){_

process(item[i]);

}

//while循環

varj=item.length;

while(j–){_

process(item[i]);

}

2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）

3.基於函數的迭代（比基於循環的迭代慢）

items.forEach(function(value,index,array){__rocess(value);})

4.通常情況下switch總比if-else快，但是不是最佳方案

五.字符串和正則表達式

1.除了IE外，其他瀏覽器會嘗試為表達式左側的字符串分配更多的內存，然後簡單的將第二個字符串拷貝到他的末尾，如果在一個循環中，基礎字符串位於最左側，就可以避免重複拷貝一個逐漸變大的基礎字符串。2.使用[\s\S]來匹配任意字符串3.去除尾部空白的常用做法：

if(!String.prototype.trim){_

String.prototype.trim=function(){___

returnthis.replace(/^\s+/,”).replace(/\s\s*$/,”)_

}

}

六.快速響應的用戶界面

1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。

2.在windows系統中定時器分辨率為15毫秒，因此設置小於15毫秒將會使IE鎖定，延時的最小值建議為25ms.

3.用延時數組分割耗時任務：

functionmultistep(steps,args,callback){_

vartasks=steps.concat();

__etTimeout(function(){___

vartask=tasks.shift();___

task.apply(null,args||[]);_//調用Apply參數必須是數組

___

if(tasks.length0){_____

setTimeout(arguments.callee,25);

___else{_____

_allback();___

__

},25);

}

4.記錄代碼運行時間批處理任務：

functiontimeProcessArray(items,process,callback){_

vartodo=item.concat();

__etTimeout(function(){___

varstart=+newDate();

__o{_____

_rocess(todo.shift());___

}while(todo.length0(+newDate()-start____f(todo.length0){_____

_etTimeout(arguments.callee,25);

___else{____

_allback(items);_

}_

_,25)

}

5.使用WebWorker：它引入了一個接口，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：

①一個navigator對象，包括app