HTML5和JavaScript Web应用开发读书笔记

October 22, 2014

Reading time ~1 minute

home
HTML5和JavaScript Web应用开发

第一章 客户端架构

  • 过去前端开发人员不用关心用户界面后的框架,从未先现在一样关注浏览器的性能
  • 过去利用服务端模板和组件框架,如JAVA 的JSP,Velocity,前端只是套个模板而已
  • 如今浏览器的性能已经得到了很大的提升,很多逻辑在客户端写,而后台仅仅提供Restful风格的接口
  • 我们现在创建的不是网站,而是基于HTML5,CSS3和JavaScript的可靠地应用程序
  • 服务端模板引擎已经逐渐被JavaScript模板所取代
  • JavaScript API得到了更多硬件访问的支持,例如Geolocation、Web Workers
  • 应该为当前的项目作出价值的决策,必须建立和维护编写、测试、和调试代码与选择框架的工作流
  • WEB开发模式已经逐渐在演化,我们前端是新时代的先锋,抓住这个机会,创建性能强大,可伸缩的应用,利用WEB最新规范将其推进一步,变得更好。

第二章 移动WEB

第三章 为移动WEB构造程序

  • 移动设备的成功依赖于两个因素:所以平台一致的外观;具有离线能力、UI动画和通过Rest风格或者WebSocket端点读取和发送数据的后端服务
  • 有两个影响:CPU/GPU的速度和互联网速度
  • 移动端的设计模式
  • 要考虑的事情:硬件加速,内存分配和计算负担,电池的消耗与寿命,使用canvas代替image
  • 常见交互 滑动,翻转,旋转transtion,transtform,transtlate.建议使用translate3d, 2d转换不支持GPU加速
  • 使用Chrome查看每秒帧数FPS,查看是否加速用合成渲染边框
  • 读取和缓冲,将AJAX缓冲到localStorage 可存5M
  • IOS使用InnerHTML可能会出问题
  • 网络类型检测与处理
  • 移动WEB常用于单页,可以平滑的向原生应用过渡,减少了请求次数

移动框架

  • 对触摸屏设备的优化,确保使用CSS3过渡处理动画
  • 在所有主流平台浏览器上跨平台一致性
  • 使用或封装最新的HTML5 CSS3标准
  • 框架背后的强大开源社区
  • 单页框架:JQuery Mobile, JQTouch
  • 无页面结构框架:xui
  • 100%JavaScript驱动:SenchaTouch, Wink Tooolkit, The-M-Project

移动调试

第四章 桌面WEB

客户端优势

  • 更好的用户体验
  • 网络带宽减少(降低成本)
  • 具有可移植性(离线)

服务端优势

  • 更好的安全性
  • 减少客户端的处理开销(移动端电池)
  • 具有可扩展性(方便添加更多服务器)
  • 性能检测可以使用UA或Modernizr.js

特征检测

  • 原生特征检测一般使用创建一个元素看某一个方法是否存在
  • 使用Modernizr.js可能会带来加载时间超过30MS,因为必须在DOM加载之前渲染各个值,
  • 使用Modernizr.js不建议在生产环境中使用,但是可以在开发阶段使用它将各个浏览器的兼容性先调试好
  • FormFactory.js可以检测不同类型的的设备,如移动设备版本、电视版本

UA

  • window.navigator.userAgent检测,但是不可靠
  • Google的一款UA解析器,基于JSONua-parser,另一款基于JSplatform.js
  • 服务端检测,MobileESP用来检测userAgent的首标

压缩

  • 确保之压缩可压缩的内容,不要把资源浪费在可压可不压的内容上
  • 未访问这选择正确的压缩方案
  • 正确配置WEB服务器,将压缩的内容发给具体的有解压能力的客户端
  • 如果一个大型页面(20k ~ 30K)压缩可能会加载CPU的负载,远大于SQL的执行,建议不压身
  • 压缩的目标可以有HTML, CSS, JS, XML, JSON, HTC, TXT(Robots.txt)
  • 可使用GZIP(减少70%,90%浏览器支持)或DEFLATE
  • 压缩JS和CSS的工具有Closure Cpmpiler, Yahoo!YUI Compressor, JSMin, Packer,
  • 前端构建(验证压缩合并等)grunt, Jawr, Ziproxy

JavaScript MVC框架

第五章 WebSocket

  • 从浏览器发出请求包含了header,无压缩的header可能有200b~2kb之前
  • WebSocket通过套接字的全双工同学,是客户端和服务器通信的高效手段
  • 优雅降级是指在WebSocket不受支持时退回到就技术(Flash或长轮训)
  • NIO和线程直接的争论永无止境,一般的,高并发建议NIO,对计算有很大要求的用多线程
  • 观察者模式,一般的有三个事件,OPEN, MESSSAGE, CLOSE
  • 使用Jetty服务器实现WebSocket的例子
  • 不仅可以传递文本,JSON,而且可以传递二进制,用老发送流式音频,也可以提供画布(你画我猜)与实时的屏幕共享技术
  • 使用代理技术如HAProxy让拆除服务器又不影响新的服务

优势

  • 没有HTTP Header
  • 没有持续(Keep-alive)问题引起的时滞
  • 低延时,更好地吞吐量和相应能力
  • 对移动设备的电池有利

框架

  • Ver.x是一个全异步,通用的JVM语言应用容器,是JVM版的Node.js
  • Socket.io目标是在每种浏览器和移动设备实现应用,优雅降级
  • Atmosphere可运行在任何基于JAVA的WEB框架

第六章 Web Storage

框架

第七章 Geolocation

  • 提供对于宿主设备相关的地理位置信息的脚本访问,定位用户移动时跟踪器经纬度
  • 地理防护:进入或离开一个位置进行提醒
  • 地址匹配:利用Google将经纬度转为实际地址
  • 一般跟踪:跟踪汽车,走路,跑步的距离
  • navigator.geolocation.getCurrentPosition(function(){})
  • 防止激活Geolocation的一个变通方法
  • 实例:用户跟踪,反向地址匹配
  • Geolocation API跨浏览器支持

框架

第八章 Device Orientation API

第九章 Web Workers

end from http://www.hacke2.cn