H5 性能优化与JQuery原生替换

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
	}
});