10betweb 前端页面的渲染

来源:http://www.chinese-glasses.com 作者:Web前端 人气:97 发布时间:2020-03-14
摘要:1、从 DOM 树的根节点开始遍历每个可见节点。 PageSpeed 规则和建议 消除阻塞渲染的 JavaScript 和 CSS 要以最快速度完成首次渲染,需要最大限度减少网页上关键资源的数量并(尽可能)消

1、从 DOM 树的根节点开始遍历每个可见节点。

PageSpeed 规则和建议

  • 消除阻塞渲染的 JavaScript 和 CSS
    要以最快速度完成首次渲染,需要最大限度减少网页上关键资源的数量并(尽可能)消除这些资源,最大限度减少下载的关键字节数,以及优化关键路径长度。

  • 优化 JavaScript 的使用

    • 首选使用异步 JavaScript 资源
    • 避免同步服务器调用
    • 延迟解析 JavaScript
    • 避免运行时间长的 JavaScript
  • 优化 CSS 的使用

    • 将 CSS 置于文档 head 标签内
    • 避免使用 CSS import
    • 内联阻塞渲染的 CSS

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

渲染树构建

构建对象模型

浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此,我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。

  • 字节 → 字符 → 令牌 → 节点 → 对象模型。
  • HTML 标记转换成文档对象模型 (DOM);CSS 标记转换成 CSS 对象模型 (CSSOM)。
  • DOM 和 CSSOM 是独立的数据结构。
  • Chrome DevTools Timeline 让我们可以捕获和检查 DOM 和 CSSOM 的构建和处理开销。

CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。

为构建渲染树,浏览器大体上完成了下列工作:
  • 从 DOM 树的根节点开始遍历每个可见节点。
    • 某些节点不可见(例如脚本标记、元标记等),因为它们不会体现在渲染输出中,所以会被忽略。
    • 某些节点通过 CSS 隐藏,因此在渲染树中也会被忽略,例如,上例中的 span 节点---不会出现在渲染树中,---因为有一个显式规则在该节点上设置了“display: none”属性。
  • 对于每个可见节点,为其找到适配的 CSSOM 规则并应用它们。
  • 发射可见节点,连同其内容和计算的样式。

3、对于每个可见节点,为其找到适配的 CSSOM 规则并应用它们。

分析关键渲染路径性能

到目前为止,我们只关注了资源(CSS、JS 或 HTML 文件)可供处理后浏览器中会发生的情况,而忽略了从缓存或从网络获取资源所需的时间。我们作以下假设:

  • 到服务器的网络往返(传播延迟时间)需要 100 毫秒。
  • HTML 文档的服务器响应时间为 100 毫秒,所有其他文件的服务器响应时间均为 10 毫秒。

4、发射可见节点,连同其内容和计算的样式。

使用 JavaScript 添加交互

JavaScript 允许我们修改网页的方方面面:内容、样式以及它如何响应用户交互。 不过,JavaScript 也会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能,可以让您的 JavaScript 异步执行,并去除关键渲染路径中任何不必要的 JavaScript。

  • JavaScript 可以查询和修改 DOM 与 CSSOM。
  • JavaScript 执行会阻止 CSSOM。
  • 除非将 JavaScript 显式声明为异步,否则它会阻止构建 DOM。
  • 脚本在文档中的位置很重要。
  • 当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行。
  • JavaScript 可以查询和修改 DOM 与 CSSOM。
  • JavaScript 执行将暂停,直至 CSSOM 就绪。

本文由10bet发布于Web前端,转载请注明出处:10betweb 前端页面的渲染

关键词:

上一篇:HTTP慢速攻击

下一篇:没有了

频道精选

最火资讯