zoukankan      html  css  js  c++  java
  • 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、图片。 希望各大手机厂商进一步提高手机硬件性能,希望各大系统厂商能进一步提高系统性能。这样在不久的将来就不需要再如此折腾。

  • 相关阅读:
    函数
    python操作文件
    POJ-2689-Prime Distance(素数区间筛法)
    POJ-2891-Strange Way to Express Integers(线性同余方程组)
    POJ-2142-The Balance
    POJ-1061-青蛙的约会(扩展欧几里得)
    Educational Codeforces Round 75 (Rated for Div. 2) D. Salary Changing
    Educational Codeforces Round 75 (Rated for Div. 2) C. Minimize The Integer
    Educational Codeforces Round 75 (Rated for Div. 2) B. Binary Palindromes
    Educational Codeforces Round 75 (Rated for Div. 2) A. Broken Keyboard
  • 原文地址:https://www.cnblogs.com/aser1989/p/4381693.html
Copyright © 2011-2022 走看看