日常学习笔记——web app 阅读器

base64图片

优势:

  • 减少请求(直接放在css文件里面,不需要通过URL)
  • 加快首屏数据的显示数据
    缺点:
  • 维护不方便
  • 体积更大

CSS3制作图片

  • border-radius
  • box-shadow
  • transform

HTML5 API概述

DOM 节点操作QuerySelector:操作简单,性能更好,动作更快
postMessage:跨域,页面通信
window.performance.timing:性能监控
localStorage:存储

touch事件

touchdown–>touchmove–>touchup
触摸过程中,clickmousedownmouseup事件触发顺序是不定的。

viewport固定页面宽度

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

  • 减少或者避免页面重绘repaint),页面回流reflow)——减少对DOM元素的操作。
  • 尽量缓存可以缓存的数据
  • CSS3 transform代替DOM操作
  • 不要给非static定位元素增加css动画(会成倍增加性能消耗)
  • 适当使用硬件加速(canvas画图,transform等)

开发流程

开发流程

技术选型

  • 轻量化
  • 维护简单
  • 快速开发
  • 高性能
  • 框架or原生?
  • 模块化拆分
0%