这是一道经典的面试题,这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解,从前端的角度出发,我觉得首先回答必须包括几个基本的点,然后在根据你的理解深入回答。

  1、浏览器的地址栏输入URL并按下回车。

  2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。

  3、DNS解析URL对应的IP。

  4、根据IP建立TCP连接(三次握手)。

  5、HTTP发起请求。

  6、服务器处理请求,浏览器接收HTTP响应。

  7、渲染页面,构建DOM树。

  8、关闭TCP连接(四次挥手)。

  说完整个过程的几个关键点后我们再来展开的说一下。

  一、URL

  我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成:协议名、域名、端口号,这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段,例如:http://www.tuicool.com/search?kw=%E4%。我们最常见的的协议是HTTP协议,除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP,之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口,如HTTP默认端口80,HTTPS默认端口443。说到这里可能有的面试官会问你同源策略,以及更深层次的跨域的问题,我今天就不在这里展开了。

  二、缓存

  说完URL我们说说浏览器缓存,HTTP缓存有多种规则,根据是否需要重新向服务器发起请求来分类,我将其分为强制缓存,对比缓存。

  强制缓存判断HTTP首部字段:cache-control,Expires。

  Expires是一个绝对时间,即服务器时间。浏览器检查当前时间,如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题:服务器时间与客户端时间可能不一致。因此该字段已经很少使用。

  cache-control中的max-age保存一个相对时间。例如Cache-Control: max-age = 484200,表示浏览器收到文件后,缓存在484200s内均有效。 如果同时存在cache-control和Expires,浏览器总是优先使用cache-control。

  对比缓存通过HTTP的last-modified,Etag字段进行判断。

  last-modified是第一次请求资源时,服务器返回的字段,表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较,如果不一致则认为缓存已过期并返回新资源给浏览器;如果时间一致则发送304状态码,让浏览器继续使用缓存。

  Etag:资源的实体标识(哈希字符串),当资源内容更新时,Etag会改变。服务器会判断Etag是否发生变化,如果变化则返回新资源,否则返回304。

  

  三、DNS域名解析

  我们知道在地址栏输入的域名并不是最后资源所在的真实位置,域名只是与IP地址的一个映射。网络服务器的IP地址那么多,我们不可能去记一串串的数字,因此域名就产生了,域名解析的过程实际是将域名还原为IP地址的过程。

  首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析。

  如果没找到则会查找本地DNS解析器缓存,如果查找到则返回。

  如果还是没有找到则会查找本地DNS服务器,如果查找到则返回。

  最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到IP地址。

  

  递归查询,按上一级DNS服务器->上上级->....逐级向上查询找到IP地址。

  

  四、TCP连接

  在通过第一步的DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接。

  第一次握手: 建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;

  第二次握手: 服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;

  第三次握手: 客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

  完成三次握手,客户端与服务器开始传送数据。

  

  五、浏览器向服务器发送HTTP请求

  完整的HTTP请求包含请求起始行、请求头部、请求主体三部分。

  

  六、浏览器接收响应

  服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码,响应头,响应报文三个部分。

  状态码主要包括以下部分

  1xx:指示信息–表示请求已接收,继续处理。

  2xx:成功–表示请求已被成功接收、理解、接受。

  3xx:重定向–要完成请求必须进行更进一步的操作。

  4xx:客户端错误–请求有语法错误或请求无法实现。

  5xx:服务器端错误–服务器未能实现合法的请求。

  响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

  响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成。

  七、页面渲染

  如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树。

  

  在浏览器还没接收到完整的 HTML 文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念:Reflow和Repaint。

  Reflow,也称作Layout,中文叫回流,一般意味着元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树,这个过程称为Reflow。

  Repaint,中文重绘,意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如,背景色,边框颜色,文字颜色等),此时只需要应用新样式绘制这个元素就OK了,这个过程称为Repaint。

  所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法,一个结点的reflow很有可能导致子结点,甚至父点以及同级结点的reflow。

  下面这些动作有很大可能会是成本比较高的:

  • 增加、删除、修改DOM结点时,会导致Reflow或Repaint

  • 移动DOM的位置,或是搞个动画的时候

  • 内容发生变化

  • 修改CSS样式的时候

  • Resize窗口的时候(移动端没有这个问题),或是滚动的时候

  • 修改网页的默认字体时

  基本上来说,reflow有如下的几个原因:

  • Initial,网页初始化的时候

  • Incremental,一些js在操作DOM树时

  • Resize,其些元件的尺寸变了

  • StyleChange,如果CSS的属性发生变化了

  • Dirty,几个Incremental的reflow发生在同一个frame的子树上

  八、关闭TCP连接或继续保持连接

  通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。

  

  第一次挥手是浏览器发完数据后,发送FIN请求断开连接。

  第二次挥手是服务器发送ACK表示同意,如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥,但考虑到服务器可能还有数据要发送,所以服务器发送FIN应该放在第三次挥手中。

  这样浏览器需要返回ACK表示同意,也就是第四次挥手。

  至此从浏览器地址栏输入URL到页面呈现到你面前的整个过程就分析完了。

从输入url到页面加载完成发生了什么详解的更多相关文章

  1. 从浏览器中输入URL到页面加载的发生了什么-转载

    转:https://www.cnblogs.com/confach/p/10050013.html 背景 “从浏览器中输入URL到页面加载的发生了什么“,这是一道经典的面试题,涉及到的知识面非常多,但 ...

  2. 一个页面从输入URL到页面加载完成发生了...待细化

    一个页面从输入URL到页面加载完成发生了... 1.查找浏览器缓存 2.寻址:DNS解析 查找该域名对应的IP地址, 如果需要重定向(301),则再次发起请求 3. 进行HTTP协议会话 4.客户端发 ...

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

    很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...

  4. 从输入url到页面加载完成发生了什么?——前端角度

    这是一道经典的面试题,这道面试题不光前端面试会问到,后端面试也会被问到.这道题没有一个标准的答案,它涉及很多的知识点,面试官会通过这道题了解你对哪一方面的知识比较擅长,然后继续追问看看你的掌握程度.当 ...

  5. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

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

    这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...

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

    从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理 ...

  8. 一个页面从输入url到页面加载显示完成,中间都经历了什么

    第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...

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

    前面的话 本文将详细介绍从输入URL到页面加载的全过程 概述 从输入URL到页面加载的主干流程如下: 1.浏览器构建HTTP Request请求 2.网络传输 3.服务器构建HTTP Response ...

随机推荐

  1. 基于Unity 5的次世代卡通渲染技术 -- Unite 2017 米哈游总监贺甲分享实录

    在5月12日Unite2017开发者大会上,米哈游技术总监兼美术指导贺甲进行了主题为次世代卡通渲染的演讲.一下为详细分享内容: 大家好,首先自我介绍一下,我叫贺甲,在米哈游担任技术总监和美术指导工作, ...

  2. php SHA256Hex加密

    function SHA256Hex($str){ $re=hash('sha256', $str, true); return bin2hex($re); }

  3. JAVA编写的断点续传小程序

    上了一周的课,今天终于可以休息了,太棒了,今天闲着无聊使用java语言写了一个断点续传的小程序来分享给大家, 首先要下载个用于网络请求的框架:我这里给出地址,是用的Apache的HttpClient: ...

  4. luogu P4145 上帝造题的七分钟2 / 花神游历各国 维护区间和&&区间开根号

    因为开根号能使数字减小得非常快 所以开不了几次(6次?)很大的数就会变成1..... 所以我们可以维护区间最大值,若最大值>1,则继续递归子树,暴力修改叶节点,否则直接return (好像也可以 ...

  5. oracle中CAST函数使用简介【转】

    CAST()函数可以进行数据类型的转换. CAST()函数的参数有两部分,源值和目标数据类型,中间用AS关键字分隔. 以下例子均通过本人测试. 一.转换列或值 语法:cast( 列名/值 as 数据类 ...

  6. NSSM把.Net Core部署至 Windows 服务

    NSSM把.Net Core部署至 Windows 服务 https://www.cnblogs.com/emrys5/p/nssm-netcore.html 为什么部署至Windows Servic ...

  7. eclipse Java项目如何修改包名

    选中你的包名右键-->Refactor -->Rename -->勾选以下两个选项(必须选两个,只选第一个,是新增包) 修改以后,同时要修改.xml..properties文件内的引 ...

  8. ThinkPHP集锦

    使用frame搭建页面:不要引入静态的html文件,应该在Action的方法中填写 例:<frame name="menu" src="{:U(GROUP_NAME ...

  9. 整数的lqp拆分

    题目大意 lqp在为出题而烦恼,他完全没有头绪,好烦啊… 他首先想到了整数拆分.整数拆分是个很有趣的问题.给你一个正整数N,对于N的一个整数拆分就是满足任意m>0,a1 ,a2 ,a3…am&g ...

  10. WebStorm技巧-常用快捷键

      Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*-*/ ) Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 Ctrl+G 查找行 Ctrl+Shift+ ...