浏览器工作原理

一、浏览器的组成部分及工作原理

 

1. 浏览器主要组成部分

参考文章：https://segmentfault.com/a/1190000018277184

（1）The User Interface用户界面

为Browser Engine提供接口，地址栏、书签、前进后退按钮等等，出了document文档，其他的都属于User Interpreter

（2）The Browser Engine 浏览器引擎、

为The Rendering Engine提供接口，如刷新、向前、退后等操作，让Rendering Engine重新渲染。

也为User Interface提供各种与错误、加载进度相关的消息

（3）The Render Engine 渲染引擎、

浏览器的渲染引擎就是浏览器的内核，用来解析HTML、XHTML、svg、css等文件，进行页面的渲染的。

js引擎和浏览器内核

浏览器是如何渲染页面的？

从服务器获取HTML文件，自上而下的对html文件进行解析，同时构建dom tree。

解析的过程中，遇到link标签，从服务器加载对应的css文件，同时构建css rule tree。

当遇到script标签时，由于JavaScript会对dom进行修改，所以停止dom tree和css rule tree的构建，从服务器加载该js文件，下载完成后，浏览器开启js引擎组件，直接对该js文件进行解析执行。所以的script标签都会执行该操作。

然后继续构建dom tree和css rule tree，构建完成之后，合并为render tree，这些操作是在Rendering Engine组件中完成的。

计算标签的尺寸位置大小等等属性，浏览器进行layout布局，paint绘制页面（调用的是UI Backend组件，操作系统）

（4）The Networking 网络、

基于互联网HTTP和FTP协议，处理网络请求。

网络模块负责Internet communication and security，character set translations and MIME type resolution。

另外网络模块还提供获得到文档的缓存，以减少网络传输。

（5）The JavaScript Interpreter： js解析器

解释和运行网站上的js代码，得到的结果传输到Rendering Engine来展示。

事件循环：

https://segmentfault.com/a/1190000018134157

https://zhuanlan.zhihu.com/p/33058983

阮一峰对event loop的理解：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

js定时器机制：https://segmentfault.com/a/1190000015353521

setInterval调用有可能会被废弃：主线程的任务执行时间短时间内又定义了相同的setInterval，导致原本的setInterval还在事件队列中未执行，又被重新定义，原本的setInterval会被替代。
setInterval的连续执行：定时器的任务执行时间>定时器的时间。

可以这样理解setInterval，连续执行是因为他自己，被废弃执行是因为主线程又重新定义。

setTimeout和setInterval的执行时间都会受到宏任务的影响。

（6）The UI Backend： UI后端

一些底层操作系统的接口

（7）The Data Storage 数据储存

管理用户数据，浏览器需要在硬盘中保存类似cookie的各种数据。

还需要注意的是：搜索引擎是指：百度、搜狗、Google、雅虎。