HTML5移動端優化

2021-07-27 08:16:21 字數 634 閱讀 3376

手機端筆記:

float在渲染時計算量比較大,儘量減少使用

過多的font-size引發css樹的效率

a) 避免不必要的dom操作

b) 盡量改變class而不是style,使用classlist代替classname

c) 避免使用document.write

d) 減少drawimage

< meta name=」viewport」 content=「width=device-width, initial-scale=1″>
a) 盡量使用css3動畫

b) 合理使用requestanimationframe動畫代替settimeout

c) 適當使用canvas動畫 5個元素以內使用css動畫,5個以上使用canvas動畫(ios8可使用webgl)

css中以下屬性(css3 transitions、css3 3d transforms、opacity、canvas、webgl、video)來觸發gpu渲染,請合理使用

ps:過渡使用會引發手機過耗電增加

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...

html5移動端開發

移動端開發準備 1 meta標籤的設定 h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 2 重點設定 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1...

HTML5移動端拖動慣性

下面 只是實現了上下滑動慣性,沒有寫水平滑動慣性。臨時 筆記,可能會在以後的過程中不斷更新優化 慣性原理 產生的速度 移動距離 移動時間 距離 鬆開的座標 上次的座標 距離差 時間 鬆開的時間 按下的時間 時間差 var dargfun false this.dargdom.addeventlist...