|
假如你想优化本身的应用，则必要存眷五个首要方面，这些是你本身可以节制的：
- 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 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
