在浏览器地址栏输入一个URL后回车,将会发生的事情

当用户在搜索框输入URL后

一:浏览器通过域名查找对应的IP地址,是通过负责域名解析的DNS服务来实现的

二:浏览器向Web服务器发送一个HTTP请求

请求的方式主要分为四种:get、post、put、delete(查、改、增、删)。

get:向服务器查找某些数据,请求访问资源

post:向服务器发送应该被保存的数据

put:传输文件

delete:删除文件

head:获得报文头部(用于获取URIDE 有效性和获取资源的日期时间)

三:服务器处理请求,并返回响应,响应结果用状态码来描述。

1xx(信息性状态码)接收的请求正在处理

2xx (成功状态码)请求处理完毕200:客户端发来的请求在服务器端被正确处理了204:服务器接收的请求已被成功处理,但没有资源可以返回206:客户端进行了范围请求,服务器成功执行了这部分请求

3xx (重定向状态码)需要进行附加操作以执行请求301:永久性重定向,表示请求的资源已经被分配了新的URI,以后应使用资源现在所指的URI302:临时重定向。表示请求的资源已经被分配了新的URI 304:表示服务器资源未改变,可直接使用客户端未过期的缓存。和重定向没有关系

4xx(客户端错误状态码)服务器无法处理请求 401:状态码发送的请求需要有HTTP认证。403:表示对请求资源的访问被服务器拒绝了。 404:服务器上无法找到请求的资源

5xx(服务器端错误状态码)服务器处理请求出错。

四:服务器返回html文件,浏览器开始解析渲染页面

浏览器解析html是自上而下的

1.浏览器载入html代码,创建DOM树

2.解析css

3.将DOMcssOM合并,构造渲染树(render tree)

4.有了render tree,就开始布局渲染树,计算每个节点在屏幕中的位置

5.绘制渲染树

上述过程是逐步实现的,渲染引擎会尽可能早的将内容呈现在屏幕上,并不会等到所有的html解析完再去构建和布局render tree,解析完一部分就显示一部分。


关于script标签的位置:

现在一般都将script标签放在页面底部,这样能确保在脚本执行页面已经完成了DOM树的渲染

javascript的加载和执行的特点:

(1)载入后马上执行;

(2)执行时会阻塞后续的内容(包括页面渲染、其它资源的下载),因为:浏览器需要一个稳定的DOM树结构,而js中很可能有代码直接该表了DOM树的结构,浏览器为了防止出现JS修改DOM树而需要重新构建DOM树的情况,所以就会阻塞其它的下载和呈现,而是执行完js再执行之后的内容。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果一个页面从用户在地址栏输入URL,首先,用户会在浏览器地址栏中输入网页URL地址,然后按下回车键。浏览器接收到用户输入的URL后,会进行一系列的操作来加载该页面。 首先,浏览器会解析URL,分析其中的协议部分(比如HTTP、HTTPS、FTP等)以确定如何与服务器建立连接。接着,浏览器会解析URL的主机部分,找到对应的服务器IP地址。如果用户输入的是域名,浏览器会向域名系统(DNS)发送请求,将域名解析为IP地址,然后与服务器建立连接。如果用户输入的是IP地址,浏览器会直接使用该IP地址与服务器建立连接。 连接建立后,浏览器会向服务器发送HTTP请求。HTTP请求中包含了用户的浏览器类型、支持的语言、请求的资源路径等信息。服务器收到请求后,会解析请求头中的信息,确定要返回的资源,并做出相应的处理。 服务器根据请求的资源类型进行处理,如果是静态资源(如HTML、CSS、JavaScript文件等),服务器会将对应的文件内容返回给浏览器浏览器接收到文件后再进行解析和渲染。如果是动态资源(如PHP、ASP、JSP等),服务器会执行相应的脚本代码,生成HTML等静态内容,然后返回给浏览器。 最后,浏览器接收到服务器返回的内容后,会进行解析和渲染,将页面呈现给用户。浏览器会根据HTML结构,解析DOM树并加载相应的CSS样式文件和JavaScript脚本文件,最终将页面内容显示在用户的浏览器窗口中。 总之,当一个页面从用户在地址栏输入URL开始加载时,需要进行URL解析、DNS解析、连接建立、HTTP请求、服务器处理和响应、浏览器解析和渲染等一系列操作,最终将页面内容呈现给用户。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值