这是我参与「第五届青训营」伴学笔记创作活动的第 13 天
1. 移动 Web 开发介绍
移动开发也称为手机开发，或叫做移动互联网开发。主要以手机等便携终端为基础，进行相应的开发工作，由于这些随身设备基本都采用无线上网的方式，因此，业内也称作为无线开发
2. 移动开发和 Web 开发的对比
- 业务场景
- web 前端开发主要指传统的PC端网页开发，页面主要是运行在 PC 端浏览器中，移动前端开发出来的页面主要是运行在手机上
- PC 前端最操心的是页面是否能兼容各种浏览器 → 非常大一部分的工作是理解各种浏览器之间的差异，解决浏览器的兼容性问题。移动前端的问题不在各种浏览器的差异，而在于不同的设备差异
- 新技术使用
- 传统的 PC 端网页开发，页面主要是运行在PC端浏览器中，我们直接用传统的代码搭建架构即可，但是移动前端开发出来的页面主要是运行在手机上，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 web 页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题
- 页面的适配
- 传统 PC 端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用
- 从这一点上来说移动端页面的适配难度更高一些。
- 页面性能
- PC 端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络，但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G、5G甚至是在几种不同的网络连接中交替切换也经常发生
- 不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问 ，严重影响用户体验
- 框架选型
- 由于移动端网络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架，例如像 zepto.js 这样的压缩之后只有 9.6K，就能满足一般业务的需要，如果是想要构建更复杂的单页面应用，可以选择像 vue.js 这样的框架，功能强大，但体积压缩后却只有 20 多K
3. 移动端布局方式
-
响应式布局：高度用 px
-
百分比布局：% vw vh em rem 高度用px
-
Flex 布局 （重点）：em rem 高度用px
4. 移动端适配方案
em 适配，根据浏览器默认字体大小计算，一般默认（16px）
rem 适配（重点），根据 html 根节点的字体大小来进行计算
viewport 适配（媒体查询）
5. 移动端事件
手机上的大部分交互都是通过 touch 来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要
触摸事件分类：
（1）touchstart：触摸开始的时候触发
（2）touchmove：手指在屏幕上滑动的时候触发
（3）touchend：触摸结束的时候触发
6. 移动端调试
什么是移动端调试？
移动端调试方式
终端检测
7. 移动端性能优化
取消系统事件
图片防抖动
懒加载
函数防抖节流
防止重绘重排
8. 移动端框架
zepto.js：jQuery 插件
swiper.js：轮播图插件
9. 移动端常见问题
参考文章：web移动端页面性能优化方案
图片和其他优化
css优化
DOM 操作优化
资源按需加载和预加载
