从浏览器输入url到页面加载完成都发生了什么

一个http请求的过程

简要介绍一下一个http请求的网络传输过程:

  • DNS Lookup先获得URL对应的IP地址
  • Socket Connect浏览器和服务器建立TCP连接
  • Send Request浏览器发送HTTP请求
  • Content Download服务器发送响应

接下来讲讲这里存在的性能问题:

  • 如果你对DNS的查询还有印象的话现在反思一下,DNS Lookup就是为了获取遗传IP地址要和无数个DNS服务器通信,要消耗多少时间呢?
  • TCP连接要三次握手,如果服务器很远的话这三次我说要花多少时间?(通常到这0.5秒就出去了)
  • 发送HTTP请求的时候你要知道一点就是我们的网络带宽上行和下行通常是不一样的,通畅上行带宽要小一些,一个的话还好,但是现在的网页通常都会后续请求很多资源,带宽小的时候上行拥塞怎么办?
  • 终于到了服务器响应了,不巧你访问的这个服务器很忙,好几万人都要这个资源,服务器的上行带宽也是有限的,怎么办?

网络方面的主要优化手段,不外乎缓存,预取,压缩,并行。下面就分阶段介绍一下现有的优化手段。

DNS优化

对于DNS优化,缓存无意识最简单粗暴且效果明显的了。说到缓存就一定要提到缓存层级:

  • 浏览器DNS缓存
  • 系统DNS缓存
  • hosts文件
  • 各个DNS服务器上的缓存

当然DNS缓存失效期通常比较短,很多情况下都需要再去查找,为了降低用户体验到的延迟(注意这里不是网络延时)预取是一个不错的方法。比如说你敲网址的时候还没有敲完,但是浏览器根据你的历史发现你很有可能去访问哪个网站就提前给你做dns预取了,比如你打了一个“w”的时候,chrome已经帮你去找weibo.com的ip地址了。chrome用户可以看一下chrome://predictors/ 你就知道了。

此外浏览器还会记录你过去的历史,知道每个域名下通常还会有哪些其他链接建立起的网络拓扑结构,当你访问这个域名下的网站也就会预先对其他链接的域名进行DNS解析。

TCP优化

看到前面DNS优化这么复杂,到TCP这一步反倒简单了。因为刚才DNS已经把IP弄到手了,那我们就顺着刚才的步骤在建立连接就好了,所以字啊你瞧第一个字母的时候DNS解析完了就会去建立连接了。这时候你的网址可能还没敲完。当你刚访问一个网站的时候浏览器刷刷刷的帮你把别的服务器的TCP连接给你建好。

HTTP传输优化

写到这里可能有人会想,既然已经把TCP连接建立好了,那我干脆预取更进一步,把所有的链接内容直接预取下来不就好了,这样我网址还没敲完网页就已经加载完成了。这个想法是好的,但现实却是残酷的。因为我们的带宽是有限的,DNS和TCP连接量级都比较轻,对网络带宽不会占据太多,但是HTTP传输就不一样了。如果你所有连接都去预取的话,你的带宽很快就被占满了,这样你正常的请求无法得到满足,性能反而会严重下降。

缓存又出现了,提到缓存必须提层次结构。

  • PageCache这个事最快的了,直接在内存中缓存了现有网页的DOM结构和渲染结果,这就是你为什么在点前进后退时这么快。
  • HTTP Cache文件级别的Cache存在本地的文件系统上按照RFC2616实现。
  • 代理Cache如果是通过代理服务器上网的话,代理服务器通常也会按照缓存标准
  • CDN 一个地理上离你很近的内容服务器,比如说你在北京请求杭州淘宝的一个图片,结果在北京的一个CDN上有这个图片,那么就不用去杭州了。
  • DMOC(distributed memory object caching system)CDN主要存放的是静态数据,但是网页中通常有很多动态的数据需要查数据库,流量多了压力就会很大,通常服务器外围还会有一层内存缓存服务器,专门缓存这些数据库中的对象,据《淘宝技术这10年》称可以减少99.5%的数据库访问。
  • Server 其实真正落在服务器上的请求已经不多了。

大家看到这里有没有想到能在什么地方再加一层缓存呢?其实可以在2和3之间加,也就是在路由器上加缓存。小米的路由器和搜狗合作的预取引擎其实就相当于是在路由器上加一层缓存款顺便智能预取一下。

另一个HTTP常用的优化就是压缩了,网络传输时间 = 消息大小/网速 既然网速比较贵那么就压缩一下吧,大部分服务器都会对HTTP消息进行gzip压缩。可以在Http Header中看到,具体的就不细说了。

未来协议SPDY

上面都是传统做法,下面说一下未来技术。

由于HTTP协议是上个世纪制定的协议了,已经不能很好的适应现在Web的发展,所以Google提出了SPDY协议目前是指定中的HTTP2.0标准的一个底版。SPDY主要有下面的特点:

  • 一个TCP连接上并行多个HTTP连接,减少连接的建立时间
  • 请求优先级(目前还没看到具体实现)
  • HTTP头部压缩,上文提到的HTTP压缩是对HTTP body的压缩,并没有对头部压缩。对于小的HTTP消息,头部的比重还是很大的,而现在的web中存在大量小消息。
  • Server push/hint 服务器主动推送对象(可以想象成服务器帮客户端预取)

业界目前对SPDY是有赞有弹,博主也持谨慎的态度。主要在1和4上,4其实和之前提到的HTTP直接预取的矛盾点一样,万一推送的不需要又占据了带宽怎么办,hint到底该如何实现都有困难。第一条潜在的风险就是TCP连接中途断开,那么所有的连接就全部停掉了,PC互联网这种情况可能会少一些,但是移动互联网中TCP连接断开的情况还是比较常见的。不过作为一个未来的技术还是有必要关注一下。

时间: 2024-10-22 03:21:56

从浏览器输入url到页面加载完成都发生了什么的相关文章

从在浏览器输入URL到页面加载完成所发生的

大致意思就是:如果有cache就直接显示.否则就在本机找IP,通过DNS找到IP并返回给浏览器.然后浏览器通过TCP和server之间沟通,server返回数据或者错误信息.然后就把数据render到browser. 例如我要打开facebook.com,值得一提的两点:一是可能会重定向网页,如从http://facebook.com到http://www.facebook.com.二是发送的http GET请求里是包含cookie的 关于页面的图片,音频,视频的加载顺序,可以自定义来提高初始加

http --- 从输入URL到页面加载的过程发生了什么?

可以分为这几个大的过程: DNS解析 TCP连接 客户端发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 结束 其中(1)DNS解析可以理解为主寻找这个IP地址的过程,其中如果找到IP地址会进行本地缓存,以便下次继续使用 (2)HTTP协议是使用TCP作为其传输层协议的 (3)HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文. (4)HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文.  状态码是由3位数组成,第一个数字定义了响应的类别,且有五种

深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

背景 “从浏览器中输入URL到页面加载的发生了什么“,这是一道经典的面试题,涉及到的知识面非常多,但作为一个自认为对网络知识掌握的比较好的老码农来说,回答这个问题自然不在话下.如果这道题目如果在面试出现,对我来说就是送分题啊.尽管如此,我还是愿意花一些时间根据我自己的理解回答一下这个题目,看我自己到底掌握的有多深,同时也把自己的知识梳理一下. 这让我想起另外一件往事,这道题有点类似于“在手机上浏览器上输入一个URL,手机做了一些什么”,我当时学习通信里的核心网时就给自己提出过这个问题. 我非常愿

从输入URL到页面加载发生了什么

从输入URL到页面加载发生了什么 转自: https://segmentfault.com/a/1190000006879700 作者写得很不错,作者忽略了的,我加了上去,完善了一些,如get与post的区别等 总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 1.DNS解析 DNS解析的过程就是寻找哪台机器上有你需要资源的过程.当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意

【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情?

该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的博客: http://fex.baidu.com/blog/2014/05/what-happen/ 厉害的地方是将整个计算机体系和硬件都涉及进来,很广很深,太强大了. 然后找到一个StackOverFlow的答案: what happens when you type in a URL in br

从输入URL 到页面加载完成的过程

转载自:http://www.tuicool.com/articles/V7JN32Z 根据 URL 请求页面过程 说实话,这类文章网上一抓一大把,而我仍想写这篇博客,一方面是想再仔细缕一下这个过程,另一方面是希望用清晰的语言和结构来解释,也算是小小地挑战一下自己. 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 天啦撸,结束了?也太简单了吧...各位看官,不急,

从输入 URL 到页面加载完成的过程中都发生了什么(转)

从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 根据域名查找IP地址 概念解析 IP地址:IP协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址.IP地址如同门牌号码,通过 IP地址才能确定一台主机位置.服务器本质也是一台主机,想要访问某个服务器,必须先知道它的IP地址: 域名(HOST):IP 地址由四个

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

从输入URL到页面加载的全过程

前面的话 本文将详细介绍从输入URL到页面加载的全过程 概述 从输入URL到页面加载的主干流程如下: 1.浏览器构建HTTP Request请求 2.网络传输 3.服务器构建HTTP Response 响应 4.网络传输 5.浏览器渲染页面 构建请求 1.应用层进行DNS解析 通过DNS将域名解析成IP地址.在解析过程中,按照浏览器缓存.系统缓存.路由器缓存.ISP(运营商)DNS缓存.根域名服务器.顶级域名服务器.主域名服务器的顺序,逐步读取缓存,直到拿到IP地址 这里使用DNS预解析,可以根