前端js優化方案（一）

最近在讀《高性能javascript》，在這裏記錄一下讀後的一些感覺，順便加上本身的一些理解，若是有興趣的話能夠關注的個人博客http://www.bloggeng.com/，我會不按期發佈一些前端教程還有前端乾貨，話很少說，進入咱們的正題

1、js優化之加載

1、script標籤放在底部，不要放在head標籤；

2、儘可能減小js文件數量

3、給script標籤添加一個defer屬性，defer屬性指明所含的腳本不會修改DOM，所以代碼能安全地延遲執行。

<script type="text/javascript" src="file.js" defer></script>

4、把loadScript()函數直接嵌入頁面，從而 避免多產生一次HTTP請求；一旦頁面初始化所須要的代碼完成下載，你能夠繼續自由地使用loadScript();去加載頁面其餘的功能所須要的腳本；

5、YUI3的方式、LazyLoad類庫（本身百度一下這個腳本）

6、LABjs：（這個也是一個腳本文件，能夠本身搜索一下哈）

$LAB.script()方法用來定義須要下載的js文件，$LAB.wait()用來指定文件下載並執行完畢後所調用的函數

2、數據存取優化

1、函數中讀寫局部變量老是最快的，讀寫全局變量一般是最慢的。請記住，全局變量老是存在於執行環境做用域鏈的最尾端，所以他也是最遠的。對全部瀏覽器而言，總分趨勢是，一個標識符所在的位置越深，它的讀寫速度也就越慢。

最好的方式是把使用一次以上的全局變量用局部變量代替。例如：

Var doc =document;

2、對象成員--原型

js中的對象是基於原型的。原型是其餘對象的急促，它定義並實現了一個新建立的對象所必須包含的成員列表。

所以對象能夠有兩種類型：實例成員和原型成員。實例成員直接存在於對象實例中，原型成員則從對象原型繼承而來。

3、對象成員--原型鏈

使用構造函數Book來建立一個新的Book實例。實例boo1的原型（_proto_）是Book.prototype,而Book.prototype的原型是object。

4、避免使用with語句，由於他會改變執行環境做用域鏈。一樣，try-cath語句中catch子句也有一樣的影響，所以也要當心使用；

5、一般來講，能夠經過吧經常使用的對象成員、數組元素、跨域變量保存在局部變量中來改善js性能，由於局部變量訪問速度更快。

3、優化DOM編程

1、var element= document.querySelectorAll("#menu a ");

 

最新的瀏覽器提供了一個名爲querySelectorAll()的原聲dom方法;

 

2、獲取頁面中有些class爲‘waring’和‘notice’的元素

 

Var errs = document.querySelectorAll('div.waring,div.notice');

 

3、爲了防止頁面屢次重排，能夠將樣式的修改合併在一塊兒而後一次處理，這樣只會修改一次DOM

 

Var el = document.getElementById('mydiv');

 

 el.style.cssText ="border:1px solid red;border-right:2px;padding:5px;"

 

這樣會覆蓋已存在的樣式信息，若是保留現有樣式，能夠：

 

el.style.cssText +=‘；border-left:1px;’;

 

另一種就是修改class的名稱；

 

4、一個減小重排的方式是經過改變display睡醒，臨時從文檔中移除元素，而後再恢復他

 

5、另一種減小重排的方法是在文檔以外建立並更新一個文檔片斷，而後把它附加到原始列表中。

 

Var fragement = document.getElementById(「mylist」);

 

appendDataToElement(fragement,data);

 

Document.getElementById('mylist').appendChild(fragement);

 

6、還有一種解決方案是爲須要修改的節點建立一個備份，而後對副本進行操做，一旦操做完成，就用新的節點替代舊的節點

 

Var old = document.getElementById(「mylist」);

 

Var clone = old.cloneNode(true);

 

appendDataToElement(clone,data);

 

Old.parentNode.replaceChild(clone,old);

 

推薦使用文檔片斷的方案，由於所產生的DOM遍歷和重拍次數最少。

 

（持續更新。。。。華麗的分割線）

---

 

 

2017年9月19日

七、使用絕對定位定位頁面上的動畫元素，將其脫離文檔流

八、避免大量的元素使用：hover僞類，會下降響應速度

4、算法與流程控制

（一）、循環

1、循環與循環的類型

（1）標準for循環：在for循環中定義的變量至關於在循環體外定義一個新變量，由於javascript只有函數級做用域；

（2）while循環：前測循環，由一個前測條件和一個循環體構成，在循環體執行之前，先計算前測條件；

（3）do-while循環：後測循環，循環體至少運行一次，而後再由後測條件決定是否再次運行；

（4）for-in循環：能夠枚舉任何對象的屬性名

　for(var prop in  object){//循環體}

循環體每次運行時，prop變量被賦值爲object的一個屬性名，直到全部的屬性遍歷完成才返回。包含了實例屬性和原型鏈中集成的屬性

2、循環性能

（1）for-in循環比其餘幾種明顯要慢，儘可能不要使用for-in遍歷數組成員

（2）每次循環都要查找items.length，這樣很耗時，因爲此值在循環過程當中不會改變，所以產生了沒必要要的性能損失。爲了提升這個循環的性能，只查找一次屬性，把items.length的值存儲到一個局部變量，而後再控制條件裏使用這個變量；（再大多數瀏覽器中能節省25%的運行時間）

（3）還能夠經過顛倒數組的順序來提升循環性能，一般，數組的順序與所要執行的任務無關，所以從最後一項開始向前處理是一個備選方案。

// 減小屬性查找並反轉

for(var i=items.length;i--;){

   process(items[i]);

}

 

Var j =items.length;

While(j--){

 process(items[i]);

}

 

這裏使用了倒序循環，並把減法操做在控制條件中。如今每一個條件只是簡單地與0比較。控制條件與true比較是，任何非零數會自動轉換爲true，而零值等同於false。實際上，控制條件已經從兩次比較（迭代數少於總數麼？他是否爲true？）減小到一次比較（它是true麼？）。每次迭代從兩次比較減小到一次，進一步提升了循環速度。經過倒敘循環和減小屬性查找，能夠看到運行速度比原始版本快了50%~60%；

對比原始版本，每次迭代只有以下的操做：