談談效能優化問題

程式碼層面：避免使用 css 表示式，避免使用高階選擇器，通配選擇器。

快取利用：快取 Ajax，使用 CDN，新增 Expires 頭，服務端配置 Etag，減少 DNS 查詢等

請求數量：合併樣式和指令碼，使用 css 圖片精靈，初始首屏之外的圖片資源按需載入，靜態資源延遲載入。

請求頻寬：壓縮檔案，開啟 GZIP，

程式碼層面的優化？

用 hash-table 來優化查詢

少用全域性變數

用 innerHTML 代替 DOM 操作，減少 DOM 操作次數，優化 javascript效能

用 setTimeout 來避免頁面失去響應

快取 DOM 節點查詢的結果

避免全域性查詢

避免使用 with (with會建立自己的作用域，會增加作用域鏈長度)

多個變數宣告合併

避免圖片和 iFrame 等的空 Src。空 Src 會重新載入當前頁面，影響速度和效率

儘量避免寫在 HTML 標籤中寫 Style 屬性

移動端效能優化

儘量使用 css3 動畫，開啟硬體加速。

適當使用 touch 事件代替 click 事件。

避免使用 css3 漸變陰影效果。

可以用 transform: translateZ(0) 來開啟硬體加速。

不濫用 Float。Float 在渲染時計算量比較大，儘量減少使用

不濫用 Web 字型。Web 字型需要下載，解析，重繪當前頁面，儘量減少使用。

合理使用 requestAnimationFrame 動畫代替 setTimeout

CSS 中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發 GPU 渲染，請合理使用。過渡使用會引發手機過耗電增加

PC 端的在移動端同樣適用

什麼是漸進增強？

漸進增強是指在 web 設計時強調可訪問性、語義化 HTML 標籤、外部樣式表和指令碼。保證所有人都能訪問頁面的基本內容和功能，同時為高階瀏覽器和高頻寬使用者提供更好的使用者體驗。

核心原則如下:

1.所有瀏覽器都必須能訪問基本內容
2.所有瀏覽器都必須能使用基本功能
3.所有內容都包含在語義化標籤中
4.通過外部CSS提供增強的佈局
5.通過非侵入式、外部javascript提供增強功能
6.end-user web browser preferences are respected

什麼是 web 語義化？有什麼好處？

web 語義化是指通過 HTML 標記表示頁面包含的資訊，包含了 HTML 標籤的語義化和 CSS 命名的語義化。

HTML 標籤的語義化是指：通過使用包含語義的標籤（如h1-h6）恰當地表示文件結構 。

CSS 命名的語義化是指：為 HTML 標籤新增有意義的class，id 補充未表達的語義。

為什麼需要語義化？

1.去掉樣式後頁面呈現清晰的結構
2.盲人使用讀屏器更好地閱讀
3.搜尋引擎更好地理解頁面，有利於收錄
4.便團隊專案的可持續運作及維護