js浏览器相关

缓存

• 关于缓存的好处与优点就不说了，简单说说浏览器的缓存机制。
  当浏览器向服务器发起请求时，首先会判断是否有缓存，如果没有缓存，则正常向服务器发起请求；
  如果有缓存，先判断缓存是否过期，如果未过期，直接使用缓存；
  如果过期，则向服务器发起请求，判断资源是否有更新，如果有更新，则返回新的资源（200）；
  如果资源未更新，则继续使用缓存（304）。

• http报文中与缓存相关的首部字段

  • Cache-Control
    Cache-Control可以控制告诉客户端或是服务器如何处理缓存。只有很多，常用的有no-store，no-cache，max-age。
    no-store表示禁用缓存；no-cache表示可以使用缓存，但是每次都必须到服务器验证资源的有效性（无论资源有没有过期）；max-age表示缓存的时长，是相对时间，单位为秒。优先级高于Expires
  • If-None-Match与ETag
    ETag是资源的唯一标识，优先级高于Last-Modified。
    If-None-Match的值为上次请求资源文件时响应头字段ETag的值，在第二次请求时作为请求头发给服务器，服务端通过 If-None-Match字段来判断在这两次访问期间资源有没有被修改过。如果有修改正常返回资源，状态码200，如果没有修改只返回响应头，状态码304，告知浏览器资源的本地缓存还可用。
  • If-Modified-Since与Last-Modified
    Last-Modified标记资源文件在服务器端最后被修改的时间。
    If-Modified-Since的值为上次请求资源文件时响应头字段Last-Modified的值，在第二次请求时作为请求头发给服务器，服务端通过If-Modified-Since字段来判断在这两次访问期间资源有没有被修改过。如果有修改正常返回资源，状态码200，如果没有修改只返回响应头，状态码304，告知浏览器资源的本地缓存还可用。
  • Expires
    Expires是用来定义缓存到期时间的字段，值为绝对时间。
    有一个弊端：它返回的是服务器的时间，但判断的时候用的却是客户端的时间，如果客户端时间与服务器 时间不一致，则导致缓存时间判断出错。

---

同源策略

• 目的
  同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
• 定义
  所谓“同源”指的是协议相同，域名相同，端口相同。
• 限制
  1. 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。
  2. 无法接触非同源网页的 DOM，非同源网页之间无法进行通信。
  3. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。

跨域手段

• CORS
  CORS 是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。CORS 允许任何类型的请求。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
• WebSocket
  WebSocket 是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
• JSONP
  JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务端改造非常小，缺点是只能发GET请求。
  实现思路：网页通过添加一个