输入网址到显示网页浏览器都干了什么

目录

输入地址到显示页面发生了什么

简单版

1. 浏览器发起dns请求,解析域名得到ip地址
2. 封装http请求报文,并发送给服务器
3. 服务器接收请求并处理请求,封装http响应报发送会浏览器
4. 浏览器解析响应报文, 遇到新资源继续请求
5. 浏览器根据解析结果生成dom树, cssom树, 进行页面布局和渲染
6. 最终显示完整页面

详细版

1. 浏览器先查看缓存, 如果请求资源在缓存中且没过期,使用缓存
   1. 如果资源没有缓存,发起新请求
   2. 如果已缓存,检查是否过期
      1. 没有过期直接使用缓存
      2. 过期与服务器进行验证
2. (资源未缓存)浏览器解析url, 获取请求协议,主机,端口,路径信息
3. 封装一个http请求报文
4. 获取ip地址
   1. 查看浏览器有没有缓存这个ip地址
   2. 本机缓存中有没有
   3. hosts文件有没有
   4. dns查询
      
5. 与目标ip服务器建立tcp连接, 然后发送http请求报文
6. 服务器接收请求并处理
7. 服务器检查http请求头是否包含缓存验证信息, 如果验证没有过期,返回304
8. 组装http响应报文, 并将发送回浏览器
9. 浏览器接收http响应,然后根据情况选择关闭tcp连接或保留重用
10. 对响应报文体进行解码
11. 浏览器检查响应状态码, 如果资源可以缓存,进行缓存
12. 解析html结构,构建dom树, cssom树
13. 解析过程遇到新的资源继续发送请求,直到所有资源都加载完毕
14. 根据dom树和cssom构建渲染树, 并对渲染树进行布局
    1. 解析html构建dom树
    2. 根据dom树,cssom树构建渲染树
       1. 不可见节点不会放入渲染树
          • 不可见节点: script, meta这样的节点本身不可见
          • 被css隐藏的元素(display: none, visibility:hidden)
    3. 对渲染树进行布局. 计算元素信息,确定大小,位置.
    4. 调用系统api进行绘图操作,显示页面
       
15. 解析,执行js(一般将js放在末尾,所以js的执行在dom渲染之后)
    1. 语法检查阶段
       • 词法分析
       • 语法分析
    2. 运行阶段
       • 预解析
         1. 创建执行环境
            • 确定 变量对象
            • 确定 作用域
            • 确定 this
         2. 属性填充(顺序)
            • 函数参数(没有传入,初始化值为:undefined)
            • 函数声明+定义(发生命名冲突会覆盖)
            • 变量声明(初始化值为:undefined, 发生命名冲突会忽略)
       • 代码执行
         • js引擎一行行读取代码并执行
16. 显示页面