访问到页面的完整流程

作为一个程序员，如果你还不知道你是如何访问到一个页面怎么说的过去，晋级大厂、升职加薪、系统优化必备的底层知识，我们一起来回顾一下吧。

流程

地址输入

常见的地址就是http链接，比如 https://www.baidu.com，浏览器解析的可不只 http 链接，还可以读取本地文件，很多客户端为了节省 http 请求 html 的时间，就将html内置到客户端，通过 file:// 的方式访问。
一个完整的地址包括：协议、主机名、端口、路径、文件名、哈希和参数,例如：https://www.baidu.com/scl=3&tn=baidutop10&fr=top1000&hisfilter=1#a=1
所以url的生成公式就是：协议://主机名:端口/路径+文件名?参数1=值&参数2=值& …#哈希
并不是所有的参数都是必须的，除了协议、域名外，其他的都是可选的。

协议

最常见的协议就是 http 协议以及升级后的 https 的协议，还包括上面提到过的 file 以及 ftp 等协议。

主机名

是指存放资源的服务器的机器地址，可以是域名也可以是 ip .

端口号

整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。如果输入时省略，则使用默认端口号。有时候出于安全或其他考虑，可以在服务器上对端口进行重定义，即采用非标准端口号，此时，URL中就不能省略端口号这一项。

路径

由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

文件名

文件名就是路径最后面定位到具体文件的部分

参数

可选，用于给服务器传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

哈希

也称为锚点，如果一个页面比较长，带上锚点参数可以直接访问到具体的位置而不需要滚动操作。

域名解析

数据包在网络上传输是靠 ip 指路的，网络设备完全不认识www.baidu.com，但是对于我们人类来说，记住 61.135.169.125 是百度网站的话估计互联网就没法发展了。所以就有了一个中间转化的工具。
通俗来说，域名解析就是又一个小本本，将 www.baidu.com=61.135.169.125 等域名和 ip 对应起来，我们访问之前先问下，百度的 ip 是什么，dns 就在他的小本上找到 61.135.169.125 给你，你拿着这个 ip 高兴的访问到了百度的网页。

数据传输

负责将浏览器的请求传输给服务器，然后将服务起的返回数据再返回给浏览器，流程如下图：

数据处理

服务端接收到浏览器的请求后，会根据请求的 url ，解析出来浏览器想要的数据。一般来说，渲染出一个页面需要html、css、js和页面渲染的数据。服务端需要根据请求的相关参数，解析和获取到渲染页面需要的数据，然后返回给浏览器。

页面渲染

数据返回后，浏览器会根据返回的数据格式处理成页面，具体的流程如下图。

html

html 告诉浏览器，需要展示什么，比如图中的你好，账户余额等内容，但这只是展示出来，样式并不好看，相当于一个毛坯房，还没有装修。
同时 html 还会告诉浏览器在哪里去找 css 和 js，浏览器会根据html的提示，取服务器请求css和js。

css

css 会告诉浏览器，需要怎么展示，会设置每个元素的位置，字体，背景色等内容，让网页变得更加好看。html 盖好房子之后，就需要 css 来装修了。

js

每个网页的绝对控制者，房子的房主；房主对房子有绝对控制权，可以修改房子的构造，优化房子的视觉感受。
js的作用是发起请求，从服务器获取到用户的数据，展示到页面上。
很明显，房主想要住房，还需要买家具、家电和装饰品。
js的另一个作用就是用户交互，你点击页面的按钮，弹出一个弹层，就是js控制的，还有页面的跳转等操作。

数据

就是房子中的家具、家电和装饰品。
js会控制浏览器取获取数据，然后将数据设置到页面上，这样使得网页的内容会更加丰富多彩。

结束语

一个网页的加载涉及到的知识点非常多，由于个人的知识点局限，可能总结的不是很完整，希望读者可以从中获取到有用的指示。
如有错误，请及时指出，多谢。