你的位置:首页 > 网页设计

[网页设计]Html5移动应用性能优化


  前景描述:最近一直在学习html5移动开发,找了很多资料,做了很多的页面。奈何作为一个程序猿,没有前端攻城狮那般专业,处处碰壁,想遍各种方法,经历各种尝试,最终的效果自己都能看醉。其中最大的问题就是 卡。这种卡分设备,设备越差效果越明显。为此,绞尽脑汁,成天在google上爬着。

  以前,为了体验更好,用了iscroll,为了简单的完成瀑布流的布局,用了masnory。后来发现用jquery写的动画总感觉一帧帧的跳着走,iscroll越用越卡。原本一帆风顺的开发路渐渐变得无比坎坷。于是也就翻了很多的资料,做了很多实验,对此做个小小的总结。

  1、注意绝对定位。由于绝对定位的元素在浏览器绘制页面时需要计算它的位置,所以在某些特殊的情况下会有较明显的印象。如使用masonry进行瀑布流布局。masonry在布局中使用的是对元素进行绝对定位。一旦页面元素过多,页面会变得越来越卡。

  2、使用CSS3进行动画实现。如为元素指定margin值实现元素位移,改变元素margin会导致页面重新渲染部分或整个页面。相应的可以使用transform代替margin。

  3、对动画元素启用硬件加速。如果用代码描述:transfrom:translateZ(0)。这样某些浏览器会使用GPU渲染这个元素。说实在的这个感触不是特别深。

  4、图片大小控制。这个应该是最坑的,效果也是最明显的。同样的页面,不同的数据,不同的效果。爬了好久才从这个坑里爬出来。这里说的图片大小控制,主要是指图片尺寸。卡的主要原因在于,当浏览器渲染页面时如果没有指定的图片尺寸,或者如果指定的尺寸不符合图片的实际尺寸,一旦图片下载完成,浏览器将需要reflows和重新绘制页面。而若图片在一个长长的列表中,意味着每下载完成一张图片就需要重绘整个列表。在css中指定图片大小,有助于浏览器渲染(先画好框框,直接就可以填蛋。),而指定尺寸因尽量和图片尺寸相符。当然,除尺寸外,图片流大小(图片有多少kb)也应尽量控制,因为内存消耗的原因,图片过大也会卡。

 

  总结:希望各大手机厂商进一步提高手机硬件性能,希望各大系统厂商能进一步提高系统性能。这样在不久的将来就不需要再如此折腾。