从开发&运维的角度来看，一般分为以下几个过程：DNS解析：将域名解析成IP地址TCP连接：TCP三次握手发送HTTP请求服务器处理请求并返回HTTP消息浏览服务器解析并呈现断开连接的页面：TCP挥手四次1.什么是URL？URL（UniformResourceLocator），统一资源定位符，用于在互联网上定位资源，俗称网址。方案：//host.domain：端口/路径/文件名？abc=123#456789scheme-定义互联网服务的类型。常见的协议有http、https、ftp、file，其中最常见的类型是http，https用于加密网络传输。host-定义域host（http默认host为www）domain-定义互联网域名，如baidu.comport-定义host上的端口号（http默认端口号为80）path-定义服务器上的路径（如果省略，文档必须位于站点的根目录中）。filename-定义文档/资源的名称query-是查询参数fragment-是#后面的hash值，一般用于定位某个位置2.DNS域名解析在浏览器中输入URL后，必须首先通过域名解析，因为浏览服务器不能直接通过域名找到对应的服务器，而是通过IP地址。IP地址IP地址是指互联网协议地址，是IPAddress的缩写。IP地址是IP协议提供的统一地址格式。它为Internet上的每个网络和每个主机分配一个逻辑地址，以屏蔽物理地址的差异。什么是域名解析DNS协议提供了通过域名查找IP地址，或者从IP地址反向查找域名的服务。DNS是一个web服务器，我们的域名解析简单来说就是在DNS上记录一条信息记录。浏览器如何通过域名查询到URL对应的IP？DNS域名解析分为递归查询和迭代查询两种方式，现在一般都是迭代查询。DNS优化与应用DNS缓存DNS有多级缓存，从与浏览器的距离排序，有以下几种：浏览器缓存、系统缓存、路由器缓存、IPS服务器缓存、根域名服务器缓存、顶级域名nameserverCache，主要名称服务器缓存。DNS负载均衡（DNS重定向）DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址。在回答DNS查询时，DNS服务器将对每个查询使用DNS文件中的主机记录。不同IP地址的IP地址依次返回不同的解析结果，引导客户端访问不同的机器，使不同的客户端访问不同的服务器，从而达到负载均衡的目的。众所周知的CDN（ContentDeliveryNetwork）就是使用了DNS重定向技术。DNS服务器会返回一个离用户最近的IP地址给用户。CDN节点的服务器负责响应用户的请求，提供所需的内容。dns-prefetchDNSPrefetch是一种DNS预解析技术。当您浏览网页时，浏览器会在加载网页时解析并缓存网页中的域名，这样当您在当前网页中点击连接时，无需进行DNS解析，减少用户等待时间，提高用户体验。OSI参考模型与TCP/IP四层模型3.TCP三次握手参考前端高级面试题详解客户端向服务器端口发送一个SYN=1，Seq=X的数据包（第一次握手，由浏览器发起，告诉服务器我要发送一个请求）服务器发回一个SYN=1，ACK=X+1，Seq=Y的响应包来传递确认信息（第二次握手，发起者服务器，告诉浏览器我准备好接受了，请尽快发送）客户端发回一个ACK=Y+1，Seq=Z的数据包，意思是“握手结束”（第三次握手由客户端发送）browser,telltheserver,Iwillimmediatelysendit,readytoacceptit)4.发送HTTP请求TCP三次握手结束后，开始发送HTTP请求报文。为避免过长，请参考http协议、缓存等相关内容：从HTTP到WEB缓存5、服务器处理请求，返回HTTP报文。每个服务器都会安装一个应用程序来处理请求——Web服务器。常见的Web服务器产品有apache、nginx、IIS、Lighttpd等。假装我是传统MVC模型，RD同学请无视六、浏览器分析与渲染页面浏览器的主要组成部分是用户界面（UserInterface）——包括地址栏、后退/前进按钮、书签目录等，也就是你看到的除了主窗口用来显示你请求的页面外，浏览器引擎（BrowserEngine）的其他部分——用来查询和操作渲染引擎的接口RenderingEngine——用来显示请求的内容，比如请求内容是html，它负责解析html和css，并显示解析结果JS解释器（JSInterpreter）——用来解释和执行JS代码UI后端（UIBackend）——用来绘制基础combo选择框、对话框等组件，具有不特定于某个平台的通用界面，底层使用操作系统的用户界面数据存储（DBPersistence）-belongs到持久层。浏览器需要在硬盘中保存类似于cookies的各种数据。HTML5定义了web数据库技术，是一种轻量级的完整的客户端存储技术1.多进程浏览器浏览器是多进程的，有一个主进程，每个标签页都会开启一个新的进程（在某些情况下，多个tabs会合并进程），进程可能包括主进程、插件进程、GPU、标签页（浏览器内核）等。浏览器进程：浏览器的主进程（负责协调和主控），有只有一个第三方插件进程：每类插件对应一个进程，只有在使用插件时才创建GPU进程：最多一个，用于3D绘图浏览器渲染进程（内核）：默认情况下，每个Tab页都有一个进程，相互独立，控制页面渲染、脚本执行、事件处理等（有时会优化，比如多个空白tab会合并到一个进程中）2.多-threaded浏览器内核每个标签页都可以查看ded作为一个浏览器内核进程，然后这个进程是多线程的，它有几种类型的子线程：GUI线程JS引擎线程事件触发线程定时器线程网络请求线程浏览器内核拿到内容后，进行渲染步骤大致可以分为以下几个步骤：1.解析HTML，构建DOM树2.解析CSS，生成CSS规则树3.合并DOM树和CSS规则生成渲染树4.布局渲染树（Layout/reflow）负责计算每个元素的大小和位置。5、绘制渲染树（paint），绘制页面的像素信息。以webkit内核为例。1.HTML解析和构建DOM的简单理解。这个：浏览器解析HTML，构建DOM树，解析HTML构建DOM，当然这个过程可以简述如下：Bytes→characters→tokens→nodes→DOM其中，几个关键步骤1.Conversion转换：浏览器将获取的HTML内容（Bytes）根据其编码转换成单个字符2.Tokenizing分词：浏览器根据HTML规范标准将这些字符转换成不同的token。每个token都有自己独特的含义和规则集3.Lexing词法分析：分词的结果就是得到一堆token，然后将它们转化为对象，分别定义它们的属性和规则4.DOM构建：因为HTML标签定义了不同标签之间的关系，这种关系就像一个树状结构。例如：body对象的父节点是html对象，那么segmentp对象的父节点就是body对象2.解析CSS，生成CSS规则树也是如此，CSS规则的生成树木也类似。字节→字符→标记→节点→CSSOM3。合并DOM树和CSS规则以生成渲染树。当DOM树和CSSOM可用时，就该开始构建渲染树了。一般来说，渲染树对应于DOM树。但是严格意义上并不是一一对应的，因为有些不可见的DOM元素是不会插入到渲染树中的，比如head或者display:none等不可见的标签。4.布局渲染树（Layout/Reflow)，负责每个元素的大小和位置的计算布局：通过渲染树中渲染对象的信息计算出每个渲染对象的位置和大小。5、绘制渲染树（Paint），绘制页面的像素信息。在绘制阶段，系统会遍历渲染树，调用渲染器的“paint”方法，将渲染器的内容显示在屏幕上。这张图的四个重要步骤1.计算CSS样式2.构建渲染树3.布局，主要是定位坐标和大小，是否换行，各种位置溢出z-index属性4.绘制，把图片画出来Layout，又名Layout作为Reflow，即回流。一般是指元素的内容、结构、位置或大小发生了变化，需要重新计算样式和渲染树Repaint，即重绘。意味着元素的变化只影响元素的一些外观（例如背景颜色、边框颜色、文本颜色等），此时你只需要应用新的样式来绘制元素即可。7.Disconnectwhen数据传输完成后，需要断开tcp连接。此时tcp发起四次挥手。发起方向被动方发送消息，Fin,Ack,Seq，表示没有数据传输。并进入FIN_WAIT_1状态。（第一次挥手：由浏览器发起，发送给服务器，我发送完请求报文，你准备关闭）被动方发送消息，Ack，Seq，表示同意关闭请求。此时主机启动器进入FIN_WAIT_2状态。（第二次挥手：由服务器发起，告诉浏览器我已经接受完请求的消息，我要关闭它，你也一样）被动发送一个消息段给发起者，Fin，Ack，Seq，和请求关闭连接。并进入LAST_ACK状态。（第三次挥手：由服务器发起，告诉浏览器我已经发送完响应消息，你去关闭它）发起方向被动方发送一个消息段，Ack，Seq。然后进入等待TIME_WAIT状态。被动方在收到发起方的报文段后关闭连接。如果发起者等待一定时间没有收到回复，就会正常关机。（第四次挥手：由浏览器发起，告诉服务器我已经收到响应消息，我要关闭它，所以你也应该这样做）
