错误之处，欢迎指正，持续更新中。

1. http协议和https协议的区别是什么？

1. https需要申请证书，并且把证书部署到服务器上，进行相关的配置。
2. http的信息是明文传输，https是用SSL/TLS加密传输协议。
3. http使用80端口，https使用443端口。
4. http协议是无状态，无连接的。

• 无状态：数据包的发送、接受都是相互独立的。
• 无连接：通信双方都不能长久的维持对方信息。

2. https协议中s指的是什么？

s指的是SSL/TLS协议。
该协议的作用是：

1. 加密信息传播，无法被窃听。
2. 配备身份证书，防止被冒充。

3. 简单介绍http状态码。

1. 2**表示成功，例如200。
2. 3**大部分表示重定向，请求的URL已移走，返回信息中应该包含一个URL，为资源现在所处的位置。 其中304表示未修改，也就是自从客户端上次请求后，请求的内容未曾修改过，此时服务端返回304，不会返回响应内容，进而节省带宽和开销。
3. 4**表示客户端错误，例如404未找到资源，403请求被服务器拒绝。
4. 5**表示服务端错误。

4. 简要说明get和post请求的区别？

1. get的数据在URL上是可见的。
2. get请求对长度有限制。
3. get请求的数据可以收藏为书签，post不可以。
4. post请求后，按后退、刷新按钮数据会被重新提交，get不会。
5. get编码类型为application/x-www-form-url，
   post编码类型为encodeapplication/x-www-form-urlencoded或multipart/form-data
6. get历史参数会被保存在浏览器中，post不会。
7. get只允许发ASCII，post没有限制。
8. get安全性相对来说较差，因为发送的数据是URL的一部分。

5. 跨域问题是如何出现的以及如何解决？

访问的URL，协议、域名、端口号，有任意一个不同就算跨域。
js文件、css文件、图片文件都是被允许跨域请求的。
后端接口数据，其他域的cookie，其他域的缓存是不允许跨域请求的。
解决跨域：

1. JSONP
   利用script标签的src属性允许跨域的机制来进行JSONP请求，浏览器会将script标签src属性请求得到的数据，当作js代码执行。
   JSONP在发送的时候，URL上参数会带一个callback：

<script>
function func(message) {
  console.log(message);
}
</script>
<script src="http://www.test.com/jsonp?callback=func" type="text/javascript" charset="utf-8"></script>

服务端会将callback与要返回的数据进行拼接，上述代码返回的结果是func({"name": "chris"})，执行这段代码，调用函数func，传入的参数就是请求得到的数据，就打印出了返回的数据。

2. iframe

• html1页面

/*http://127.0.0.1:5500/html1*/
let iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "http://127.0.0.1:5501/html2.html#chrisdean";  //向html2页面传递#chrisdean
document.body.appendChild(iframe);

window.addEventListener("hashchange", () => {
  console.log(location.hash.substring(1));
  //监听当前页面的hash变化
});

• html2页面

/*http://127.0.0.1:5501/html2*/
if (location.hash === '#chrisdean') {
  const age = 22;
  try {
    parent.location.hash = age;
  } catch (e) {
    //IE、Chrome下的安全机制无法修改parent.location.hash，所以要利用一个中间的代理iframe 
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://127.0.0.1:5500/html3.html#' + age;
    document.body.appendChild(ifrproxy);
  }
}

• html3页面

/*http://127.0.0.1:5500/html3*/
parent.parent.location.hash = self.location.hash.substring(1);

3. 代理
   浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev命令时实际上是用node运行了一个服务器，因此 proxy实际上是将请求发给本地的服务器，再由本地服务器转发给目标服务器，做了一层代理。
4. 解决线上跨域
   使用nginx反向代理。

6. 在浏览器输入URL后发生了什么？

1. 检查缓存中有没有这个域名对应的解析过的IP地址。
2. DNS解析URL，获取IP地址。
3. 根据IP建立TCP连接。
4. 发送http请求。
5. 服务器处理请求，返回响应结果。
6. 解析html标签，构建DOM树。
7. 解析CSS样式，生成CSS规则树。
8. 合并DOM树和CSS规则树，生成render树。
9. 布局render树，尺寸、位置。
10. 绘制render树，颜色。
11. 浏览器将信息传递给GPU，最终显示在屏幕上。

7. 如何解决页面编码和被请求的资源编码不一致？

ajax请求时传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent。

8. 浏览器缓存是如何实现的？

浏览器在第一次请求资源后，会获取到请求的结果以及缓存标识，接下来，浏览器会根据第一次请求返回的响应头来确定缓存处理的方式，分别是强缓存和协商缓存。

1. 强缓存
   不会向服务器发送请求，直接从缓存中读取资源。
   强缓存可以通过设置两种HTTP Header实现：Expires和 Cache-Control。

• 当Cache-Control: max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。
  Cache-Control可以在请求头或者响应头中设置，并且可以组合使用。
  no-cache：客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用Cache-Control的缓存控制方式做前置验证，而是使用Etag或者Last-Modified字段来控制缓存。这个名字有一点歧义，并不是说浏览器不能缓存，只是浏览器在使用缓存数据时，需要先确认一下资源文件是否还跟服务器保持一致。
  no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存。
  max-age：max-age=xxx表示缓存内容将在xxx秒后失效。
  一般，我们会设置Cache-Control的值为public, max-age=xxx，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。

2. 协商缓存
   强缓存依据某个时间或者某个时间段，所以并不会响应服务端资源文件的变化，一旦资源文件发生了变化，那么强缓存的文件并不会在时间范围之内更改，这样就造成了服务器和浏览器文件不一致的问题，那么此时我们就需要使用协商缓存。
   协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
   协商缓存可以通过设置两种HTTP Header：Last-Modified或者ETag实现。

• Last-Modified是该资源文件最后一次更改时间，服务器会在Response Headers中返回，浏览器在下一次发送请求时，放到Request Header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。
• Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到Request Header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。