摘录部分一:https://www.cnblogs.com/kongxy/p/4615226.html
从输入URL到浏览器显示页面发生了什么 当在浏览器地址栏输入网址，如：www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢？
这个过程可以大致分为两个部分：网络通信和页面渲染。
一、网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。
分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。
1. 在浏览器中输入url 用户输入url，例如http://www.baidu.com。其中http为协议，www.baidu.com为网络地址，及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。
2.应用层DNS解析域名 客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
3.应用层客户端发送HTTP请求 HTTP请求包括请求报头和请求主体两个部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET / POST）、目标url、遵循的协议（http / https / ftp…），返回的信息是否需要缓存，以及客户端是否发送cookie等。
4.传输层TCP传输报文 位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。 “三次握手”的过程是，发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。TCP
5.网络层IP协议查询MAC地址 IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。
6.数据到达数据链路层 在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束
7.服务器接收数据 接收端的服务器在链路层接收到数据包，再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。 8.服务器响应请求 服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。
9. 服务器返回相应文件 请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。
二、页面渲染 现代浏览器渲染页面的过程是这样的：HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。 DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像元素或display属性值为none的元素都不在渲染树中。 在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。
摘录部分二：https://www.cnblogs.com/yjf512/p/4571705.html
从头开始，当你的电脑使用网线连接到网络的时候，我们都知道，这个时候你的电脑会获取一个IP，这个IP就是你的唯一标识了。好了继续，你在浏览器中敲入了http://www.sina.com，开始你的网络之旅。那么这个时候问题来了，我们都知道你这个数据是从哪里的机器来的呢？比如sina的提供这个服务的机器也有个IP，那么你敲入的www.sina.com怎么会定位到sina提供机器的IP呢？这里就是DNS概念了。
DNS
好了，这里其实最需要的就是域名与IP的对应关系，由于世界上的服务太多了，每个服务都有需要有一个域名和ip的映射，这个量太大了。所以我们将域名按照小数点进行划分。sina.com，最后一个小数点后面的叫做顶级域名，顺次叫做二级域名，三级域名。域名服务商也不是一家，有很多家，大致也是树形结构，其中管理顶级域名的公司全世界只有13家，其中唯一的一台主服务器在美国，其他的从域名服务器分别在美国，瑞典，荷兰和日本。
.com：表示商业机构
.net：表示网络服务机构
.org：表示非营利性组织
.gov：表示政府机构
.edu：表示教育机构
我们可以使用dig +trace命令来获取每次域名请求的情况
[yejianfeng@iZ23u681ae1Z ~]$ dig www.126.com +trace
; <<>> DiG 9.8.2rc1-RedHat-9.8.2-0.23.rc1.el6_5.1 <<>> www.126.com +trace
;; global options: +cmd
. 255442 IN NS g.root-servers.net.
. 255442 IN NS f.root-servers.net.
. 255442 IN NS i.root-servers.net.
. 255442 IN NS e.root-servers.net.
. 255442 IN NS d.root-servers.net.
. 255442 IN NS m.root-servers.net.
. 255442 IN NS j.root-servers.net.
. 255442 IN NS a.root-servers.net.
. 255442 IN NS k.root-servers.net.
. 255442 IN NS l.root-servers.net.
. 255442 IN NS c.root-servers.net.
. 255442 IN NS b.root-servers.net.
. 255442 IN NS h.root-servers.net.
;; Received 496 bytes from 10.202.72.116#53(10.202.72.116) in 2 ms
com. 172800 IN NS k.gtld-servers.net.
com. 172800 IN NS b.gtld-servers.net.
com. 172800 IN NS h.gtld-servers.net.
com. 172800 IN NS f.gtld-servers.net.
com. 172800 IN NS d.gtld-servers.net.
com. 172800 IN NS g.gtld-servers.net.
com. 172800 IN NS c.gtld-servers.net.
com. 172800 IN NS m.gtld-servers.net.
com. 172800 IN NS j.gtld-servers.net.
com. 172800 IN NS a.gtld-servers.net.
com. 172800 IN NS i.gtld-servers.net.
com. 172800 IN NS e.gtld-servers.net.
com. 172800 IN NS l.gtld-servers.net.
;; Received 501 bytes from 192.5.5.241#53(192.5.5.241) in 33 ms
126.com. 172800 IN NS ns2.nease.net.
126.com. 172800 IN NS ns3.nease.net.
126.com. 172800 IN NS ns4.nease.net.
126.com. 172800 IN NS ns5.nease.net.
126.com. 172800 IN NS ns6.nease.net.
126.com. 172800 IN NS ns7.nease.net.
126.com. 172800 IN NS ns1.nease.net.
126.com. 172800 IN NS ns8.nease.net.
;; Received 342 bytes from 192.41.162.30#53(192.41.162.30) in 275 ms
www.126.com. 18000 IN CNAME mcache.mail.163.com.
mcache.mail.163.com. 18000 IN CNAME email.163.com.lxdns.com.
;; Received 93 bytes from 61.135.255.140#53(61.135.255.140) in 29 ms上面就是说我们请求了5次才寻找出准确的提供服务的机器。
那么问题来了，这13台根域名服务器如果挂了，怎么办？比如2014年1月21日出现过顶级域名服务出错的情况，导致了域名服务器错误的情况。那么这种情况，只能说是世界崩溃了。你百度不了，google不了，网络就请求不了了。一出这种问题，很多流传的方法都是直接绑定DNS服务器到8.8.8.8，这个是google的服务器。
再说一个DNS的案例，13个顶级的域名服务商在解析了顶级域名之后，会把其他对应的域名解析防盗
好了，这里有个优化的点了，我一般浏览网站的时候都是连续请求一个网站的几个页面，每次都去域名服务商那边查询这个域名的服务IP，这本身就是脑残的事情。对于这种脑残的事情，程序员肯定是不会做的，所以在本机和浏览器保存域名和IP的查询。好了，现在所有浏览器一起讨论的方法就是请求先去浏览器DNS缓存中查找，比如chrome中可以使用
chrome://net-internals/#dns进行缓存查询。
然后是本机的DNS缓存，本地的DNS缓存在windows可以通过ipconfig /displaydns进行查找。本地还有一个可以让人工干预DNS解析的地方，就是hosts文件，有个很好用的工具SwitchHosts可以来进行hosts文件设置。
路由
好了，知道了对方提供服务的机器地址了，但是不幸的事情发生了，它是在上海的，我是在北京的，我们两个之间并没有直接的电线进行连接。那么怎么办呢？程序员也想到了一个办法，驿站。在互联网中间建立很多站点，这些站点提供的一种服务叫转接服务。比如我想要连接到www.126.com所在的服务器怎么办呢？我可能要中间跳转10-20次才能到达它的服务器。第一次调转到北京燕郊，第二次跳转到河北，...使用traceroute就可以查看你到达一个ip中间跳转了几次。
那么是谁那么好心建立这些驿站呢？就是运营商。中国现在有6大运营商：中国移动，中国联通，中国电信，中国网通，中国铁通和中国卫通。然后长城宽带据说厚劲勃发，要做第七大运营商。当然这个网络肯定不是让大家免费用的，这里大家就知道了，我们平时交的网费是花在哪里了。
好了，运营商的厉害之处就知道了吧，如果有运营商使坏，你本来从北京传递消息“我爱你”给上海的一台机器，但是运营商路由传递的过程中把这个信息改成了“分手吧”。好了，这下你哭都没法子了。这个就叫做运营商劫持。现在有的运营商劫持不会很暴露，但是加个广告，加个js还是很有可能的。
TCP握手
好了，我们现在找到了提供服务的机器了，我们想要从这个机器上获得一个页面。机器的行为和人的行为很像。对于人来说，A要和B握手，A先伸出手，B也伸出手回应，你好，我是B，然后A再回应，你好，我是A。这样一个握手认识的环节就完成了。
在互联网中，也是这样的一个三次握手的顺序。A要和B服务进行交互，要经过三次握手的环节。A发送一个请求给B，B回应了一个请求，然后A再发送一个确认请求给B。这样两个人的信任关系就搭建完成了。
好了，这里插入说一种攻击方式。如果我现在有很多小弟，然后我让这些小弟都轮番和你进行第一次握手，就是那次伸手环节。但是等你伸手之后，我不对你进行回应，你就会傻傻在那边等待我的回应。这种攻击就叫做SYN FLOOD攻击。
搭建完成之后两边就进行了数据交互。这里数据交互的部分我们等会再说。数据交互完之后，这里就有一个结束交互的环节了。
再想想恋人是如何如何分手呢？两个恋人决定要分开了，A和B说，我已经不爱你了，B和A说，好，我也已经不爱你了。然后由于A和B都已经确定我们互相不爱了，B就干脆的说，我们分手吧，A也非常干脆地说，分手吧。然后两人就分手了。
这个过程术语叫做四次挥手环节。A和B是双工的，双工的意思就是A和B都有接收信道和发送信道。A发送结束信号给B，并且把自己的发送信道设置为待关闭状态，B收到A的结束信号之后，先发送一个信号给A，我也可以结束了，并且自己关闭了发送信道。然后再发送一个信号给A，告诉A我最后接收到你的确认之后就把接收信道关闭了。A收到这个确认信号之后，最后发送了一个信号，关闭吧，然后把自己的接收信号给关闭了，也把自己的发送信号给彻底关闭了。B收到这个信号之后，就最后把自己的发送和接收信道就关闭了。
交互消息内容
好了，现在回到双方交互的时候，进行数据传递。首先，A要的其实不是数据，而是一个有图片，有字体的页面，B能给的是一个数据。这里就有一个问题了，如何使用数据来描述一个页面呢？这里就需要有一个描述页面的语言。就叫做HTML。
如果给你一个页面，让你描述它。你一定会这么描述，整个页面分为上下两个部分，上面部分10厘米，下面部分100厘米，上面的部分底色为蓝色，又分为几个标题。我要说，你真聪明。实际上我们的页面切图也就是这么切图的。不过我们的语言不是这样平白的语言，而是用HTML语言。
<div style="heigh:10px" >
<div style="width:10px;float:left" ></div>
<div style="width:10px;float:left" ></div>
<div style="width:10px;float:left" ></div>
</div>
<div style="heigh:100px"></div>这HTML语言是1982年之后就创建的。在逐步发展演变过程中成为了国际的标准，现在所有的浏览器都支持这个语言。HTML现在由一个国际组织万维网联盟（W3C）来进行维护。
HTML现在的发展历程已经到了HTML5。HTML1.0, HTML2.0, HTML3.0,HTML4.0,也都是有的，现在最新的是HTML5，2014年10月完成标准制定。在这个之前，HTML5的草案其实已经发布很久了，但是各个浏览器对于它的支持也都不一致，等到5.0正式发布之后，现在浏览器对于HTML5的支持已经很强大了。
好了，一般来说，客户端获取到了HTML，这个过程就完成了。但是现在角度换到服务端。如果像新闻一样，所有人看到的东西都一样，那么就很简单了，我把一个HTML文件放在服务器端，你过来拿就行了。但是偏偏现在同样一个新闻，不同的人看到的东西是不同的。这两种情况就叫做“静态页面”和“动态页面”。动态页面需要完成一定的业务逻辑才能返回一个HTML页面。那么这个时候服务端就需要写一些逻辑，于是就有了写这些逻辑的语言了。现在我们大多数使用的语言有PHP，JAVA，PYTHON等。各种语言有各种语言的优势，但是总的目的就是为了生成动态页面。
AJAX
好了，我们换回浏览器角度，我们获取到HTML之后，然后根据HTML的语意，进行渲染，描绘出我们需要的页面样式。
但是，这种页面是“死”的。意思是什么。这种页面我想要在文本中输入一个字，然后文本提示我，还可以输入几个字。这个功能就需要页面有一个功能“如果用户输入了一个字，计算距离20个字还有多少字，修改提示文本”。这个逻辑就需要脚本语言来做，这个就是JavaScript。最早javascript是由一家国外公司netscape进行设计的，后来逐步成为了一种国际标准。现在所有的浏览器都支持javascript语言了。
实际使用中，我们常常会碰到一种需求，我们希望我点击一个按钮，这个按钮不要跳转到另外一个页面，而是直接在这个页面内和服务端做操作，做完操作之后，修改当前页面的一个元素或者内容。这样我们的执行效率就会提高了。这种逻辑，我们专门给它一个名词“AJAX”，由javascript对服务器端发起一个网络请求，比如请求修改用户名称，然后服务器返回说修改成功了，然后客户端就进行页面元素的修改。
补充部分 一：
DNS
域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53[1]。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。
开始时，域名的字符仅限于ASCII字符的一个子集。2008年，ICANN通过一项决议，允许使用其它语言作为互联网顶级域名的字符。使用基于Punycode码的IDNA系统，可以将Unicode字符串映射为有效的DNS字符集。因此,诸如“x.中国”、“x.台湾”等这样的域名可以在地址栏直接输入，而不需要安装插件。但是，由于英语的广泛使用，使用其他语言字符作为域名会产生多种问题，例如难以输入，难以在国际推广等。
技术实现[编辑]
概述[编辑]
DNS通过允许一个名称服务器把他的一部分名称服务（众所周知的zone）“委托”给子服务器而实现了一种层次结构的名称空间。此外，DNS还提供了一些额外的信息，例如系统别名、联系信息以及哪一个主机正在充当系统组或域的邮件枢纽。
任何一个使用IP的计算机网络可以使用DNS来实现他自己的私有名称系统。尽管如此，当提到在公共的Internet DNS系统上实现的域名时，术语“域名”是最常使用的。
这是基于504个全球范围的“根域名服务器”（分成13组，分别编号为A至M）[2]。从这504个根服务器开始，余下的Internet DNS命名空间被委托给其他的DNS服务器，这些服务器提供DNS名称空间中的特定部分。
域名解析[编辑]
举一个例子，zh.wikipedia.org作为一个域名就和IP地址208.80.154.225相对应。DNS就像是一个自动的电话号码簿，我们可以直接拨打wikipedia的名字来代替电话号码（IP地址）。DNS在我们直接调用网站的名字以后就会将像zh.wikipedia.org一样便于人类使用的名字转化成像208.80.154.225一样便于机器识别的IP地址。
DNS查询有两种方式：递归和迭代。DNS客户端设置使用的DNS服务器一般都是递归服务器，它负责全权处理客户端的DNS查询请求，直到返回最终结果。而DNS服务器之间一般采用迭代查询方式。
以查询zh.wikipedia.org为例：
客户端发送查询报文"query zh.wikipedia.org"至DNS服务器，DNS服务器首先检查自身缓存，如果存在记录则直接返回结果。
如果记录老化或不存在，则
- DNS服务器向根域名服务器发送查询报文"query zh.wikipedia.org"，根域名服务器返回.org域的权威域名服务器地址，这一级首先会返回的是顶级域名的权威域名服务器。
DNS服务器向.org域的权威域名服务器发送查询报文"query zh.wikipedia.org"，得到.wikipedia.org域的权威域名服务器地址。
DNS服务器向.wikipedia.org域的权威域名服务器发送查询报文"query zh.wikipedia.org"，得到主机zh的A记录，存入自身缓存并返回给客户端。
![[总结] I/O输入，输出](https://www.kunjuke.com/file/css/thumb/11.jpg/280-180.jpg)
