談到javascript的性能優化，有好多點，比如把script放到離body閉合標簽附近，合并多個script標簽等等，還有一些代碼的性能，for的性能不如while的性能好，用while模擬for循環等等等。

1.從加載開始

在瀏覽器中，js文件的執行和下載會阻塞css和dom的渲染，這是瀏覽器的單線程所致，后來chrome，ff等瀏覽器啟用了
js文件的并行下載，然而js文件的運行還是會被阻塞，有的瀏覽器支持defer關鍵字。

<script type="text/javascript" defer>alert("defer"); </script> <script type="text/javascript">alert("ok") </script> <script type="text/javascript">window.onload=function(){alert("onload");} </script>

不支持defer的瀏覽器會輸出defer，ok，onload,支持的會彈出ok，defer和onload,defer是在dom渲染之前的。
還可以把js文件的script標簽用js動態加載。這樣文件的下載執行就不會影響其他頁面的處理過程。

另外，你可以監聽script標簽load事件，而ie觸發一個readystatechange事件，而且有一個readyState，
它有5個狀態，最主要的就是loaded和complete事件，然而ie的這兩個事件表現又不一致，有時候又loaded事件沒有complete，有時候反之。
那我們在用的時候就可以同時判斷：

var script=document.createElement("script"); script.type="text/javascript"; script.onreadystatechange=function(){if (script.readyState=="loaded"||script.readyState=="complete") {script.onreadystatechange=null;//為了防止事件處理兩次alert("script ok");}; } script.src="file.js"; document.body.append(script);

2.數據存儲的優化

如果外部數據在函數作用域內多次使用，最好用一個局部變量來表示，因為局部變量在函數作用域內的性能消耗是最少的，
函數作用域鏈中優先查找局部變量，全局變量的性能消耗相對較多。

var a=doucument.getElementById("aa"); document.body.onclick=function(){var temp=a;// temp to do something... }

3.dom操作的優化

javascript中存在的dom集合，如document.getElementsByTagName(''),document.links,document.images,document.forms,
document.forms[0].elements,他們都是類數組，有一個length屬性，而在遍歷的時候會重新查找計算，而把它們放到一個真正的數組里是一個優化方案。
或者可以把length用一個變量表示一下；

var col=document.getElementsByTagName('div'); var len=col.length; for (var i = 0; i < len; i++) {//todo; };

在選擇dom的結構中，firstChild，nextSibling，previousSibling都是包含文本節點和注釋節點，比如在我以前寫的選擇dom里面，就寫了好幾個nextSibling。在選取子元素的時候nextSibling比childNodes性能更節省，在ie下節省的性能更多，而jquery的children里面也是用的nextSibling選取的。
下面這個結構，img1的nextSibling是文本節點，如果自己過濾的話會產生性能消耗，現代瀏覽器提供了nextElementSibling，previousElementSibling等等，他們可以自動過濾文本節點和注釋節點，從而提升性能，
ie6，7，8只支持children。

<img src="" id="img1"> <!-- zhushi --> <img src="" id="img2">

?

在dom的選擇中，querySelectorAll的特性比getElementById的性能好，比如這個結構里：

var b=document.querySelectorAll('img#img1,img#img2');

querySelectorAll比較方便，而循環迭代getElementById的性能就不怎么樣了。瀏覽器支持就用吧。

4.for循環的優化

for循環的優化，在迭代1000次以上，用達夫設備比較快，基本思想就是用while代替for。而forEach比for循環還慢；
if else和switch相比，在條件多的時候用 switch條件少用if else 這也符合性能的考慮。
遞歸的優化，可以將遞歸轉化為迭代。為了防止遞歸做一些重復的計算，可以建立緩存如下，視實際情況選用。稱為制表技術。這里給一個制表技術的例子：

function merta(n){if (!merta.cache) {merta.cache={0:0,1:1}};if (!merta.cache.hasOwnProperty(n)) {merta.cache[n]=n*merta(n-1);};return merta.cache[n]; }

求數字的階乘，每次遞歸的結果都被緩沖，從而達到節省性能。

5.字符串的優化

str+="one"+"two";

在運行的時候會產生一個臨時變量="onetwo",然后讓這個臨時變量+=str，而str=str+'one'+'two',就會阻止臨時變量的產生，從而做到優化。在大多數瀏覽器會加快10%-40%

在ie中，這些優化并不適用，ie的字符串處理機制不用，在ie8中連接字符串只會記下各個字符串的引用，在連接的時候把各個字符串拷貝到真正的字符串中，并取代它的引用。
而ie8以前的實現更糟，這種方法反而會使效率更慢。ie8以前給每一個字符串的拷貝分配空間，在大量字符串連接的時候性能消耗成倍增長，只能用數組的連接方法來達到優化

while(len--){newstr[newstr.length]=str; } newStr=newstr.join('');

轉載于:https://www.cnblogs.com/dh-dh/p/5142356.html

總結

以上是生活随笔為你收集整理的javascript的性能优化tips的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。