Brower (1) 前端 (3) js引擎 (1)

• 在网络如此普及的今天，浏览器作为媒介的一种是大家访问网络的手段之一。那么浏览器是如何把大家想要看到的东西返回的呢？这篇文章将从专业的角度给大家深度剖析浏览器运作的大概过程。

建立请求连接

用户在浏览器中输入网站url地址后，浏览器首先要做的是将该url转换成要请求网站服务端的IP地址。比如，你要访问华为云官网，在浏览器中输入www.huaweicloud.com，这时浏览器会请求域名服务器进行DNS域名解析，域名服务器返回华为云官网部署服务器的IP地址。域名解析的过程这里不详细赘述，概括的说就是浏览器会现在本地找有没有对应的缓存记录，如果没有再请求本地域名服务器，如果还没找到则请求根域名服务器。

找到请求的服务器IP后，浏览器就会像服务器发出http请求。请求前要先与服务器建立连接，这里就是我们通常说的三次握手。通过三次握手完成浏览器和服务端之间的链接,服务器返回请求资源，接着就是浏览器对资源进行解析的过程。

浏览器资源解析及工作原理

当前的浏览器基本上都是多进程的浏览器，每打开一个页签就会开启一个进程。

如图中所示为safari浏览器打开多页签后的进程数。那么浏览器工作过程中都会有哪些基本进程呢？

Browser进程：浏览器的主进程，主要负责进程间协调，主控，页签的创建销毁以及与用户的交互

第三方插件进程：每种插件都会对应一个进程，仅当该插件被使用时创建

GPU进程：主要用于图形绘制渲染

浏览器渲染进程：也就是我们常说的浏览器内核，接下来我们会分析再渲染和解析浏览器请求的资源时，浏览器渲染进程会做哪些事

浏览器多进程的优势：提高性能，充分利用浏览器多核优势，提升用户体验，不会出现单个页签卡死影响整个浏览器的情况。接下来我们就分析浏览器解析请求资源的重要进程：浏览器渲染进程

浏览器内核（浏览器渲染进程）

毋庸置疑，浏览器的渲染进程是多线程的。那么渲染进程中都包含哪些基本线程呢？

GUI渲染线程。负责渲染浏览器界面，解析html，css,构建DOM树。GUI渲染线程与JS引擎线程是互斥的，当JS引擎线程执行时GUI线程会被挂起，GUI会保存在执行队列中等待JS引擎线程空闲时立即被执行。这也就是我们在写页面的时候通过标签引入JS时最好放在html页面最下面的原因。JS的加载会阻塞页面的渲染。

JS引擎线程。也就是JS内核，负责处理执行JS脚本（比如当前主流的V8引擎）。浏览器的一个Browser进程中只有一JS引擎线程在处理任务队列中的任务。这也就是前端开发常说的js是单线程的。它之所以为单线程，本质原因是每个Browser进程打开的时候（比如打开新页签），在这个进程中只有一个JS引擎线程在顺序处理JS任务。

事件触发线程。比如一些事件监听，定时器线程等。这是浏览器控制的线程，不属于JS引擎中的。主要是为了提高效率浏览器开启的协助线程。虽然是浏览器另外开启的线程，但是由于JS引擎是单线程的，所以事件触发线程一旦开启也同样会被放到任务队列中，等待JS引擎任务空闲时接着处理。

异步请求线程。通过XMLHttpRequest建立连接后，浏览器新开启线程。检测到状态变更时，如果设置有回调函数，异步线程产生变更事件，将回调函数放入事件队列中。再由JS引擎执行

综上，可以看出，浏览器获取请求资源后，通过GUI渲染线程对返回的HTML页面进行解析渲染，呈现出页面框架。JS引擎线程则是执行任务脚本，从而实现交互。

先写到这吧，困了，也不知道写的清晰不，先睡觉了。。。晚安！

本文由 xiesai 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2018-09-01 00:00:00