How Web Browser Works

Components of Browser###

Components of Browser

1. UI interface
   用户接口，浏览器中的地址栏、前进后退、书签菜单等，除了网页显示以外的区域。
2. Browser engine
   浏览器引擎。查询与操作渲染引擎的接口。
3. Render engine
   渲染引擎，显示请求的内容，渲染引擎可以显示html、xml文档及图片，其他数据格式需要借助插件来显示。主流浏览器中，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。
4. Networking
   网络，用于网络请求，例如HTTPS请求。
5. JS Interpreter
   JS解释器，用于解析执行JavaScript代码。
6. UI Backend
   绘制基础原件，比如组合框、窗口。
7. Data Persistence
   持久层, HTML5规定了完整的浏览器中的数据库：web database.

About URL [Uniform Resource Locator]###

schema://domain[:port]/path[parameter][?query][#fragment]

1. Schema or protocol 协议, 常用的是http/https
2. Server domain name 域名或IP地址
3. Port (default: 80) 端口号
4. Path to the resource w/name & extension 路径, 网络资源在服务器中的指定路径
5. Parameter 参数, 如果要向服务器传入参数，在这部分输入
6. Query (optional) 查询字符串, 如果需要从服务器那里查询内容，在这里编辑
7. Fragment id (optional) 片段id, 网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置

Display a web Page###

1. 首先用户需要在输入URI的地址栏输入url，点击搜索，然后浏览器解析这个url，并根据这个url向服务器发送请求。

   
   Get URL

2. 当请求成功，服务器会返回显示页面所需的资源，浏览器会获取html，浏览器解析html，根据link去定位images、videos、stylesheet、javascript等资源。

   
   Browser fetches linked resources

3. 浏览器将所有的资源聚集为内部文件，并存储为内部数据结构， 而这种数据结构对每种浏览器来说可能是不一样的。然后浏览器会渲染一个可见的页面。

   
   Browser renders the document

4. 接下来浏览器会通过解析器， 将页面解析为DOM(Document object model)。

   
   Browser publishes the DOM
5. Parse HTML and create DOM tree
   解析html，并根据所有的tag的嵌套关系生成DOM tree。
   ⚠️：当浏览器发现某些html存在一些问题，如没有tag的结束标识，浏览器在解析过程中会很灵活的对这些错误进行处理，所以尽管存在一些错误，页面还是可以正常解析成DOM tree。
6. Create a render tree from DOM tree
   将所有的css 样式属性应用于DOM tree上相应的元素，将需要显示的内容生成render tree.
7. Layout the render tree
   计算元素的绝对位置，即它们在屏幕上显示的位置。
8. Painting
   将所有信息发送给UI back-end来画（显示）。
9. Displaying