20｜优化INP（下）： 如何优化布局和渲染，提升网页响应速度？

1. 浏览器工作流程主要分为解析文档和渲染页面两部分，包括生成DOM树和渲染树，以及确定元素位置和大小，绘制内容到屏幕上。 2. 解析、布局和渲染以及JavaScript脚本的执行在一个主线程上共享，耗时过长会降低页面的输入延迟（INP）指标。 3. 布局优化方向包括减少`calc()`函数的使用频率、避免频繁更新页面元素的宽度、高度等操作，以及尽量不使用定位元素的伪类选择器。 4. 避免频繁的重排和重绘操作，减少对页面布局和渲染的影响，通过合理的布局优化和代码优化，提升网页的响应速度。 5. 避免在循环体内触发浏览器重排，减少无用的DOM元素，简化页面结构，提高页面性能，并使代码更易于理解和维护。 6. 优化布局和渲染的方案：降低样式计算的使用率、减少重排重绘的频率、减少DOM数量和优化长列表。 7. 虚拟化列表和预加载是解决长列表性能问题的两种方案，可以通过这些策略来优化长列表，提高页面性能。 8. 性能优化是通过换一种实现方案解决业务问题，需要通过开发者工具分析，找出问题根源并提出解决方案。 9. 大型前端项目通常非常复杂，很难使用标准化的优化方案解决性能问题，需要根据具体情况提出个性化的解决方案。 10. 性能问题或交互卡顿通常是前端业务逻辑导致，需要针对具体业务场景进行性能优化。 这些重点涵盖了浏览器工作流程、性能优化方向、布局和渲染的优化方案，以及解决长列表性能问题的策略，对于前端开发者进行性能优化和页面优化提供了指导和建议。