utterances-bot commented 3 years ago

浏览器从输入网址到页面展示的过程 | HZFE - 剑指前端 Offer

回答关键点

https://hzfe.github.io/awesome-interview/book1/topic-enter-url-display-xx

gricn commented 3 years ago

假设有客户端A，服务端B。我们要建立可靠的数据传输。
      SYN(=j)       // SYN: A 请求建立连接
  A ----------> B
                |
     SYN(=j+1)  |   // ACK: B 确认应答 A 的 SYN
     SYN(=k)    |   // SYN: B 发送一个 SYN
  A <-----------
  |
  |  ACK(=k+1)
   -----------> B   // ACK: A 确认应答 B 的包

第二次握手B返回上面的应为ACK(=j+1)而非SYN(=j+1)

Akiq2016 commented 3 years ago

假设有客户端A，服务端B。我们要建立可靠的数据传输。
      SYN(=j)       // SYN: A 请求建立连接
  A ----------> B
                |
     SYN(=j+1)  |   // ACK: B 确认应答 A 的 SYN
     SYN(=k)    |   // SYN: B 发送一个 SYN
  A <-----------
  |
  |  ACK(=k+1)
   -----------> B   // ACK: A 确认应答 B 的包

第二次握手B返回上面的应为ACK(=j+1)而非SYN(=j+1)

收到

Akiq2016 commented 3 years ago

匿名群友反馈

可能表述中有错误的地方，具体结论以下方链接为主

关于模拟题一综合-浏览器从输入网址到页面展示的过程第二点和第三点似乎有误，这种说法已经过时了。第二点：处理 CSS 样式，解析为 CSSOM，遍历 DOM 树，为每个元素计算样式，这里只是一个属性值的映射，并没有CSSOM树的概念第三点：在样式解析阶段结束后会基于 DOM 树创建另一个单独的布局树（ Layout Tree），layout 阶段会遍历布局树，计算元素几何信息，并更新到布局树。并不会将 DOM 与 CSSOM合并成一个渲染树，没有 render tree 的概念，事实上，在 RenderingNG中，Layout 阶段的输出结果是不可变片段树（immutable fragment tree）。参考链接： https://developer.chrome.com/blog/renderingng-architecture/ 2020 Life of a Pixel : https://www.youtube.com/watch?v=K2QHdgAKP-s 2019 Life of a pixel : https://www.youtube.com/watch?v=m-J-tbAlFic

xyxiao001 commented 3 years ago

ok 具体细节我去继续考证下

babopo commented 3 years ago

匿名群友反馈

可能表述中有错误的地方，具体结论以下方链接为主

关于模拟题一综合-浏览器从输入网址到页面展示的过程第二点和第三点似乎有误，这种说法已经过时了。第二点：处理 CSS 样式，解析为 CSSOM，遍历 DOM 树，为每个元素计算样式，这里只是一个属性值的映射，并没有CSSOM树的概念第三点：在样式解析阶段结束后会基于 DOM 树创建另一个单独的布局树（ Layout Tree），layout 阶段会遍历布局树，计算元素几何信息，并更新到布局树。并不会将 DOM 与 CSSOM合并成一个渲染树，没有 render tree 的概念，事实上，在 RenderingNG中，Layout 阶段的输出结果是不可变片段树（immutable fragment tree）。参考链接： https://developer.chrome.com/blog/renderingng-architecture/ 2020 Life of a Pixel : https://www.youtube.com/watch?v=K2QHdgAKP-s 2019 Life of a pixel : https://www.youtube.com/watch?v=m-J-tbAlFic

模拟题2的浏览器渲染原理章节里有些图似乎也是这种错误的说法

babopo commented 3 years ago

感觉http缓存是不是也算一个关键回答点

xyxiao001 commented 3 years ago

感觉http缓存是不是也算一个关键回答点

http 缓存一般来说会单独考察的 http://febook.hzfe.org/awesome-interview/book2/network-http-cache

xyxiao001 commented 3 years ago

匿名群友反馈

可能表述中有错误的地方，具体结论以下方链接为主

关于模拟题一综合-浏览器从输入网址到页面展示的过程第二点和第三点似乎有误，这种说法已经过时了。第二点：处理 CSS 样式，解析为 CSSOM，遍历 DOM 树，为每个元素计算样式，这里只是一个属性值的映射，并没有CSSOM树的概念第三点：在样式解析阶段结束后会基于 DOM 树创建另一个单独的布局树（ Layout Tree），layout 阶段会遍历布局树，计算元素几何信息，并更新到布局树。并不会将 DOM 与 CSSOM合并成一个渲染树，没有 render tree 的概念，事实上，在 RenderingNG中，Layout 阶段的输出结果是不可变片段树（immutable fragment tree）。参考链接： https://developer.chrome.com/blog/renderingng-architecture/ 2020 Life of a Pixel : https://www.youtube.com/watch?v=K2QHdgAKP-s 2019 Life of a pixel : https://www.youtube.com/watch?v=m-J-tbAlFic

目前流程图参考资料 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn 谷歌官方文档

yola-0316 commented 3 years ago

RenderingNG 是 google 历时 8年的架构更新，最新部分预计在2021年测试完毕。我们之前描述的过程主要是基于以往的版本进行的。后续我们会补充关于新架构的知识点。

SnorlaxYum commented 2 years ago

挥手感觉不够具体，是不是可以参照这篇文章补充一下：https://segmentfault.com/a/1190000039165592

SnorlaxYum commented 2 years ago

TCP握手：

客户端发送 SYN 包（seq = j）到服务器，并进入 SYN_SEND 状态，等待服务器确认。

服务器收到 SYN 包，必须确认客户的 SYN（ACK = k + 1），同时自己也发送一个 SYN 包（seq = k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态。

客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK（ACK = k + 1），此包发送完毕，客户端和服务器进入 ESTABLISHED 状态，完成三次握手。

第二句，ACK = k + 1序号有误，图里都对了文字叙述却错了= =

DNS：

使用 TCP/IP 参数中设置的 DNS 服务器进行查询。如果要查询的域名包含在本地配置区域资源中，则返回解析结果，完成域名解析。

检查本地 DNS 服务器是否缓存该网址记录，有则返回解析结果，完成域名解析。

我觉得第3步很显然画蛇添足，你设置好的DNS服务器地址，就是本地DNS服务器在做的请求吧？像是我用的Arch Linux，本地DNS服务器使用的unbound，如果我不用运营商默认自动分配的DNS服务器，就会修改/etc/unbound/unbound.conf，在forward-zone指明对应地址使用指定DNS服务器地址解析。也许大家使用的操作系统是不一样的，在UI上会有所区分（Linux用户根据包使用的不同，UI的区分度也很大，像我用i3的把界面配置的很简洁，可能直接就Terminal里sudo vi /etc/unbound/unbound.conf && sudo systemctl restart unbound），使用 TCP/IP 参数中设置的 DNS 服务器这种UI强相关的语句实在是显得很不严谨……

SnorlaxYum commented 2 years ago

TLS协商与这篇不一致，比如pre-master key，难道不应该是公钥加密私钥解密？？？

JuanJuanZhang123 commented 1 year ago

TCP断开连接时候的四次挥手，服务端发送的两次请求，第一次ACK 第二次【FIN，ACK】携带的ack和seq的值是相同的，图文上面一个是U，一个是V是不同的，抓包看到的是相同的

HZFE / awesome-interview