服务端/浏览器/HTTP 常考问题

浏览器

浏览器缓存（http缓存）

• 浏览器缓存是将文件保存在客户端，在同一个会话中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以直接从缓存中拿出来使用。通过这种方式减少服务器处理请求量，用户获得更快的 访问体验。

• 浏览器的缓存分为强缓存和协商缓存。浏览器向服务端发送请求时，先判断是否命中强缓存在判断是否命中协商缓存。所以强缓存不发送request到服务端。

• 强缓存根据header信息中的expires和cache-control判断。Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高。 expires是http1.0的规范，它包含一个gmt格式的绝对事件字符串，代表资源失效时间。cache-control是http1.1出现的header信息，通过该字段中的max-age值来判断资源失效时间，是一个相对事件，单位是秒。还有其他几个设置值：

  s-maxage 它用于设置代理服务器的缓存时间

  no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。

  no-store：禁止使用缓存，每一次都要重新请求数据。

  public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。

  private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存

• 如果没有命中强缓存，发送请求到服务器查看是否命中协商缓存。服务器通过请求中的header的内容判断如果命中协商缓存，服务器返回304告诉浏览器使用本地缓存，否则返回新的资源。

• last-modify/if-modify-since 浏览器第一次请求一个资源时，浏览器返回的header中会包含一个last-modify值，这是资源最后一次更新的时间。再次发送请求时，header中会包含一个if-modify-since值，该值等于之间返回的last-modify。服务器收到后判断是否命中缓存，如果命中则返回304，且不会返回任何资源。这样做的缺点是当资源在一个周期内有回到原来的样子，last-modify会认为无法使用，于是有了ETag/If-None-Match

• ETag根据资源内容编码，当资源回到原来的样子，ETag值保持不变。服务器通过浏览器request header中If-None-Match判断hi否命中缓存。

• Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。

同源政策与跨域

• 同源策略可防止 JavaScript 发起跨域请求。源被定义为协议、主机名和端口号的组合。两个页面同时拥有相同的协议、主机名和端口号，则被认为是同源的。此策略可防止页面上的恶意脚本通过该页面的文档对象模型，访问另一个网页上的敏感数据。常见的处理跨域的方法，jsonp和cors。
• JSONP （JSON with Padding） 这种方式跨域是通过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后通过callback的方式回传结果，将需要的数据通过参数传入
  优点: 兼容性更好,支持老版本浏览器
  缺点：只支持get请求
• CORS （Cross Origin Resources Sharing）
  其原理是使用自定义的http头部请求，能是服务器支持XMLHttpRequest跨域请求。
  优点：
  1.支持所有类型的http请求
  2.比jsonp有更好的错误处理机制
  3.被大多数浏览器所支持
• h5的postMessage方法
  window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。这种方法不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据。

浏览器渲染

• 将html代码按深度优先遍历生成dom树，将css渲染成cssom树，dom树和cssom树构成render tree。浏览器进入layout环节，将所有的节点位置计算出来，最后绘制（paint）所有节点的内容

回流（reflow）和重绘（repaint）

• 回流发生在页面中的元素发生布局变化时，比如改变宽高，元素的规模尺寸和布局。每个页面都会至少经历一次回流，就是页面第一次渲染的时候
• 重绘发生在元素的样式发生变化，页面只需要重新渲染，比如颜色改变，而不改变盒子的位置、大小等其他属性。

为什么css放在顶部，js放在后面

• 浏览器预先加载css后可以，可以提前开始渲染
• js大部分事件处理功能在页面渲染后才执行，这样可以节省加载时间，提高用户体验

输入url到浏览器地址栏

1. 输入url到地址栏按下回车
2. 浏览器开始解析url，并在缓存中查找，比较缓存是否过期
3. dns解析url对应的ip
4. 根据ip建立tcp连接
5. http发起请求，请求对应的资源
6. 服务端处理请求，浏览器处理http响应
7. 浏览器html解析器将html文件解析，按代码深度遍历生成dom树，css解析器构建cssom树。根据dom树cssom树构成渲染树。浏览器进入layout环节，将所有的节点位置计算出来，最后绘制（paint）所有节点的内容。
8. 关闭tcp连接

浏览器的垃圾回收

​

储存方式与运输方式

cookie，sessionStorage，localStorage

• cookie是在客户端记录用户信息的一种机制，保存在客户端，最大4kb
• session实在服务端记录用户状态的一种机制。session对象数据储存在服务端，通过浏览器和服务端之间传输session_id找到对应的session对象。
• sessionstorage和localstorage是webstorage提供的两种存储方式，sessionstorage仅在会话存在期间可用，localstorage除非数据被清除，否则一直可用。

token、cookie、session

• token是令牌，他的身份认证是唯一的，安全性最好，用于判断用户是否授权
• cookie是储存在客户端的txt文件，用于存储用户信息
• session实在服务端记录用户状态的一种机制。session对象数据储存在服务端，通过浏览器和服务端之间传输session_id找到对应的session对象，回话完成即被销毁。cookie存在session_id。

http

http状态码

• 1** 请求正在处理
• 2** 请求被成功接收并处理( 200 请求成功；201 用户新建或修改数据成功；202 一个请求已成功进入后台；204 用户删除成功）
• 3** 重定向，需要进一步操作以完成请求( 304命中缓存)
• 4** 客户端错误，请求包含语法错误或无法完成请求(400 格式错误；401 用户没有权限，要求身份验证；403，用户得到权限，但是禁止访问；404 错误路径找不到文件)
• 5** 服务器错误，服务器在处理请求的过程中发生了错误 （500 服务器出错；503 服务器超负荷或停机维护）

http1、http2、http3

• Http1.0 与 http1.1

  Http1.0 为了支持多种类型的文件下载，引入了请求头响应头，还提供了Cache机制、状态码等基本参数。

  http1.1 引入了持久连接来提高效率，即在一个tcp连接中传输多个http请求，浏览器为每个域名最多支持六个tcp持久连接。 使用CDN实现域名分片机制。

• Http1.1 与 http2.0

  http1.1的缺陷：1. tcp慢启动 2. 多条tcp连接会竞争固定带宽 3. 表头阻塞问题：在一个请求没有结束之前，其他请求只能是等待状态。

  http2.0 的改进： 1. 一个与域名只使用一个tcp连接 2. 多路复用 解决表头阻塞。

  HTTP2 使用了多路复用技术，可以将请求通过二进制分帧层分成多个带有ID编号的帧数据去传输，这样带来了一个额外的好处，就是当收到一个优先级高的请求时，比如接收到JavaScript或者CSS关键资源的请求，服务器可以暂停之前的请求来优先处理关键资源的请求。

• Http2.0 与 http3.0

  http2.0 的缺陷： tcp的队头阻塞，tcp建立连接的延时

  http3.0 的改进： QUIC协议（Quick UDP Internet Connections）

http/https

• http无需证书，https需要申请证书
• http是超文本传输协议，是明文传输。https是具有安全性的ssl加密传输协议
• http的端口号是80，https的端口号是443
• https的加密过程：https是http将报文信息传输给ssl socket进行加密，ssk socket加密后再将报文发送给tcp socket，目的主机将tcp套接字报文获取后传给ssl socket，ssl解密后交给对应的进程。

get/post

• get：从指定的资源请求数据 post： 向指定的资源提交已处理的数据
• get：get数据放在url后，用？分隔url和传输数据，参数用&相连 post：post数据在http的header包的body中传输
• get：get移交的数据长度有限制，因为浏览器对url长度有限制（2048字符），post没有限制
• get可被浏览器缓存，产生的url地址可以存为书签,get请求参数会被保存在浏览器的历史记录里，post均不行
• get的数据在url中对所有人都可见，安全性更差

TCP三次握手

• 客户端传给服务端syn包请求建立连接客户端进入syn_send状态，服务端返回确认码ack并发出一个自己的syn包，服务端进入syn_recv状态，客户端收到收到服务端的syn+ack包，返回确认码ack。客户端和服务端进入established状态，三次握手完成

TCP四次挥手

• 客户端向服务端发送fin码请求关闭客户端到服务端的数据连接，服务端返回ack码。服务端关闭与客户端的数据连接，发送一个fin码，客户端返回ack码确认。收到ack，服务端进入closed状态，客户端再等待2msl（最大生存时间）时间后进入closed状态。为什么要等2msl？如果最后传给服务端的ack丢失，服务端将在超时后重发fin包，如果在2msl时间内没有等到服务端重发的fin包，则证明四次挥手完成。

网络七层模型

• 应用层: 向客户提供应用，文件传输，电子邮件，虚拟终端 http,ftp,telent,dns,smtp
• 表达层： 数据格式化，代码转化
• 会话层： 解除或建立与别的节点之间的联系
• 传输层: 对报文进行分组或重组，以tcp/udp的形式封装报文 tcp,udp
• 网络层： 为数据包选择路由，将报文发送给目标网络或主机 ip
• 链路层： 负责封装和解析ip报文
• 物理层： 物理形式上的数据传输

CDN

• Content Delivery Network 内容分发网络。是一组在地理上分散的服务器，他们协同工作以应对互联网的内容的快速交付。CDN可以将用户请求重定向到最近的服务节点上，解决网络拥堵的问题，提高用户的浏览体验。

常见的web安全与防御

• sql注入 ：将sql代码伪装到请求的输入参数中，传入到服务器解析并执行的一种方法。防御：对用户输入进行校验
• xss（cross site scripting）：跨站脚本攻击，往web页面中插入恶意的html标签和js脚本，比如在论坛中放置一个看似安全的连接，来获取用户的cookie信息。防御： 将重要的cookie设置为http only，js中的document.cookie会失效
• csrf（cross site request forgery）：跨站点请求伪造，伪装受信任的用户发送请求。防御：通过验证码，强制用户进行交互，避免用户在不知情的情况下被发送请求。