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）也应尽量控制，因为内存消耗的原因，图片过大也会卡。
总结：希望各大手机厂商进一步提高手机硬件性能，希望各大系统厂商能进一步提高系统性能。这样在不久的将来就不需要再如此折腾。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
