前端日常工作性能優化條例
在當前，網頁上越來越重視用戶體驗，其中一個重要的前提就是訪問速度。前端是龐大的，包括 HTML、 CSS、 Javascript、Image 。等等各種各樣的資源。前端優化是復雜的，針對方方面面的資源都有不同的方式。至少80%的最終用戶響應時間花在了頁面中的組件（圖片、腳本、樣式表）。
頁面方面優化
一. 減少HTTP請求
改善響應時間的最簡單途徑就是減少組件的數量，並由此減少HTTP請求的數量。
1 ：CSS Sprites將多個圖片文件合並成一個圖片，利用css 的background-position進行定位
2 ：資源合並與壓縮，利用gulp，webpack等模塊打包工具，分析模塊之間的依賴，生成一個文件。
3：合理設置 HTTP緩存。HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的信息，則它必須重傳。緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP請求。script和CSS寫在外部文件，如果緩存下來可以減少請求http請求次數。
二：將CSS文件放在<head>標簽中，
目的是為了讓瀏覽器更早生成css樣式規則樹，樣式規則樹是瀏覽器分析網頁對應的CSS文件生成的樹，它跟網頁的HTML結構沒有任何關系，僅僅是CSS文件的樹型結構。
要特別註意的是瀏覽器發現需要下載一個CSS文件時，它會馬上停止渲染頁面，並且在新的樣式規則樹未被建立前都不會再進行渲染或者更新頁面，也就是CSS會阻塞頁面的渲染。因此，必須盡可能精簡CSS文件內容以及將CSS文件的link標簽放到頁面頭部。
三：將script文件放在</body>下。
js的下載和執行會阻塞Dom樹的構建，所以script標簽放在首屏範圍內的HTML代碼段裏會可能影響首屏的內容。在頁面loading的過程中，當瀏覽器讀到js執行語句的時候一定會把它全部解釋完畢後在會接下來讀下 面的內容。所以放在頁面最後，可以有效減少頁面可視元素的加載時間。
代碼級優化
一：javascript代碼優化
1 減少dom操作。
DOM操作往往是JavaScript 程序中開銷最大的部分，而因訪問NodeList 導致的問題為最多。NodeList 對象都是“動態的”，這就意味著每次訪問NodeList 對象，都會運行一次查詢。有鑒於此，最好的辦法就是盡量減少DOM操作。
（1）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能
（2）document.createDocumentFragment();新建dom片段，避免一條條插入。
var fragment_1 =document.createDocumentFragment();
fragment_1.innerHTML = ‘我是一個粉刷匠‘;
document.body.appendChild(fragment_1);
（3）函數節流
瀏覽器中某些計算和處理要比其他的昂貴很多。例如，DOM 操作比起非DOM 交互需要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在onresize 事件處理程序內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。為了繞開這個問題，你可以使用定時器對該函數進行節流。
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
（4）使用事件代理。
利用事件冒泡的原理，讓其父元素代替執行。減少時間綁定次數。
2 js代碼性能
（1）少用閉包，閉包是最容易發生內存泄漏的地方。函數在執行完畢後，一般來說作用域下的變量會被釋放，除非外部的某個操作會讀寫該作用域下的數據（即閉包）。
（2）避免使用with語句
with 語句的作用是將代碼的作用域設置到一個特定的對象中。with 語句的語法如下：
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}
在性能非常重要的地方必須避免使用with 語句。和函數類似，with 語句會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈的長度。由於額外的作用域鏈查找，在with 語句中執行的代碼。肯定會比外面執行的代碼要慢。
（3）少用全局變量
.避免全局查找，可能優化腳本性能最重要的就是註意全局查找。使用全局變量和函數肯定要比局部的開銷更大，因為要涉及作用域鏈上的查找。
（4）少用eval
應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
(5）為代碼開啟嚴格模式。
使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。提高編譯器效率，增加運行速度；
（6）優化循環。
1：存儲length
for (var i =size; i < arr.length; i++) {}
?for循環每一次循環都查找了數組(arr)的.length屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快：
for (var i = size,length = arr.length; i < length; i++) {
}
2 ：合理終止循環
必要的時候使用break終止循環，避免任務已經完成，還在無意義的循環。
二：css代碼優化。
（1）減少css選擇器的長度。
瀏覽器如何判斷css選擇器屬於哪個元素？
從後往前判斷。瀏覽器先產生一個元素集合，這個集合往往由最後一個部分的索引產生（如果沒有索引就是所有元素的集合）。然後向上匹配，如果不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。
合理減少css選擇器的長度，有利於更快構建樣式規則樹。
（2）分離出公共樣式。
我們在開發大型網站時，為了較少css文件的體積大小，避免樣式重復書寫，以及後期好維護，應抽離出公共樣式。增加代碼復用性。
前端日常工作性能優化條例