从浏览器地址栏输入URL到展示页面经历了什么?

本文主要写url到页面的具体过程,以及涉及一点浏览器渲染过程。

过程
  1. DNS解析
    • 浏览器的DNS缓存
    • 系统的DNS缓存
    • 路由器的DNS缓存
    • 网络运营商的DNS缓存(中国移动,中国电信)
    • 上述都没有找到,则会采取递归的方式,向根服务器进行查询,根服务器告诉本地DNS服务器域服务器的地址,本地DNS向域服务器发出请求,域服务器告诉本地服务器域名解构服务器的地址,本地服务器向域名解构服务器发出请求,收到域名和IP的关系,本地服务器再返回给浏览器并将对应关系保存在缓存中以便下一次使用。下图是他递归的过程。
      在这里插入图片描述
      DNS优化
    • DNS缓存
      DNS存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。
    • DNS负载均衡
      DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,DNS可以返回一个合适的机器的IP给用户,例如可以根据每台机器的负载量,该机器离用户地理位置的距离等等,

注意:?
域名:一台或者一组服务器的名称,用来确定服务器在internet上的位置
url:统一资源定位符,用来确定某一文件的具体位置
IP和域名是对应关系吗???答案是不是,可以把多个提供相同服务的服务器IP设置为同一个域名,同时,一个IP可以绑定多个域名,数量不限。

  1. 当浏览器拿到IP后,就向服务器发送http连接请求,三次握手。

  2. 发送请求

  3. 接受响应
    服务器解析浏览器请求的url,找到目标资源文件,将资源文件发送给客户端

  4. 浏览器解析资源,并请求html中链接的其他资源文件(js和css阻塞问题),最后进行页面渲染

    • 处理HTML标记并构建DOM树;
    • 处理CSS标记并构建CSSDOM树;
    • 将DOM和CSSOM合并为一颗渲染树;
    • 根据渲染树来布局,以计算每个节点的几何信息;(重排)
    • 将各个结点绘制到屏幕上。(重绘)
    • 如果 DOM 或 CSSOM 被修改,以上过程需要重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染(重绘和重排)
  5. 断开连接 “TCP四次挥手”

    浏览器采用的是流式布局,也就是某一个dom节点更新了,就需要对DOM结构进行重新计算,重新布局界面,再次引发回流(重排)。
    重排:一个元素发生改变,会引起局部或者是全局DOM都改变。
    引起重排的原因:页面首次渲染,浏览器窗口大小发生改变,元素尺寸,位置,内容,字体大小等都会引起重排
    重绘:不改变元素的位置

  • 13
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值