網頁優化
目錄
- 網頁優化
- 減少HTTP請求
- 快取DNS
- HTML/CSS/JS優化
- 渲染優化
- SEO優化
上一章介紹了從輸入地址到到顯示網頁瀏覽器都干了什么,絕大部分的優化都在這個程序中
減少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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58541.html
標籤：Html/Css