浏览器渲染机制render

浏览器渲染机制 render

浏览器渲染机制 render

1、 浏览器主要组成

2、浏览器的渲染机制

3、 回流和重绘

4、阻塞渲染

5、前端优化

1、 浏览器主要组成

浏览器大体上由以下几个组件组成，各个浏览器可能有一点不同。

• 用户界面 – 主要包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了浏览器主窗口显示请求的页面之外，其他显示的部分都属于用户界面。

• 浏览器引擎 – 是一个可嵌入的组件，其为渲染引擎提供高级接口;可以加载一个给定的URI，并支持诸如：前进/后退/重新加载等浏览操作;提供查看浏览会话的各个方面的挂钩，例如：当前页面加载进度、JavaScript alert;允许查询/修改渲染引擎设置。

• 渲染引擎 – 负责显示请求的内容。比如请求到HTML, 它会负责解析HTML、CSS并将结果显示到窗口中。

• 网络 – 用于网络请求, 如HTTP、FTP请求。它包括平台无关的接口和各平台独立的实现。

• UI后端 – 提供绘图和窗口原语，包括：用户界面控件集合、字体集合；用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。

• JS解释器 - 用于解析、执行JavaScript代码

• 数据存储持久层 -将与浏览会话相关联的各种数据存储在硬盘上。 这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。

各个主流浏览器的JS引擎和渲染引擎

2、浏览器的渲染机制

浏览器的组成模块众多，而渲染引擎则是浏览器中最重要的模块࿰