在地址栏里输入一个 URL,到这个页面呈现出来,中间会发生什么

本文详细描述了从输入URL到渲染网页的过程,涉及DNS查找、TCP连接、HTTP请求与响应,以及浏览器如何构建DOM树、CSSOM树和渲染树,解释了为何JS脚本应位于HTML末尾以避免阻塞渲染。
摘要由CSDN通过智能技术生成
DNS 解析
TCP 连接
输入 url 后,首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip,浏览器首先会寻
找缓存,查看缓存中是否有记录,缓存的查找记录为:浏览器缓存-》系统缓存-》路由
器缓存,缓存中没有则查找系统的 hosts 文件中是否有记录,如果没有则查询 DNS 服务
器,
发送 HTTP 请求
得到服务器的 ip 地址后,浏览器根据这个 ip 以及相应的端口号,构造一个 http 请
求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数
据,并将这个 http 请求封装在一个 tcp 包中,这个 tcp 包会依次经过传输层,网络层,
数据链路层,物理层到达服务器,服务器解析这个请求来作出响应,
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
连接结束
返回相应的 html 给浏览器,因为 html 是一个树形结构,浏览器根据这个 html 来构建 DOM 树,在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接,则会停止构建 DOM 树来执行和下载
相应的代码,这会造成阻塞,这就是为什么推荐 JS 代码应该放在 html 代码的后面,之
后根据外部央视,内部央视,内联样式构建一个 CSS 对象模型树 CSSOM 树,构建完成
后和 DOM 树合并为渲染树, 之后进行布局,布局主要是确定各个元素的位置和尺寸,
之后是渲染页面,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值