浏览器工作原理

      作为一个前端工程师，我们每天打交道最多的就是浏览器了，那么了解浏览器的基本工作原理是必不可少的、  现代web浏览器种类繁多，本文主要以谷歌浏览器为准来展开介绍。

  1.一个应用程序都是好几个甚至多个进程来构造的、对于浏览器来说也是如此。现代浏览器一般都是多进程模式、一般的应用程序其中也有单进程多线程模式的、首先来介绍一下 “进程” 、线程“”的基本概念。

        进程这个东西比较难懂、在我们的应用程序启动的时候、计算机操作系统就会启动一个进程并且为其开辟内存空间、其产生的应用数据都保存在这块空间之中。其中谷歌浏览器就是多进程的模式、每个进程来相互配合协助浏览器完成一系列的操作、而其中一个进程

        也可以有多个线程、每个线程相互配置协助当前的进程完成所在的任务、当关闭应用程序或者关闭进程其所占用的内存空间也会被释放。

 

2. 谷歌浏览器的架构模式：

         1.多进程、

          主要分为:主进程、GPU进程、渲染进程

          主进程：主要是用户界面的前进、后退。刷新、以及用户看不见的底层的操作、比如下载文件、网络请求和文件访问；

          GPU进程主要负责3D的渲染。

           渲染进程是比较重要的一个进程、下文展示详细的介绍。

 

         2.多进程和单进程多线程模式的优点和缺点。

             多进程优点为每个进程互不干涉、其中一个进程挂了、对于其他的进程，没有影响、缺点主要为每个进程有相同的数据。不能共享、占用内存。

             谷歌浏览器为了这一个缺点也作出了优化的策略： Chrome 把浏览器不同程序的功能看做服务，这些服务可以方便的分割为不同的进程或者合并为一个进程。以 Broswer Process 为例，如果 Chrome 运行在强大的硬件上，它会分割不同的服务到不同的进程，这                样 Chrome 整体的运行会更加稳定，但是如果 Chrome 运行在资源贫瘠的设备上，这些服务又会合并到同一个进程中运行。

              为了节省内存，Chrome 限制了最多的进程数，最大进程数量由设备的内存和 CPU 能力决定，当达到这一限制时，新打开的 Tab 会共用之前同一个站点的渲染进程。

   

3.当用户在浏览器输入url地址会发生什么：

• UI thread ： 控制浏览器上的按钮及输入框；
• network thread: 处理网络请求，从网上获取数据；
• storage thread: 控制文件等的访问；

                                                              1.  浏览器的UI线程会判断输入的是URL还是query。

                                                               2. 浏览器的UI线程会通知网络线程让其去拿资源、网络线程会执行DNS查询。

                                                               3.读取响应。网络线程根据响应头判断是什么类型的文件如果是HTML就会传给渲染进程、其他类型的会传给下载管理器、

                                                                4.网络线程通知ui线程数据准备好了。UI线程会通知渲染进程去渲染数据。

                                                                5.渲染结束地址栏更新渲染的内容会保存在硬盘。

                                                                 6.渲染进程接下来做的事情。

          4.渲染线程主要处理html和js : 渲染进程主要分为好几个不同的线程来配合：

                                                                                                     主要为： 处理js的js引擎线程、http请求的线程、事件处理的线程、定时器线程、渲染html网页的线程、。

                                                             

                                                                 1.构建DOM。当渲染进程接收到导航的确认信息，开始接受 HTML 数据时，主线程会解析文本字符串为 DOM。

                                                                2. 加载次级的资源、网页中常常包含诸如图片，CSS，JS 等额外的资源，这些资源需要从网络上或者 cache 中获取。主进程可以在构建 DOM 的过程中会逐一请求它们，为了加速 preload scanner 会同时运行，如果在 html 中存                                                                       在  `<img>` `<link>` 等标签，preload scanner 会把这些请求传递给 Browser process 中的 network thread 进行相关资源的下载。

                                                                3.下载js代码和执行。当遇到 `<script>` 标签时，渲染进程会停止解析 HTML，而去加载，解析和执行 JS 代码，停止解析 html 的原因在于 JS 可能会改变 DOM 的结构

                                                               4.计算样式、渲染dom不足以支撑页面的渲染、主进程基于css选择器去处理每个元素的样式、

                                                                5.获取布局构建DOM树。