程序员鸡皮
文章 分类 评论
323 4 39

站点介绍

一名PHP全栈程序员的日常......

浏览器输入一个URL并且访问的时候,计算机内部发生了什么?

abzzp 2026-03-23 464 0条评论 前端 前端

首页 / 正文
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流,喜欢吃红薯或粉条的也可以私聊我......

发布于2024-07-04

在浏览器中输入一个URL,并且按下回车键时,首先会进行DNS解析,然后建立TCP连接,HTTP请求, HTML解析和CSS解析,渲染页面,布局layout渲染,绘制paint到屏幕,最后合成composite页面。

1.DNS解析

用户输入一个URL的时候直接通过域名是无法找到服务器的,我们需要一个DNS服务器做DNS解析,DNS解析后会获取到该域名对应的服务器IP地址。

首先DNS会查找缓存,缓存首先查找浏览器缓存,再查找系统缓存,再查找路由器缓存,然后查找ISP缓存,如果再缓存中查到会直接使用缓存的IP地址连接主机。

如果缓存查找失败,我们需要通过DNS递归解析,解析首先会解析根域名服务器,顶级域名服务器,权威域名服务器。最终会找到IP地址,并通过IP地址连接服务器,并且计算机会缓存服务器发送回来的IP地址信息。

2.TCP连接

虽然发送的是HTTP请求,但是HTTP协议是应用协议,它是建立在TCP传输协议上的,所以我们需要先进行TCP连接。

TCP的连接会进行三次握手,客户端发送SYN包,服务器接收到SYN包会返回一个SYN-ACK包,客户端再次发送ACK包,完成握手过程,这个时候TCP已经建立完成连接,双方就能传输数据了。

3.HTTP请求

一旦TCP建立连接成功,客户端就可以通过这个连接发送HTTP请求,包括请求方法,URL,协议版本,请求体。服务器接收到HTTP请求后,会处理这个请求并且返回一个HTTP响应。HTTP响应包括状态码,响应头,响应内容,我们这里请求的通常是index.html文件。

4.HTML解析和CSS解析

浏览器在获取到index.html后会对文档进行解析,包括HTML解析来构建DOM Tree,在这个过程中它会遇到CSS文件和JS文件。遇到CSS和JS文件会继续向服务器发送HTTP请求,并且下载CSS,JS文件。之后的CSS文件进行解析,解析出对应的CSSOM(CSS Object Model也叫做CSS 对象模型)

5.渲染render、布局layout、绘制paint

DOM Tree和CSSOM可以共同来构建Render Tree。之后会在Render Tree上运行布局layout计算每个结构的几何体,再由浏览器将每个机构绘制成paint到屏幕上的像素点。

6.composite合成

这里有一个优化的手段就是将元素绘制到多个合成图层中,默认情况下,标准流中的内容是被绘制到同一个Layer中的。我们可以通过一些特定的方法来创建新的合成层CompositingLayer,新的图层可以利用GPU来加速绘制。

比如我们通过3D Transforms/Video/canvas/iframe/positionfixed/will-change等,但是分层确实可以提高性能,他的代价是内存。

这样用户最终就看到了我们屏幕上显示的网页,当然还有好多细节包括重绘回流的问题,Javascript的执行过程,JavaScript引擎V8引擎等内容。

评论(0)

文章目录

最新评论

  • 姓名测试打分

    文章不错支持一下,非常喜欢

  • 免费算命

    文章不错非常喜欢,支持一下

  • 凡梦星尘

    友链已经添加好了,欢迎回访哈

  • 生辰八字算命

    文章不错支持一下,非常喜欢

  • 免费算命

    文章不错非常喜欢,支持一下

  • 生辰八字算命

    文章不错支持一下,非常喜欢

  • 免费算命

    文章不错非常喜欢,支持一下

  • 茗辰原

    马克吐温的作品就很经典,小时候很爱看

  • 姓名测试打分

    文章不错支持一下,非常喜欢

  • 姓名测试打分

    文章不错非常喜欢,支持

日历

2026年11月

日一二三四五六
1234567
891011121314
15161718192021
22232425262728
2930     

站点公告
本站是作为记录一名北漂程序员编程学习以及日常的博客,欢迎添加微信BmzhbjzhB咨询交流,喜欢吃红薯或粉条的也可以私聊我......
点击小铃铛关闭
配色方案