浏览器渲染过程简述

最新推荐文章于 2023-10-01 19:43:08 发布

weixin_34417200

最新推荐文章于 2023-10-01 19:43:08 发布

阅读量442

点赞数

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/u/3697586/blog/1543765

版权

2019独角兽企业重金招聘Python工程师标准>>>

一. 浏览器加载过程

自上到下逐步进行，而为了用于体验，要尽可能快的把内容呈现出来，浏览器会一边加载一边解析一边渲染呈现。并不会等到所有DOM节点都解析完了之后才会去渲染呈现。因为是从上到下，且js是为了动态操作而生，在加载过程中只需要“抢先”把静态页面的内容呈现给用户就可以了，先“缓解（欺骗）”急性子用户，且加载js会引起阻塞，所以通常把js的引入放在<body>底部最后加载。

(浏览器不仅仅只能加载HTML文件也能加载XML/PDF等文件，只需要给浏览器安装相应的引擎插件即可)。

二. 浏览器渲染过程

A. 解析html构建dom树 B. 加载CSS解析并构建CSS规则树
C. 构建render渲染树（A和B结合成C 详见文章最后几张图）
D.reflow/layout布局render渲染树(不包含<head部分>)
E.repaint绘制render渲染树

什么时候会引起reflow？

当进行DOM操作后，改变了节点的大小、面积、方向等引起DOM树的结构变化，就会reflow重新布局这个节点及周边被它所影响的节点。

什么时候会引起repaint？

当进行DOM操作后，仅仅改变了节点的颜色等不会引起DOM树结构变化的就只会repaint不会reflow。Reflow要比Repaint更加耗时，也影响性能，PC端可能感觉不出来，但是如果在移动手机端可能会表现的更明显。所以在操作DOM的过程中尽可能避免reflow现象！

display:none和visibility:hidden的区别

如果节点是display:none则不会出现在render渲染树上,而visibility:hidden会！

浏览器基础结构

浏览器基础结构主要包括如下7部分：

1.用户界面（User Interface）:用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等；
2.浏览器引擎（Browser engine）:负责控制和管理下一级的渲染引擎；
3.渲染引擎（Rendering engine）:负责解析用户请求的内容（如HTML或XML，渲染引擎会解析HTML或XML，以及相关CSS，然后返回解析后的内容）；
4.网络（Networking）:负责处理网络相关的事务，如HTTP请求等；
5.UI后端（UI backend）:负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口；
6.JavaScript解释器（JavaScript interpreter）:负责解析和执行JavaScript代码；
7.数据存储（Data storage）:负责持久存储诸如cookie和缓存等应用数据。