網頁優化 [Toc] 上一章介紹了 "從輸入地址到到顯示網頁瀏覽器都幹了什麼" ,絕大部分的優化都在這個過程中 減少HTTP請求 減少HTTP請求是優化的重要手段 1. 減少圖片使用 2. 對小圖標這一類圖片使用 合併, 或者使用 編碼圖片 1. 優點: 減少了請求 2. 缺點: 修改維護不方便, ...
目錄
網頁優化
上一章介紹了從輸入地址到到顯示網頁瀏覽器都幹了什麼,絕大部分的優化都在這個過程中
減少HTTP請求
減少HTTP請求是優化的重要手段
- 減少圖片使用
- 對小圖標這一類圖片使用
CSS Sprite合併, 或者使用base64編碼圖片- 優點: 減少了請求
- 缺點: 修改維護不方便, 只使用於較小圖標
- 使用緩存存儲頁面信息, 用戶刷新/再次打開直接讀取緩存
- 對於有很多圖片的頁面,對圖片做懶載入
- 對
JS,CSS文件進行壓縮,合併
緩存DNS
DNS緩存可以減少解析功能變數名稱的時間
HTML/CSS/JS優化
- 刪除不必要的空格和註釋
- 使用語義化更好的HTML標簽
- 保持正確的嵌套,
p標簽中不要嵌套塊級標簽,a標簽不要嵌套a標簽,table中不要嵌套table - 儘量不要使用
iframe(要用的話使用JS動態添加 src屬性) - 將
css,JS提取為外部文件,使用link引入而不是@import- link與@import區別
link是HTML標簽,不存在相容性問題,@import是css2提出的,在很低版本瀏覽器可能不相容link會並行下載(href),@import在頁面被載入完成後再載入link引入權重高於@import方式引入
- link與@import區別
css放頭部,js放在尾部- js載入會阻塞頁面的載入(頁面只有等js執行完才會渲染)
- js在前面載入,如果要操作DOM元素可能會報錯(DOM還未載入)
css選擇器不宜超過3個- 過多的選擇器會導致 css樹載入變慢
- 保持良好的css書寫順序
display/position/float.. 等佈局定位屬性放在第一位width/height/margin/padding... 等自身屬性放在第二位text/color/font/... 等文本屬性放在第三位- 漸變/陰影/... 等其他屬性放最後
- 使用ES6新規範來書寫JS代碼
渲染優化
- 能用CSS實現就不用JS
- 元素的位置移動不要用
left,top之類, 使用transform屬性(觸發硬體加速) - 減少
DOM操作 - 需要改變的樣式很多時候, 使用css和className來添加類名而不是直接操作style屬性
- 圖片都要添加寬高,不要拉伸圖片
- 在標簽多的頁面不要使用通配符
- 儘量少使用絕對定位
- 減少DOM迴流
- 引發DOM迴流的操作
- 添加或者刪除可見DOM元素
- 元素位置,尺寸,內容發生改變
- 瀏覽器尺寸發生改變
- 引發DOM迴流的操作
SEO優化
提高網頁在搜索引擎中的排名
- 合理的
title,description,keyword - 語義化的HTML代碼
- 重要內容放在前面,且不要用JS輸出
- 非裝飾性圖片都要加上 alt屬性
- 合適的H1
- 良好的外部鏈接
- 少用iframe
