css的優化主要以避免冗餘為主，其次是減少使用%、定位、filter、box-shadows、border-radius、float這類需要進行計算的屬性。
css效能優化能夠加快頁面的載入速度，而js需要頻繁獲取並操作頁面的元素，甚至實現一些動畫效果，這就涉及大量頁面重繪與效能消耗。
使用css動畫
css的animation動畫已經可以實現大部分的動畫效果，並且css動畫的效能絕對高與使用js動畫數倍。
減少外掛程式引用 盡量使用原生js
在手機上能夠快幾百毫秒是非常不容易的，減少js外掛程式的引用也能加快頁面的載入速度，特別是對於jquery，jquery雖然非常的好用，當時還是應該盡量的使用原生js進行操作，並且目前h5也有了更好的元素選擇器。
$
("#id");
$(".class");
//可用queryselector與queryselectorall替換
document.
queryselector
('#id');
document.
queryselector
('.class');
//queryselector 根據選擇器規則返回第乙個符合要求的元素
//queryselectorall 根據選擇器規則返回所有符合要求的元素
//實現滑動效果首先要給元素新增 transition 屬性
//下拉效果
function
slidedown
(e),10)
;}//上拉效果
function
slideup
(e),10)
;//可以在最後監聽動畫,執行完成後將元素隱藏
e.addeventlistener
("webkitanimationend"
,function()
)}
這和效果只需要通過css動畫改變元素的透明度就行了。
src=
"gsjn.png"
alt="
"style
="=transition
: all 2.5s ease;
" id
="logot"
/>
//通過js改變元素的透明度就能實現淡入淡出的效果
document.
getelementbyid
("logot"
).style.opacity=
"1";
document.
getelementbyid
("logot"
).style.opacity=
"0";
mui.
openwindow(,
hardwareaccelerated:
true}}
);
//通過preload進行預載入
mui.
preload(,
hardwareaccelerated:
true}}
);
怎麼優化h5的效能
優化方案 資源載入 1.首屏載入 在1s內內容載入完畢，loading進度條消失 2.延時載入 先載入螢幕可視範圍內的資源，其他的在之後通過網路載入 3.滾屏載入 一種常見的動態無重新整理資料載入方法，4.響應式載入 在解析度不同的手機上使用不同的css，載入不同的資源 5.第三方資源非同步載入 引...
H5喚起原生應用
1 scheme host path query 喚起應用 終端如果已經安裝我們的應用，這個時候可以直接喚起原生應用 終端如果沒有安裝我們的應用，這時我們需要引導使用者去安裝。123 4567 891011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3...
原生h5表單驗證
近來做專案時發現h5表單驗證挺不錯的，畢竟原生的用起來比較方便簡單，在此做個總結 1.現在我們來簡單的實現乙個h5表單驗證 tip 在使用pattern時需要input不能為空，所以必須要用上required，否則pattern不會起作用。2.當然如果你想使用h5的表單驗證就必須使用submit來提...