浏览器输入网址到页面成功加载后都做了哪些工作?

  1. 用户在输入栏输入网址后,浏览器会先查找本地缓存中是否有该资源,有的话会直接返回给浏览器。

  2. 若本地缓存没有资源,浏览器会发起url请求,首先会进行的DNS解析以获取请求域名的服务器ip地址。如果请求是https,那么还需要建立TLS连接。
    。其中,DNS也有几步缓存“浏览器缓存,hosts文件
    。如果本地域名解析服务器没有该域名的记录,则开始递归+迭代解析
    。TCP三次握手,HTTP、TLS握手、HTTPS

  3. 接下来就是利用IP地址和服务器建立TCP连接。连接建立之后,浏览器端会构建请求行、请求头等信息,并把和该域名相关的Cookie等数据附加到请求头中,然后向服务器发送构建的请求信息。

    数据在进入服务器端之前,可能还会先经过负责负载均衡的服务器,它的作用就是将请求合理的分发到多态服务器上,这是假设服务端会闲赢一个HTML文件。

    首先浏览器会哦按段状态码是什么,如果是200那就继续解析,如果400或500的话就会报错,如果300的话会进行重定向,这里会有个重定向计数器,避免过多次的重定向,超过次数也会报错。

    浏览器开始解析文件,如果是gzip格式的话会先解压一下,然后通过文件的编码格式知道该如何去解码文件。

  4. 准备渲染进程
    默认情况下,Chrome会为每个页面分配一个渲染进程,也就是说,没打开衣蛾新页面就会配套创建一个新的渲染过程。

  5. 渲染阶段
    文件解码成功后会开始渲染流程,会先根据HTML构建DOM树,有CSS的话会去构建CSSOM树。如果遇到script标签的话, 胡判断是否存在async或者的defer,前者会并行进行下载并执行JS,后者辉县下载文件,然后等待HTML解析完成后顺序执行。

如果以上都没有,就会阻塞住渲染流程直到JS执行完毕。
CSSOM树和DOM树构建完成后会开始生成Render树,这一步就是确定页面元素的布局、样式多诸多方面的东西。

在生成render树的过程中,浏览器就开始调用GPU绘制,合成图层,将内容显示在屏幕上。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值