浏览器渲染原理

 

一 浏览器工作原理：https://blog.csdn.net/dangnian/article/details/50876241

浏览器的主要组件包括：

1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。（构建DOM树与渲染树）
4. 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5. 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6. JavaScript 解释器。用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。
7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

 

 

2 重绘与回流：（https://juejin.im/post/5a9923e9518825558251c96a）

1. 重绘 (Repaint)：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
2. 回流 (Reflow)：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

 

3 浏览器渲染内存解析：

1 电脑只能识别二进制=》编程语言（协议）=》高级语言

2 浏览器加载HTML文档：

2.1 程序是运行在电脑内存中：

分别是预处理（Prepressing）、编译（Compilation）、汇编（Assembly）和链接（Linking）

编译：主要是进行词法分析，语法分析，语义分析，中间语言生成。

 

 二 JS，CSS,HTML加载解析之间关系：

• css加载 不会阻塞DOM树解析
• css加载会阻塞DOM树渲染
• css加载会阻塞JS执行
• js执行会阻塞后续js执行、css加载、DOM树的解析和渲染
• js加载不会影响后续外部css下载

 

 

 

 

 推荐阅读：

JS加载，CSS加载关系：https://www.cnblogs.com/wenwenwei/p/10731216.html