Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
hacke2 opened this issue Oct 22, 2014 · 2 comments
Open

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

hacke2 opened this issue Oct 22, 2014 · 2 comments
Labels
读书笔记

Comments

@hacke2
Copy link
Owner

hacke2 commented Oct 22, 2014

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
@jikeytang
Copy link

不错，海量的知识点。

@JoeyQiang
Copy link

还没用过github.... 上次下载了个客户端一直没碰过

@Hiufan Hiufan mentioned this issue Mar 7, 2015
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
读书笔记
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jikeytang @JoeyQiang @hacke2