如何深入详解并实施JavaScript前端的长尾词优化策略？

本文共计2630个文字，预计阅读时间需要11分钟。

目录+虚拟滚动+虚拟滚动插件+Web Worker优化长任务+Web Worker通信时长+requestAnimationFrame+制作动画+JS的加载方式+加载方式的总结+虚拟滚动+当我们开发时，遇到大数据加载，页面卡顿等问题

目录

• 虚拟滚动
• 虚拟滚动插件
• Web Worker优化长任务
• Web Worker的通信时长
• requestAnimationFrame 制作动画
• JS的加载方式
• 加载方式的总结

虚拟滚动

当我们开发的时候，遇到大数据加载，页面卡顿的问题应该如何处理？大多数情况下，我们都是尽量通过分页的方式处理这类问题，但是总有一些特殊的情况我们必须把数据全部加载到前端进行处理。我曾经遇到过一个坑爹的组件，必须一次性加载几万条数据到页面上，导致一打开这个组件，就会让页面疯狂卡顿，当时便用了虚拟滚动解决了这个棘手的问题。

所以当我们遇到这种情况：渲染长列表的场景，当渲染条数过多时，所需要的渲染时间会很长，滚动时还会造成页面卡顿，整体体验非常不好。完全可以考虑使用虚拟滚动这个解决方案。

虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的不渲染，在滚动时动态更新可视区域，该方案在优化大量数据渲染时效果是很明显的。以下这个图较为清晰地解释了虚拟滚动的工作原理。