Html5移动应用性能优化笔记

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

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

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

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

　　3、对动画元素启用硬件加速。如果用代码描述：transfrom:translateZ(0)。这样某些浏览器会使用GPU渲染这个元素。说实在的这个感触不是特别深，且GPU这货不能太过依赖它，容易适得其反。

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

 　　5、尽量不使用动态图片,gif动画会导致浏览器不断的进行绘制、栅格化、合成。比如在数据加载时显示一朵一直旋转的菊花，或许在比较老一点的手机上这个菊花不会转或很卡的转，这种情况，建议使用Css3做loading效果。

 　　6、不在长列表元素中使用position：absolute、fixed...。比如产品列表、评论列表等等。 position需要计算，在一个长列表中使用渲染时会增加额外的开销。

　　 7、不在长列表下方元素使用position：absolute、fixed...。比如列表下的“加载更多”。 

　　 8、setTimeout、setInterval这两货最好少使。能用RequestAnimationFrame就使用RequestAnimationFrame吧。并非所有浏览器都有这货，我的就没有，所以我的手机被同事称之为测试标准。兼容方法如下：

　　

window.requestAnimationFrame = window.requestAnimationFrame || function (callback) { callback.call(); };

　　9、DOM读写分离批量操作。

 

 

//两次渲染

var h1 = $("div.h").height();

$("div.ha").height(h1);



var h2 = $("div.hh").height();

$("div.hb").height(h2);



//一次渲染

var h1 = $("div.h").height();

var h2 = $("div.hh").height();



$("div.ha").height(h1);

$("div.hb").height(h2);

 

　　10、某些手机浏览器未必认识transform因为在他们那里叫-webkit-transform（比如微信里的浏览器）。而这货坑在哪儿呢？在这儿：-webkit-transition：transform 1s; 这样真的就有效吗？-webkit-transition：-webkit-transform 1s;这样才有效。

　　　　

 

　　总结：以目前所见，对性能影响排名前三的应该是：position、动态gif、图片。 希望各大手机厂商进一步提高手机硬件性能，希望各大系统厂商能进一步提高系统性能。这样在不久的将来就不需要再如此折腾。