Skip to content

[软技能] 第28天 在浏览器中输入url到页面显示出来的过程发生了什么? #101

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第28天 在浏览器中输入url到页面显示出来的过程发生了什么?

Activity

Mojitooooooooo

Mojitooooooooo commented on May 14, 2019

@Mojitooooooooo

DNS解析得到ip,通过ip向服务器发起tcp链接,发送请求,服务器返回数据,浏览器解析渲染显示,关闭连接。

sansini

sansini commented on May 16, 2019

@sansini

这是一道面试中经常能看到的题目,过程其实挺长的,总结过来就是DNS域名解析拿到对应的域名解析,然后就是服务器端和客户端的三次握手建立数据传输通道,四次挥手关闭数据传输通道,客户端根据自己拿到的数据开始渲染页面。完毕

ddzy

ddzy commented on May 16, 2019

@ddzy

不邀自来, 实名反对以上所有答案, 我的答案

haizhilin2013

haizhilin2013 commented on May 17, 2019

@haizhilin2013
CollaboratorAuthor

@ddzy 欢迎来共同学习

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

如果只是http的话,浏览器先查cache,如果有的话就直接处理response了,没有的话就会查服务器IP地址,怎么查呢,操作系统会去解析DNS,然后返回给浏览器,浏览器拿到后,建立TCP协议,发送request,服务器处理返回response,这里response可能会被cache,浏览器处理response

kokokele

kokokele commented on Jul 15, 2019

@kokokele

还有浏览器渲染流程

Vi-jay

Vi-jay commented on Jul 29, 2019

@Vi-jay
  1. dns查询
  2. 解析响应返回的html内容
  3. 生成dom树
  4. 生成cssom树
  5. 合并生成渲染树
  6. 计算布局
  7. 渲染
Konata9

Konata9 commented on Aug 13, 2019

@Konata9

这题可以展开的部分很多,这里只能列一个大纲。详细的可以看上面大佬的博客,非常详细。

不邀自来, 实名反对以上所有答案, 我的答案

  • 用户在浏览器中输入网址后,浏览器会先对输入的地址进行解析。比如用的协议 http 还是 https
  • 之后会根据域名进行 IP 的寻址
    • 寻址先从缓存开始,如 host
    • 之后再访问 DNS 服务器,一层一层直至访问到根服务器
    • 服务器再把 IP 告诉客户端
  • 客户端拿到 IP 后发起请求
    • 与服务器进行 HTTP 连接建立(3 次握手)
  • 建立成功后服务器返回数据,浏览器进行渲染
    • DOM 树构建、CSSOM 树的构建、JavaScript 资源下载
      • CSS 的重排重绘,CSSOM 与 DOM 一起进行绘制
      • JavaScript 资源的阻塞
  • 渲染出页面
huangd-d

huangd-d commented on Mar 27, 2020

@huangd-d

这是一道面试中经常能看到的题目,过程其实挺长的,总结过来就是DNS域名解析拿到对应的域名解析,然后就是服务器端和客户端的三次握手建立数据传输通道,四次挥手关闭数据传输通道,客户端根据自己拿到的数据开始渲染页面。完毕

还要先查查缓存

smile-2008

smile-2008 commented on Sep 28, 2020

@smile-2008

DNS解析得到ip,通过ip向服务器发起tcp链接,发送请求,服务器返回数据,浏览器解析渲染显示,关闭连接。

xsSeek

xsSeek commented on Mar 19, 2021

@xsSeek

1.重定向
2.查找缓存
3.dns解析
4.发送http请求
5.服务器响应
6.渲染dom

never123450

never123450 commented on Sep 5, 2023

@never123450

1.解析 URL(解析出域名,http 或 https 协议)
2.DNS解析(解析出对应的 ip)
3.简历 TCP 链接
4.发送HTTP请求(POST,GET 等)
5.服务器处理请求
6.接收响应
7.渲染页面
8.完成页面加载

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yelinzhou92@kokokele@smile-2008@haizhilin2013@Konata9

        Issue actions

          [软技能] 第28天 在浏览器中输入url到页面显示出来的过程发生了什么? · Issue #101 · haizlin/fe-interview