網站代碼優化

將面試整理的網站優化資料記一記，針對移動端的代碼說的。

html

1: 標籤嵌套層級不要太深，標籤儘可能簡潔化.如懶加載後將data屬性去除

2: DNS預先處理 dns-prefetch，若是一個頁面有多個不一樣地址的引用，則DNS預解析頗有用。頁面預先處理link標籤的prefetch

3: 大量圖片的懶加載策略，以及一些元素利用ajax在onload後實行延遲加載

4: 對一些js的異步加載

css

1: 嵌套層級不要太深，通常三層最多了。這個主要仍是看團隊項目結構，命名規範對這個有很大影響，互有取捨，是命名長一點不會有重複仍是命名方便一點嵌套深一點

2: css解析從右向左，因此最右邊的應該是相對少一點的，好比.on.li_lick 就比.li_click.on要好（若是.on不少的話）

3: html用了base64的img的話，並不會緩存起來，能夠將這個base64的圖片放在css文件裏，css會緩存，圖片就緩存起來了

4: 儘可能不用後代元素選擇器，最右邊的一層不要是標籤，尤爲是像div這種很是經常使用的標籤

5: 多使用css的繼承，而不是每一次都書寫時都所有重寫一遍。寫多個css屬性時，能連在一塊兒寫的就連在一塊兒寫。如:background: #fff url() center center no-repeat

javascript

以一個for循環來構建DOM文檔舉例（使用jquery）

// var lis = document.getElementsByTagName("li")
var lis = [1, "2", "3", "4"];
var ulObj = $("ul");
var lisLength = lis.length;
var html = "";
for (var i = 0; i < lisLength; i++) {
    if (lis[i] === 1) {
        html += '<li class="number">' + lis[i] + '</li>';
    } else {
        html += '<li>' + lis[i] + '</li>';
    }
}
ulObj.html(html);

01. 緩存變量。$("ul") 使用jquery這種語句記得將其存在變量裏，每一句$()都是很是重的函數，能儘可能少用就少用。

02. 使用諸如getElementsByTagName這類LIVE類型的collections時，更要注意對其length的緩存

03. var html = ""。 賦值時，用字面量的方式

04. for 循環。實踐證實，遞減循環比遞增循環要快那麼一點點。

05. 對於大型的for循環，可能致使執行時頁面卡住，能夠考慮使用數組分塊技術將循環分割成多個循環一部分一部分的執行

06. for循環裏的條件判斷lis.length必定要緩存在變量裏，否則每一次都要去查詢一次長度。

07. 構建DOM結構。通常有三種方式：
①： 使用節點關係createElement，appendChild這些去構建生成節點關係。
②：使用文檔片斷documentFragment的方式。
③：直接用字符串拼接：這個又分爲兩種，直接+號拼接和數組join拼接。第三種速度效率最高。而第三種裏面在移動端裏使用+號比數組快不少，在PC端得看瀏覽器，不一樣瀏覽器不一樣版本對這兩種方式的優化不一樣。

08. 插入到DOM文檔：使用innerHTML的方式比appendChild要效率高。綜上,移動端仍是使用+號拼接字符串最後使用innerHTML的方式

09. 插入到DOM中時，必定要將插入結果放在變量裏，在for循環結束後插入，千萬不能在for循環中執行插入操做，會形成大量的重繪重排。儘可能減小對DOM的操做

10. 這個例子須要動態添加，動態刪除，每一個li標籤有click事件。若是每次插入到DOM後給li添加click事件，那麼刪除時就要清除註冊在li上的click事件。很是麻煩。因此採用事件委託的機制，將事件綁定在ul上，經過target屬來判斷

11. 條件判斷： == 與 ===，==要進行類型轉換比較，多了一個步驟，效率低

---

12. 使用直接函數，而不是與之等同的函數，好比$.ajax(),其餘$.get()等最終都是調用$.ajax()，多餘的步驟多餘的調用必然致使效率相對低

13. 選擇器： 使用原生的選擇器必定是最快的getElementById(),getElementsByTagName()這些，由於是用編譯語言寫好的方法。因此jquery裏$("li")標籤選取器的效率是很高的，因此$("li .my_li")這樣寫比$(".my_li")效率要高

14. 善用事件委託：若是有許多相似的結構要綁定事件，都利用事件冒泡的機制，在上層元素上綁定事件

15. 將一些多條件判斷賦值語句用數組來作，好比：

switch(a) {
    case 0:
        result = "一";
        break;
    case 1:
        result = "二";
        break;
    }

改爲：

var arr = ["零", "一"];
result = arr[a]

16. 對於有複雜動畫的模塊，儘可能用定位使其脫離文檔流。利用css3實現的動畫，調用一下translate3d(0， 0， 0)或其餘的的3d變換，就會調起硬件加速，這個頁面其餘動畫就都會有硬件加速的效果了。要考慮低端機型的話慎用

17. 函數儘可能簡單，少用閉包，嵌套的對象成員也會影響性能，總之結構儘可能簡單，能少一層就少一層

18. 對於很是頻繁調用的函數，如scroll觸發的函數，能夠考慮使用函數節流，debounce，throttle