HTML性能優化
查看淘寶移動端的做法：
css全部使用行內，js有行內，也有引入外部檔案
查看京東移動端的做法：
css和js都是既有行內，既有引入外部檔案
行內的優點：
減少HTTP請求
行內的缺點：
1、沒法復用 2、是HTML變大，加載變慢 3、不利于復用（可以用工程化手段解決，維護原始碼，上線用壓縮處理過的代碼）
外部檔案的優點：
1、很好的復用 2、利用了瀏覽器的靜態資源快取 3、代碼分離有利于維護
外部檔案的缺點：
增加HTTP請求
建議：行內首屏必備的樣式和腳本（不要太多），其余的還未進入視線的使用外部樣式
一般原則：
css樣式放在head頭部中，越早越好，防止DOM裸奔
js一般放在底部，等DOM結構加載完畢再執行，因為js多用于操作DOM，防止獲取不到，并阻塞DOM渲染
特殊原則：
關于螢屏適配和需要行內的js，有必要放在head頭部，越早適配越好
避免重復的資源請求
上線之前的壓縮：
像注釋、空格、換行，只在原始碼維護中有用，上線版本并不需要
在上線之前，對html/css/js進行合并壓縮 https://tool.oschina.net/jscompress
把代碼拷貝進來，壓縮完再拷貝回去
也可以將幾個css檔案壓縮成一個，減少http請求，但是要保證單檔案不要太大
讓后端配合進行瀏覽器資源的快取
圖片和其他優化：
http請求大：
圖片壓縮處理 https://zhitu.isux.us/
使用更高壓縮比格式的圖片 webp
盡量少用圖片，用圖示字體代替圖片
css畫圖
http請求多：
合理使用base64圖片（2k-10k）
合并靜態圖片，雪碧圖（也適用于小圖片小圖示）
n
其他：
減少結構嵌套，DOM結構不要太復雜
避免空鏈接，可以使用#，或者jsvascript:;
同理，src和href這些屬性都不要空著
table和iframe這些慢元素不建議使用，因為瀏覽器渲染時不是分步驟渲染，而是全部渲染完才顯示
主要內容放在前面，次要內容放在后面，而不一定要按照布局來
比如側導航不是太重要，可以放在主要內容的后面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60272.html
標籤：Html/Css
上一篇：練習中的零碎知識-CSS篇
下一篇：前端命名規范