HTML5 移动Web App阅读器-2(技术点讲解)

1.使用Base64格式的图片制作icon
HTML5 移动Web App阅读器-2(技术点讲解)_第1张图片
记得写备注
缺点:图片体积更大,因为base64是未经压缩的,比原图大;维护不方便。
优点:base64图片利于页面加载,可以减少请求;加快首屏数据的显示速度。

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

2.使用CS3的图片制作icon(一般用在规格图形上面)
优点:体积小;
缺点:也不容易维护,存在兼容性问题(2012年)
但是在web app上面就几乎存在0兼容性问题咯
常用属性
border-radius
box-shadow
transform
HTML5 移动Web App阅读器-2(技术点讲解)_第2张图片
DOM节点操作QuerySelector
postMessage 跨域通信
H5 API:
性能监控接口,页面加载速度
HTML5 移动Web App阅读器-2(技术点讲解)_第3张图片
HTML5 移动Web App阅读器-2(技术点讲解)_第4张图片
HTML5 移动Web App阅读器-2(技术点讲解)_第5张图片
js是单线程的,setTimeout类似开辟一个线程,把需要异步操作的一些代码放到function里面。
worker是后台的一个计算线程,跟UI线程完全独立。文件里面的js不能与UI相关
HTML5 移动Web App阅读器-2(技术点讲解)_第6张图片
跨域请求,AJAX
以前跨域的做法
iframe
jsonp本身就是script标签
HTML5 移动Web App阅读器-2(技术点讲解)_第7张图片
这里的url与当前域是同域的:协议相同
设置服务器的响应头

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

HTML5 移动Web App阅读器-2(技术点讲解)_第8张图片
HTML5 移动Web App阅读器-2(技术点讲解)_第9张图片
HTML5 移动Web App阅读器-2(技术点讲解)_第10张图片
HTML5 移动Web App阅读器-2(技术点讲解)_第11张图片
统一交互
移动端性能陷阱和硬件加速:

  • 减少和避免repaint,reflow(页面重绘(位置不变),页面回流(位置变 ))
  • 减少对DOM节点的操作,也可以理解为把DOM元素从DOM文档流中提取出来
  • 尽量缓存所有可以缓存数据
  • 使用CSS3 transform(底层操作) 代替dom操作
  • 不要给非static定位元素(absulate和relative)增加css3动画
  • 适当的使用硬件加速GPU(canvas,transform:translate3d(0,0,0))

HTML5时代之前利用Response Header来做缓存
HTML5 移动Web App阅读器-2(技术点讲解)_第12张图片
之后
HTML5 移动Web App阅读器-2(技术点讲解)_第13张图片
indexedDB能储存更多的数据,也能够建立序列

你可能感兴趣的:(web前端)