美文网首页
关键渲染路径

关键渲染路径

作者: 小小的白菜 | 来源:发表于2018-10-07 20:31 被阅读0次

    浏览器从接收到服务器返回的HTML到渲染像素到屏幕上,中间经历了很多的步骤。浏览器初次绘制网页的必经过程称之为“关键渲染路径(Critical Rendering Path,以下称CRP)”。

    关键渲染路径

    CRP有以下6个阶段:

    • 构造DOM
    • 构造 CSSOM
    • 运行JavaScript
    • 创建渲染树(Render Tree
    • 生成布局
    • 绘制
    CRP

    一、构造 DOM 树

    DOM树是一个表示完整解析过的HTML网页的对象。它从根元素<html> 开始,每一个节点代表页面上的一个元素或者文本。包含在其他元素中间的元素被表示成子节点。每一个节点记录着对应元素的所有属性,举例来说,一个 <a> 元素对应的节点包含了元素的href属性。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
      <header> </header>
      <section></section>
      <footer></footer>
    </body>
    </html>
    
    DOM 树

    HTML 的一点好处是它可以分块执行,无需加载整个文档,内容就可以开始出现在页面上。但是不好的地方是,诸如CSSJavaScript文件这样的资源,却能够阻塞页面的渲染。

    二、构造 CSSOM 树

    CSSOMCSS 对象模型) 是一个表示DOM相关联样式的对象。它与DOM的表现方式类似,但记录了每个节点的关联样式,包含明确声明的样式和默认继承的样式。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header> </header>
      <section></section>
      <footer></footer>
    </body>
    </html>
    
    /* style.css */
    body { 
        font-size: 18px; 
    }
    header { 
        color: plum; 
    }
    section { 
        color: firebrick; 
    }
    footer { 
        display: none; 
    }
    
    CSSOM 树

    CSS文件只有适用于当前设备的时候才会被认为是 ”渲染阻塞资源“ 。<link rel="stylesheet"> 标签可以接受一个媒体属性,通过改属性我们可以声明样式表适用的设备。例如:我们有个样式表声明了一个媒体属性orientation:landscape , 只有我们在纵向模式访问的时候,该资源才是阻塞渲染的。

    由于Javascript文件必须等待CSSOM构建完成才能够运行。因此也可以说CSS 是 “阻塞脚本”的。

    三、运行 Javascript

    JavaScript被认为是一种 解析阻塞资源,HTML本身的解析会被JavaScript阻塞。

    当解析器遇到<script> 标签时,不管是内部脚本还是外部脚本,解析器会停下来加载脚本(是外部脚本的情况下)并运行它。这就是为什么我们必须将哪些需要引用Element和文档的脚本放在文档外观的后面。

    为了避免 Javascript 阻塞解析,通过声明async属性,可以让它被异步加载。

    <script async src="script.js">
    

    四、创建渲染树

    渲染树是 DOMCSSOM的结合。它是一个表示页面被最终渲染效果的树。这意味着它只会表示哪些可见的内容,哪些不可见内容,比如声明了display:none;的元素。

    使用前面例子中提到的 DOMCSSDOM,下面的渲染树会被创建出来。

    Render 树

    五、生成布局

    布局决定了视窗(viewport)的大小,它提供了 CSS样式依赖的上下文,例如视窗的百分比或者单位。

    视窗的大小由在文档头部提供的meta标签 viewport决定,在移动端,如果不设置viewport宽度为理想视口,viewport宽度通常为980px,这会导致文字很小,我们需要手动放大阅读。

    举例,常用于响应设备宽度的视窗设置如下:

    <meta name="viewport" content="width=device-width,initial-scale=1">
    

    六、绘制

    最终的步骤是绘制,页面的可见内容会被转化成屏幕上的像素。

    绘制过程的耗时取决于DOM的大小和应用的样式。某些样式比其他样式需要更多的处理过程。例如:复杂的渐变背景图比简单的填充背景需要消耗更多的处理时间。

    参考文章

    360前端星计划学习-优化关键渲染路径

    相关文章

      网友评论

          本文标题:关键渲染路径

          本文链接:https://www.haomeiwen.com/subject/efwxoftx.html