从输入 URL 到页面加载完成的过程中都发生了什么事情？_html/css_WEB-ITnose

这个问题是老生常谈的问题啦，虽然说到处百度都有的答案，还是希望自己能总结一下。

如今有很多答案，都是从硬件开始讲起，比如键盘的响应或者触屏的响应，然后CPU处理到OS的内核等等。这里不作为重点来讲，要是有兴趣的同学给你一个传送门：FEX--从输入 URL 到页面加载完成的过程中都发生了什么事情？

解析url

首先很多浏览器会做预处理，特别是Chrome。预处理也就是，通过分析您将要访问的url，提前建立TCP链接或者渲染。而给用户的体验，就是输入完Url后页面瞬间加载完成，怪不得Chrome会给人一种飞快的体验。

但并不是所有输入在浏览器的字符串都是有效的url，比如我们有时候就喜欢在地址框中直接输入汉字借此来调用浏览器的默认搜索引擎。所以，按回车后会对url进行有效验证。若符合http协议的就会按照Web来处理。

一旦我们输入完成后，浏览器会检查缓存，并对请求信息做相应的变化。

立即学习“前端免费学习笔记（深入）”；

HTTP请求

1. 如果地址是通过域名访问的，那么它将会先通过DNS来将地址解析成IP地址。当然DNS也有缓存，浏览器缓存，OS的缓存，路由器的缓存，ISP的缓存，若没有找到，就会通过递归，不断向上级的DNS服务器寻找，直到成功或失败。
   
2. 若地址不含端口号，则根据协议默认补充端口号。例如http协议的是80端口，而https的是443端口。
   

3. 建立TCP连接，并发送HTTP请求。截取一下我访问知乎的请求吧。

   Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip, deflate, sdchAccept-Language:zh-CN,zh;q=0.8,en;q=0.6Cache-Control:no-cacheConnection:keep-aliveCookie:[key=value...]; Host:www.zhihu.comPragma:no-cacheUser-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36

   登录后复制

4. 服务器接受到请求后，会解析请求信息，包括各种资源的访问，是否有缓存，请求的方式等等。它经过分析，配合数据库等处理之后，便会返回response，里面包含了你要访问的资源文件，包括html,css,js,img等等。

   

   AI封面生成器

   专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

   108

   查看详情

浏览器解析

在结束了比较底层的计算机网络的东西后（物理层和数据链路层基本没讲好吗？！），我们应用层的浏览器便开始大作为了。

首先浏览器会解析HTML,CSS,JS这些东西，并进行DOM树和样式的渲染，并通过Js来实现交互或动画效果。

然后，你就可以得到一个精美的或富应用的Web。

写在最后

其实，写的过程经过相关的查阅，这里写的也不尽完美。因为底层实在做了太多复杂的事，让我也不知道该如何写才不会误导他人。只能选其中具有代表性并熟悉的东西来写。但是心里的感概确是万分的，计算机网络是一项非常复杂的工程，无论层次结构还是其中的各种协议，都是经过一代又一代人的深思熟虑并沉淀下来的。

在我们看来，我们仅仅是输入了一段英文，而在其背后则是规模庞大，结构复杂的浏览器，浏览器内核，操作系统，计算机网络等等一系列的紧密配合的东西。我们能拥有这么愉悦丰富的互联网生活，离不开每一代工程师的努力，致敬。