码迷,mamicode.com
首页 > Web开发 > 详细

浏览器从输入url到页面呈现发生了什么?

时间:2017-06-05 23:53:26      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:书籍   成功   chrome浏览器   需要   网络   没有   tcp   text   窗口   

当浏览器地址栏中输入www.baidu.com到页面呈现的具体过程:

1.域名解析(DNS解析)(网络层)

先从缓存中找域名对应的ip地址,没有再向域名服务器发送请求。

-->浏览器的DNS缓存(以Chrome浏览器为例查看dns缓存,在地址栏中输入chrome://net-internals/#dns 查看浏览器内的dns缓存。)

-->操作系统的DNS缓存(window系统调出cmd窗口,在窗口处输入命令ipconfig /displaydns 来进行查看系统内的dns缓存.)

-->操作系统的hosts文件(C:\Windows\System32\drivers\etc\hosts)

-->操作系统向LDNS(本地域名服务器)发送请求(80%成功率)

-->没有找到则迭代DNS域名解析(域名是从右往左分级的)

  • LDNS向根域名服务器发起请求,请求到.com顶级域名服务器的地址
  • LDNS(.com)域的顶级域名服务器发起请求,请求到.baidu.com域名服务器的地址
  • LDNS(.baidu.com)域的顶级域名服务器发起请求,请求到www.baidu.com域名对应的ip
  • LDNS把得到的ip地址返回给主机操作系统,操作系统缓存把域名和对应的ip缓存起来, 操作系统再把ip返回给浏览器,浏览器也缓存起来。

2.建立TCP链接(传输层)

  浏览器要通过http或https协议向服务器发送请求,就需要先建立与服务器的链接。客户端基于TCP协议与ip对应服务器建立链接。(三次握手机制)

3.浏览器发送http请求生成html页面(应用层)

  以下为大概的渲染过程,具体的资源文件加载顺序下一篇再讲述

  • HTML代码转化为DOM(DOM Tree)
  • CSS代码转化成CSSOM(CSS Object Model)
  • 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)(Render Tree)
  • 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上

4.客户端与服务器断开链接

 客户端通过四次挥手与服务器断开链接(四次挥手机制)

以上只是简单的叙述流程,没有展开讲解每一步的细节知识与原理,大家可以自己查询有关的书籍。

十年磨一剑,霜刃未曾试。今日把示君,谁有不平事?

浏览器从输入url到页面呈现发生了什么?

标签:书籍   成功   chrome浏览器   需要   网络   没有   tcp   text   窗口   

原文地址:http://www.cnblogs.com/crown-fly-2017/p/6947364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!