1、減少js載入體積
很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。
2、盡量採用比較輕量級的ui 元件庫
比如museui,mintui等
4、儘量減少網路請求數量
程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。
5、盡量把大的js 檔案進行分割成小的js檔案
如果乙個檔案有幾百k,則需要想辦法減小js的體積,js體積大的時候,往往影響js的載入速度,進而影響體驗。
6、盡量不要在手機端做過於複雜的邏輯處理
複雜的邏輯後端處理,手機端盡量只進行資料的展示和一些簡單的邏輯處理。
7、lazyload懶載入
能採用懶載入的盡量採用懶載入,如模組懶載入,頁面懶載入,懶載入等等。
8、減少使用定位屬性(fixed/absolute)
否則存在明顯的渲染問題
9、釋放沒有使用的閉包
釋放沒有使用的閉包
10 、釋放定時器
用了定時器,盡量都釋放下,t=null就可以
11、盡可能的減少watcher的數量
如果用的是vue, 儘量減少watcher使用數量,watcher底層採用的定時器機制,比較影響效能。
12、view切換過程中,在destroy中釋放view相關資源
在destroy中釋放view相關資源
13 、css選擇器盡量使用id與class,避免過度層
避免過度層
14、避免將獲取dom樣式屬性的操作寫在迴圈中,可能引起重複reflow
15、避免使用數值,比如:border: none不會引起渲染,而boder: 0會
16、設定nginx伺服器
開啟gzip壓縮
h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
移動端H5除錯
背景 開發pc頁面的時候使用chrome瀏覽器的開發者工具,可以很容易的捕獲到頁面的dom元素,並且可以修改樣式,方便除錯 但是手機上卻很麻煩,因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc,使用pc的開發者工具檢測。fiddler抓包工具 fiddler是強大的抓包工具...
前端優化 基於前端H5移動端的優化
1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...