《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;
    width: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));)

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

时间: 2024-10-13 10:04:02

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

Professional JavaScript for Web Developers 读书笔记

Chapter 6 OBJECT-ORIENTED PROGRAMMING Object Creation the constructor pattern Object created by the constructor function that using new key will automatically have a constructor property(non-enumerable) which points to the constructor How prototype w

JavaScript语言精粹读书笔记- JavaScript对象

JavaScript 对象 除了数字.字符串.布尔值.null.undefined(都不可变)这5种简单类型,其他都是对象. JavaScript中的对象是可变的键控集合(keyed collections). 对象是属性的容器,其中每个属性都拥有名字和值. JavaScript中的对象是无类别的(class-free)的.它对新属性的名字和值没有约束. JavaScript包括一个原型链特性,允许对象继承另一对象的属性. 对象的检索: stooge[“first-name”]或者stooge.

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

第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null.但JSON不支持JavaScript中的特殊数值undefined. “Hello world!” l        对象(属性的值可以是简单值,也可以是复杂类型值,如下这样在对象嵌入对象) { “name” : ”Nicholas”, “age” : 29

《跨终端Web》读书笔记

跨终端的Web成为了趋势,而这本书就是讲了在这种趋势下进行开发的常见问题及其解决方案,可能是限于篇幅,每个方面都没有展开细说,但这是这样让本书干货满满,几乎没有一句废话. 下面是一些笔记. Web的本质特性是低成本跨平台但是对设备先进特性支持性不够. Web和客户端应用的融合已经成为必然!前端工程师的基本功也包括了客户端和服务器端环境的知识. 移动优先. 跨终端除了响应式,也包括多站点,多模板,多平台.需要综合考虑需求和复杂度等很多因素,使用合适的方式. 响应式的瓶颈:响应式不能解决移动端DOM

Flask Web开发读书笔记

1.Flask的两个主要依赖: 路由.调试和Web服务器网关接口(Web Server Gateway Interface,WSGI)子系统由Werkzeug提供. 模板系统由Jinja2提供. Werkzeug功能: HTTP头解析与封装 易于使用的request和response对象 基于浏览器的交互式JavaScript调试器 与 WSGI 1.0 规范100%兼容 支持Python 2.4-Python 2.7 (Python 3.0实验性支持) 支持Unicode 支持基本的会话管理及

JavaScript高级程序设计-读书笔记(4)

第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document及Element类型的实例调用它们.目前完全支持Selector API Level 1的浏览器有IE 8+. Firefox 3.5+. Safari 3.1+. Chrome和Opera 10+. querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,

javascript高级程序设计读书笔记2

<!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype.因此这一文档类型必须出现在项目的每个页面的开始部分 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话) 有两个版本的 jQuery 可供下载:Production ver

《JavaScript模式》读书笔记

前言: 模式是针对普遍问题的解决方案.更进一步地说,模式是解决一类特定问题的模版. 第一章:简介 在软件开发过程中,模式是指一个通用问题的解决方案. 一个模式不仅仅是一个可以用来复制粘贴的代码解决方案,更多地是提供一个更好的实践经验.有用的抽象化表示和解决一类问题的模版.关键词: 表示.解决 学习模式的好处: 学习模式,我们可以使用经过实践证明有效的经验来编写代码,而无需做很多无用的工作. 模式提供了某种程度上的抽象. 这样,在解决复杂问题时,想到这个模式即可,无需考虑太多细节. 模式可以改进开

Javascript高级程序设计读书笔记(第二章)

第二章  在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到整个页面都解析完毕后再运行.相当于告诉浏览器立即下载,但延迟执行.HTML5规定要求脚本按照它们出现的先后顺序执行. 异步脚本(async)如果有多个脚本文件,执行顺序不确定,指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容. XHTML代码的规则比编写HTML严格得多,下面