【注】本文是在阅读了部分资料之后,整理出来的。资料会在本文最后标明。
想要知道网页是怎么渲染出来的,就要先知道浏览器的结构是什么样子的,每个组成部分都有什么作用,干了哪些事情,为什么这样做。
浏览器结构如下图:
用户界面(User Interface):除了显示请求页面用的浏览器主窗口外,其他部分都属于用户界面,包括地址栏、前进/后退按钮、书签菜单等。
浏览器引擎(Browser engine):查询和操作渲染引擎的接口。
渲染引擎(Rendering engine):负责显示请求的内容。它负责取得网页的内容(HTML、XML、图象等等)、整理信息(例如加入CSS等),以及计算网页的显示方式,并显示在屏幕上。
网络(Networking):网络调用,例如HTTP请求。
JavaScript解释器(JavaScriptInterpreter):JavaScript引擎,专门处理JavaScript脚本。
用户界面后端(UI Backend):绘制基本的窗口小部件,比如组合框和窗口。
数据存储(Data Persistence):数据持久层。浏览器在硬盘上存储数据,比如cookie。HTML5定义了网络数据库。
【参考资料】
http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
http://taligarsiel.com/Projects/howbrowserswork1.htm