前端面试之浏览器渲染

客官°小女子只卖身不卖艺 2023-02-20 07:44 120阅读 0赞

浏览器渲染的整个流程

![Center][]

浏览器的整个流程如上图所示。

1、  首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。

2、  然后浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。

3、  在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。

4、  JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成。

5、  DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。

6、  接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。

7、  最后浏览器根据这棵layout树，将页面渲染到屏幕上去。

资料：

[https://blog.csdn.net/cde7070/article/details/50619853][https_blog.csdn.net_cde7070_article_details_50619853]

[https://blog.csdn.net/csdnnews/article/details/95267307][https_blog.csdn.net_csdnnews_article_details_95267307]

[Center]: https://img-blog.csdn.net/20160201173825796?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[https_blog.csdn.net_cde7070_article_details_50619853]: https://blog.csdn.net/cde7070/article/details/50619853
[https_blog.csdn.net_csdnnews_article_details_95267307]: https://blog.csdn.net/csdnnews/article/details/95267307

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关前端面试之浏览器内核

目前主流浏览器内核主要有以下几种： 1. Chromium/Blink：由谷歌开发的内核，是目前最为流行的浏览器内核，包括谷歌Chrome、Microsoft Edge、Op

左手的ㄟ右手/ 2024年03月25日 22:46/ 0 赞/ 3 阅读

相关【前端】浏览器的渲染流程（完整）

本文主要包含以下内容：浏览器渲染整体流程解析 HTML 样式计算布局分层生成绘制指令分块光栅化

客官°小女子只卖身不卖艺/ 2023年09月27日 14:44/ 0 赞/ 112 阅读

相关前端面试之浏览器渲染

浏览器渲染的整个流程 ![Center][] 浏览器的整个流程如上图所示。 1、首先当用户输入一个URL的时候，浏览器就会发送一个请求，请求URL对应的资源。 2、

客官°小女子只卖身不卖艺/ 2023年02月20日 07:44/ 0 赞/ 121 阅读

相关前端4-1-5：浏览器渲染过程

浏览器渲染过程： 1.解析HTML，生成DOM树，解析CSS，生成CSSOM树 2.将DOM树和CSSOM树结合，生成渲染树（Render tree） 3.Layou

àì夳堔傛蜴生んèń/ 2022年11月15日 14:10/ 0 赞/ 161 阅读

相关 java浏览器渲染_浏览器渲染原理

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先

ゝ一世哀愁。/ 2022年10月23日 05:55/ 0 赞/ 275 阅读

相关浏览器渲染

原文链接： [http://caibaojian.com/how-browsers-work.html][http_caibaojian.com_how-browsers-wo

╰半橙微兮°/ 2022年09月25日 08:21/ 0 赞/ 204 阅读

相关浏览器渲染机制之DOM树

浏览器渲染机制的第一步是DOM树的构建，DOM树的构建过程：一般为 bytes–>characters–>tokens–>nodes–>object modal。（1

刺骨的言语ヽ痛彻心扉/ 2022年06月07日 12:17/ 0 赞/ 261 阅读

相关前端面试渲染页面类

DOM 说起 > 共 7384 字，读完需 10 分钟。本文为《破解前端面试（80% 应聘者不及格系列）》文章的第二篇，包含 DOM、Event、浏览器端优化、数据结构和

傷城~/ 2022年05月29日 12:06/ 0 赞/ 153 阅读

相关浏览器渲染原理

一、介绍 1.浏览器的内核包括两个部分，一个是渲染引擎，另一个是js引擎。渲染引擎在每个浏览器中不一定相同，例如firefox中叫做Gecko，chrome和safari的是

曾经终败给现在/ 2022年03月30日 07:24/ 0 赞/ 299 阅读

相关浏览器页面渲染机制-前端原理剖析

浏览器页面渲染机制前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上

╰半夏微凉°/ 2022年02月01日 09:53/ 0 赞/ 273 阅读