单页应用下页面滚动不更新DOM，其实是阻塞了渲染

在当今快节奏的网络世界中，单页应用（SPA）已成为主流的开发模式，其以其无缝的页面切换体验和更快的加载速度而备受青睐。然而，SPA也带来了一些独特的挑战，其中之一就是页面滚动不更新DOM的问题。

本文将通过一个真实的问题场景，带领读者一步步深入了解页面滚动不更新DOM导致页面卡顿的根因，以及如何解决和优化。

问题

从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。在某个项目的测试过程中，测试妹子跟我们反馈了一个奇怪的bug：在一个播放音乐的页面中，有一个地方同步显示音乐的当前播放位置；音乐开始播放后，这个地方的内容会不断改变，但是滚动页面后，内容却不再变化，看起来就像卡住了。

问题分析

为了解决这个问题，我们首先需要了解其根本原因。通过仔细分析，我们发现：

1. 问题只发生在移动端设备上，在PC端一切正常。
2. 问题只发生在某些特定设备上，并非所有移动端设备都会出现。
3. 当用户滚动页面时，页面会卡顿一段时间，然后才能继续滚动。

基于以上分析，我们初步推断：

• 问题可能与移动端设备的性能有关。
• 问题可能与Vue.js的实现方式有关。
• 问题可能与页面的布局或样式有关。

解决过程

1. 优化设备性能

我们首先尝试优化移动端设备的性能，包括：

• 减少页面中加载的资源数量。
• 压缩页面中的资源。
• 使用CDN加速资源的加载速度。

然而，这些优化并没有解决问题。

2. 优化Vue.js的实现方式

我们接下来尝试优化Vue.js的实现方式，包括：

• 使用Vue.js的“惰性加载”功能，仅在需要时加载组件。
• 使用Vue.js的“服务端渲染”功能，提前将组件渲染成HTML。

然而，这些优化也没有解决问题。

3. 优化页面的布局和样式

我们最后尝试优化页面的布局和样式，包括：

• 减少页面中元素的数量。
• 简化页面的样式。

这次，问题终于解决了。

根本原因

经过仔细分析，我们发现问题的根因在于：

• 页面中存在大量元素，导致页面滚动时需要更新大量的DOM元素。
• 页面中的样式过于复杂，导致浏览器在更新DOM元素时需要花费大量时间进行计算。

因此，当用户滚动页面时，浏览器需要花费大量时间来更新DOM元素和计算样式，导致页面卡顿。

解决方法

为了解决这个问题，我们可以：

• 减少页面中元素的数量。
• 简化页面的样式。
• 使用Vue.js的“惰性加载”功能，仅在需要时加载组件。
• 使用Vue.js的“服务端渲染”功能，提前将组件渲染成HTML。

优化建议

为了防止类似问题再次发生，我们可以：

• 在开发页面时，尽量减少页面中元素的数量。
• 在开发页面时，尽量简化页面的样式。
• 在开发页面时，尽量使用Vue.js的“惰性加载”功能。
• 在开发页面时，尽量使用Vue.js的“服务端渲染”功能。

总结

通过对页面滚动不更新DOM导致页面卡顿问题的分析和解决，我们了解到：

• 页面中元素的数量过多和样式过于复杂会导致页面卡顿。
• 我们可以通过减少页面中元素的数量、简化页面的样式、使用Vue.js的“惰性加载”功能和使用Vue.js的“服务端渲染”功能来解决这个问题。
• 在开发页面时，我们应该尽量避免出现这些问题。