Components of Browser###
Components of Browser
- UI interface
用户接口，浏览器中的地址栏、前进后退、书签菜单等，除了网页显示以外的区域。 - Browser engine
浏览器引擎。查询与操作渲染引擎的接口。 - Render engine
渲染引擎，显示请求的内容，渲染引擎可以显示html、xml文档及图片，其他数据格式需要借助插件来显示。主流浏览器中，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。 - Networking
网络，用于网络请求，例如HTTPS请求。 - JS Interpreter
JS解释器，用于解析执行JavaScript代码。 - UI Backend
绘制基础原件，比如组合框、窗口。 - Data Persistence
持久层, HTML5规定了完整的浏览器中的数据库：web database.
About URL [Uniform Resource Locator]###
schema://domain[:port]/path[parameter][?query][#fragment]
- Schema or protocol 协议, 常用的是http/https
- Server domain name 域名或IP地址
- Port (default: 80) 端口号
- Path to the resource w/name & extension 路径, 网络资源在服务器中的指定路径
- Parameter 参数, 如果要向服务器传入参数，在这部分输入
- Query (optional) 查询字符串, 如果需要从服务器那里查询内容，在这里编辑
- Fragment id (optional) 片段id, 网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置
Display a web Page###
-
首先用户需要在输入URI的地址栏输入url，点击搜索，然后浏览器解析这个url，并根据这个url向服务器发送请求。
Get URL -
当请求成功，服务器会返回显示页面所需的资源，浏览器会获取html，浏览器解析html，根据link去定位images、videos、stylesheet、javascript等资源。
Browser fetches linked resources -
浏览器将所有的资源聚集为内部文件，并存储为内部数据结构， 而这种数据结构对每种浏览器来说可能是不一样的。然后浏览器会渲染一个可见的页面。
Browser renders the document -
接下来浏览器会通过解析器， 将页面解析为DOM(Document object model)。
Browser publishes the DOM - Parse HTML and create DOM tree
解析html，并根据所有的tag的嵌套关系生成DOM tree。
⚠️：当浏览器发现某些html存在一些问题，如没有tag的结束标识，浏览器在解析过程中会很灵活的对这些错误进行处理，所以尽管存在一些错误，页面还是可以正常解析成DOM tree。 - Create a render tree from DOM tree
将所有的css 样式属性应用于DOM tree上相应的元素，将需要显示的内容生成render tree. - Layout the render tree
计算元素的绝对位置，即它们在屏幕上显示的位置。 - Painting
将所有信息发送给UI back-end来画（显示）。 - Displaying
