面试的时候，我们经常被问到浏览器从在浏览器地址栏输入url到显示页面这短短几秒内做了什么？那么浏览器到底做了什么？浏览器的多进程架构一个好的程序往往被分成几个相互独立又相互协作的模块。浏览器也是如此。以Chrome为例，它由多个进程组成，每个进程都有自己的核心职责，它们相互配合完成浏览器的整体功能，而每个进程又包含多个线程，一个进程中的多个线程也会共同完成进程的职责。具体来说，Chrome的主要进程及其职责如下：浏览器进程：负责地址栏、书签栏、前进后退按钮等；负责处理浏览器一些不可见的底层操作，如网络请求、文件访问等；RendererProcess：负责一个tab中关于网页渲染的所有事情PluginProcess：负责控制一个网页中使用的所有插件，比如flashGPUProcess负责处理GPU相关的任务我们知道浏览器之外的工作Tab主要由BrowserProcess控制，BrowserProcess将这些任务进一步划分，使用不同的线程进行处理：UI线程：控制浏览器上的按钮和输入框；网络线程：处理网络请求，从互联网上获取数据；存储线程：控制对文件的访问等；当我们输入url时，浏览器开始工作，因此网络线程将执行DNS查找，然后为请求建立TCP连接。在上述过程中，浏览器查找自己的DNS缓存。如果在浏览器缓存中没有找到，则会在操作系统缓存中查找。这一步也会搜索本机的hosts，看是否有对应的域名映射。（所谓换主机原理！！！）如果系统里没有，就去你的路由器上找，因为路由器一般都有自己的DNS缓存。如果没有，则操作系统将该域名发送给本地域名服务器——递归查询方式，本地域名服务器查询自己的DNS缓存，如果查询成功则返回结果，否则采用迭代查询方式。本地域名服务器一般由您的网络接入服务器提供商提供，如中国电信、中国移动。本地域名服务器将获取到的IP地址返回给操作系统，同时自己缓存IP地址。操作系统将IP地址返回给浏览器，同时将IP地址自身缓存起来，以便下次其他用户查询时直接返回结果，加快网络访问速度。至此，浏览器获取到了域名对应的IP地址。开始建立TCP连接，执行三次握手步骤：（摘要）客户端：你好，你是服务器吗？服务器：你好，我是服务器，你是客户端吗？)发送消息，加载页面并开始呈现过程。渲染步骤大致可以分为以下几步：解析HTML，构建DOM树解析CSS，生成CSS规则树合并DOM树和CSS规则，生成渲染树布局渲染树（Layout/reflow），负责尺寸的计算以及每个元素的位置绘制渲染树（paint），绘制页面的像素信息。浏览器会将每一层的信息发送给GPU，GPU将把每一层合成（composite）并显示在屏幕上，构建DOM树。当浏览器解析html文件时，它是WebKit网络或本地磁盘中的HTML解释器，将HTML网页和资源从字节流解释为DOM树结构。具体过程如下：在WebKit中，过程是这样的：首先是字节流，解码后是字符流，然后被词法分析器解释成词（Tokens），然后通过语法分析器构造成节点，最后将这些节点组织成DOM树。在解析html文件的过程中，浏览器会“自上而下”地加载它，并在加载过程中进行解析和渲染。解析过程中，如果遇到请求外部资源，如图片、外链CSS、iconfont等，请求过程是异步的，不会影响html文档的加载，由Browser处理统一处理，这使得不同网页之间的资源共享变得容易。说明CSSCSS解释过程是指CSS字符串经过CSS解释器处理后，向渲染引擎内部规则的表示过程。生成样式规则后，会匹配样式规则，WebKit会为部分节点（仅可见节点）选择合适的样式信息。规则匹配由ElementRuleCollector类根据元素的属性等计算获取，并从DocumentRuleSets类中获取规则集，并根据它们逐一匹配得到元素的样式到选择器信息，例如ID、类别和标签。最后，WebKit对规则进行排序。对于此元素所需的样式属性，WebKit从优先级较高的规则中选择并返回样式属性值。从整个网页的加载和渲染过程来看，CSS解释和规则匹配是在DOM树建立之后，RenderObject树建立之前，会保存CSS解释器解释的结果，然后RenderObject树会根据计算结果进行规格匹配和布局。当网页有用户交互或动画等动作时，JavaScript代码也可以通过CSSDOM等技术非常方便地修改CSS代码。这时候WebKit就需要重新解释样式，重复上面的过程。回流和重绘当由于元素的大小、布局和隐藏发生变化而需要重新构建渲染树的一部分（或全部）时。这称为回流。每个页面至少需要一次回流，即页面首次加载时。在回流期间，浏览器会将受影响的渲染树部分作废，并重建这部分渲染树。回流完成后，浏览器会将受影响的部分重新绘制到屏幕上，这个过程称为重绘。当渲染树中的某些元素需要更新属性时，这些属性只影响元素的外观和样式，而不影响布局，例如background-color。这称为重绘。注意：回流一定会引起重绘，重绘不一定会引起回流。发生回流时：页面布局和几何属性发生变化时需要回流。浏览器回流发生在以下几种情况：1.添加或删除可见的DOM元素；2.元素位置变化；3、元素大小变化——margin、padding、border、width和height4、内容变化——比如文本5、页面渲染初始化；6.浏览器窗口大小改变——resize事件发生时；所以在绘制渲染树的过程中会发生多次回流和重绘。此外，避免回流和重绘也是网页优化技术之一。参考链接：图解浏览器基本工作原理-知乎https://zhuanlan.zhihu.com/p/...从打出URL到浏览器渲染完成的面试题-全栈实战-SegmentFault思不https://segmentfault.com/a/11...HTTP请求流程-域名解析与TCP三次握手建立链接-小彩仙-博客园https://www.cnblogs.com/caijh...页面重绘与Reflow和优化-WEB前端开发https://www.css88.com/archive...
