浏览器的关键渲染路径深入解析

在in面试被CTO问到的问题，谨以此翻译来表达对自己知识匮乏的鄙视。

当浏览器接收到从服务器发送过来的HTML页面信息，在将其绘画渲染到屏幕上之前会有许多的步骤要做。浏览器绘制页面需要做的这一系列行为我们称为关键渲染路径。

了解CRP的知识对于你理解如何提升网站渲染效率非常有用，CRP总共有六步：

  • 构建DOM树
  • 构建CSSOM树
  • 运行JavaScript
  • 创建渲染树
  • 生成布局

  • 绘制页面

1、构造DOM树

DOM(Document Object Model)树是一个表示全解析过的HTML页面的对象。从根节点元素开始，会逐个创建页面中的每个元素/文本节点。元素包裹的其他元素会被作为子元素节点，并且每个节点会包含其全部的属性。例如：标签会有href属性与其节点关联。 举个例子：



    

  1. <html>   
    2. 

  2. <head>   
    3. 

  3.   <title>Understanding the Critical Rendering Path</title> 
    4. 

  4.   <link rel="stylesheet" href="style.css"> 
    5. 

  5. </head>   
    6. 

  6. <body>   
    7. 

  7.   <header> 
    8. 

  8.       <h1>Understanding the Critical Rendering Path</h1> 
    9. 

  9.   </header> 
    10. 

  10.   <main> 
    11. 

  11.       <h2>Introduction</h2> 
    12. 

  12.       <p>Lorem ipsum dolor sit amet</p> 
    13. 

  13.   </main> 
    14. 

  14.   <footer> 
    15. 

  15.       <small>Copyright 2017</small> 
    16. 

  16.   </footer> 
    17. 

  17. </body>   
    18. 

  18. </html> 
    19. 



上述HTML会被解析成如下的DOM树




HTML很好的特点在于不需要全部加载完成页面所有内容才来显示网页，可以解析完成一部分内容呈现一部分。但是，其他资源比如CSS和JavaScript会阻止页面的渲染。


2、构建CSSOM树


CSSOM(CSS Object Model)是一个表示各个DOM相关样式的对象，它的表示方法与DOM相似，但是各个节点存在相关的样式值。不论其是显示、还是隐式声明这些样式。 在style.css文件中，我们有如下样式：




    

  1. body { font-size: 18px; }  
    2. 

  2. header { color: plum; }   
    3. 

  3. h1 { font-size: 28px; }  
    4. 

  4. main { color: firebrick; }   
    5. 

  5. h2 { font-size: 20px; }  
    6. 

  6. footer { display: none; } 
    7. 



接着会创建如下的CSSOM树：




CSS一直被认为是一种渲染阻塞资源。因此如果在首次加载时没有全部解析资源内容就无法进行渲染树的构建。与HTML不同，CSS具有层叠继承的特性，因此不能进行局部加载。定义在文档后面的样式属性会覆盖或更改写之前定义的同类属性。即，如果如果CSS可以进行局部加载的话会导致出现加载错样式的情况。因此表明，CSS必须全部解析之后才能进行下一步。


如果CSS文件适用于当前设备的话，仅仅只是会阻塞渲染。标签可以接受media属性来指定特定样式宽度的特定媒体查询。例如：如果我们有一个样式表具有orientation:landscape的媒体属性，并且我们查看该页面使用portrait模式，就不会出现资源加载而产生的渲染阻塞情况。


CSS要会导致脚本阻塞，这是由于JavaScript文件必须等待CSSOM构建结束之后才进行加载。


运行JavaScript


JavaScript被认为是解析阻塞资源，这表示当解析HTML文档自身时候会被JavaScript给阻塞掉。


当解析器解析到<script>标签时，无论该资源是内部还是外链的都会停止解析，并且等到资源被下载并运行结束后才继续进行解析。这也是为什么如果我们有一个引用了JavaScript文件的元素，它必须被放在可视文档元素之外的原因。


为避免JavaScript解析阻塞，它可以通过设定async属性来要求其异步加载。




    

  1. <script async src="script.js"> 
    2. 



4、创建渲染树(Render Tree)


渲染树是DOM树和CSSOM树的结合体，它代表最终会渲染在页面上的元素的结构对象。它表示只会关注可见内容，对于被隐藏或者CSS属性display:none的属性，不会被包含在结构内。


使用上面例子的DOM和CSSOM，渲染树被创建如下：




5、生成布局


布局决定了浏览器视窗大小，它提供了上下文依赖的CSS样式，如百分比或窗口的单位。视窗尺寸通常通过<head>标签中的<meta>中的viewport设定来决定。如果不存在该标签，则通常默认为980px。


例如：最常用的meta viewport值是设定视窗大小与设备宽度对应：




    

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



举个例子，如果用户使用设备访问网页，宽度为1000px。然后整体视窗尺寸就会基于这个宽度值了，比如50%就是500px,10vw就是100px。


6、绘制页面


最后，在绘制页面步骤。页面上的所有可见内容都会被转换为像素并呈现在屏幕上。


具体的绘制时间跟DOM数以及应用的样式有关。有些样式会话费更多的执行时间，比如复杂的渐变背景图片所需要的计算时间远超过简单固定背景色。


整合所有


想要看到关键渲染路径的执行流程，可以使用Chrome的DevTools：




    

  1. <html>   
    2. 

  2. <head>   
    3. 

  3.   <title>Understanding the Critical Rendering Path</title> 
    4. 

  4.   <link rel="stylesheet" href="style.css"> 
    5. 

  5. </head>   
    6. 

  6. <body>   
    7. 

  7.   <header> 
    8. 

  8.       <h1>Understanding the Critical Rendering Path</h1> 
    9. 

  9.   </header> 
    10. 

  10.   <main> 
    11. 

  11.       <h2>Introduction</h2> 
    12. 

  12.       <p>Lorem ipsum dolor sit amet</p> 
    13. 

  13.   </main> 
    14. 

  14.   <footer> 
    15. 

  15.       <small>Copyright 2017</small> 
    16. 

  16.   </footer> 
    17. 

  17.   <script src="main.js"></script> 
    18. 

  18. </body>   
    19. 

  19. </html> 
    20. 



可以看关于页面加载时的事件日志，以下是我们获得的：




    

  1. 发送请求：发送GET请求index.html
    2. 

  2. 解析HTML然后发送请求：开始解析HTML并构建DOM，然后发送GET请求style.css和main.js。
    3. 

  3. 解析样式表：根据style.css生成CSSOM
    4. 

  4. 执行计算脚本：执行main.js
    5. 

  5. 布局：基于HTML的元视窗标签，生成布局
    6. 



本文作者：佚名


来源：51CTO
				


				
时间： 2024-11-03 09:17:47

		
		


		


	

	
	

		


		
浏览器的关键渲染路径深入解析的相关文章


								

		

			

                【转】浏览器加载渲染网页过程解析--总结（三）
			

		

		

									

				1.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完) 3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载 5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以			

		

	

				

		

			

                理解浏览器关键的渲染路径
			

		

		

									

				在in面试被CTO问到的问题,谨以此翻译来表达对自己知识匮乏的鄙视 :-1: . 当浏览器接收到从服务器发送过来的HTML页面信息,在将其绘画渲染到屏幕上之前会有许多的步骤要做.浏览器绘制页面需要做的这一系列行为我们称为 关键渲染路径. 了解 CRP 的知识对于你理解如何提升网站渲染效率非常有用, CRP 总共有六步: 构建DOM树 构建CSSOM树 运行 JavaScript 创建渲染树 生成布局 绘制页面 1. 构造DOM树 DOM(Document Object Model)树是一个表示全			

		

	

				

		

			

                怎样尽可能的缩短浏览器上页面渲染的时间
			

		

		

									

				摘要: 怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸 页面头部标明文档编码 一,写 怎样尽可能的缩短浏览器上页面渲染的时间,文章从以下几方面着手: 写出高效的css代码 避免使用css表达式 把css文件放在页面顶部 指定页面图片的尺寸 页面头部标明文档编码 一,写出高效的css代码 首先弄清浏览器解析html代码的过程:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中.每当			

		

	

				

		

			

                border边框属性在浏览器中的渲染方式
			

		

		

									

				分析border边框属性在浏览器中的渲染方式首发小志博客,如果感觉内容还不错而要转载的朋友请不要怜惜 http://blog.linxz.cn/ 这么一个URL,谢谢! 针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理.其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到.在对border边框属性进行分析之前,需要说明的几点内容是: 小志我并不是一个分析专家,只是借助Firebug和IE d			

		

	

				

		

			

                win7系统IE浏览器临时文件夹详细路径打开方法
			

		

		

									

				  win7系统IE浏览器临时文件夹详细路径打开方法           Win7系统IE临时文件夹详细路径: C:Users用户名AppDataLocalMicrosoftWindowsTemporary Internet Files 以上用户名为你登录的当前帐户. 如何打开IE临时文件夹? 由于Appdata是隐藏文件夹,我们先要显示隐藏和系统文件. 然后我们就可以一个文件夹一个文件夹的打开了~ 当然更方便的方法就是复制上面的路径到文件夹地址栏,然后替换一下用户名,回车就可以了! 上述就是w			

		

	

				

		

			

                IE浏览器的默认下载路径在哪
			

		

		

									

				  IE浏览器默认下载路径是:C:Documents and Settings你的用户名Local SettingsTemp,值得注意的是 Local Settings 这个文件时隐藏的,要通过一点设置才能看见.下面见操作; 如果是要更改IE浏览器默认下载目录的话,我们可以通过修改注册表的方法实现,打开注册表依次展开:HKEY_CURRENT_USERSoftwareMicrosoftInternet Explorer键值,这时候我们就能看见在 Internet Explorer 键值下发现一个			

		

	

				

		

			

                vs2008生成路径修改-vs2008选择在浏览器中查看打开路径有问题
			

		

		

									

				问题描述 vs2008选择在浏览器中查看打开路径有问题 我在项目里选择Default选择在浏览器中查看发现打开路径是:http://localhost:1141/web/Default.aspx 发现这个地址里面多了个web,我想在项目生成路径里去掉web也就是获得http://localhost:1141/Default.aspx这个路径,不知道在vs2008里要怎么修改			

		

	

				

		

			

                return-webservices发布的项目在浏览器中得到的文件的解析&amp;amp;lt;jackson或是Xstream解析&amp;amp;gt;
			

		

		

									

				问题描述 webservices发布的项目在浏览器中得到的文件的解析<jackson或是Xstream解析> {"return": [{"@type":"ax21:Student","age":1,"id":100,"name":"张三"}, {"@type":"ax21:Student","age&quo			

		

	

				

		

			

                selenium 和 phantomJS或chrome浏览器抓取渲染网页
			

		

		

									

				首先pip安装selenium 一.phantomjs 1.下载phantomjs压缩包,解压,把bin文件夹路径加入PATH环境变量 2.代码 #coding=utf-8 import requests import re from pyquery import PyQuery as pq from lxml import etree from bs4 import BeautifulSoup import sys from selenium import webdriver reload(s