移动端滚动穿透和溢出

如果能识别网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并去掉300ms的点击延迟

1. 调用 js 库，比如 FastClick

click 延时问题可能引起点击穿透，如在一个元素上注册了 touchStart 的监听事件，这个事件会将这个元素隐藏掉，发现当这个元素隐藏后，触发了这个元素下的一个元素的点击事件

移动端滚动穿透和溢出

滚动穿透

若页面超过一屏高度出现滚动条时，fixed定位的弹窗遮罩层上下滑动，下面的内容也会一起滑动——滚动穿透

1、默认情况，平移（滚动）和缩放手势由浏览器专门处理，但可通过 CSS 特性 touch-action 改变触摸手势的行为

2、

Step 1、监听弹窗最外层元素（popup）的 touchmove 事件并阻止默认行为来禁用所有滚动（包括弹窗内部的滚动元素）

Step 2、释放弹窗内的滚动元素，允许其滚动：同样监听 touchmove 事件，但是阻止该滚动元素的冒泡行为（stopPropagation），使得在滚动的时候最外层元素（popup）无法接收到 touchmove 事件

滚动溢出

弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining），也称为滚动溢出（overscroll）

借用 event.preventDefault 的能力，当组件滚动到底部或顶部时，通过调用 event.preventDefault 阻止所有滚动，从而页面滚动也不会触发了，而在滚动之间则不做处理

JS如何影响DOM树构建

渲染引擎判断是一段脚本时，HTML解析器会暂停DOM的解析，JS引擎介入，因为JS脚本可能修改当前已生成的 DOM

如果JS脚本通过文件加载，需要先下载JS代码，而JS文件的下载会阻塞DOM解析，下载非常耗时，受网络、文件大小等因素的影响

如果脚本是内嵌，则直接执行

如果JS脚本修改了 DOM中div内容，执行这段脚本后，div内容被修改，HTML解析器恢复解析过程

如果JS代码出现了修改CSS的语句，操纵 CSSOM，执行JS前，先解析JS语句之上所有CSS样式，如果引用了外部CSS 文件，执行JS之前，需要等待外部CSS文件下载完成，解析生成CSSOM后，才能执行 JS 脚本

JS引擎解析JS代码前，不知道JS是否操纵了CSSOM，所以渲染引擎遇到JS脚本时，不管该脚本是否操纵了CSSOM，都会执行CSS文件下载，解析，再执行JS脚本，构建DOM，生成布局树

所以JS脚本依赖样式表

JS文件下载会阻塞DOM解析