总结包含以下内容：基于HTML5,浅谈移动端ICON制作、性能陷阱和硬件加速

HTML5Performance
HTML5Performance

ICON制作

  • 使用Base64格式的图片制作ICON
    • 可减少请求，加快首屏数据的显示速度，但体积大，未压缩，不易维护
  • CSS3制作ICON
    • 在手机端的兼容性很好，体积小，但一般用在规则的图形

移动端性能陷阱

  • 1、在PC时代会将<script>标签放在<body>的最底部，在移动端时代：
    • 减少或避免repaint(页面重绘),reflow(页面回流)。会触发repaint的操作：比如样式上的变化，会触发reflow的操作：比如位置的改变
    • 减少对DOM元素的操作（框架的做法是将DOM操作从DOM文档流中提取出来）
    • 尽量缓存可以缓存的数据

  • 2、在PC时代使用一般使用http来缓存(比如ResponseHeaders的Cache-Control等)，在移动端时代：

    • localStorage（只能存储字符串，否则需要做序列化的处理） 

      1
      2
      3
      localStorage.setItem('data_1',JSON.stringify({a:1}));
      localStorage.getItem('data_1');//"{"a":1}"
      JSON.parse(localStorage.getItem('data_1'))//Object {a: 1}

    • sessionStorage（会话级别的存储）

    • indexedDB(存大量数据，可建立索引)
  • 3、使用CSS3 transform代替DOM操作，CSS3 transform由浏览器引擎底层提供渲染

非主流的硬件加速方法：

  • 不要给非static定位元素增加CSS3动画（比如：absolute、relative）
  • 适当地使用硬件加速（比如GPU），比如用Canvas绘画可触发GPU，加transform: translate3d(0,0,0)