高性能javascript

加載和運行

• 瀏覽器以單線程處理ui和js任務，處理方式爲串行，一次執行一個任務。（若是瀏覽器爲多線程，瀏覽器整個設計複雜程度會提升不少。）
• 瀏覽器在碰到script標籤時，中止其餘任務，而後下載script，解析，執行裏面的代碼。script標籤具備阻塞做用。（瀏覽器遇到href不會阻塞頁面，會並行下載，執行其中代碼，href爲在頁面和目標文件之間一種聯繫，而src則是指向一個資源，至關於插入一段資源，會阻塞頁面。因此通常將script標籤放在前一行。link標籤放在head中，優先加載基本樣式。固然script標籤放在head中䦹能夠的，能夠添加async標籤，進行異步加載。chrome穩定版中，同一域名下併發請求數爲6，chrome相關源碼）
• 下載一個100k的script比四個25k的script要快，因此儘量將小的script合併在一個文件中。
• 利用cdn網絡，加速下載。（內容分發網絡。CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。）
• 利用script的defer，延遲加載屬性，在頁面dom完成以後，onload方法調用以前加載腳本。
• 多數瀏覽器在下載動態script時，並不會按照順序下載。
• 利用XHR下載腳本，並動態插入到頁面中.xhr請求涉及到跨域問題,只能請求不跨域的資源.

數據訪問

• 數據存儲在哪裏，關係到代碼運行期間數據被檢索到的速度，在javascript中有四種基本的數據訪問的位置（1直接量，2變量，3數組項，4對象成員）。
• javascript內部屬性[[Scope]]包含一個函數被建立的做用域中對象的集合。此集合被稱爲函數的做用域鏈，它決定哪些數據可由函數訪問。此函數做用域鏈中的每一個對象被稱爲一個可變對象，每一個可變對象都以「鍵值對」的形式存在。
• 運行一個函數時，就會創建一個內部對象，稱爲「運行期上下文」。一個運行期上下文定義了一個函數運行時的環境。它是獨一無二的。屢次調用函數，會屢次建立運行期上下文。函數執行完畢，運行期上下文就銷燬。
• 建立函數時，會填入一個單獨的全局對象到被建立的做用域鏈(用於標識符解析)中，此全局對象包括訪問this對象，window對象，document對象，自己的接口。同時也是建立一個被稱爲「激活對象」填入到做用域鏈中，此對象包括可訪問this，函數參數，函數內部局部變量的接口。

  

  

• 函數運行中，每遇到變量，標識符識別過程就要決定從哪裏獲取或存儲數據。就會在做用域鏈中查找相同的標識符，從做用域鏈的最前端開始，沒找到，就往下一個對象查找，直到找到爲止。一個標識符的所處的位置越深，讀寫速度就越慢，全局對象位置最深，出於做用域鏈中的最後一個位置，一般來講速度最慢。局部變量速度最快。而採用優化的js引擎的瀏覽器沒有此問題。
• 在局部做用域中，若是全局變量使用次數多於一次，可使用局部變量保存全局變量。再調用局部變量。
• 能夠改變運行期上下文的做用域鏈的方法：with和try catch。

• 對象成員中，屢次訪問的屬性，能夠用局部變量保存。避免過深的對象屬性嵌套

dom編程

• 避免屢次讀寫dom對象
• 在使用傳統循環時，能夠將length用變量保存，避免每次都須要查詢length。

  

• 使用 querySelectorAll比其餘獲取dom的api更快，且參數相似css選擇器。
• 觸發迴流的行爲:1添加或刪除可見的DOM元素 2元素位置改變 3元素尺寸改變（邊距，填充，邊框寬度，高度等屬性改變） 4內容改變（被更大或更小的尺寸替代） 5最初的頁面渲染 6瀏覽器窗口尺寸改變
• 觸發迴流的原生api：offsetTop offsetLeft offsetWidth offsetHeight scrollTop scrollLeft scrollWidth scrollHeight clientTop clientLeft clientWidth clientHeight getComputedStyle
• 使用cssText 合併dom修改，使用預先定義的className修改dom
• 對一個dom元素要進行屢次修改時，進行一下操做 a 從文檔中去除該元素（display none）/ 使用createDocumentFragment(由於文檔片斷存在於內存中，並不在DOM樹中，因此將子元素插入到文檔片斷時不會引發頁面迴流（對元素位置和幾何上的計算）。所以，使用文檔片斷一般會帶來更好的性能。過多的插入元素，會使得內存暴漲，一樣影響性能。) / 拷貝元素，應用修改，覆蓋原始元素 b 對其應用改變 c 從文檔中恢復該元素
• 避免進行頁面大部分區域的迴流，使用絕對定位的元素，使其脫離文檔流。不影響真個頁面。避免推移整個頁面。
• 每一個子元素調用事件api，訪問和修改子元素dom浪費了內存和性能，利用代理技術，由子元素的父元素代理子元素處理事件api。（利用事件api的內部對象event）

算法和流程控制

代碼量少不必定運行速度快，代碼量多不必定運行速度慢。