H5 性能优化与JQuery原生替换
WebAPP 在手机上运行时往往受到手机性能的极大限制,手机性能表现差别非常大,如果动画效果过多连高端机都无法流畅运行,低端机更是容易出现卡顿、闪屏、延迟、加载慢等问题,正因为性能方面的表现与原生相比太差于是webAPP就只适合做一些轻量级的小软件,即便是轻量应用仍需要进行性能上处理优化才能达到流畅的体验。
CSS 性能优化
CSS的优化主要以避免冗余为主,其次是减少使用%、定位、filter、box-shadows、border-radius、float这类需要进行计算的属性。
JS 性能优化
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 根据选择器规则返回所有符合要求的元素
jQuery 动画的封装
在替换jQuery的过程中,jQuery的动画效果替换成原生的实现折腾的比较久,特别是jQuery的slideDown与slideUp这二个滑动显示隐藏元素的效果
//实现滑动效果首先要给元素添加 transition 属性
//下拉效果
function slideDown(e){
e.style.transition='height 500ms';
e.style.display = 'block';
e.style.height="0px";
setTimeout(function(){e.style.height=scrollHeight+"px"},10);
}
//上拉效果
function slideUP(e){
e.style.transition='height 500ms';
e.style.overflow='hidden';
setTimeout(function(){e.style.height="0px"},10);
//可以在最后监听动画,执行完成后将元素隐藏
e.addEventListener("webkitAnimationEnd", function() {
e.style.display="none";
})
}
还有个比较简单的fadeIn与fadeOut淡入淡出的效果
这和效果只需要通过css动画改变元素的透明度就行了。
<!-- 给元素加入transition 动画属性 -->
<img 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";
页面整体性能优化
硬件加速
如果制作Webapp还可以使用硬件加速来大幅提升软件的流畅度
通过 hardwareAccelerated:true
可以开启系统的硬件加速,不过硬件加速可能在部分手机上反而会出现闪白屏的问题,请根据情况选择是否开启,如果页面存在视频播放等功能则必须开启硬件加速。
mui.openWindow({
url:"js_pinian.html",
id: "js_pinian",
styles: {
top: "0px",
bottom: "0px",
scrollIndicator: "none",
statusbar: {
background: "#1D83E7"
},
hardwareAccelerated:true
}
});
页面预加载
如果部分页面需要频繁打开或者加载时过慢,则可以使用页面预加载进行解决,页面预加载可以让系统再后台先将页面进行一次加载,当要打开页面时则直接显示页面,直接省去了加载时间,不过预加载会消耗内存,建议预加载页面不要过多,不然所有页面都会变得卡顿。
//通过preload进行预加载
mui.preload({
url:"js_pinian.html",
id: "js_pinian",
styles: {
top: "0px",
bottom: "0px",
scrollIndicator: "none",
statusbar: {
background: "#1D83E7"
},
hardwareAccelerated:true
}
});