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

整体来说有几个基本的点:

1.浏览器的地址栏输入url并按下回车

2.浏览器查找当前url是否存在缓存,并比较缓存是否过期

3.DNS解析url对应的IP

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

5.服务器端处理(动态页面处理,静态页面返回。CDN相关)

6.HTTP发起请求

7.服务器处理请求,浏览器接收HTTP响应

8.渲染页面,构建DOM树(收到HTML内容解析,并行加载串行执行执行CSS,js)

9.请求头内容缓存到浏览器端

10.关闭TCP连接,4次握手

一、URL:我们常见的URL是由三部分组成,协议名,域名,端口号,有时候端口是默认所以隐藏,HTTP默认端口80,HTTPS默认端口443,(同源问题和跨域问题)除此之外还会包括一些路径,查询和其他片段,我们最常见的协议是HTTP协议,还有加密的HTTPS协议,FTP协议等等

二、缓存: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是否发生变化,如果变化则返回新资源。

三、域名解析的过程实际是将域名还原为IP地址的过程。首先浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用这个IP地址映射,完成域名解析。如果没找到则会查找本地DNS解析器缓存,如果查找到则返回。如果还是没有找到则会查找本地DNS服务器,如果查找到则返回。最后迭代查询,按根域服务器 ->顶级域,.cn->第二层域,hb.cn ->子域,www.hb.cn的顺序找到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的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,主要包括状态码,响应头,响应报文三个部分。

  状态码主要包括以下部分

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

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

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

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

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

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

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

七、如果说响应的内容是HTML文档的话,就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面:解析和渲染。在渲染页面之前,需要构建DOM树和CSSOM树。在浏览器还没接收到完整的 HTML 文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。

八、关闭TCP连接或继续保持连接,通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。

 

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

输入url会发什什么的更多相关文章

  1. 输入url到页面返回的过程

    输入url后,你看到了百度的首页,那么这一切是如何发生的呢? 这个问题之前.最近.我想以后肯定还会被问到,或者问到这样的题目,如果在百度框里输入查询的字符串开始,是怎么返回你需要的东西呢. 那这什么个 ...

  2. 一个页面从输入URL到页面加载显示完成,这个过程都发生了什么?

    对于网址栏的URL不同的操作方式有不同的加载资源.获取数据的方式,下面的详细过程针对"在地址栏输入URL,按enter(回车)键加载资源"此种操作方式做解析,其它的方式的过程大同小 ...

  3. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  4. 从输入 URL 到页面加载完的过程中都发生了什么---优化

    这篇文章是转载自:安度博客,http://www.itbbu.com/1490.html 在很多地方看到,感觉不错,理清了自己之前的一些思路,特转过来留作记录. 一个HTTP请求的过程 为了简化我们先 ...

  5. 【原】老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...

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

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

  7. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

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

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

  9. 输入URL地址到页面加载完成 过程

    在浏览器的地址栏中输入URL地址"http://www.gacl.cn:8080/JavaWebDemo1/1.jsp"去访问服务器上的1.jsp这个web资源的过程 1.浏览器根 ...

随机推荐

  1. 【机器学习】TensorFlow学习(一)

    感谢中国人民大学胡鹤老师,课讲得非常好~ 首先,何谓tensor?即高维向量,例如矩阵是二维,tensor是更广义意义上的n维向量(有type+shape) TensorFlow执行过程为定义图,其中 ...

  2. .Net主线程扑捉子线程中的异常

    首先看一段C#代码:运行后发现主线程通过try{}catch{}是不能扑捉子线程中的抛出来的异常. 代码 );        }        public void run()        {   ...

  3. [转载] 详细讲解Hadoop中的简单数据库HBase

    转载自http://www.csdn.net/article/2010-11-28/282614 数据模型 HBase数据库使用了和Bigtable非常相似的数据模型.用户在表格里存储许多数据行.每个 ...

  4. python基础(三)----字符编码以及文件处理

      字符编码与文件处理 一.字符编码 由字符翻译成二进制数字的过程   字符--------(翻译过程)------->数字   这个过程实际就是一个字符如何对应一个特定数字的标准,这个标准称之 ...

  5. Python之matplotlib学习(二)

    例子6.中文标签测试 #!/usr/bin/env python2.7 #-*- coding:utf-8 -*- import matplotlib.pyplot as plt import num ...

  6. Js实现子窗体给父窗体的元素赋值

    假设父窗体有一个html标签元素的id为myCollectionWork,现在如果我想在子窗体中给这个元素赋值那么我们可以使用如下JS代码:$("#myCollectionWork" ...

  7. java多线程系列(九)---ArrayBlockingQueue源码分析

    java多线程系列(九)---ArrayBlockingQueue源码分析 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量的并发访问 j ...

  8. Unity3d_GUI_2__(能量条的学习)

    这和上一篇有点跳跃,不过GUI有官方文档,而且也可以查看编辑器自带的脚本文档,多看看API,多操作操作,肯定能熟练的.所以这篇我就介绍下一点小技巧,大佬就略过这篇了,不适合大佬,会被你们教育的. 1. ...

  9. Mysql--数据的操作

    1.插入数据 1.1 插入完整数据记录 语法1: 例子: 语法2: 例子: 1.2 插入数据记录一部分 语法: 例子: 1.3 插入多条数据记录 1.插入多条完整的数据 语法: 例子:   插入多条部 ...

  10. Mybatis分页插件PageHelper的配置和使用方法

     Mybatis分页插件PageHelper的配置和使用方法 前言 在web开发过程中涉及到表格时,例如dataTable,就会产生分页的需求,通常我们将分页方式分为两种:前端分页和后端分页. 前端分 ...