前端能實現的性能優化
性能優化的原則是什麽？
一是多使用內存和緩存，
二是減少CPU計算，減少網絡，減少I/O.
那身為前端人員，我們應該從哪入手呢？
一是在加載頁面和靜態資源的時候，
二是頁面渲染時
具體方案如下
一 資源壓縮合並，盡量減少 HTTP 請求
1.合並腳本跟樣式文件，可以把多個 CSS 文件合成一個，把多個 JS 文件合成一個。
2.CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位,把多個圖片合成一個圖片。
二 使用瀏覽器緩存，緩存的分類，緩存的原理
在用戶瀏覽網站的不同頁面時，很多內容是重復的，比如相同的JS、CSS、圖片等。如果我們能夠建議甚至強制瀏覽器在本地緩存這些文件，將大大降低頁面產生的流量，從而降低頁面載入時間。
根據服務器端的響應header，一個文件對瀏覽器而言，有幾級不同的緩存狀態。
1、服務器端告訴瀏覽器不要緩存此文件，每次都到服務器上更新文件。
2、服務器端沒有給瀏覽器任何指示。
3、在上次傳輸中，服務器給瀏覽器發送了Last-Modified或Etag數據，再次瀏覽時瀏覽器將提交這些數據到服務器，驗證本地版本是否最新的，如果為最新的則服務器返回304代碼，告訴瀏覽器直接使用本地版本，否則下載新版本。一般來說，有且只有靜態文件，服務 器端才會給出這些數據。
4、服務器強制要求瀏覽器緩存文件，並設置了過期時間。在緩存未到期之前，瀏覽器將直接使用本地緩存文件，不會與服務器端產生任何通信。
我們要做的是盡量強制瀏覽器到第四種狀態，特別是對於JS、CSS、圖片等變動較少的文件。
三 非核心代碼異步加載
四 使用CDN 讓資源加載更快
五 預解析DNS
六 將樣式文件放在頁面頂部，將腳本放在底部
七 圖片的懶加載
八 減少DOM查詢，對DOM 查詢做緩存
九 減少DOM操作，多個操作盡量合並在一起執行
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
//先附加在文檔碎片中
oFragmeng.appendChild(op);
}
//最後一次性添加到document中
document.body.appendChild(oFragmeng);
十 事件節流
$(document).ready(function() {
var timer = 0;
$(window).scroll(function() {
if (!timer) {
timer = setTimeout(function() {
checkScrollPosition(); timer = 0;
}, 250);
}
}).trigger(‘scroll‘);
});
十一 盡早執行操作（如DOMContentLoaded）
-
解析HTML結構。
-
加載外部腳本和樣式表文件。
-
解析並執行腳本代碼。
-
DOM樹構建完成。//DOMContentLoaded
-
加載圖片等外部文件。
-
頁面加載完畢。//load
前端能實現的性能優化