1111 #学编程# 第2天:当你在浏览器输入url并按下回车后,都发生了什么?

如题,今天不写代码,带你了解web运行原理

很多新手入门学编程,都会进入一个误区,就是蒙头写代码,怎么开发一个登陆注册,怎么增删改查,怎么写购物车等等,到头来,面试或者在工作中,碰到一些问题后,往往不知所措,不知道从何下手,这就是典型的知其然不知其所以然,我一直认为,学习一门新东西,一定要做到道术并用,虽然编程注重实践,但是理论和原理的东西才是根基。

OK,我们进入正题,当你在浏览器输入url并按下回车后,到底都发生了什么?(看不懂的先有个概念,不明白的多搜下)

我们在浏览器中输入url其实是为了打开某个网页,也就是请求我们想要看到的页面内容,当我们在浏览器中输入url按下回车之后,主要发生了以下几个过程:

  • 域名解析过程

  • DNS查询过程

  • HTTP请求过程

  • 服务器处理请求过程

  • HTTP响应过程

  • 浏览器解析响应过程

  • 浏览器渲染页面内容

1 域名解析过程

域名解析过程,准确的说应该是URL解析过程,比如我们一般会在浏览器中输入baidu.com,然后就直接敲下回车,之后,浏览器会帮我们进一步解析完善URL,最终会转换为http://www.baidu.com./(注意域名最后有个点,通常默认忽略不写),这样才是一个完整的URL。

www.baidu.com 是域名,而http://www.baidu.com/是URL,URL详解见百科:https://baike.baidu.com/item/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%B3%BB%E7%BB%9F/5937042?fromtitle=url&fromid=110640。

URL解析过程包括:URL判断及完善,检查浏览器是否缓存且可用。

1.1 URL判断及完善

首先浏览器会判断你输入的是否为一个合法的URL,还是一个待搜索的关键词(关键词会打开浏览器默认搜索引擎打)。

如果是合法的域名,然后会根据你输入的字符串(我们暂且这么叫)进行自动完完善,字符编码转换等操作,比如上面URL百科地址中,%E7%BB%9F这些部分其实是URL特殊编码,通常浏览器会自动换行这种编码为可读字符串,比如中文。

当然,如果你对浏览器还会查看是否有其他设置,比如强制https访问(安全访问),禁止cookie,js请求等

1.2 检查浏览器是否缓存且可用

如果浏览器确认请求URL合法后,会判断浏览器本身是否缓存了该url请求结果,并且会判断该缓存是否可用(因为很多请求结果是动态实时会变的)。

1)强制缓存,判断Expire和Cache-Control是否过期。

在chrome控制台的Network选项中可以看到这种请求返回200的状态码,并且Size显示from disk cache或from memory cache。如果这两个选项没有过期,则会直接读取该缓存并显示页面。

常见于静态资源如css、js、图片、视音频等资源。

2)协商缓存,(Last-Modified / If-Modified-Since和Etag / If-None-Match是否过期)。

协商缓存就是强制缓存失效后,浏览器携带缓存标识向服务器发起请求,由服务器根据缓存标识决定是否使用缓存的过程。

如果协商缓存生效,返回304和Not Modified。

如果协商缓存失效,返回200和请求结果,并更新缓存。

2 DNS查询过程

DNS查询,其实就是根据域名查找对应的服务器IP地址的过程。

一般会经过这些过程:浏览器缓存,本地hosts,路由器缓存,ISP DNS 缓存,DNS解析(真正开始DNS查询过程)。

1)浏览器缓存。浏览器会优先检查是否已经缓存该URL的解析IP。

2)本地hosts。无论是windows还是linux,本地都会有hosts文件,里面会保存我们自己设置的DNS对应关系。

3)路由器缓存。有些路由器也会保存DNS解析。

4)ISP DNS缓存。就是我们的网络运营商节点一般会有高频率访问的DNS解析缓存。

5)DNS解析(真正开始DNS查询过程)。


   

3 HTTP请求过程

当浏览器获取到了URL对应的服务器IP地址后,就会根据IP地址与服务器建立通信连接,并发送对应的请求数据。

这个过程包括:TCP建立连接(三次握手),发送HTTP请求报文。

1)TCP建立连接(三次握手、四次挥手)

TCP是一种面向连接的单播协议,在发送数据前,通信双方必须在彼此间建立一条连接。就好比我们打电话的过程。

TCP提供了一种可靠、面向连接、字节流、传输层的服务,采用三次握手建立一个连接,采用四次挥手来关闭一个连接。

比如,打电话的时候,当对方接通电话后,你会问“喂,你是xxx吗?”,对方回答“是的,我是。”,当你听到对方确认后,你会开始巴拉巴拉的开始说话。这个你问对方确认的三次通话过程,就被称为“三次握手”。

1 客户端:“兄弟,我想请求点资源。”

2 服务端:“好的,可以给你。”

3 客户端:“好嘞。”,然后连接成功。

SYN攻击,大家感兴趣的可以了解下基于这个三次握手的SYN flood网络攻击。

而四次挥手,就是通信结束后,这里是指浏览器接收完服务器发送的响应后,会关闭连接,就好比通话结束双方确认挂断电话的过程。

1 客户端:“兄弟,我这边没数据要请求了,咱关闭连接吧。”

2 服务端:“收到,我看看我这边还有木有要发的数据了。”

3 服务端:“兄弟,我这边也没数据要传你了,咱可以关闭连接了。”

4 客户端:“好嘞。”,然后关闭连接。

 

2)发送HTTP请求报文

当浏览器与服务器建立TCP连接后,就会按照HTTP通信协议格式,发送对应的请求报文,主要是告诉服务器,我需要你返回我哪些东西。

详情查阅HTTP协议HTTP请求报文

4 服务器处理请求

当服务器接收到浏览器发来的HTTP请求报文后,一般会经过以下几个个过程:

1)web服务器解析请求报文。

2)web服务查找静态资源(比如图片、CSS/JS文件、音视频等)。

3)web服务器将动态请求发送给后端服务器。

4)后端服务器去数据库查询需要的数据。

5)后端服务(后端程序)处理数据并返回结果。

6)web服务器整合HTTP响应报文,并返回给浏览器。

上面的后端程序是指我们开发编写的应用程序。

 

5 HTTP响应过程

这个过程主要浏览器接收HTTP响应报文,并断开TCP链接(这就是为什么HTTP是无状态协议的原因,它每请求一次就会断掉连接,这也是为什么会有cookie和session的原因)

6 浏览器解析响应

当浏览器收到HTTP响应报文后,会解析该报文,比如HTTP响应状态码(比如我们熟知的200、301、404、500等),响应结果是否进行了压缩(gzip),是否需要获取第三方提供的资源(就是其他URL对应的图片、视音频、js、css、字体文件等等)。

7 浏览器渲染页面

这个过程会包括,页面布局、绘制页面、合并、回流、重绘、JS编译执行的过程。具体后面会专门用一篇文章来讲解。

你只要知道这一步,主要是浏览器根据拿到的HTML文件、CSS样式、JS脚本、其他各种资源,渲染出需要展示的页面,其过程非常复杂。


最后,我们简单做个总结回顾,整个web运作原理和过程主要包括:url解析、DNS解析、HTTP请求、服务器处理、HTTP响应、浏览器解析和渲染。

当然,上面只是简单介绍了web运作的基本过程,让我们有个基本的了解和认识,其实,上面任何一个环节都包括太多的技术点,后面会逐渐说到,比如如何快速响应,如何提高页面打开速度,服务器负载高如何解决,如何保证web服务高可用等等。