不幸的是async属性和defer属性不适用于内联脚本，因为默认情况下，浏览器将会一旦遇到内联脚本就好编译并执行它们。当他们在HTML中内联时，它们立即运行，通过使用外部资源上的上述两个属性，相较于DOM / CSSOM我们可以延迟运行脚本。
操作前克隆节点
当且仅当您在对DOM进行多次更改时遇到意外行为时，尝试此操作。首先克隆整个DOM节点，对克隆的节点进行更改，然后更换原始节点可能会更有效，因为这会避免多次重绘降低CPU效率和内存负载。它还可以防止您的页面“抖动”和闪烁的未加载样式内容（FOUC）。
克隆时请小心，因为它不会克隆事件侦听器。有时候，这可能正是你想要的。在过去，当不调用命名函数，没有JQuery的.on（）和.off（）方法可用时，我们使用这种方法来重置事件侦听器。
预加载/预读取/预提交/预连接
这些属性基本上都是在他们的测试版本中，非常好用。但是它们是相当新的，并没有广泛的浏览器支持，这意味着我们大多数人并不是真的很重要的备选方法。但如果你有想了解，请看看这里()和这里()。
第四步 - 渲染树
一旦所有节点都被读取，并且DOM和CSSOM已准备好组合，浏览器就构建“渲染树”。如果我们将节点视为单词，将对象模型视为句子，则“渲染树”就是整个页面。现在浏览器具有渲染页面所需的一切。
第五步 - 布局
然后我们进入布局阶段，确定页面上所有元素的大小和位置。
第六步 – 绘制
最后我们进入绘制阶段，我们实际上光栅化了屏幕上的像素，为我们的用户绘制页面。
所有这些通常发生在几秒或零点几秒内。我们的工作就是做得更快。
如果JavaScript事件更改页面的任何部分，就会重新渲染“渲染树”，并强制我们再次布局和绘制。现代浏览器足够聪明，只会进行部分重绘，但是我们不能依赖此功能来保障我们的页面高效。
尽管如此，JavaScript在客户端主要是基于事件的，我们希望它处理我们的DOM，它仍将做这些处理。我们只需要限制它的不良影响。
现在你应该充分了解领会 Tali Garsiel的这个演讲。这是2012年的演讲，但信息仍然适用。她关于这个问题的全面论文可以在这里（）读到。
如果你喜欢迄今为止所读过的内容，并仍然渴望了解更多底层技术知识，那么你所有知识的指导就是HTML5规范()。
我们快要完成整个介绍，只需再多给我一点点时间！现在我们揭示为什么我们需要知道上以上内容。
浏览器如何进行网络调用
在本节中，我们将了解如何最有效地向浏览器传送渲染页面所需的数据。
当浏览器向URL发出请求时，我们的服务器使用一些HTML进行响应。我们将从细微处开始介绍，慢慢增加复杂性。
假设这是我们页面的HTML。
我们需要学习一个新的术语，关键渲染路径（Critical Rendering Path，CRP）。它是指浏览器渲染页面所需的步骤数。这是我们的CRP图解现在看起来的样子。
浏览器发出GET请求，然后一直处于空闲状态，直到我们回复我们的页面所需的1kb HTML（还不包括CSS或JavaScript），然后可以构建DOM并渲染页面。
关键路径长度
三个CRP指标中的第一个是路径长度。我们希望这个值尽可能低。
浏览器需要一次往返请求服务器来检索渲染页面需要的HTML，它只需请求这一次。因此，我们的关键路径长度是1，完美。
现在我们继续下一个等级，在HTML里包含一些内部样式和JavaScript。
如果检查我们的CRP图表，我们会看到几个变化。
我们有两个额外的步骤，构建CSSOM和执行脚本。这是因为我们的HTML包含需要计算的内部样式和脚本。然而，由于不需要外部请求，因此它们不会增加关键路径的长度，耶！ 但等一下，不要高兴得太早。还要注意，我们的HTML大小增加到2kb，所以我们必须在某个地方采取措施。
