网络与浏览器

高频

什么是同源策略以及跨源资源共享（CORS）？

同源策略，是浏览器的一种安全机制，通过限制文档和脚本与来自另一个源的资源的交互。 从而隔离潜在的有害文档，保护用户的安全和隐私。

跨源资源共享是用于在不同的源中获取资源的一种机制。解决跨域问题的方案：

  • jsonp（json+padding，填充式的json）：Js跨域请求ajax数据是不可以的，但是js跨域请求js脚本是可以的。 <src><link><img>自带跨域属性，（js创建的img标签不带，需要添加crossOrigin: "anonymous"属性）。 JSONP原理就是动态插入带有跨域url的script标签，执行完script后，会调用callback函数，参数就是获取到的数据。 缺点是只能进行get请求，容易被劫持（类似csrf），优点是兼容性好。
  • nginx反向代理：利用nginx把跨域反向代理为不跨域，将server.server_name设置为前端网址， 在server.location里设置proxy_pass 后端网址，这样就不存在跨域了。
  • cors：通过设置响应头信息，允许跨域请求。但会产生额外的请求(预检)， 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求（预检）， 服务端返回头信息中需要返回Access-Control-*相关字段，这是需要后端配置的。

跨域如何减少预检请求？

  • 预检缓存，预检缓存的行为与浏览器缓存机制类似。Access-Control-Max-Age 响应头表示结果可以在浏览器缓存中缓存多长时间。
  • 使用后端nginx反向代理，就可以完全避免预检请求，因为此时不存在 CORS。
  • 使用websocket
  • 使用简单请求

讲一讲什么是URL编码？

Url编码通常也称为百分号编码，通过使用%百分号加上该字节的十六进制组成编码。 因为URL中有些字符会引起歧义，例如URL参数字符串中如果包含”&”或者”%”就会造成服务器解析错误，因此就需要对其进行编码。

encodeURI用于将字符串作为 URI 进行编码。其目的是对目标URI进行编码使之成为一个合格的URI。

encodeURIComponent用于将字符串作为URI参数进行编码。因此encodeURIComponent还必须转义用于分隔URI各个部分的标点符号，以防止歧义。

Url编码默认使用的字符集是US-ASCII[ˈæski]。对于Unicode字符，则使用%百分号加上该字节的utf-8字节组成编码。

强制缓存和协商缓存有什么区别？

  • 强制缓存：根据响应头里的过期时间Expires判断，当浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存并返回， 并不会向服务端发起请求，记录为200状态。
  • 协商缓存：客户端向服务端发送请求进行协商判断，当浏览器再次加载资源时，如果资源没有变化则继续使用本地缓存，记录为304状态； 如果资源发生变化，服务端响应数据，记录为200状态。

浏览器缓存(Brower Caching)是浏览器将用户最近请求过的文档存储在本地磁盘里，当访问者再次访问时，浏览器就可以直接从本地磁盘加载文档。

如何清除缓存，强制刷新？

  • 在服务器或者请求头上加缓存清除的字段，即Cache-Control no-store;字段。
  • 在前端页面可以加<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 标签。
  • 在url上加随机字符串。

get/post 请求的区别？

  • 在语义上，get请求用于获取数据，是幂等的，多次相同的GET请求不能对服务器的状态有影响，因此get请求可以被缓存以提高性能； post请求用于提交数据，不是幂等的，会对服务器状态产生影响，不能缓存。
  • 在参数上，get传参通过地址URL传递，只支持ASCII字符，只能URL编码，长度最多2KB左右； post将参数存放在HTTP的包体内，没有字符类型限制，有多种编码格式，长度最多在10MB左右。

讲一讲https以及证书（SSL）

  • https是密文传输，通过非对称密钥，数字证书等方式完成数据加密传输。解决了http明文传输易受到中间人攻击的问题。
  • 非对称加密是指一对不同的密钥，用其中一个密钥加密的密文，只能被另一个密钥解开，公开的密钥称为公钥，不公开的称为私钥。 能解决对称加密被中间人获取到密钥的问题，但仍不能解决中间人在中间代理信息的问题，即中间人获取到公钥后，对两端用自己的公钥私钥代理信息。
  • 证书则能解决中间人代理信息的问题
    1. 首先服务端使用摘要算法（例如MD5）将证书明文（例如域名，服务端公钥）生成摘要，然后送给CA权威机构。
    2. CA机构将摘要用CA机构自己的私钥进行加密，得出来的叫签名，然后附在证书上。
    3. 证书被发送到客户端，客户端通过同样的摘要算法对证书明文计算摘要，然后用CA机构的公钥解开签名得到解密的摘要， 两者比对相同，则证明证书没有篡改，证书上服务端的公钥是该服务端生成的公钥，因此客户端拿到了服务端的公钥。
  • 浏览器向服务器发起Https请求的流程如下：
    1. 首先浏览器向服务器发起请求。
    2. 服务器将证书机构颁发给自己的证书传递给浏览器。
    3. 浏览器从本地安装的根证书中找到证书机构的公钥，用公钥来验签证书的正确性，确保是证书机构用私钥签名的合法证书，从而拿到了服务器公钥。
    4. 浏览器随机生成一个对称秘钥key，用证书中的服务器公钥加密这个key，再传输给服务器。
    5. 服务器用私钥解密后取出对称秘钥key，并用该key加密确认内容返回给客户端，告知可以开始通信。
    6. 浏览器与服务器开始采用该key进行加密通信。

http的状态码说几个？

1xx(临时响应)2xx(请求成功)3xx(重定向)4xx(请求错误)5xx(服务器错误)

  • 100：请求者应当继续提出请求。
  • 101：切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议。
  • 200：正确的请求返回正确的结果。
  • 201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
  • 202：请求是正确的，但是结果正在处理中。这时候客户端可以通过轮询等机制继续请求。
  • 300：请求成功，但结果有多种选择。相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择。
  • 301：请求成功，但是资源被永久转移。返回信息会包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替。
  • 304：请求的资源并没有被修改过。服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源。
  • 400：请求出现错误，比如请求头不对等。
  • 401：没有提供认证信息。请求的时候没有带上 Token 等。
  • 402：为以后需要所保留的状态码。保留，将来使用。
  • 403：请求的资源不允许访问。就是说没有权限。
  • 404：请求的内容不存在。
  • 500：服务器错误。
  • 501：请求还没有被实现。服务器不支持请求的功能，无法完成请求。

Cookie、localStorage、sessionStorage、IndexedDB的区别？

  • Cookie有过期时间，Cookie的信息会在http请求的时候携带到服务器。
  • sessionStorage是会话存储，浏览器关闭就会消失。
  • localStorage是永久存储，最大限制一般为5-10MB，所有数据都将作为字符串存储。
  • IndexedDB是前端数据库，能存储几百MB的数据，api比较复杂。

TCP与UDP是什么？

  • UDP是一种无连接的，不可靠的，基于报文的传输层通信协议，能够多播广播。
  • TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议，使用三次握手协议建立连接、四次挥手断开连接。
    • 三次握手最主要的目的就是双方确认自己与对方的发送与接收是正常的：
      • 第一次握手（客户端发送 SYN 报文给服务器，服务器接收该报文）：客户端什么都不能确认；服务器确认了对方发送正常，自己接收正常
      • 第二次握手（服务器响应 SYN 报文给客户端，客户端接收该报文）：客户端确认了：自己发送、接收正常，对方发送、接收正常；服务器确认了：对方发送正常，自己接收正常
      • 第三次握手（客户端发送 ACK 报文给服务器）：客户端确认了：自己发送、接收正常，对方发送、接收正常；服务器确认了：自己发送、接收正常，对方发送、接收正常

    服务器收到客户端第一次握手信息之后，此时双方还没有完全建立其连接，服务器会把这种状态下的请求连接放在一个队列里，我们把这种队列称之为半连接队列。同样，在关闭时， TCP 提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力，这叫半关闭特性。

    • 终止一个 TCP 连接要经过四次挥手。这是由于 TCP 的半关闭（half-close）特性造成的，因此需要同时关闭客户端和服务端，双方都应该知道对方已关闭，客户端或服务端均可主动发起挥手动作。例如客户端先发起的关闭请求：
      • 第一次挥手客户端发送给服务端一个信息，客户端关闭TCP链接，但并不知道服务端关闭，因此处于等待状态1。
      • 第二次挥手服务端发送给客户端一个信息，客户端接受到后知道服务端已经知道自己打算关闭了，于是客户端到服务端的连接释放，客户端处于等待状态2，此时的 TCP 处于半关闭状态，服务端仍可发送数据到客户端。
      • 第三次挥手服务端发送给客户端一个信息，表示服务端也想关闭连接，此时服务端处于一种等待状态，客户端接收到后处于等待状态3
      • 第四次挥手客户端发送给服务端一个信息，服务端收到后关闭连接，

什么是防盗链机制？

防盗链技术主要用于防止网站资源被未经授权的第三方网站引用，特别是针对图片、视频、文档等静态资源。 这不仅增加了原网站的服务器负担，还可能导致原网站的带宽资源被过度消耗，影响正常用户的访问速度和体验。

防盗链通常通过检查HTTP请求的Referer头部来实现。 如果Referer头部显示请求来自未经授权的网站，服务器可以拒绝请求，返回错误消息或重定向到一个警告页面。

  • Web服务器配置：Web服务器如Apache、Nginx等，都支持通过配置文件实现防盗链设置。
  • 使用CDN服务：一些内容分发网络（CDN）提供商提供了防盗链功能。

CDN是什么？*

CDN，内容分发网络。 是一组分布在不同地理位置的服务器，其目的是更有效地向用户分发互联网内容。 通过缓存内容（如网页、图片、视频和其他类型的网络数据）在多个服务器上，并根据每个用户的地理位置将请求路由至最近的服务器。 CDN可以显著减少延迟，加快加载速度，并提高网站的安全性和可靠性。

etag是什么？*

Etag 是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。 具体内部含义是使服务器控制的，就像Cookie那样。

ETag 是“实体标签”（Entity Tag）的缩写，是资源的一个唯一标识，主要是用来解决修改时间无法准确区分文件变化的问题。

一般是一个文件的哈希值，用于缓存。

HTTP中并没有指定如何生成ETag，哈希是比较理想的选择。

浏览器请求获得文件后，服务器返回该文件的最后修改时间Last-Modified。 某些文件修改非常频繁,比如在秒以下的时间内进行修改(比方说 1s 内修改了 N 次),If-Modified-Since能检查到的粒度时 s 级的,这种修改无法判断(或者说 UNIX 记录 MTIME只能精确到秒)

user-agent是什么？*

UserAgent，简称UA，是一个使服务器能够识别用户使用的浏览器类型、版本以及运行浏览器的操作系统等信息的字符串。 它作为浏览器请求头部信息的一部分发送给服务器，以便服务器可以返回合适格式和版本的内容。

Chrome User Agent
Windows电脑上，Chrome浏览器的UA：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Firefox User Agent
Windows电脑上，Firefox浏览器的UA：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0
Safari User Agent
Mac电脑上，Safari浏览器的UA：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15
Android User Agent
Android手机上，Chrome浏览器的UA：
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36
iOS User Agent
iPhone手机上，Safari浏览器的UA：
Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

如何大文件分片上传？

websock知道多少？

如何优化白屏时间？

简介HTML