返回
点击穿透与点击延迟，移动端两大重灾区，针对性优化提效明显
前端
2023-12-31 15:39:46
近年来，随着移动互联网的迅猛发展，移动端设备已成为人们上网的主要工具，移动端网页的性能表现愈发重要。然而，受限于移动端设备的性能和网络状况，许多移动端网页在加载和交互时都存在着或多或少的性能问题，其中“点击穿透”和“点击延迟”便是两大重灾区。
一、点击穿透：为何点击时总有意外惊喜？
点击穿透是指在移动端网页上，当用户点击某个元素时，实际上触发了该元素下层另一个元素的点击事件，而视觉上却似乎点击的正是上层元素。这会导致用户在进行点击操作时出现意料之外的结果，进而影响其使用体验，甚至造成误操作。
导致点击穿透的原因主要有以下几个：
- 事件冒泡： 当用户在移动端网页上点击某个元素时，该点击事件会沿元素树向上层元素逐层传递。在这个过程中，如果某一层元素没有被绑定任何点击事件监听器，那么该点击事件就会继续向上冒泡，直到遇到第一个被绑定了点击事件监听器的元素，该元素的点击事件才会被触发。
- 元素定位： 如果移动端网页中的某些元素具有绝对或固定定位，并且这些元素叠加在一起，那么点击这些元素时就有可能发生点击穿透问题。
- 元素透明度： 如果移动端网页中的某些元素具有透明度，那么在点击这些元素时也有可能发生点击穿透问题。
优化建议：
- 合理使用事件冒泡： 避免使用事件冒泡来触发上层元素的点击事件。如果确实需要使用事件冒泡，应确保上层元素的点击事件监听器只在必要时才触发。
- 避免使用绝对或固定定位： 在移动端网页中，应尽量避免使用绝对或固定定位，以减少点击穿透问题的发生。
- 减少元素透明度： 在移动端网页中，应尽量避免使用具有透明度的元素，以减少点击穿透问题的发生。
- 使用JS委托： JS委托是一种用于解决点击穿透问题的技术。它通过为父元素绑定一个点击事件监听器，并在这个监听器中根据点击位置来触发子元素的点击事件，从而避免了点击穿透问题的发生。
二、点击延迟：手指都点断了，页面还是没反应？
点击延迟是指在移动端网页上，当用户点击某个元素时，该元素的点击事件并没有立即触发，而是延迟了一段时间后才触发。这会导致用户在进行点击操作时出现迟钝的感觉，进而影响其使用体验。
导致点击延迟的原因主要有以下几个：
- 页面加载缓慢： 如果移动端网页加载缓慢，那么点击网页上的某个元素时，该元素的点击事件就有可能发生延迟。
- JS脚本执行缓慢： 如果移动端网页中的JS脚本执行缓慢，那么当用户点击网页上的某个元素时，该元素的点击事件就有可能发生延迟。
- 浏览器渲染机制： 在移动端设备上，浏览器的渲染机制与PC端设备不同。在移动端设备上，浏览器会将网页内容划分为多个区域，并逐个区域进行渲染。当用户点击网页上的某个元素时，浏览器首先需要将该元素所在的区域渲染出来，然后再触发该元素的点击事件。这可能会导致点击延迟问题的发生。
优化建议：
- 优化页面加载速度： 通过减少HTTP请求数量、压缩HTML、CSS和JS脚本、使用CDN等方法来优化页面加载速度，从而减少点击延迟问题的发生。
- 优化JS脚本执行速度： 通过减少JS脚本的数量、缩小JS脚本的体积、使用JS脚本缓存等方法来优化JS脚本执行速度，从而减少点击延迟问题的发生。
- 合理使用浏览器渲染机制： 在移动端网页中，应尽量避免使用复杂
