前端頁面優化方案
前端頁面優化主要有2方面：
1.頁面級別
一、減少http請求次數，每個請求都是有成本，請求多了數據顯示慢，影響頁面渲染。
實現方法：1.合理設置http緩存 將請求的內容緩存在本地，下次用時不用再去請求。2.合並頁面所用的CSS圖片，使加載圖片的次數減少。
二、將JS文件置於文檔底部，使其不影響頁面的渲染（js阻塞會影響頁面的渲染），而且盡量不要用內聯JS，如果用盡量異步執行它。
三、CSS前置，將CSS文件盡量放置在head中，使其不影響頁面渲染。
四：盡量減少JS文件和CSS文件的個數，盡量將多個文件合並為一個
2.代碼級別
一、js CSS文件中變量的聲明簡化，冗余代碼，註釋代碼都會影響JS的加載
二、減少作用域鏈查找，減少閉包的使用。例如
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){ //每次訪問 globalVar 都需要查找到作用域鏈最頂端，本例中需要訪問 100000 次
globalVar += i; }
}
更高效的寫法：
var globalVar = 1; // 全局變量
function myCallback(info){
var localVar = globalVar; //局部變量緩存全局變量
for( var i = 100000; i--;){ //本例中只需要訪問 2次全局變量在函數中只需要將 globalVar中內容的值賦給localVar 中區
localVar += i; //訪問局部變量是最快的
}
globalVar = localVar;
}
三、DOM操作是腳本中最耗性能的一類操作，例如增加、修改、刪除 DOM元素或者對 DOM集合進行操作。如果腳本中包含了大量的 DOM操作則需要註意
例如：getElementsByTagName()返回的是一個HTMLCollection，經常我們把它當作數組使用，但是在訪問性能上則比數組要差很多，原因是這個集合並不是一個靜態的結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果。因此使用它時應盡量將他轉成數組在進行循環。
備註：getElementsByTagName（）就相當於一個DOM操作，類似還有：getElementsById（）等。。如果想優化頁面性能時，可減少這種查找DOM的操作，查找需要時間
前端頁面優化方案