移动端开发注意事项

css样式避免回流，尽量使用内联样式和float
尽量使用图片作背景减少img标签的使用
搞清楚物理像素和css像素的关系
图片尺寸尽量使用响应式
页面布局分清楚结构层和布局层
设置大小尽量偶数，避免奇数
小数点前面去掉0
0.1==.1

1.基础

1.1 像素

css像素：移动端使用的抽象单位
物理像素：屏幕成像的最小单位
设备独立像素：与css像素等价，是css像素和物理像素转换的桥梁
像素比：物理像素和设备独立像素的比值

1.2 视口

布局视口：浏览器厂商为了移动端用户看到PC端网页，提出的一种容器概念
视觉视口（可视视口）：眼睛看到的网页的区域
理想视口：布局视口与视觉视口相等

2.布局

2.1 响应式布局

当最大宽度为100px时
@media screen and(max-width:100px){}

2.2 百分比布局

vw vh

2.3 flex布局

3.适配

3.1 em适配

em和px一样属于像素单位；
em大小根据自身字体大小决定，如果自身没有设置font-size则逐层向上继承；
浏览器默认font-size:16px;

3.2 rem适配

rem大小根据根元素字体大小决定
rem对应的是物理像素，不是设备独立像素，尺寸严格按照设计稿

html{font-size:100px;}
1rem = 100px

3.3 viewport适配

4.事件

4.1事件类型

touchstart触屏
touchmove触屏滑动
touchend结束
touchcancel取消触摸（用于电话接入···）

4.2绑定方式

推荐使用DOM2级绑定方式
obj.addEventListener("touchstart",fn())

4.3事件对象

obj.addEventListener("touchstart",function(e){
    e = e || event;
})

e.changedTouches 触发当前事件的手指列表
e.targetTouches 触发当前事件时，元素上的手指列表
e.touches 触发当前事件时，元素上的手指列表

5.性能优化

5.1防抖节流

函数防抖（debounce）

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。

使用场景

连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
const debounce = function(func,wait) {
	let timer=null;
	return function() {
            clearTimeout(timer)
            timer = setTimeout(func,wait)
	}
}

函数节流（throttle）

限制一个函数在一定时间内只能执行一次。

举个例子，乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。

使用场景

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交
const throttle = function(func,wait){
	let timer-null;
	return function(){
            if(timer){return}
            timer = setTimeout(function(){
		func();
		timer = null
            },wait)
	}
}

5.2取消系统默认事件

在移动端进行开发时，移动端存在一些默认事件，比如长按选中文字，或者下拉时刷新。这些功能我们通常都是自己去实现，为了避免自己实现的功能受到默认事件的影响，我们通常需要阻止掉这些默认事件。

event.preventdefault() 或者函数内部 return false

5.3按需加载

懒加载

5.4css优化

缩写 css 代码
排列 css 代码
同属性提取 css 选择器
分离网页颜色和背景设置样式
条理化 css 代码

5.5重排重绘

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流/重排(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

重排的产生

页面第一次渲染在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
浏览器窗口尺寸改变
元素位置和尺寸发生改变的时候
新增和删除可见元素
内容发生改变（文字数量或图片大小等等）
元素字体大小变化。
激活CSS伪类（例如：:hover）。
设置style属性9.查询某些属性或调用某些方法。比如说：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 重绘的产生

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的观，风格，而不会影响布局的，比如 visibility，outline，背景色等属性的改变

注意：回流必将引起重绘，而重绘不一定会引起回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生

※常见的避免方法

样式集中改变
缓存布局信息
将position属性设置为absolute或fixed，position属性为absolute或fixed的元素，回流开销比较小，不用考虑它对其他元素的影响
操作元素使用文档碎片 DocumentFragment

移动端基础概念♥