弄清楚浏览器的工作原理,我们才能用写出更加高效的前端代码。
主流的浏览器主要包括:Firefox、Chrome、Safari、Edge、IE等,这些浏览器基于WebKit,Gecko两种内核。(各种主流浏览器内核介绍)
WebKit包含两个主要部分WebCore渲染引擎(或排版引擎)和JSCore引擎(用于解析JavaScript)。
浏览器整体框架组成
一般浏览器主要包括7个组件:
1 用户界面 (User Interface)
用户之间接触的部分,通常包括地址栏、后退/前进按钮、菜单栏等。
2 浏览器引擎 (Browser Engine)
渲染引擎的查询与操作接口
3 渲染引擎 (Rendering Engine)
显示请求的内容,即页面
4 网络层 (Networking)
网络调用,例如HTTP请求,基于具体操作系统平台
5 UI后端 (UI Backend)
用于绘制图形化组件,利用操作系统的用户接口
6 JavaScript解析器 (JavaScript Interpret)
解析并执行JavaScript代码
7 数据存储(Data Storage)
数据持久层,浏览器需要将数据存储在磁盘,例如cookies
注 Chorme浏览器不像其他浏览器,每个标签有一个渲染引擎对象进行渲染,分开处理。
Rendering Engine
渲染引擎,可以显示HTML、XML文件和图像,也可以通过插件的方式显示其他类型的文化。例如,使用PDF插件显示PDF文件。
渲染引擎的基本流程
渲染引擎解析每个HTML文件,将HTML文件中的标签转换为DOM树中的节点,构建DOM树。
然后,解析扩展的CSS文件和内嵌的style元素,计算每个DOM节点的视觉信息,并构建Render树。
Render树生成完后,需要计算每个Render树节点的布局,位置信息,最后通过UI Backend绘制RenderTree,完成页面显示。
主要的流程示例
参考:
1 http://taligarsiel.com/Projects/howbrowserswork1.htm#Resources