从url到页面展示总体来说分为以下几个过程：
- DNS解析
- TCP连接
- 服务器处理响应请求
- 浏览器解析渲染页面
DNS解析
DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。
DNS缓存有几个环节：
- 浏览器缓存：浏览器首先会查看自身是否已经有进行 DNS 缓存。Chrome 可以通过
chrome://net-internals/#dns查看缓存的 DNS，浏览器的 DNS 缓存可以加快 DNS 解析速度，但缓存时间不会太长。 - 如果浏览器没有相应的缓存，则查找系统缓存，浏览器会向系统发送一个查询请求，如果系统存在缓存或者设置了 host ，则返回相应的 ip 地址给浏览器。
- 如果系统没有缓存，那么它会发出一个 DNS 查询请求给路由器。
- 如果路由器有 DNS 缓存，他会提取出 IP 地址返回。否则，他会向本地域名服务器发出查询，从请求主机到本地域名服务器的请求一般是递归查询，而其他的查询一般是迭代查询。
TCP连接
经过DNS解析，此时浏览器得到了要访问的域名的 IP 地址。之后会通过三次握手建立连接，下图为三次握手示意图：
TCP连接
- 第一次握手时，客户端需要在发包时要告知自身的一些信息。
- 在接收到客户端发来的握手包后，服务端进行应答，双方交换一些信息。
- 服务端接受请求后，客户端还需要在发送一个握手包，自此三次握手完成，连接建立，可以开始传输数据。
服务器处理响应请求
服务器是安装了操作系统的机器，通过服务器包含的web serve来处理相关请求，常见的web server包括Apache/Nginx/lls/Lighttpd. web serve服务器接受用户请求交给网站代码，或者接受请求反向代理到其他web server。服务器响应请求，将数据返回给浏览器。数据可能是根据HTML协议组织的网页，里面包含页面的布局、文字。数据也可能是图片、脚本程序等。
浏览器解析渲染页面
客户端下载完资源后，浏览器会解析HTML成树形的数据结构DOM，生成DOM Tree，浏览器将css代码解析成树形的数据结构CSSOM，生成CSS Rule Tree。DOM Tree和CSS Rule Tree结合生成Render Tree。
有了Render Tree，浏览器知道网页中有哪些节点、各个节点的css定义以及他们的从属关系。接着就开始布局，计算出每个节点在屏幕中的位置。浏览器在知道了哪些节点要展示，并且每个节点的css属性是什么、每个节点在屏幕中的位置在哪里的时候，就会进入了最后一步，按照算出来的规则，进行展示。
其中javascript可以根据DOM API操作DOM。比如JS修改了DOM或者CSS属性，也会重新的触发布局和渲染的执行过程。
网友评论