说说页面渲染的过程

浏览器在收到 HTML, CSS, JS 文件后,它是如何把页面呈现到屏幕上的?

下图对应的就是WebKit渲染的过程。

说说页面渲染的过程_第1张图片

浏览器是一个边解析边渲染的过程:

DOM > CSSOM > 渲染树 > 布局 > 绘制

① 浏览器解析HTML文件构建DOM树,然后解析CSS文件构建CSS规则树

② DOM树和CSS规则树解析完成后,合成渲染树(Render Tree)

③ 等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上(重排和重绘)

HTML:理解成一个框架模型,经历:字节>字符>Token>节点>DOM

  • HTML解释器:解释HTML语言的解释器,本质是将HTML文本解释成DOM树(文档对象模型)。

CSS:理解成装修,经历:link标签>字节>字符>Token>节点>CSSOM

  • CSS解释器:解释样式表的解释器,其作用是将DOM中的各个元素对象加上样式信息,从而为计算最后结果的布局提供依据。

渲染树:任务是匹配DOM和CSSOM的节点,并且捕获可见内容

布局:意思就是获取渲染树的结果、节点位置和大小,是依据盒子模型来进行的

  • 布局:将DOM和CSS样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型即渲染树。
  • JavaScript引擎:JavaScript可以修改网页的内容,也能修改CSS的信息,JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去,从而改变渲染的结果。

绘制:把渲染树以像素的形式绘制在页面上

CSSOM不能部分解析,DOM可以部分解析

总结:

浏览器发送请求以后,服务器或者本地返回给浏览器HTML文件,这个时候第一步就是解析HTML文件,并且构建DOM树

在解析HTML文件的时候遇到了link标签,浏览器就去请求CSS文件,请求CSS文件的同时也继续解析HTML文件。

此时遇到了script标签,浏览器就去请求JS文件,服务器或者本地就会陆续返回CSS和JS文件,实际操作中会先得到CSS还是JS是要看具体情况的。

如果先返回并且解析完成JS文件也是会发生阻塞,我们不能先执行JS文件,必须等到CSSOM构建完成了才能执行JS文件。(因为渲染树是需要DOM和CSSOM构建完成了才能构建,而且JS是可以操作CSS样式的)所以这一步是解析CSS文件构建并且CSSOM

JS是会阻塞HTML解析的,因为JS既可以操作DOM,又可以操作CSSOM,如果不等JS下载解析执行完再构建DOM,那有可能导致网页的有些内容出现了又消失。如果JS设置了async,也就是异步执行,那就不会阻塞HTML解析。

JS执行完成之后,就正常了,构建DOM树以及构建渲染树。然后进行布局和绘制。

说说页面渲染的过程_第2张图片

 说说页面渲染的过程_第3张图片

注意:

浏览器在解析过程中,如果遇到请求外部资源时,如图像,iconfont,JS等。请求过程是异步的,并不会影响HTML文档进行加载。但是当文档加载过程中遇到JS文件,HTML文档会挂起渲染过程,不仅要等到文档中JS文件加载完毕还要等待解析执行完毕,才会继续HTML的渲染过程

html文档渲染过程,css文件和js文件的下载,是否会阻塞渲染?- 题目详情 - 前端面试题宝典

html和css中的图片加载与渲染规则是什么样的?- 题目详情 - 前端面试题宝典

原因是因为JS有可能修改DOM结构,这就意味着JS执行完成前,后续所有资源的下载是没有必要的,这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载,但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

绘制这个过程比较复杂,涉及到两个概念: reflow(重排)repain(重绘)

说说你对重绘和重排的理解,以及如何优化?_小草莓蹦蹦跳的博客-CSDN博客

简述 html 页面渲染过程- 题目详情 - 前端面试题宝典

你可能感兴趣的:(每日专栏,JavaScript,javascript,前端,html)