search

zhuanghaixin / Interview

8 stars 0 forks source link

[js]从输入URL到页面展示的详细过程 #187

Open zhuanghaixin opened 3 years ago

zhuanghaixin commented 3 years ago

1.输入url

1.1 浏览器会智能的匹配可能得到的url

1.2 浏览器缓存 ,会直接把网页展示出来

2.DNS解析

2.1 本地硬盘的hosts文件 （本机的域名解析器 resolver 程序查询本地缓存和 host 文件中是否为域名的映射关系，如果有则调用这个 IP 地址映射，完成解析。） 2.2 向本地DNS服务器发起一个DNS请求 本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。 （如果 hosts 与本地解析器缓存都没有相应的网址映射关系，则本地解析器会向 TCP/IP 参数中设置的首选 DNS 服务器（我们叫它 Local DNS 服务器）发起一个递归的查询请求。） 2.3 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存如果没有，本地DNS服务器还要向DNS根服务器进行查询。（ 服务器收到查询时，如果要查询的域名由本机负责解析，则返回解析结果给客户机，完成域名解析，此解析具有权威性。如果要查询的域名，不由 Local DNS 服务器解析，但该服务器已缓存了此网址映射关系，则调用这个 IP 地址映射，完成域名解析，此解析不具有权威性。） 2.4 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。 2.5 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。

2.6 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

image

递归查询：如果主机所询问的本地域名服务器不知道被查询域名的 IP 地址，那么本地域名服务器就以 DNS 客户的身份，向其他根域名服务器继续发出查询请求报文，而不是让该主机自己进行下一步的查询。 迭代查询：当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的 IP 地址，要么告诉本地域名服务器：你下一步应当向哪一个域名服务器进行查询。然后让本地域名服务器进行后续的查询，而不是替本地域名服务器进行后续的查询。 由此可见，客户端到 Local DNS 服务器，Local DNS 与上级 DNS 服务器之间属于递归查询；DNS 服务器与根 DNS 服务器之前属于迭代查询。 实际环境中，因为采用递归模式会导致 DNS 服务器流量很大，所以现在大多数的 DNS 都是迭代模式。

建立tcp连接

zhuanghaixin commented 3 years ago

参考资料 从输入URL到页面加载发生了什么 从输入URL到页面展示的详细过程 输入 URL 到页面渲染的整个流程 HttpDns 原理是什么

zhuanghaixin commented 3 years ago
  1. DNS解析域名对应的IP地址
  2. 浏览器发送请求
  3. 服务器接收请求，返回html（可能经过压缩的）
  4. 浏览器接收，解压缩，开始页面渲染 渲染过程：
  5. 解析HTML，构建DOM树
  6. 构建View树，将css样式应用的DOM树的节点上（此时关于大小的样式还在内 存里，没有应用）
  7. 布局计算，递归遍历子节点，根据窗口的实际大小，计算每个View树节点的 大小和位置
  8. 绘制，顺序：背景色-背景图片-边框-子View树节点-轮廓