強力推薦幾個編寫高性能的JavaScript的小建議
前言
隨著計算機硬件的不斷升級，開發者越發覺得JavaScript性能優化的好不好對網頁的執行效率影響不明顯，所以一些性能方面的知識被很多開發者忽視。但在某些情況下，不優化的JavaScript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規范和注意一些性能方面的知識，對于提升代碼的可維護性和優化性能將大有好處。那么，接下來我們討論幾種能夠提高JavaScript性能的方法。
1、js文件加載和執行
（1）將<script>標簽放到<body>標簽的底部
（2）可以合并多個js文件，減少頁面中<script>標簽改善性能
（3）使用 defer 屬性，加載后續文檔元素的過程將和script.js的加載并行進行，但是 script.js的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
（4）使用 async 屬性，加載和渲染后續文檔元素的過程將和script.js的加載與執行并行進行
（5）動態加載腳本元素，無論在何時啟動瞎子，文件的下載和執行過程都不會阻塞頁面其它進程
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.src = 'file.js';
- document.getElementsByTagName('head')[0].appendChild(script);
2、標識符所在的作用域鏈的位置越深
標識符所在的作用域鏈的位置越深，那么它的標識符解析的性能就越慢。所以一個好的性能提升的經驗法則是：如果某個跨作用域的值在函數中被引用一次以上，那么就把它存儲到局部變量里。
- function fun1() {
- // 將全局變量的引用先存儲在一個局部變量中，然后使用這個局部變量代替全局變量，從而提高
- // 性能；不然每次(3次)都要遍歷整個作用域鏈找到
- document var doc = document;
- var bd = doc.body;
- var links = doc.getElementsByTagName('a');
- doc.getElementById('btn').onclick = function(){
- console.log('btn');
- }
- }
3、避免過長原型鏈繼承
方法或屬性在原型鏈中存在的位置越深，搜索它的性能也就越慢，所以要避免N多層原型鏈的寫法。
4、對象成員嵌套過深
對象的嵌套成員，對象成員嵌套越深，讀取速度也就越慢。所以好的經驗法則是：如果在函數中需要多次讀取一個對象屬性，最佳做法是將該屬性值保存在局部變量中，避免多次查找帶來的性能開銷。
- function f() {
- // 因為在以下函數中需要3次用到DOM對象屬性，所以先將它存儲在一個局部變量
- // 中，然后使用這個局部變量代替它進行后續操作，從而提高性能
- var dom = YaHOO.util.Dom;
- if(Dom.hasClass(element,'selected')){
- Dom.removeClass(elemet,'selected');
- }else{
- Dom.addClass(elemet,'selected');
- }
- }
5、DOM操作
用js訪問和操作DOM都會帶來性能損失，可通過以下幾點來減少性能損失：
（1）盡可能減少DOM訪問次數；
（2）如果需要多次訪問某個DOM節點，請使用局部變量存儲它的引用；
（3）小心處理HTML集合，因為它實時連系著底層文檔；我們可以把集合的長度緩存到一個變量中，并在迭代中使用它；
（4）下述情況會發生重排：
- 添加或刪除可見的DOM元素,請參閱JavaScript系統學習DOM系列文章之理解DOM節點關系；
- 元素位置改變；
- 元素尺寸改變（包括：外邊距、內邊距、邊框厚度、寬度、高度等屬性）；
- 內容改變（例如：文本改變或圖片被另一個不同尺寸的圖片改變）；
- 頁面渲染器初始化；
- 瀏覽器窗口尺寸改變
可通過以下方式減少重排：
- 留意上面會導致重排的操作，盡量避免；
- 獲取布局信息的操作會導致強制渲染隊列重排，應該盡量避免使用以下獲取布局信息的操作方法或屬性或者緩存布局信息，例如：offsetTop,offsetLeft,offsetWidthoffsetHeight,``scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight,getComputedStyle()等;
- 批量修改樣式，推薦修改class來實現，例如使用：
- function f() {
- // 推薦使用以下操作
- var el1 = document.getElementById('mydiv');
- el1.className = 'mydiv';
- // 不推薦使用以下操作
- var el2 = document.getElementById('mydiv');
- el2.style.border = '1px';
- el2.style.padding = '2px';
- el2.style.margin = '3px';
- }
- .mydiv {
- border: 1px;
- padding: 2px;
- margin: 3px;
- }
- 當需要批量修改DOM時，可以通過以下步驟減少重繪和重排的次數：
- 使元素脫離文檔流（隱藏元素、拷貝元素、DocumentFragment 請參考JavaScript系統學習DOM系列文章之DocumentFragment）
- 對其應用多重改變；
- 把元素帶回文檔中
- 使用事件委托（事件逐層冒泡并能被父級元素捕獲，使用事件代理，只需給外層元素綁定一個處理器，就可以處理其子元素上觸發的所用事件），因為給DOM元素綁定事件以及瀏覽器需要跟蹤每個事件處理器都需要消耗性能。
6、字符串連接
- str += 'one'+'two';
- str= str+'one'+'two';
后者方式會比前者少在內存中創建一個臨時字符串，所以性能有相應的提升，所以，所以推薦后者的寫法。
7、直接使用字面量
創建對象和數組推薦使用字面量，因為這不僅是性能最優也有助于節省代碼量。
- var obj = {
- name:'tom',
- age:15,
- sex:'男'
- }
8、數組長度緩存
如果需要遍歷數組，應該先緩存數組長度，將數組長度放入局部變量中，避免多次查詢數組長度。
- for(let i = 0, len = arr.lenght; i < len; i++) {
- ...
- }
9、循環比較
JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中 for(in)的效率最差，因為它需要查詢Hash鍵，因此應盡量少用for(in)循環，for(;;)、while()循環的性能基本持平。
10、少用eval
盡量少使用eval，每次使用eval需要消耗大量時間，這時候使用JS所支持的閉包可以實現函數模板。
11、字符串轉換
當需要將數字轉換成字符時，采用如下方式："" + 1。從性能上來看，將數字轉換成字符時，有如下公式：("" +) > String() > .toString() > new String()。String()屬于內部函數，所以速度很快。而.toString()要查詢原型中的函數，所以速度遜色一些，new String()需要重新創建一個字符串對象，速度最慢。
12、浮點數轉換整形
當需要將浮點數轉換成整型時，應該使用Math.floor()或者Math.round()。而不是使用parseInt(),該方法用于將字符串轉換成數字。而且Math是內部對象，所以Math.floor()其實并沒有多少查詢方法和調用時間，速度是最快的。
后記
暫時只記錄了這么多，大家如果有好的建議，歡迎在評論區備注，我會將大家是建議補充進文章中，方便我們在工作和面試中避免采坑
