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能储存更多的数据，也能够建立序列