从CRP(关键渲染路径)优化中谈浏览器渲染原理

最新推荐文章于 2020-12-03 15:05:10 发布

VIP文章莫纷飞

最新推荐文章于 2020-12-03 15:05:10 发布

阅读量1k

点赞数 1

分类专栏：页面性能文章标签：浏览器 CRP 渲染优化关键渲染路径

本文链接：https://blog.csdn.net/NEWSEKAES/article/details/77662274

版权

前言：

该文中涉及的一切问题，只在页面首次渲染条件下讨论，因后续产生的DOM和CSSOM的更新及布局绘制不在本文范围内；
本文参考Google的Critical Rendering Path部分，做了选择性的摘录，以及自己的思考和总结，若对原文感兴趣的可以点击前往。如有表述不当的地方，还请指出

1. CRP

CRP，即critical rendering path的缩写，中文译文关键渲染路径。具体是什么呢？

浏览器从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程中有一些中间步骤，这些必要的步骤，就是CRP。

注意：
CRP的起点发生在新页面，为从服务器获得HTML文件的那一刻；故以下几项和CRP没有半毛钱全系: 通过控制台添加节点、hover, active等使样式发生变化、用JS写成的交互性渲染操作之类的操作。
CRP的终点是完成浏览器内像素的渲染，但之后的工作不属于CRP：例如 1. 不会对页面的初始渲染产生影响的js代码的运行；2. 与服务器进行的后续数据传输；3. 甚至不符合当前的媒体查询条件的CSS文件的加载（因为这些样式对当前来说是不起作用的，不符合“必需”要求）；

问题来了，凭什么说例子中的几项不在CRP中，即：如何判别某一事项不会影响页面的初次渲染成像呢？那就需要谈及浏览器的渲染流程。

2. 浏览器的渲染原理

2.1 对象模型（OM）的构建

2.1.1 文档对象模型（DOM）

虽然家喻户晓，但还是说一下吧：

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></

最低0.47元/天解锁文章

莫纷飞

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
从CRP(关键渲染路径)优化中谈浏览器渲染原理

浏览器从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程中有一些中间步骤，这些必要的步骤，就是CRP浏览器完成的步骤：处理 HTML 标记并构建 DOM 树。处理 CSS 标记并构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，以计算每个节点的几何信息。将各个节点绘制到屏幕上。
复制链接

扫一扫