前端经典面试题合集, 什么是点击穿透,怎么解决?

Step 1

Q:: 什么是点击穿透，怎么解决？

A:: 点击穿透（Click-through）是指在移动端浏览器中，当一个弹出层关闭时，点击事件会透过弹出层传递到下面的元素上，从而触发下层元素的点击事件。这通常是由于移动端浏览器的点击事件延迟（约300ms）导致的。解决方案包括使用touchstart事件代替click事件，或者在弹出层关闭时，延迟一段时间再恢复底层元素的点击事件，例如使用setTimeout函数延迟300ms。另外，也可以使用CSS属性pointer-events: none;来禁用底层元素的点击事件，等弹出层关闭后再恢复。

Step 2

Q:: 前端中如何优化页面加载速度？

A:: 优化页面加载速度可以通过以下几种方式：1. 压缩和合并文件（如CSS和JavaScript）；2. 使用CDN来分发静态资源；3. 延迟加载非关键资源，如使用async和defer属性加载JavaScript文件；4. 使用缓存（如HTTP缓存和Service Workers）；5. 优化图片（如使用WebP格式和懒加载）；6. 减少HTTP请求次数，可以通过合并文件和使用CSS Sprites实现。

Step 3

Q:: 解释一下什么是防抖和节流，并说明它们的区别？

A:: 防抖（Debouncing）和节流（Throttling）都是用来控制高频率事件触发的技术。防抖是指在事件被触发后，只有在指定的时间内没有再次触发该事件，才会执行相应的处理函数。常用于搜索输入框等场景，防止频繁请求。节流则是限制一个函数在一定时间内只能执行一次，无论期间触发多少次事件。适用于滚动事件、窗口缩放等需要频繁触发的操作。它们的主要区别在于防抖是将多次执行变为最后一次执行，而节流是间隔时间执行。