移动端网页开发进阶

事件

• PC端事件：鼠标事件、键盘事件
• 移动端事件 : 触摸事件

移动端事件有哪些

• 触摸事件
• touch事件
• pointer事件
• 手势(gesture)事件
• 传感器(sensor)事件

touch事件

• touchstart/touchmove/touchend
• touches/targetTouches/changedTouches
• pageX pageY/clientX clientY

幻灯片案例

• 核心逻辑：to(index)
• 操控逻辑：拖动、滑动
• 移动端动画：translate3d(x, y, 0)

什么是性能

• 网站的响应速度
• 打开页面到实际能够正常使用的时间间隔浏览页面以及和页面进行交互的流畅程度

为什么要优化移动端的性能

• 提升用户体验
• 移动端网络速度慢
• 移动端设备性能低

性能优化策略分类

• 网页资源请求与加载类
• 网页渲染类
• JavaScript脚本类

访问网站的过程

• 输入网站域名
• 通过DNS解析找到目标服务器
• 目标服务器收到请求后执行一系列操作
• 将响应数据发送到用户浏览器
• 浏览器处理响应数据，完成网页的渲染呈现

性能优化策略分类

• 网页资源请求与加载类
• 网页渲染类
• JavaScript脚本类

HTML中的性能优化

• CSS和JavaScript
• 图片
• 其他优化

CSS中的性能优化

• CSS选择器优化
• CSS属性优化
• 其他优化

JavaScript中的性能优化

• DOM操作优化
• 事件优化
• 资源按需加载和预加载
• 其他优化

有哪些常见问题

• 浏览器兼容性
• 移动端动画
• click 300ms延迟
• 单行和多行文字溢出省略
• 水平居中和垂直居中

移动端动画

	DOM	Canvas
setInterval	√	√
setTimeout	√	√
requestAnimationFrame	√	√
transition	√	×
animation	√	×

浏览器兼容性

• HTML5
• 兼容处理：html5shiv
• JavaScript
• 做特性检测，不要做浏览器检测前缀
• CSS3
• Modernizr

click 300ms延迟

• 原因：双击放大
• 解决办法
• FastClick

单行和多行文字溢出省略

• 单行文字溢出省略
• flex布局下的单行文字溢出省略
• 多行文字溢出省略

水平居中和垂直居中

• 水平居中
• 垂直居中

水平居中

• text-align: center
• margin-left: auto; margin-right: auto position+margin-left/translate
• flex

垂直居中

• line-height
• position+margin-top/translate
• flex