A1========A1========A1========A1========A1========
在移动端多了touch的三个事件，tap是这三个touch事件的封装，用来模拟click事件。
所有事件触发顺序为：(touchstart——touchmove——touchend)——mouseover——mousedown——mouseup——click。
当有touchmove触发时，就不会再触发touchend之后的事件。
移动端为什么有300ms延迟？ ===
原因：双击缩放（等待300ms，判断用户是否要点击第二次）。
300ms延迟 解决方案： =====
穿透问题
现象：
1. 点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。
2. 另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了
原因：========
1. touch事件300ms后，触发click事件；
2. 混用touch和click会导致点透问题。
穿透问题 解决思路：=====
1.不要混用touch和click；
2.阻止掉 touch之后的click。
穿透问题 解决方案：=====
1.tap后延迟350ms再隐藏mask；
2.pointer-events：mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应；
3.fastclick
4.只用click
5.只用touch
FastClick原理：检测到 touchend 事件时，立即触发一个模拟 click 事件，并把 300 毫秒之后真正触发的click事件阻止掉。
tap事件原理：等待固定毫秒后，没有再次点击，算为点击事件；
retina屏幕，1px变成2px，如何解决？ ======
原因：
物理像素:一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素:设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
设备像素比(device pixel ratio,简称dpr):在window对象中有一个devicePixelRatio属性,定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方css中的1px,也就是设备独立像素，并不等于移动设备的1px，这些由于不同的手机有不同的设备像素比。
解决方案：
1.通过viewport + REM的方式来兼容。
目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。淘宝M首页就是这种方案。
在devicePixelRatio = 2 时，输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
同时设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
UED ======
A2========A2========A2========A2========A2========
函数声明和函数表达式：
浏览器9种缓存机制;
react组件跨级传值;
原型的最顶级是Object.prototype。
文字太多显示省略号：
white-space: nowrap;
text-overflow: ellipsis; // 显示省略号
text-overflow: clip; // 剪切多余文字
m========m=================m=======
cookie设置过期时间
overflow：hidden 改变了哪些东西？