《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:%;
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》读书笔记要点摘录的更多相关文章
- HTML5&CSS3&JavaScript&PHP&MySQL学习笔记
1.在文字间添加一条水平线 使用<hr /> 注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...
- JavaScript 函数式编程读书笔记2
概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...
- JavaScript 函数式编程读书笔记1
概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...
- javascript高级程序设计读书笔记-事件(一)
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- Flask Web开发读书笔记
开篇:目前想自学Flask Web开发--基于Python,找了几本书准备啃啃,同时也会分享读书笔记.希望和大家一起进步. Flask是小型框架,可以算是微框架,但是他的功能还是比较多 Flask有三 ...
- 《跨终端Web》读书笔记
跨终端的Web成为了趋势,而这本书就是讲了在这种趋势下进行开发的常见问题及其解决方案,可能是限于篇幅,每个方面都没有展开细说,但这是这样让本书干货满满,几乎没有一句废话. 下面是一些笔记. Web的本 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- JavaScript高级程序设计-读书笔记(6)
第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l 简单值:使用与JavaScript相同的语法,可以在JS ...
- 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章讲述可伸 ...
随机推荐
- HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
- POJ 1664 放苹果 (递推)
题目链接:http://poj.org/problem?id=1664 dp[i][j]表示i个盘放j个苹果的方案数,dp[i][j] 可以由 dp[i - 1][j] 和 dp[i][j - i] ...
- [置顶] Jquery中DOM操作(详细)
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- 关于Linux vi命令 vi命令一览表
vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人,或多或少都觉得vi超级难用,但vi是最基本的编辑器,学好了vi,以后在UNIX世 ...
- 【SQL】SQL2012 导入导出报错,未在计算机上注册...
导出时报错: 如图: 解决方法:下载插件: 下载地址:http://download.microsoft.com/download/7/0/3/703ffbcb-dc0c-4e19-b0da-1463 ...
- Eclipse添加小工具_打开当前文件所在文件夹
CopyRight yuhuashi http://www.cnblogs.com/chuyuhuashi/archive/2012/05/06/2485831.html 默认情况下使用eclip ...
- SAP BW标准模型简介(BW星形模型 BW Star Schema )
标准星型模型是 数据仓库中一种常用的组织信息和数据的多维数据模型.它由中心的一个事实表(Fact Table)和一些围绕它的维度表(Dimensional Table)组成. 事实(Fact)着眼于 ...
- Educational Codeforces Round 1 E. Chocolate Bar 记忆化搜索
E. Chocolate Bar Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/598/prob ...
- python 2.5源代码编绎
VS C++项目中,选择工程项名称,右菜单中选择--->仅适用于项目---->仅生成(项目) 1.make_buildinfo,make_versioninfo make_buildinf ...
- Sales_item例子
Sales_item.h #ifndef SALES_ITEM_H #define SALES_ITEM_H #include<iostream> #include<string&g ...