HTML渲染过程详解

由于本人对http协议以及dns对url的解析问题并不了解,所以这里之探讨url请求加载到浏览器端时,浏览器对html的解析到呈现过程,后来经过几位道友分享,整理了一下url解析的过程,如下:

用户输入url地址,浏览器根据域名寻找IP地址
浏览器向服务器发送http请求,如果服务器段返回以301之类的重定向,浏览器根据相应头中的location再次发送请求
服务器端接受请求,处理请求生成html代码,返回给浏览器,这时的html页面代码可能是经过压缩的
浏览器接收服务器响应结果,如果有压缩则首先进行解压处理,紧接着就是页面解析渲染
解析渲染该过程主要分为以下步骤:

  1. 解析HTML
  2. 构建DOM树
  3. DOM树与CSS样式进行附着构造呈现树
  4. 布局
  5. 绘制

解析与构建DOM树
前两步我们放在一起讨论,浏览器的实际工作也是将他们放在一起进行的。对于HTML浏览器有专门的html解析器来解析HTML,并在解析的过程中构建DOM树。在这里我们讨论两种DOM元素的解析,即样式(link、style)与脚本文件(script)。由于浏览器采用自上而下的方式解析,在遇到这两种元素时都会阻塞浏览器的解析,直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的先后顺序同样也会影响到浏览器的解析过程,究其原因主要在于:script脚本执行过程中可能会修改html界面(如document.write函数);DOM节点的CSS样式会影响js的执行结果。在我的测试中得到以下四条结论:
1)外部样式会阻塞后续脚本执行,直到外部样式加载并解析完毕。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title><script>var start = +new Date;</script><link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"></head><body><span id="result"></span><script>var end = +new Date;document.getElementById('result').innerHTML = (end-start);</script>
</body>
</html>

在这里插入图片描述
2)外部样式不会阻塞后续外部脚本的加载,但会阻塞外部脚本的执行。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title><script>var start = +new Date;</script><link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"></head><body>test<script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script><div id="result"></div><script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script></body>
</html>主页代码
var loadTime = document.createElement('div');
loadTime.innerText = document.currentScript.src + ' executed @ ' + window.performance.now();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);

从瀑布图中我们可以看到,外部脚本与外部样式是并行加载,但直到外部样式加载完毕,外部脚本才开始执行
 在这里插入图片描述
3)如果后续外部脚本含有async属性(IE下为defer),则外部样式不会阻塞该脚本的加载与执行

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title><script>var start = +new Date;</script><link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"></head><body>test<script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script><div id="result"></div><script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script></body>
</html>

从瀑布图中可以看到外部脚本的加载与执行并不受link的阻塞
在这里插入图片描述
4)对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行,不管script标签是否具有async属性,但对于其他非动态创建的script,以上三条结论仍适用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title><script>var start = +new Date;</script></head><body>test<script> var link = document.createElement('link');link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";link.rel = "stylesheet";document.head.appendChild(link);var script = document.createElement('script');script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";document.head.appendChild(script);</script><div id="result"></div><script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script></body>
</html>

这是最终页面结构
 在这里插入图片描述
通过瀑布图与页面结果可以看到动态创建的外部脚本并未受link的阻塞。
  在这里插入图片描述
link或style标签都会被解析成DOM节点。浏览器对于样式表还会生成CSSStyleSheet对象(C++代码),他集成子CSSStyle,指标是样式表对象而不管该对象来自于Style还是link。该对象主要包含以下几个重要属性和方法

CSSRules 即css样式代码
type 表示样式表类型的字符串。对CSS样式表而言,这个字符串是“type/css”。
href 通过link生成的为样式链接,否则为undefined
insertRule(rule,index):向cssRules集合中指定的位置插入rule字符串。IE不支持这个方法,但支持一个类似的addRule()方法。
deleteRule(index):删除cssRules集合中指定的位置的规则。IE不支持这个方法,但支持一个类似的removeRule()方法。
文档中对于所有的样式表集合可以通过document.styleSheets来访问。同时对于style或link DOM元素可以通过element.sheet来访问CSSStyleSheet对象,IE中则通过element.styleSheet来访问。

html解析完毕,DOM树创建完成后DOMContentLoaded事件即触发,这时候可以用过script来操作DOM节点。
构建呈现树  
HTML解析完毕后,开始构建呈现树RenderTree,这一步的主要工作在于将css样式应用到DOM节点上,WebKit内核将这一过程称为附着,其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。

首先将根据样式重要性排序,由低到高依次为:

  1. 浏览器声明
  2. 用户普通声明
  3. 作者普通声明
  4. 作者重要声明
  5. 用户重要声明

对于同一重要级别,则是根据CSS选择符的特指度来判定优先级;一条样式声明的特指度由以下四个部分决定:S-I-C-E

  • 声明来自内联的style属性则 S+1;
  • 声明中含有id属性则 I+1;
  • 声明中含有类、伪类、属性选择器则 C+1;
  • 生命中含有元素、伪元素选择器则 E+1;

特指度的比较类似于两个字符串之间比较大小。

呈现树的每一个节点即为与其相对应的DOM节点的CSS框,框的类型与DOM节点的display属性有关,block元素生成block框,inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点,但DOM节点不一定有与之相对应的呈现树节点,比如display属性为none的DOM节点,而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同,比如float与绝对定位元素。

下图为呈现树与其相对应的DOM树节点
  在这里插入图片描述
布局

呈现树构造完成后浏览器便进行布局处理,及计算每个呈现树节点的大小和位置信息。有道友可能要问,前面已将样式附着到DOM节点上,不是已经有了样式信息为何还要计算大小。这里可以这样理解,以上包含大小的样式信息只是存在内存里,并没有实际使用,浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置,比如对于margin为auto的处理。

布局是一个递归过程,从跟呈现节点开始,递归遍历子节点,计算集合几何信息。具体过程还是比较复杂偶也不甚了解,道友们还是查阅其他资料吧。

绘制

布局完成后,便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说,主要绘制顺序如下:

  1. 背景颜色
  2. 背景图片
  3. 边框
  4. 子呈现树节点
  5. 轮廓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

grid布局

CSS Grid 布局CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同&#xff0c;CSS Grid 布局是一个二维布局系统&#xff0c;也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素&#xff08;成为 Grid Items 网格项…

vue之router-view组件的使用

开发的时候有时候会遇到一种情况&#xff0c;比如 &#xff1a;点击这个链接跳转到其他组件的情况&#xff0c;通常会跳转到新的页面&#xff0c;蛋是&#xff0c;我们不想跳转到新页面&#xff0c;只在当前页面切换着显示&#xff0c;那么就要涉及到路由的嵌套了&#xff0c;也…

go 学习Printf

package main import "fmt" import "os" type point struct {x, y int } func main() { //Go 为常规 Go 值的格式化设计提供了多种打印方式。例如&#xff0c;这里打印了 point 结构体的一个实例。p : point{1, 2}fmt.Printf("%v\n", p) // {1 2…

博客园使用latex编辑公式

如何开启数学公式编辑功能 开启方法见下链接https://www.cnblogs.com/cmt/p/3279312.html 功能 支持数学公式块支持文中数学公式DEMO $$ f(n) \begin{cases}\frac{n}{2}, & \text{if $n$ is even} \\3n1, & \text{if $n$ is odd}\end{cases} $$ 以上的代码产生如下的公…

console.dir有很多浏览器,系统的兼容性问题,不要随便用!

console.dir有很多浏览器&#xff0c;系统的兼容性问题&#xff0c;不要随便用&#xff01; 要使用console.log();转载于:https://www.cnblogs.com/bluestear/p/9400356.html

go 区分指针

先看一段代码 先放一段代码&#xff0c;人工运行一下&#xff0c;看看自己能做对几题&#xff1f; package mainimport "fmt"func main() {var a int 1 var b *int &a var c **int &b var x int *b fmt.Println("a ",a) fmt.Println("&a…

ajax和axios、fetch的区别

1.jQuery ajax $.ajax({type: POST,url: url,data: data,dataType: dataType,success: function () {},error: function () {} });传统 Ajax 指的是 XMLHttpRequest&#xff08;XHR&#xff09;&#xff0c; 最早出现的发送后端请求技术&#xff0c;隶属于原始js中&#xff0c…

函数函数sigaction、signal

函数函数sigaction 1. 函数sigaction原型&#xff1a; int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析&#xff1a; 参数 signum &#xff1a;要捕获的信号。参数act&#xff1a;truct sigaction 结构体&#xff0c;后面具体讲解传入…

使用SQL Server连接xml接口,读取并解析数据

--数据源格式&#xff0c;放到任意程序中部署接口即可--<Data xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd"http://www.w3.org/2001/XMLSchema"> --<Peoples> --<People> --<Name>张三</Name> --<S…

mac 卸载编辑器卸不干净

Configuration~/Library/Preferences/Caches~/Library/Caches/Plugins~/Library/Application Support/Logs~/Library/Logs/转载于:https://www.cnblogs.com/smzd/p/10114540.html

vue中使用axios最详细教程

前提条件&#xff1a;vue-cli 项目 安装&#xff1a; npm npm 在main.js导入&#xff1a; // 引入axios&#xff0c;并加到原型链中 import axios from axios; Vue.prototype.$axios axios; import QS from qs Vue.prototype.qs QS;封装好的axios,拿走不送&#xff1a;&am…

Java 类型转换String,List,Map,Array

1. JsonString转为Map String jsoNStr "{\n" "\t\"TestArray\": [\"1\", \"2\", \"3\"]\n" "}";Map map JSON.parseObject(jsoNStr,Map.class);2.Object转为JsonArray(得保证obj是个Array数组&#x…

关于固件

固件(Firmware)就是写入EROM或EPROM(可编程只读存储器)中的程序&#xff0c;通俗的理解就是“固化的软件”&#xff0c;台港澳称为“韧体”。更简单的说&#xff0c;固件就是BIOS的软件&#xff0c;但又与普通软件完全不同&#xff0c;它是固化在集成电路内部的程序代码&#x…

React-Native 指定模拟器RUN-IOS

react-native run-ios --simulator "iPhone 7” 转载于:https://www.cnblogs.com/smzd/p/10185263.html

vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目&#xff0c;我准备把项目放在e盘下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行进入这个目录&#xff1a; 创…

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

goland 实用键

代码补全 option command v转载于:https://www.cnblogs.com/smzd/p/10313417.html

关于Mysql java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)的问题...

问题所在&#xff1a; 1.连接数据库一个是密码是否正确&#xff0c; 2.driver是否对&#xff0c; 3.有么有jar包冲突&#xff0c;转载于:https://www.cnblogs.com/java-123/p/9403412.html

vscode配置vue环境

一、安装VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打开VSCode&#xff0c;安装常用插件 如图所示&#xff08;安装后重新加载即可&#xff09;: 三、项目中添加.vscode文件夹&#xff0c;文件夹中添…

秒杀核心设计(减库存部分)-防超卖与高并发

商品详情页面的静态化&#xff0c;varnish加速&#xff0c;秒杀商品库独立部署服务器这种就略过不讲了。只讨论库存部分的优化 mysql配置层面的优化可以参考我的这篇文章 《关于mysql innodb引擎性能优化的一点心得》 重点设计在数据库层面。 2张表&#xff1a; 第一张&#xf…