文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

浏览器输入url到页面加载过程发生了什么？

时间：2021-09-16 03:04:54   收藏：0   阅读：46

题目：浏览器输入url到页面加载过程发生了什么？

解答

步骤

  1. DNS查询
  2. TCP连接
  3. 发生HTTP请求
  4. Server处理HTTP请求并返回HTTP报文
  5. 浏览器解析并render页面
  6. HTTP连接断开

1. DNS查询

DNS解析流程

通过域名找ip的过程

技术分享图片

DNS的优化
DNS负载均衡

不同的区域访问Google返回的IP是不一样的，甚至在同一个办公室访问Google，返回回来的IP也有可能是不一样的

2. TCP连接

DNS解析返回域名的IP之后，接下来就是浏览器要和该IP建立TCP连接了

TCP/IP模型

技术分享图片

四层模型的概念

TCP/IP想干嘛？？
实现用最少的资源，准确快速的把信息传送到对端去

怎么充分利用资源？用资源怎么发送信息？怎么找到对端？怎么做到准确？怎么快速？怎么保证对端完整收到信息？

随着入网设备越来越多，就需要被管理

四层模型分别有哪些协议？
  1. 应用层
    • 常用的HTTP HTTPS SSH Telnet等都在应用层上
  2. 传输层
    • 最常见的TCP和UDP就在这里，TCP三次握手也在这里
  3. 网络层
    • ICMP -- ping命令就是用的ICMP
  4. 链路层
    • 很底层
    • ARP -- 用来查找MAC地址
TCP三次握手和四次挥手
TCP三次握手
  1. 第一次握手(SYN=1, seq=x):
    • 客户端发送一个 TCP 的 SYN 标志位置1的包，指明客户端打算连接的服务器的端口，以及初始序号X,保存在包头的序列号(Sequence Number)字段里。
    • 发送完毕后，客户端进入 syn_send 状态。
  2. 第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1):
    • 服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 ISN 序列号，放到 Seq 域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即X+1。
    • 发送完毕后，服务器端进入 syn_rcvd 状态。
  3. 第三次握手(ACK=1，ACKnum=y+1):
    • 客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1
    • 发送完毕后，客户端进入 established 状态，当服务器端接收到这个包时，也进入 established 状态，TCP 握手结束。

技术分享图片

TCP四次挥手
  1. 第一次挥手(FIN=1，seq=x):
    • 假设客户端（主机1）想要关闭连接，客户端（主机1）发送一个 FIN 标志位置为1的包，表示自己已经没有数据可以发送了，但是仍然可以接受数据。
    • 发送完毕后，客户端（主机1）进入 fin_wait_1 状态。
  2. 第二次挥手(ACK=1，ACKnum=x+1):
    • 服务器（主机2）确认客户端（主机1）的 FIN 包，发送一个确认包，表明自己接受到了客户端（主机1）关闭连接的请求，但还没有准备好关闭连接。
    • 发送完毕后，服务器（主机2）进入 close_wait 状态，客户端（主机1）接收到这个确认包之后，进入 fin_wait_2 状态，等待服务器（主机2）关闭连接。
  3. 第三次挥手(FIN=1，seq=y):
    • 服务器（主机2）准备好关闭连接时，向客户端（主机1）发送结束连接请求，FIN 置为1。
    • 发送完毕后，服务器（主机2）进入 last_ack 状态，等待来自客户端（主机1）的最后一个ACK。
  4. 第四次挥手(ACK=1，ACKnum=y+1):
    • __客户端（主机1）__接收到来自服务器（主机2）的关闭请求，发送一个确认包，并进入 time_wait 状态，等待可能出现的要求重传的 ACK 包。
    • 服务器（主机2）接收到这个确认包之后，关闭连接，进入 closed 状态。
    • 客户端（主机1）等待了某个固定时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务器（主机2）的 ACK ，认为服务器端已经正常关闭连接，于是 自己也关闭连接，进入 closed 状态。

技术分享图片

HTTPS证书
HTTP和HTTPS的区别

技术分享图片

3. 发生HTTP请求

HTTP methods有哪几种，分别是什么？
restful规范
http的几种请求方法
  1. OPTIONS
    • 返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送 ‘ * ’ 的请求来测试服务器的功能性
  2. HEAD
    • 向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。
    • 这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
  3. GET
    • 向特定的资源发出请求。
  4. POST
    • 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。
    • 数据被包含在请求体中。
    • POST请求可能会导致新的资源的建立和/或已有资源的修改。
  5. PUT
    • 向指定资源位置上传其最新内容
  6. DELETE
    • 请求服务器删除Request-URL所标识的资源
  7. TRACE
    • 回显服务器收到的请求，主要用于测试或诊断
  8. CONNECT
    • HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
HTTP的put delete等使用时需要注意什么？
HTTP的options用来做什么？
HTTP响应报文常见状态码
状态码有3位数字
常见的状态码
HTTP协议（包括HTTP/2.0）有了解吗？
1. HTTP2.0

HTTP2.0大幅度的提高了web性能，在HTTP1.1完全语义兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。对于前端开发者而言，减少了优化工作。

2. 二进制分帧

HTTP2.0是怎样突破HTTP1.1的性能限制，实现高吞吐量呢？

在HTTP1.X中是通过 文本 传输数据的

3. 首部压缩：专门为首部压缩而设计的HPACK算法
4. 多路复用
5. 请求优先级
6. 服务器推送

4. Server处理HTTP请求并返回HTTP报文

Server返回的内容有哪些呢？这里只以HTML页面为例.一个页面一般包含HTML、CSS、 JS、 图片等文件，那么浏览器收到这些文件后该如何渲染（render）他们呢？

5. 浏览器解析并render页面

浏览器组成
  1. User Interface: UI组件包括地址栏，前进/后退按钮，书签菜单等。
  2. Browser Engine: 在UI组件和渲染引擎间采取一些action.
  3. Rendering engine: 负责显示请求的内容。

    例如，如果是HTML页面，它将解析HTML，CSS，并将解析的内容显示在屏幕上。

    • 不同的浏览器使用不同的渲染引擎：
      • IE使用Trident
      • Firefox使用Gecko
      • Safari使用WebKit
      • Chrome和Opera（版本15开始）使用Blink。它是基于Webkit开发的。
  4. Networking: 负责网络调用，例如HTTP请求。在不同的平台有不同的实
  5. UI backend: 主要用来绘画基本的UI元素，例如下拉框，Windows等。这个UI后台暴露一些通用的接口，并不依赖平台的。
  6. JavaScript interpreter: 用来解析和运行JavaScript code。
  7. Data storage: 数据持久化的那一层。

    浏览器可能需要存储各种各样的数据，例如Cookie。浏览器也得支持我们常用的LocalStorage， IndexedDB，WebSQL以及FileSystem。

渲染页面的主要流程
  1. 渲染引擎解析文件
    • 渲染引擎解析html文档，将html包含的元素转化为一个个dom，并构建为一个 dom树
    • 渲染引擎解析来自css文件或者行内样式数据，构建为一个 渲染树
  2. 布局
    • 渲染引擎会给每个dom元素安排精确的坐标，并根据坐标在屏幕上显示
  3. 遍历渲染树
    • ui bankend层会将一个个dom元素在屏幕上绘画出来
    • 这是一个渐进的过程，边下载边解析，边解析边渲染

6. HTTP连接断开

CORS（Cross Origin Resource Sharing）跨域资源共享

是一个真正的ajax跨域请求方案

  // CORS简单请求
  let xhr=new XMLHttpRequest();
  xhr.onload=()=>{
    console.log(‘CORS‘,JSON.parse(xhr.responseText));
  }
  xhr.open(‘get‘,‘http://localhost:1910/goods‘,true);
  xhr.send();

操作步骤

1. 设置响应头
  Router.use((req,res,next)=>{
    //支持CORS跨域，只需要设置响应头
    res.header(‘Access-Control-Allow-Origin‘,‘*‘);
    // 跨域请求CORS中的预请求
    next();
  })
2. 处理复杂跨域中的OPTIONS请求
  Router.use((req,res,next)=>{
    //支持CORS跨域，只需要设置响应头
    let currentOrigin=req.get(‘Origin‘);
    let allowOrigin=[‘http://localhost:8080‘,‘http://localhost:8081‘];
    if(allowOrigin.includes(currentOrigin)){
      res.set({
        ‘Access-Control-Allow-Origin‘: currentOrigin,
        ‘Access-Control-Allow-Methods‘: ‘GET, POST, PUT, PATCH, DELETE, OPTION‘,
        ‘Access-Control-Allow-Headers‘: ‘Content-Type, Content-Length, Authorization, Accept, X-Requested-Width‘
      })
    }
    // 跨域请求CORS中的预请求
    if(req.method==‘OPTIONS‘){
      res.sendStatus(200);//让options请求快速返回
    }else{
      next();
    }
  })

原文：https://www.cnblogs.com/pleaseAnswer/p/15267400.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！