程式碼優化
這個部分僅僅將程式碼優化本身,不考慮效能,關於程式碼部分的效能優化在 頁面渲染 部分 程式碼優化 中
HTML+CSS
- 符合 XHTML 規範: 小寫,正確巢狀,必須關閉;
- 雙引號,合理縮排,utf-8編碼;
- 標籤語義化,便於維護;
- 合理註釋,比如 div 關閉的地方表明配對的 div;
- HTML,CSS,JS 分離,方便維護;
- 避免使用 iframe, 否則會阻塞父文件 onload;
- 樣式繼承,不要重複;
- 不要亂用 href 和 onclick, 他們本質不同,href 偏向資源載入,而 onclick 僅僅是點選;其次 click 事件在 href 之前執行;
- css偽類選擇器不宜太多,防止選擇器過載;
- 不要讓樣式難以覆蓋,少用
!improtant; - 善於利用樣式繼承(注意繼承和層疊是不一樣的概念);
- 不要保留過時的瀏覽器字首和相容性寫法;
JavaScript
- 識別符號簡短清晰,不用 1 和 0 代替 true 和 false,合理編寫註釋,提高程式碼可讀性;
- 定義變數一定寫 var,以免汙染全域性,同時,new Function() 和 eval() 也會汙染全域性;
- 長字串用字串連結寫法,而非跨行。在相容的情況下,用 ES6 中的多行字串也更好;
- 不要在 if 和 for 中定義函式,前置沒有意義,破壞分支;後者易出現迴圈引數拖尾的情況;
- 在此法作用域開始處宣告變數,提高可讀性;
-
var Name = function Name(){};有利於堆疊跟蹤(注意變數名一致性); - 位運算不要大於32位;
- 不要隨意重寫已有原型,可以用其例項化物件代替,實現例項繼承;
- 物件方法儘量返回 this 以便鏈式呼叫;
- 函式的放入同名資料夾中,定義 noConflict 方法匯出前一版本並返回當然版本;
- 設計封裝(類,閉包,模組)時,儘量使用嚴格模式;
- 在內容為 js 的 script 標籤上和內容為 css 的 link 標籤上省略 type 屬性和 lang 屬性;
- 注意變數名不要使用保留字和系統全域性變數(方法)一樣;
- 以下行為汙染全域性: setTimeout 和 setInterval 的首參傳入字串; eval()函式; new Function() 建構函式。
效能優化
頁面渲染
減少頁面 reflow
- 修改元素多個樣式可以通過修改 className 完成,這樣可以把多次 reflow 減少為一次 reflow;
- 修改元素多個樣式可以分為三步：先隱藏(display:none), 再修改,最後顯示。這樣可以把多次 reflow 減少為兩次次 reflow;
- 新增頁面內容可以通過將所有內容寫入 docuemnt fragment 元素後再一次性 append 到頁面中;
- 新增頁面內容可以通過將所有內容組成長字串,再一次性編輯 innerHTML 加入到頁面中;
- css(style 標籤和 link 標籤) 放在 head 中,這樣瀏覽器在載入資料時候可以直接通過 css tree 生成 render tree, 減少不必要的重新渲染;
- 在不影響視覺效果的情況下,儘量減少 js 動畫精度;
- div 佈局優於 table 佈局,因為後者中元素任意屬性改名都會對整個表進行迴流;
優化使用者體驗
- 使用懶載入技術,保證首屏優先載入;
- 使用非同步腳步,不阻塞主頁面渲染;
- 先渲染介面,在不影響首屏情況下,使用 js 指令碼動態載入後續資料;
- 將不影響渲染的指令碼後置(放在 body 之後),優先渲染;
- 新增自定義的錯誤頁面（如404 not found 頁面）;
- 利用 GPU 加速;
程式碼優化
- 圖片 img 標籤的 src 不要空著,以免產生多餘請求;
- href, url()和 src 中的連結,用
//代替http://,/content/a.jpg代替content/a.jpg, 被替代的後者會多傳送一個 http 請求; - 合理優化外鏈 css 和 JS 以利用快取;
- 資源控制在25kB之內,否則移動端可能無法快取;
- 減少不必要的 DOM 節點;
- 十六進位制顏色優於 rgb/hsl 函式,圖形轉換優於動畫,css 動畫優於 js 動畫,少用 hack 寫法;
- 儘量避免 css 表示式;
- 不要重複載入相同程式碼;
- 利用事件委託減少事件定義;
- 利用變數儲存多次用到的 DOM 查詢結果,減少反覆查詢;
- 能用 !== 或 ===,就不要用 != 或 ==,減少不必要的隱式型別轉換;
- 儘量使用現有的函式方法,比如陣列所有元素求和,直接用 reduce 方法, 再考慮用 map 方法,接著考慮 forEach 方法,然後是 for…in, 最後是 for;
- 利用 {} 或 [] 定義物件或陣列,比 new Object() 或 new Array() 效率高;
- 避免 String 型別隱式裝箱（隱式呼叫 new String());
- 用 switch 代替過多的 if, 並按判斷條件的可能性排序,以便儘早結束判斷;
- [].join() 動態生成字串比字串連結(+)效能更好;
- nextSibling() 效能比 children 好；
- cloneNode() 比 createElement() 效率高；
- 考慮在頁面渲染完畢以後再動態載入輔助用的外部 js 指令碼；
網路通訊
減少通訊連結次數
- css spirit 將多次請求變為1次請求;
- 設定 http頭的屬性：connection: keep-alive,使得連結為長連線,減少頻繁的握手揮手過程;
- 設定合適的 http頭的屬性：expires, cache-control 和 max-age
- 合理利用瀏覽器本地快取,路由快取,使得一些資料不需要從伺服器獲取;
- 去除不必要的重定向;
- 合併檔案 如 css js指令碼;
- 儲存(快取)必要的 Ajax 請求資料;
減少資料傳輸距離和資料大小
- 壓縮程式碼;
- 使用內容分發網路(cdn), 如 Akamai, Limelight等;
- 使用 Gzip 壓縮;
- 使用新的圖片格式或向量圖,如
.apng,.webp和.svg; - 必要時, 減小 cookie, 以減少 http 請求中的資料量;
- 儘量用縮寫的 css 樣式;
- 合理利用伺服器快取,cdn快取;
- 儘量少用或不用 ETag,一般情況下 Expires 頭已經夠用了;
合理利用伺服器資源
- 使用負載均衡技術,如硬體技術：Alteon, F5和軟體技術：Nginx, LVS;
- 減少 DNS 查詢時間(控制在20ms~100ms);
- 設定圖片伺服器;
- 增加 TTL 時長,建議為24hours(引自Steve Souders的《High Performance Web Sites》)
SEO
- 完善 meta 標籤,discription 簡潔明瞭,keywords 清晰;
- 重要內容不要用 js 或後端語言載入;
- 合理利用 h標籤,尤其 h1 標籤,有很高權重;
- 圖片寫上合理的 alt 值;
- URI 控制在 256KB 之內;
- 不要使用 iframe;
- 語義化標籤的使用;
綜合優化
- 用多個域名儲存網站資源(減小cookie, 節約主域名連線數,突破瀏覽器併發限制,優化cdn快取)
- 使用 base64 Encode 圖片,減小連結數量和傳輸大小。