从一个URL地址到最终页面渲染完成，发生了什么？

最新推荐文章于 2022-10-04 07:13:05 发布

urnotwangPder

最新推荐文章于 2022-10-04 07:13:05 发布

阅读量129

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/urnotwang/article/details/123102376

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        /* 
                面试题：从一个URL地址到最终页面渲染完成，发生了什么？
                  1.DNS解析：将域名地址解析为ip地址
                   - 浏览器DNS缓存
                   - 系统DNS缓存
                   - 路由器DNS缓存
                   - 网络运营商DNS缓存
                   - 递归搜索：例如 blog.baidu.com
                      - .com域名下查找DNS解析
                      - .baidu域名下查找DNS解析
                      - blog域名下查找DNS解析
                      - 出错了
                  2.TCP连接：TCP三次握手
                   - 第一次握手，由浏览器发起，告诉服务器我要发送请求了
                   - 第二次握手，由服务器发起，告诉浏览器我准备接收了，你赶紧发送吧
                   - 第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接收吧
                  3.发送请求
                   - 请求报文：HTTP协议的通信内容
                  4.接收响应
                   - 响应报文
                  5.渲染页面
                   - 遇见HTML标记，浏览器调用HTML解析器，解析成Token并构建成dom树
                   - 遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树
                   - 遇见script标记，调用JavaScript解析器，处理script代码（绑定事件、修改dom树/cssom树）
                   - 将dom树和cssom树合并成一个渲染树
                   - 根据渲染树来计算布局，计算每个节点的几何信息（布局）
                   - 将各个节点的颜色绘制到屏幕上（渲染）
                   注意：
                   这五个步骤不一定按照顺序执行，如果dom树和cssom树被修改了，可能会执行多次布局和渲染
                   往往实际页面中，这些步骤都会执行多次的
                
                  6.断开连接：TCP四次挥手
                   - 第一次挥手：由浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧
                   - 第二次挥手：由服务器发起的，告诉浏览器，我东西接收完了（请求报文），我准备关闭了，你也准备关闭吧
                   - 第三次挥手：由服务器发起的，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧
                   - 第四次挥手：由浏览器发起的，告诉浏览器，我东西接收完了（响应报文），我准备关闭了，你也准备关闭吧
                   
                */
    </script>
</body>

</html>