本文目錄一覽：
- 1、如何優化js代碼
- 2、js中if語句的幾種優化代碼寫法
- 3、優化一段簡單的js代碼，移除添加class什麼的，代碼如圖
- 4、這段JS代碼如何優化？
- 5、如何通過優化JS代碼來適合網站優化
- 6、如何優化js代碼？
如何優化js代碼
一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化
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操作。
js中if語句的幾種優化代碼寫法
一、使用常見的三元操作符
複製代碼 代碼如下:if (foo) bar(); else baz(); == foo?bar():baz();
if (!foo) bar(); else baz(); == foo?baz():bar();
if (foo) return bar(); else return baz(); == return foo?bar():baz();
對於以上使用三元操作符來優化if語句你肯定不會陌生，或許你經常使用它。
二、使用and()和or(||)運算符複製代碼 代碼如下:if (foo) bar(); == foobar();
if (!foo) bar(); == foo||bar();
老實說，我並沒有這樣去寫過代碼，這種寫法我在學習《鳥哥的 Linux 私房菜》時看到過，但我並沒想到在js中實現它。
三、省略大括號{}
複製代碼 代碼如下:if (foo) return bar(); else something(); == {if(foo)return bar();something()}
這種寫法你我都很熟悉，但我建議在代碼優化的時候這樣做，或者交給UglifyJS幫你去解決。畢竟少一個大括號，代碼的可閱讀性並不高。
寫到這裡，我想到jQuery之父在《精通 JavaScript》中的一個獲取HTML元素屬性的方法。
複製代碼 代碼如下:function getAttr(el, attrName){
var attr = {‘for’:’htmlFor’, ‘class’:’className’}[attrName] || attrName;};如果我們不這樣寫，可能我們需藉助於兩個if語句來進行處理，而上面的代碼不僅簡潔有效，而且可閱讀性強。
仔細想想，好些時候我們都能找到解決問題的有效途徑，但關鍵在於我們是否用心去尋找一種更好的途徑。 您可能感興趣的文章: JavaScript If Else 語句
優化一段簡單的js代碼，移除添加class什麼的，代碼如圖
這些css寫得可真夠複雜的，其實更應該考慮下簡化這樣css本身，每個都弄個獨立類名，修改起來也不方便，加點js也比較麻煩，不改變你源碼大概可以這樣簡化：
script
$(document).ready(function(e) {
$(“.index_footer a”).click(function(e) {
$(“.index_footer a”).each(function(index, element) {
_this = $(this).children().eq(0);
cn = _this.attr(“class”);
( cn.indexOf(“btm”)!=-1 ) ? c=cn.split(“_”)[2] : c=cn.split(“_”)[1];
_this.removeClass().addClass( “btm_img_” + c );
});
_this = $(this).children().eq(0);
c = _this.attr(“class”).split(“_”)[2];
_this.removeClass().addClass( “active_” + c );
});
});
/script
下面是簡化建議，給每個要點擊的 span 加一個相同的類名，讓js能直接控制到所有，比如：
span class=”btm_img_index flag”/span
然後不要用 active_index 這樣增加複雜度的，直接每個都定義一個比如 on 類，當點擊時js給點擊的加上 on ，其他全部刪掉 on 即可。
css這樣定義：
.btm_img_inde.on{ 這裡原來active_index的內容 } 其他幾個同理
做了上面兩步，js就真的可以簡化了
script
$(document).ready(function(e) {
$(“.index_footer a”).click(function(e) {
$(“.index_footer .flag”).removeClass(“on”);
$(this).find(“.flag”).addClass(“on”);
});
});
/script
這段JS代碼如何優化？
建議你把相同的方法變成一個方法放在一個判斷方法裡面，把數字換成未知數n或i，通過獲取元素屬性提取數字出來，再賦值在n或i，再執行方法，就可以達到相同的效果，達到優化代碼的目的。
如何通過優化JS代碼來適合網站優化
一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化
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操作。
如何優化js代碼？
一、 讓代碼簡潔：一些簡略的表達方式也會產生很好的優化
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操作。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/227326.html
微信掃一掃 
支付寶掃一掃 