返回
页面交互流畅度提升秘籍：揭秘流畅交互背后的技术细节
前端
2023-11-01 17:30:25
如何让页面交互更流畅？这是前端工程师一直追求的目标。本篇文章将通过对 FDCon2019 上刘博文老师演讲《让你的网页更丝滑》的复盘，揭秘流畅交互背后的技术细节。
设备的刷新率不断提升，如今主流设备的刷新率已经达到 60HZ 以上。这意味着，每秒钟屏幕会刷新 60 次以上。根据以下代码块可以看出，100ms 以内的点击操作都是流畅的。
const test = new Date();
setTimeout(() => {
console.log('current: ', new Date() - test);
}, 100);
如果超过了这个时间，用户就会感觉到明显的卡顿。那么，如何提升页面交互的流畅度呢？
理解浏览器渲染机制
浏览器渲染主要分为以下几个步骤：
- 构建 DOM 树： 解析 HTML 文档，构建 DOM 树。
- 构建渲染树： 根据 DOM 树和 CSS 规则，构建渲染树。
- 布局： 计算渲染树中每个节点的位置和大小。
- 绘制： 将渲染树中的节点绘制到屏幕上。
其中，布局和绘制是一个耗时的过程，尤其是当页面元素较多或样式复杂的时候。
优化布局和绘制
减少布局次数
布局是一个重排 DOM 树的过程，会影响页面的整体渲染。因此，减少布局次数至关重要。可以通过以下方式减少布局次数：
- 使用 flexbox 或 grid 布局，减少嵌套层级。
- 避免使用浮动，因为它会触发多次布局。
- 使用 CSS transform 和 opacity，因为它们不会触发布局。
优化绘制
绘制是一个将渲染树中的节点绘制到屏幕上的过程。可以通过以下方式优化绘制：
- 使用硬件加速：使用
transform、opacity等 CSS 属性，可以利用 GPU 进行硬件加速，提升绘制效率。 - 使用 CSS спрайты：将多个小图片合并成一张大图片，减少绘制次数。
- 避免过度使用阴影和渐变：这些效果会增加绘制开销。
利用 Event Loop 和 requestAnimationframe
Event Loop 是浏览器用来管理事件和回调函数执行顺序的机制。requestAnimationframe 是一个用于请求浏览器在下次屏幕刷新时执行回调函数的 API。
通过利用 Event Loop 和 requestAnimationframe，可以将耗时的任务分解成更小的任务，在每一帧的空闲时间执行。这可以有效避免长时间阻塞主线程，从而提升交互流畅度。
其他技巧
- 使用性能分析工具，找出页面性能瓶颈。
- 延迟加载非关键资源，如图片和视频。
- 启用浏览器缓存，减少重复请求。
- 使用 CDN，加快资源加载速度。
结语
提升页面交互流畅度是一个多方面的优化过程，涉及浏览器渲染机制、布局和绘制优化、以及 Event Loop 的合理利用。通过遵循本文介绍的技术细节，可以有效提升页面交互流畅度，打造用户满意的丝滑体验。
