前端进阶——浏览器页面渲染过程

一 、构建 DOM 和 CSSOM 树

浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。

浏览器解析过程大概经过:字节 → 字符 → 令牌 → 节点 → 对象模型。

浏览器处理html页面的方式如下图:

1、转换:浏览器从磁盘或网络读取HTML的原始字节,并根据文件指定的编码将它们转换成各个字符

2、令牌化:浏览器将字符串转换成W3C HTML5标准规定的各种令牌(节点)

3、词法分析:发出的令牌转换成定义其属性和规则的对象

4、DOM构建:根据标记之间的关系构建dom

整个流程的最终输出是这个页面的文档对象模型(DOM),浏览器对页面进行的所有进一步处理都会用到它。

与处理HTML异议,我们将收到的CSS规则转换成浏览器能理解和处理的,我们会重复和html类似的过程:

CSS字节转化成字符,接着转换成令牌和节点,最后链接成CSS对象模型(CSSOM)

 二、渲染树构建、布局及绘制

DOM和CSSOM构建完成以后,需要合成为渲染树。构建渲染树的工作大概如下:

1、从DOM树的根节点开始遍历每个可见节点

2、对于每个可见节点,为其找到适配的CSSOM规则规则并应用

3、输出可见节点,连同其内容和计算的样式

有了渲染树下一步就是布局,布局的做的主要是计算每个节点在页面上的确切位置和大小。

最后一步,我们是将渲染树的每个节点转换成屏幕上的实际像素,这一步成绘制。

三、总结

浏览器构建的步骤,大概如下:

1、处理HTML标记并构建DOM树

2、处理CSS标记并构建CSSOM树

3、将DOM与CSSOM合并成一个渲染树

4、根据渲染树来布局,以计算每个节点的集合信息

5、将各个节点绘制到屏幕

时间: 2024-10-09 18:22:32

前端进阶——浏览器页面渲染过程的相关文章

浏览器页面渲染机制及简单优化

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分: 1:渲染引擎 2:JS引擎 目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari) 页面加载过程要点如下: 1:浏览器根据DNS服务器得到域名的IP地址 2:向这个IP的机器发送HTTP请求 3:服务器收到.处理并返回HTTP请求 4:浏览器得到返回内容 浏览器渲染过程: 1:浏览器会解析三个东西: ①.HTML/SVG/XHTML,H

「前端进阶」高性能渲染十万条数据(时间分片)

前言在实际工作中,我们很少会遇到一次性需要向页面中插入大量数据的情况,但是为了丰富我们的知识体系,我们有必要了解并清楚当遇到大量数据时,如何才能在不卡主页面的情况下渲染数据,以及其中背后的原理. 对于一次性插入大量数据的情况,一般有两种做法: 时间分片虚拟列表本文作为开篇,着重来介绍如何使用时间分片的方式来渲染大量数据,虚拟列表相关的内容,日后会持续整理. 最粗暴的做法(一次性渲染)我们先来看看最粗暴的做法,一次性将大量数据插入到页面中: <ul id="container"&g

「前端进阶」高性能渲染十万条数据(虚拟列表) (自己修改版本)

前言 在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表.比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益.亏损.手数等),此时对于用户的持仓列表一般是不能分页的. 在高性能渲染十万条数据(时间分片)一文中,提到了可以使用时间分片的方式来对长列表进行渲染,但这种方式更适用于列表项的DOM结构十分简单的情况.本文会介绍使用虚拟列表的方式,来同时加载大量数据. 为什么需要使用虚拟列表 在实际的工作中,列表项必然不会仅仅只由一个li标

浏览器的渲染过程

1.输入网址https://www.jd.com/ 2.获取服务器页面,服务器页面经过编译后再由浏览器解释执行 3.浏览器先接受页面的文字信息,然后再进行由上到下解析 4.先生成DOM,优先将html里的内容以最快速度显示在网页上,此时的网页不好看,十分杂乱,并发起css.js.image请求. 5.css下载完成,开始构建cssom 6.cssom+dom=rendertree 7.再layout,计算出每个元素的位置布局再页面上. 8.再painting绘图,此时的页面已经是好看的页面了.i

从文档流角度理解浏览器页面渲染引擎对元素定位的解析

文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流. 我们在排列元素时,遵循"流式结构",即元素遵循从上向下,从左向右堆叠的规则,所以我们在排列元素时如果每行从左往右的元素的总宽度大于窗口的宽度时,就会默认换行. 有三种状况将使得元素离开文档流而存在,分别是浮动.绝对定位.固定定位. 浮动时,离开文档流后的元素,不占用文档流的空间,不会被文档流中的元素发现,离开文档流元素后面的还在文档流上元素会自动上来填补位置接上文档流.此时,离开文档流的元素如同浮在文

浏览器渲染页面的过程,以及重绘与重排

浏览器的渲染过程 1,浏览器解析html源码,然后创建一个 DOM树.在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点.DOM树的根节点就是 documentElement,对应的是html标签. 2,浏览器解析CSS代码,计算出最终的样式数据.对CSS代码中非法的语法她会直接忽略掉.解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外链样式,内联样式,html中的style. 3,构建出DOM树,并且计算出样式数据后,下一步就是构

通过浏览器渲染过程来进行前端优化

介绍 做web开发,我个人觉得必须要弄清楚浏览器的渲染过程,否则我们很难进行前端优化. 我今天就简单说一下页面加载和前端优化. 页面加载 我按照最简单的方式进行描述,实际上更复杂,不管是在浏览器端还是服务端,比如dns解析,代理服务器,负载均衡器等等. 1.用户访问网页,发送一个http请求到网络服务器. 2.网络服务器(应用服务器)解析请求,发送请求给数据库服务器. 3.数据服务器返回数据给网络服务器,网络服务器解析数据,并生成html文件内容放入http response中,返回给浏览器.

前端必备的浏览器知识(渲染过程、回流和重绘等)

常用哪几种浏览器测试?有哪些浏览器内核(Rendering Engine)? (Q1)浏览器:Chrome,IE,FireFox,Safari,Opera. (Q2)对应内核:Webkit,Trident,Gecko,Webkit,Presto.(国内的浏览器,除了傲游是直接基于Webkit开发的,其他基本都是基于谷歌在webkit上开发的Chromium,当然谷歌自己也是用的Chromium.另外值得的一提的是手机的系统(安卓.苹果)默认浏览器都是基于webkit内核的) 如何理解浏览器内核?

浏览器渲染页面的过程,以及重排和重绘(转)

前言 写得比我的文字好,有逻辑! 浏览器的渲染过程 1,浏览器解析html源码,然后创建一个 DOM树.在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点.DOM树的根节点就是 documentElement,对应的是html标签. 2,浏览器解析CSS代码,计算出最终的样式数据.对CSS代码中非法的语法她会直接忽略掉.解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外链样式,内联样式,html中的style. 3,构建出DOM树,