从代码到网页的旅程，果真是如此奇妙的！

如果你刚接触Web开发，还是有必要去知道网络的工作原理 - 至少在基本层面上。下面就来看看从你输入网址到页面内容呈现在面前它是怎么工作的。

1）您在浏览器中输入URL

2）浏览器解析URL中包含的信息。包括协议（“https”），域名（“github.com”）和资源（“/”）。 在这种情况下，“.com”之后没有指示特定的资源，所以浏览器知道检索主（索引）页面。

3)浏览器与ISP进行通信，对主机的Web服务器的IP地址进行DNS查找www.github.com. DNS服务首先联系根服务器, 查询 https://www.github.com 顶级域服务器的IP地址。 该地址被发送回您的DNS服务。 DNS服务与“.com”名称服务器进行另外的沟通，并请求 https://www.github.com. 的地址。

4)一旦ISP收到目标服务器的IP地址，它会将其发送到您的Web浏览器。

5)您的浏览器从URL中获取IP地址和给定的端口号（HTTP协议默认为端口80，HTTPS默认为端口443），并打开TCP套接字连接。 此时，您的Web浏览器和Web服务器终于连接了。

7）Web服务器接收请求并查找该HTML页面。 如果页面存在，则Web服务器准备响应并将其发送回您的浏览器。 如果服务器找不到请求的页面，它将发送一个HTTP 404错误消息，代表“找不到页面”。

8）您的Web浏览器将接收到HTML页面，然后通过它从上到按下解析寻找列出的其他资源，如图像，CSS文件，JavaScript文件等。

9）对于列出的每个资源，浏览器重复上述整个过程，向服务器发送HTTP请求。

10）浏览器完成加载HTML页面中列出的所有其他资源后，页面将最终加载到浏览器窗口中，并且连接将被关闭。

现在，您的浏览器具有构成网站（HTML，CSS，JavaScript，图像等）的资源，必须通过几个步骤将资源呈现为可读的网页。

您的浏览器有一个渲染引擎，负责显示内容。 渲染引擎以小块形式接收资源的内容。 然后有一个HTML解析算法告诉浏览器如何解析资源。

构建DOM树后，将分析样式表以了解如何对每个节点进行样式化。 使用此信息，浏览器遍历DOM节点并计算每个节点的CSS样式，位置，坐标等。

一旦浏览器具有DOM节点及其样式，那么_最终_就可以将页面绘制到屏幕上了。

结果是：你在互联网上看到的一切。