• 《HTML5 and Javascript Web Apps》读书笔记要点摘录


      必须要承认的是这本由Wesley Hales编写的书对要进军web apps 的程序员(媛)来说绝对是福音,很薄的一本书简明扼要的说明了web apps的实现原理,实现工具以及优缺点。拾人牙慧,作此摘录:

    1原理:

    浏览器(即平台)已经称为应用程序的另一个平台,我们的前端代码现在打包为HTML5驱动的原生应用,扩展和操作系统。h5,Open Web和移动设备已经进一步推动了浏览器平台,使浏览器能够在离线状态下存储数据和运行应用。

    2移动优先:

    移动优先要求我们考虑代码质量。开发人员在使用css进行硬件加速动画时必须考虑电池寿命,这种开发质量不仅能带来更好的性能,还能鼓励我们关注更清晰的语义。检查设备电池状态的API(http://www.w3.org/TR/battery-status/)。

    3QA和设备测试:

    在mobilexweb的网站(http://www.mobilexweb.com/emulators)上可以找到需要的模拟器

    4当用户界面可以预先存储在图像中时,应该避免在软件中进行这类工作。这意味着应该使用“精灵”,设备只需要下载一个图片,在css文件中潜入一个数据URI取得较小的图像。以下几个动画不需要重新绘制:trandition-propetry;opacity;transform.

    5使用 div[style*='foo']会降低4.3.x以及之前版本的ios设备性能。

    6用css代码添加动画和硬件加速,实际的动画在我们切换page div元素的类时发生

    .page{
        position:absolute;
        100%;
        height:100%;
    //激活GPU,组合每个页面
        -webkit-transform:translate3d(0,0,0);
    }

    虽然translate3d(0,0,0);被称作WebKit上的万能方法,但是仍有一些浏览器引擎不支持,这时应该将3D去掉z轴变成2D变换(2D变换没有GPU加速的功能)。

    7翻转:

    在移动设备上翻转的特点是真正的将页面扫除。在github(https://github.com/html5e/slidfast/blob/master/slidfast.js#L411)上可以看到源代码。

    8调试硬件加速

    8.1减少图层数量

    8.2尽可能保持图层的简单

    8.3不要频繁更新图层

    8.4按照目的调整图层合成

    8.5反复试验。

    启动基于WebKit的浏览器和选择的IDE,开始调试。

    使用Safari或者使用chrome查看每秒帧数信息和合成图层的边缘(1打开chrome浏览器2在url栏中输入about:flags3向下滚动几个条目,单击启用FPS counter)

    9用innerHTML()将AJAX响应插入DOM 是很危险的。

    10如果在不同的文档中创建新的子节点,会发生一个错误,所以最好使用adoptNode  (appendChild(document.adoptNode(newPage));)

    未完待续——————————————————————————————————————————————————————————————————————————

  • 相关阅读:
    SpringBoot入门
    Java自定义注解(1)
    git集成idea
    git常用命令
    Shiro授权
    shiro认证
    shiro入门
    SpringMVC文件上传
    SpringMVC入门
    mybatis关联关系映射
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4495699.html
Copyright © 2020-2023  润新知