必须要承认的是这本由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;
width:%;
height:%;
//激活GPU,组合每个页面
-webkit-transform:translate3d(,,);
}

虽然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));)

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

《HTML5 and Javascript Web Apps》读书笔记要点摘录的更多相关文章

  1. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  2. JavaScript 函数式编程读书笔记2

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  3. JavaScript 函数式编程读书笔记1

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  4. javascript高级程序设计读书笔记-事件(一)

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  5. Flask Web开发读书笔记

    开篇:目前想自学Flask Web开发--基于Python,找了几本书准备啃啃,同时也会分享读书笔记.希望和大家一起进步. Flask是小型框架,可以算是微框架,但是他的功能还是比较多 Flask有三 ...

  6. 《跨终端Web》读书笔记

    跨终端的Web成为了趋势,而这本书就是讲了在这种趋势下进行开发的常见问题及其解决方案,可能是限于篇幅,每个方面都没有展开细说,但这是这样让本书干货满满,几乎没有一句废话. 下面是一些笔记. Web的本 ...

  7. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  8. JavaScript高级程序设计-读书笔记(6)

    第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JS ...

  9. Web Scalability for Startup Engineers Tip&Techniques for Scaling You Web Application --读书笔记

    Web Scalability for Startup Engineers Tip&Techniques for Scaling You Web Application 第1章和第2章讲述可伸 ...

随机推荐

  1. Mysql创建、删除用户

    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Passwor ...

  2. dns解析对SEO产生的影响

    DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主机的域名和对应的IP地址,并具有将域名转换为IP地址功能的服务器 ...

  3. UVaLive 7375 Hilbert Sort (递归,四分图,模拟)

    题意:告诉你一条希尔伯特曲线的大小,然后给你n 个人,及n 个人的坐标,你的起点是左下角,终点是右下角,按照希尔伯特的曲线去走,按照这个顺序给n个人排序, 按顺序输出每个人的名字! 析:这就是一个四分 ...

  4. [置顶] 文件和目录(一)--unix环境高级编程

    普通文件和目录linux中最多的两类文件,linux中一共有七种类型的文件,如下: 1.普通文件 2.目录 3.字符特殊设备 4.块特殊设备 5.FIFO,又叫命名管道 6.Socket,即套接字 7 ...

  5. 用6个字符写出任意的Javascript代码

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用6个字符写出任意的Javascript代码.

  6. hibernate之saveorupdate()、save()、update()都有什么区别

    saveorupdate()如果传入的对象在数据库中有就做update操作,如果没有就做save操作. save()在数据库中生成一条记录,如果数据库中有,会报错说有重复的记录. update()就是 ...

  7. phper 要求

    做了这么多年php,今天看到一个07年的老文,才发现自己的水平太菜.转过来激励下自己 说句实话,写这个真够无聊的.本来看了某位大虾的类似文章,腹诽了几句也就算了.但是昨天晚上有个客户拿着这篇文章问我: ...

  8. sre_constants.error: unbalanced parenthesis

    Traceback (most recent call last):   File "androidmarket82.py", line 108, in <module> ...

  9. jQuery提交Json数据到Webservice,并接收返回的Json数据

    jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; ...

  10. Hibernate中的session对象update方法的使用

    使一个游离对象转变为持久化对象.例如以下代码在session1中保存了一个Customer对象,然后在session2中更新这个Customer对象: Customer customer = new ...