降低請求量：合併資源，減少 http 請求數，minify / gzip 壓縮，webp，lazyload。
加快請求速度：預解析dns，減少網域名稱數，並行載入，cdn 分發。
快取：http 協議快取請求，離線快取 manifest，離線資料快取localstorage。
渲染：js/css優化，載入順序，服務端渲染，pipeline
正在用的離線包
預載入1 dns-prefetch：dns預抓取，預先告知瀏覽器，之後要訪問『a.com』網域名稱，瀏覽器會先查詢dns，以後不需要等待查詢dns，效果有限。在url欄的輸入命中歷史記錄，chrome就會提前解析dns、預拉取頁面。
"dns-prefetch" href=
"">
場景：需要載入第三方資源（字型，js包，與css並行建立dns連線）
"preconnect" href=
"">
"prefetch" href=
"a.png"
>
"subresource" href=
"a.png"
>
"prerender" href=
"a.html"
>
滾屏載入：如商品列表，避免開啟另乙個頁面重繪
第三方資源：如頁面統計、地圖顯示、分享元件，非同步載入
百分比進度條：讓使用者不枯燥
使用的替代(css3, svg, iconfont)
小用base64
如果要在head引入js，要放在所有css的前面。不影響css並行載入。
js放的位置
script標籤如果帶上特殊屬性：
1 async： 先不阻塞，非同步去載入資源，載入成功了，阻塞，解析js
2 defer： 先不阻塞，等domcontentloaded 阻塞。
js放的位置，不會改變 domcontentloaded 的觸發時間
重繪 和 回流
有沒有一種方式可以避免重繪和回流呢？那麼就是用css啟用硬體加速。硬體加速就是gpu加速。
開啟gpu加速的方式常見的觸發硬體加速的css屬性：
transform opacity filters will-change
用法:可以用translate替代top/left…改變
用opacity替代visibility
不要一條一條地修改 dom 的樣式，預先定義好 class，然後修改 dom 的 classname
把 dom 離線後修改，比如：先把 dom 給 display:none (有一次 reflow)，然後你修改100次，然後再把它顯示出來，當然每個瀏覽器都做了相應的優化所以沒必要這麼弄
不要把 dom 結點的屬性值放在乙個迴圈裡當成迴圈裡的變數，例如迴圈呼叫 getboundingclientrect() 方法，將會導致頁面一直處於回流的過程。
不要使用 table 布局，因為你改動一點點都將影響整個 table 的布局
動畫實現的速度的選擇
參考
移動H5首屏秒開優化方案
雖然說 h5 頁面效能變好了，但如果沒針對性地做一些優化，體驗還是很糟糕的，主要兩部分體驗 響應流暢度 由於 webkit 的渲染機制，單執行緒，歷史包袱等原因，頁面重新整理 互動的效能體驗不如原生。過程為什麼開啟乙個 h5 頁面會有一長段白屏時間？因為它做了很多事情，大概是 一些簡單的頁面可能沒有...
H5問題總結
很多時候設計稿中的icon很小，但是實際製作頁面時，如果這個icon可操作，icon的可操作域應該做大一些，不然在裝置中會經常發生操作之後沒反應 其實是沒有觸發在操作域上 少掉坑，h5建議 0.很多時候設計稿中的icon很小，但是實際製作頁面時，如果這個icon可操作，icon的可操作域應該做大一些...
h5拖動總結
1.拖動神器sortablejs sortablejs 有vue，angular，react 版的實現 vue版 通過options 可以完全使用 sortable的配置 2.vue grid layout 拖動事件使用 interactjs 來實現的。可以實現在容器內拖動 自由碰撞，碰撞原理是 使...