|
如果你想优化自己的应用，则需要关注五个主要方面，这些是你自己可以控制的：
- JavaScript — 在之前的文章中，讨论了如果编写优化代码的主题抱包括如果编写代码才不会阻止UI，和提高内存利用等等。在渲染时，需要考虑 JavaScript 代码与页面 上DOM 素交互的方式。 JavaScript 可以在 UI中创建大量更改，尤其是在 SPA 中。
- 样式计算 — 这是根据匹配选择器确定哪个 CSS 规则适用于哪个元素的过程。 定义规则后，将应用它们并计算每个元素的最终样式。
- 布局 — 一旦浏览器知道哪些规则适用于某个元素，它就可以开始计算后者占用多少空间以及它在浏览器屏幕上的位置。Web 的布局模型定义了一个元素可以影响其他元素。例如，<body> 的宽度会影响其子元素的宽度，等等。这意味着布局过程是计算密集型的，该绘图是在多个图层完成的。
- 绘图 —— 这是实际像素被填充的地方，这个过程包括绘制文本、颜色、图像、边框、阴影等——每个元素的每个可视部分。
- 合成 — 由于页面部分可能被绘制成多个层，因此它们需要以正确的顺序绘制到屏幕上，以便页面渲染正确。这是非常重要的，特别是对于重叠的元素。
优化你的 JavaScript
JavaScript 经常触发浏览器中的视觉变化，构建 SPA 时更是如此。
以下是一些优化 JavaScript 渲染技巧：
- 避免使用
setTimeout 或 setInterval 进行可视更新。 这些将在帧中的某个点调用 callback，可能在最后。我们想要做的是在帧开始时触发视觉变化而不是错过它。
- 如之前文章 所述，将长时间运行的 JavaScript 计算转移到 Web Workers。
- 使用微任务在多个帧中变更 DOM。这是在任务需要访问 DOM 时使用的， Web Worker 无法访问 DOM。这基本上意味着你要把一个大任务分解成更小的任务，然后根据任务的性质在
requestAnimationFrame , setTimeout , setInterval 中运行它们。
优化你的 CSS
通过添加和删除元素，更改属性等来修改 DOM 将使浏览器重新计算元素样式，并且在许多情况下，重新计算整个页面的布局或至少部分布局。
要优化渲染，考虑以下事项：
- 减少选择器的复杂性，与构造样式本身的其他工作相比，选择器复杂性可以占用计算元素样式所需时间的50%以上。
*减少必须进行样式计算的元素的数量。本质上，直接对一些元素进行样式更改，而不是使整个页面无效。
优化布局
浏览器的布局重新计算可能非常繁重。 考虑以下优化：
- 尽可能减少布局的数量。当你更改样式时，浏览器会检查是否有任何更改需要重新计算布局。对宽度、高度、左、顶等属性的更改，以及通常与几何相关的属性的更改，都需要布局。所以，尽量避免改变它们。
- 尽量使用 flexbox 而不是老的布局模型。它运行速度更快，可为你的应用程序创造巨大的性能优势。
- 避免强制同步布局。需要记住的是，在 JavaScript 运行时，前一帧中的所有旧布局值都是已知的，可以查询。如果你访问
box.offsetHeight ，那就不成问题了。但是，如果你在访问 box 之前更改了它的样式(例如，通过动态地向元素添加一些 CSS 类),浏览器必须先应用样式更改并执行布局过程，这是非常耗时和耗费资源的，所以尽可能避免。
优化绘图
这通常是所有任务中运行时间最长的，因此尽可能避免这种情况非常重要。 以下是我们可以做的事情：
- 除了变换（transform）和透明度之外，改变其他任何属性都会触发重新绘图，请谨慎使用。
- 如果触发了布局，那也会触发绘图，因为更改布局会导致元素的视觉效果也改变。
- 通过图层提升和动画编排来减少重绘区域。
【编辑推荐】
- 2018 JavaScript 现状调查报告火热出炉！
- 微软的TypeScript最受JavaScript开发者青睐
- 黑客向热门JavaScript库注入恶意代码 窃取Copay钱包的比特币
- 2019年 值得收藏的 15 个 JavaScript 和 CSS 动画库
- JavaScript如何正确处理Unicode编码问题
【责任编辑：张燕妮 TEL：（010）68476606】
点赞 0 （编辑：核心网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
