javaScript系列 [35]-HTML页面渲染的基本过程

本文描述了HTML页面渲染的基本(一般)过程,需要说明的是该文并不包含关于HTML解释器、CSS解释器、JavaScript引擎等相关部分内部的具体处理细节。该文旨在简单介绍网页从加载到被我们看到过程中,由浏览器引擎处理部分(URL网络请求相关细节可以参考网络是怎么连接的)的大概框架,主要包括以下内容

① HTML页面的基本渲染过程
② WebKit的网页渲染过程(加载和渲染)

1.0 基本渲染过程

DOM和DOM操作基础浏览器、HTML和内核(引擎)这两篇文章中,已经对浏览器、浏览器内核、HTML页面以及DOM等术语有了专基本的介绍,现在先简单回顾下渲染引擎的基本渲染流程:

① 解析HTML并构造DOM树(DOM Tree)
② 构建渲染树(Render Tree)
③ 布局渲染树
④ 绘制渲染树

接下来我们开始讨论从浏览器地址栏输入URL地址敲下回车键到我们能够看到网页内容的这个过程

把用户输入的URL转换为可视化的视图,这本身就是浏览器最最主要的功能,这个过程基本上可以划分为网页的加载和显示(渲染)两个部分。所谓网页的加载,指的主要是从用户输入URL到DOM树构建完成的过程,而网页渲染的过程,主要处理根据DOM树来生成可视化视图的部分。

当我们在浏览器的地址栏里输入了指定的URL之后,浏览器会先调用网络相关模块向指定的服务器发送网络请求,服务器接收到合法的请求后把网页文件以响应的方式返回给客户端(浏览器)。

当浏览器接收到对应的网页内容后,会先把网页内容作为输入交给HTML解释器处理,HTML解释器会将网页内容最终解释为一棵DOM树(DOM Tree),这期间如果遇到JavaScript代码,则转交给JavaScript引擎处理,如果遇到CSS内容,则转交给CSS解释器处理。当DOM树构建完成的时候,渲染引擎将接收CSS解释器输出的样式信息,并作用于DOM树构建出一个新的内部绘图模型(也称为渲染树,即Render Tree)。在构建出渲染树之后,再由布局模块计算出各个元素的位置和大小等信息,最后交给绘图模块画出最终的视图。

为了更好的理解这个过程,这里给出基本的渲染过程图示,除必要过程外,图中还列出了该过程中需要依赖的主要模块,需要注意的是有的过程是单向的(单箭头)有的过程是双向的(双向箭头

2.0 WebKit的渲染过程

虽然主流内核对HTML网页的渲染过程大同小异,但不同的渲染引擎其内部的处理细节差别还是比较大的,这种差别主要体现在渲染流程专业术语等方面,考虑到WebKit内核当前的主导地位,这里专门挑出WebKit内核,并深入其内部的具体渲染细节。

我们把整个过程初步的划分为根据URL加载并解析网页构建DOM树渲染布局并绘制这两个阶段。

** ↪ ︎通过URL加载并解析网页构建DOM树阶段 **

解析网页构建DOM树具体的处理细节

① 当用户在浏览器中输入URL的时候,WebKit内核会调用资源加载器来加载指定路径对应的网页资源(发送请求-接收响应模型)。

② 资源加载器依赖网络模块和服务器端建立连接发送请求并接收响应。

③ 接收服务器返回的响应数据,是HTML/CSS/JavaScript网页和资源文件。

④ 网页内容被交给HTML解释器处理,被转变为一系列的Token

⑤ HTML解释器根据Token来构建Node节点,并最终形成一棵DOM树

⑥ 如果遇到JavaScript代码,那么交给JavaScript引擎解释并执行。

⑦ JavaScript代码执行的时候可能会影响到最终DOM树的结构。

⑧ HTML解释器在处理网页内容的时候,如果发现当前节点需要依赖于其它的资源,那么将调用资源加载器来加载这些资源(CSS/图片/音频/视频等)。如果异步加载,则和DOM树的构建工作并行执行,如果是同步加载(根据URL加载外部的JavaScript文件),则会暂停DOM树的构建,直到任务处理完毕重复这个过程。

小贴士:网页在加载和渲染的处理过程中,会触发DOM的相关事件。在DOM树构建完成后将会触发`DOMContentLoaded事件`,在DOM树构建完已经所有资源都加载完毕后将会触发`onload事件`。我们在代码中常常通过把js代码写在window.onload方法中的方式来等DOM加载完毕再执行代码,其实监听的就是DOM的onload事件,相应的在jQuery框架的使用过程中,我们把相关的js代码写在`$(function(){...})`或者$().ready(function(){//...})回调函数中,其实监听的是DOM的DOMContentLoaded事件。

** ↪ ︎渲染布局并绘制阶段**

渲染布局以及绘制阶段具体的处理细节

① CSS样式相关的部分将被CSS解释器处理为内部表示结构

② 将CSS解释器处理完后的样式信息附加在构件好的DOM树上,成为RenderObject树

③ 在RenderObject节点创建的同时,WebKit内核会根据网页的层次结构来创建RenderLayer树

④ 在RenderLayer树创建的同时,会构建一个虚拟的绘图上下文(这里不涉及具体的处理细节)。

⑤ WebKit内核处理的绘图上下文是抽象类,其将每个绘图操作都桥接到不同的具体实现类。

⑥ 绘图相关类的具体实现(不同的浏览器实现差别很大,可能涉及GPU等技术)。

⑦ 绘图实现类会将2D图形库和3D图形库绘制的结果保存并交由浏览器最终显示呈现。

需要注意的是,图示中的各个阶段对应的DOM树、RenderObject树和RenderLayer树等它们在整个过程中可能是`同时存在`的,并非RenderObject树建立后DOM树就会销毁,它们会一直并存直到整个网页销毁。另外,网页并非是渲染完成后整个过程就结束了,如果当前网页是动态的,支持动画和用户的交互行为,那么整个渲染过程其实是持续执行的。

3.0 其它说明

Gecko引擎的渲染过程

浏览器、HTML和内核(引擎)这篇文章中,我们介绍了浏览器内核相关的信息,目前主流的内核主要有:Trident(IE内核)、Gecko (Firefox内核)、Webkit (Safari内核)、Blink(Chrome内核,基于WebKit)等,这里简单贴张图补充下Gecko内核引擎的渲染过程(注:图片来源于How Browsers work)。

DOM的DOMContentLoaded和onload事件

通过浏览器内置的调试工具,我们点击network网络监听调试选项刷新当前页面可以查看当前网络请求加载的所有资源、资源的大小、类型、处理时间等信息,这里有必要单独谈一谈DOMContentLoaded事件和onload事件,下图中已经标出了触发的时间节点(所以强调是因为很多人不熟悉调试工具往往注意不到这些)。

推荐这些文章:

javaScript系列 [09]-javaScript和JSON (拓展)

本文输出JSON搜索和JSON转换相关的内容,是对前两篇文章的补充。 JSON搜索 在特定的开发场景中,如果服务器端返回的JSON数据异常复杂(可能超过上万行),那么必然就有对JSON文档进行搜索的需求。在对JSON文档进行搜索的时候,建议使用专业的JSON搜索类库和工具来实现,这可以极大的简化JSON文档搜索的工作并降低工作难度。 J...

浏览器安全:35 | 安全沙箱:页面和系统之间的隔离墙

前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录
再次声明:该目录下的文章皆是出自 极客时间 - 李兵 老师的《浏览器工作原理与实践》原文,只供本人学习所用,且并不完全保证文章的一致性,文中有些个人觉得不对的或者多余的,个人会视情况修改或删除。希望看原文或者有意见的还请移步。
 
  ...

(HTML基础系列1)网页基本结构

元素名
描述

header
标记头部区域内容

footer
标记脚部区域内容

section
Web页面中独立的一块区域

article
独立的文章内容

aside
相关文章应用或应用(常用于侧边栏)

nav
导航辅助类内容

通过使用这些标签可以清楚的划分网页结构。

...

Python入门示例系列05 使用PyCharm

 
摘要: 使用PyCharm 视频演示(1分35秒)
 
启动 PyCharm新建 Project输入项目位置注意:选定解释器新建py文件输入文件名,按回车输入代码print("hello world")运行查看结果

...

【Vue】基础系列(六)列表渲染

一、基本列表

v-for指令:
(1)用于展示列表数据
(2)语法:v-for="(item, index) in xxx" :key="yyy"
(3)遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<!-- 遍历数组 -->
<li v-for="(p,index) of persons" :ke...

Web Components系列(四) —— 认识 Shadow DOM

前言
在初涉前端之时,我就一直在好奇一个问题,为什么像:

<input/>
<select></select>
<audio></audio>
<video></video>
……

等等这些标签,看起来似乎很简单,可为什么可以展现出那么丰富复杂的布...

浏览器渲染过程?以及浏览器从输入URL到渲染完页面的整个过程?

浏览器渲染过程?

DOM 树:解析HTML构建DOM(DOM树)
CSS树:解析CSS构建CSSOM(CSS树)
渲染树: CSSOM和DOM一起生成Render Tree(渲染树)
布局 (layout) :根据Render Tree浏览器就知道网页中有哪些节点,以及各个节点与CSS的关系,从而知道每个节点的位置和几何属性(重排)
...

网页加载渲染过程

     加载过程:

DNS 解析:域名->IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求,并返回给浏览器

     渲染过程1:

根据HTML代码生成 DOM Tree
根据CSS代码生成CSSOM
将DOM Tree 和CS...

vue渲染过程

template通过compilel函数编译 再调用render函数转换成vnode 在通过渲染器把vnode转换成真实元素 最后浏览器显示
template 转换成虚拟dom 虚拟dom转换成真实元素

...

文章标题:javaScript系列 [35]-HTML页面渲染的基本过程
文章链接:https://www.dianjilingqu.com/580.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>