跨终端Web

1、终端vs设备

H5页面运行在同一设备的不同终端下。

（1）Web浏览器。

（2）微信、QQ浏览器。

（3）移动App的Webview。

（4）TV机顶盒。

2、跨终端的实现方式

（1）响应式

存在内在的高耦合性，频繁更新维护成本高

（2）多站点

m.example.com、hd.example.com、

wap.example.com、 iphone.example.com、

ipad.example.com

（3）多模板

一个页面只有一个URL，无须服务器端繁杂的URL映射和终端检测等手段进行跳转。

（4）多平台

NativeApp，性能高，系统功能丰富。

总结:多种方式结合。

3、HTML5新特性

（1）语义（header、footer、nav）

（2）离线&存储（LocalStorage、IndexedDB、FileAPI）

（3）设备访问（定位、语音输入、传感器）

（4）网络连接（WebSocket、服务器信息推送）

（5）多媒体（video、audio）

（6）图形接口（canvas提供2D和3D的GDI，WebGL硬件加速）

（7）性能&整合（WebWorkers实现脚本后台运行）

（8）CSS3特性（Flex盒子模型、动画、投影、圆角、媒体查询、语音）

4、通用触屏事件

（1）拍击（Tap）

（2）滑动（Swipe）

（3）拖拽（Drag）

（3）捏（Pinch）

（4）旋转（Rotate）

（5）重力感应（Shake）

5、操作系统及浏览器分级

（1）操作系分统级

A级：IOS9.x、IOS8.x、IOS7.x 、Andriod4.4.x、 Andriod4.3.x、

Android2.3.x

B级： IOS6.x、 Andriod4.1.x、 Andriod4.0.x

C级： IOS5.x、WindowsPhone

（2）浏览器分级

A级：APP客户端、微信、IOS&Andriod内置浏览器、UC浏览器、

QQ浏览器

B级：Chrome、360浏览器、Opera、IE10、猎豹、遨游、

C级：Firefox、淘宝浏览器、NodeJS、TV机顶盒

6、IF接口流程复用架构

7、Hybrid APP

（1）优点

跨平台、快速发布、高效开发、丰富的DeviceAPI

（2）缺点

GPU/CPU密集类应用，比如游戏，性能不够高。可以通过

“CSS Transform 3D”、Canvas硬件加速来缓解

静态资源加载慢，可以通过Natite预加载进行拦截

（3）框架

PhoneGap（Web App框架）

Titanium（JS原生 App框架）

React Native（Facebook App框架）

8、前端MVC、NodeJS、Bootstrap

（1）BackboneJS

（2）AngularJS

（3）NodeJS

（4）Bootstrap