Q1选择题难度 2
1/12
性能优化 · 中级 04
记忆强度
Chrome Performance 面板显示交互后先发生 Recalculate Style，随后 Layout，接着脚本再次读取尺寸并重复上述过程。最可能的优化方式是？
代码在循环中交替执行 element.style.width = ... 与 element.getBoundingClientRect()。
性能优化中级题库第 4 组，共 12 张卡片。
性能优化 · 中级 04
代码在循环中交替执行 element.style.width = ... 与 element.getBoundingClientRect()。
循环中交替写入影响布局的样式并读取几何信息，会迫使浏览器反复同步计算样式和布局，形成布局抖动。
requestAnimationFrame用于请求浏览器在下一次合适的绘制机会之前调用指定回调，主要适合视觉动画和与渲染同步的界面更新。
将装饰性之外的关键横幅改为响应式图片元素，可让 HTML 预加载扫描器更早发现资源，并通过 srcset 与 sizes 选择合适候选。
长时间纯计算会阻塞主线程，导致输入反馈、渲染和事件处理推迟。
DOM 操作本身并非一概“很慢”，真正昂贵的通常是操作引发的样式失效、布局、绘制，以及 JavaScript 与浏览器原生 DOM 实现之间的大量调用开销。
ES5继承的关键是同时解决实例状态初始化和原型方法复用。
从地址输入到首屏出现的优化，应先还原关键请求链，再缩短真正位于首屏关键路径上的环节。
typeof null 返回 object 是语言早期实现遗留下来的兼容行为，而不是说明 null 真的是普通对象。
衡量网页性能不能只看页面是否“加载完成”，而应覆盖加载速度、交互响应、视觉稳定性、网络与服务端耗时以及运行时资源消耗。
队列是一种先进先出的线性结构，核心操作包括入队、出队和查看队首。
长列表优化的核心是控制同时创建、挂载和更新的节点数量，并降低无关数据的响应式追踪成本。
图片、字体、脚本和构建产物不能只用“压缩后总大小”统一衡量。