HTML5 移动Web App阅读器-2（技术点讲解）

1.使用Base64格式的图片制作icon



记得写备注

缺点：图片体积更大，因为base64是未经压缩的，比原图大；维护不方便。

优点：base64图片利于页面加载，可以减少请求；加快首屏数据的显示速度。

background: url.............
url(data:image/png;base64,{img_data})

2.使用CS3的图片制作icon(一般用在规格图形上面)

优点：体积小；

缺点：也不容易维护，存在兼容性问题（2012年）

但是在web app上面就几乎存在0兼容性问题咯

常用属性

border-radius

box-shadow

transform



DOM节点操作QuerySelector

postMessage 跨域通信

H5 API:

性能监控接口，页面加载速度







js是单线程的，setTimeout类似开辟一个线程，把需要异步操作的一些代码放到function里面。

worker是后台的一个计算线程，跟UI线程完全独立。文件里面的js不能与UI相关



跨域请求，AJAX

以前跨域的做法

iframe

jsonp本身就是script标签



这里的url与当前域是同域的：协议相同

设置服务器的响应头

header('Access-Control-Aloow-Origin:*')

统一交互

移动端性能陷阱和硬件加速：

减少和避免repaint,reflow(页面重绘（位置不变），页面回流（位置变 ）)

减少对DOM节点的操作，也可以理解为把DOM元素从DOM文档流中提取出来

尽量缓存所有可以缓存数据

使用CSS3 transform（底层操作） 代替dom操作

不要给非static定位元素（absulate和relative）增加css3动画

适当的使用硬件加速GPU（canvas,transform:translate3d(0,0,0)）

HTML5时代之前利用Response Header来做缓存



之后



indexedDB能储存更多的数据，也能够建立序列