Skip to content
New issue

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

#

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

Already on GitHub? # 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
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
读书笔记
Projects
None yet
Milestone
No milestone
Development

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