阿里面试题整理（其二）

http2 和 1 的区别

• 浏览器与服务器通信过程

  • TCP 连接： 浏览器与服务器三次握手，建立 TCP 连接
  • 客户端请求： 建立 TCP 连接后，客户端就会向服务器发送一个 HTTP 请求信息（比如请求 HTML 资源，我们暂且就把这个称为“ HTML 请求”）
  • 服务器响应： 服务器接收到请求后进行处理并发回一个 HTTP 响应信息

• HTTP/1

  • 每完成一次请求和响应，TCP 连接就会断开，因为 TCP 连接会有 RTT（Round Trip Time, 往返时间），每请求一个资源就要有一次 RTT，所有需要加载资源比较多得网站会打开很慢。

• HTTP/1.X

  • TCP 可以持久连接，一次 TCP 连接要等到同域名下的所有资源请求/相应完毕了连接才会断开，节约请求的时间。
  • HTTP1.x 在使用时，header 里携带的内容过大，增加了传输的成本，在移动端增加用户流量。

• HTTP/2

  • HTTP/2 采用二进制格式而非文本格式
  • HTTP/2 是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行
  • 使用报头压缩，HTTP/2 降低了开销
  • HTTP/2 让服务器可以将响应主动“推送”到客户端缓存中

• HTTPS 与 HTTP 的一些区别

  • HTTPS 协议需要到 CA 申请证书，一般免费证书很少，需要交费。
  • HTTP 协议运行在 TCP 之上，所有传输的内容都是明文，HTTPS 运行在 SSL/TLS 之上，SSL/TLS 运行在 TCP 之上，所有传输的内容都经过加密的。
  • HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
  • HTTPS 可以有效的防止运营商劫持，解决了防劫持的一个大问题。

跨域解决方案

完整版：（https://juejin.cn/post/6844903767226351623）

• 首先说明 3 个问题：

  • 如果是协议和端口造成的跨域问题“前台”是无能为力的。
  • 在跨域问题上，仅仅是通过“URL 的首部”来识别而不会根据域名对应的 IP 地址是否相同来判断。“URL 的首部”可以理解为“协议, 域名和端口必须匹配”。
  • 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

• 同源策略限制内容有：

  • Cookie、LocalStorage、IndexedDB 等存储性内容
  • DOM 节点
  • AJAX 请求发送后，结果被浏览器拦截了

• 但是有三个标签是允许跨域加载资源：

  • img src=XXX
  • link href=XXX
  • script src=XXX

• 常见跨域场景

  • 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

• 解决方案

  • 通过 JSONP

    • JSONP 优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击。

  • CORS

    • CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

  • postMessage

    • postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题：
      • 页面和其打开的新窗口的数据传递
      • 多窗口之间消息传递
      • 页面与嵌套的 iframe 消息传递
      • 上面三个场景的跨域数据传递

  • websocket

    • Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。

  • Node 中间件代理

    • 同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。 代理服务器，需要做以下几个步骤：
      • 接受客户端请求 。
      • 将请求 转发给服务器。
      • 拿到服务器 响应 数据。
      • 将 响应 转发给客户端。

  • nginx 反向代理

    • 实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

  • window.name + iframe

  • location.hash + iframe

  • document.domain + iframe

• 总结

  • CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案
  • JSONP 只支持 GET 请求，JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。
  • 不管是 Node 中间件代理还是 nginx 反向代理，主要是通过同源策略对服务器不加限制。
  • 日常工作中，用得比较多的跨域方案是 cors 和 nginx 反向代理

浏览器为什么要阻止跨域？

同源策略/SOP ( Same origin policy )是一种约定，由 Netscape 公司 1995 年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

xss 攻击如何避免

完整版：（https://tech.meituan.com/2018/09/27/fe-security.html）

• 利用模板引擎 开启模板引擎自带的 HTML 转义功能
• 避免内联事件 在 JavaScript 中通过 .addEventlistener() 事件绑定会更安全。
• 避免拼接 HTML 前端采用拼接 HTML 的方法比较危险，如果框架允许，使用 createElement、setAttribute 之类的方法实现。或者采用比较成熟的渲染框架，如 Vue/React 等。
• 在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范。
• 通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果。
• 可使用 XSS 攻击字符串和自动扫描工具寻找潜在的 XSS 漏洞。

如何优化首屏时间？除了 SSR 部署，还有什么别的解决方案？

• 服务端渲染

• 首屏内容静态缓存（pretender spa plugin）

• 图片懒加载

• 无法避免白屏的时候使用加载占位图

数组跳跃

• 输入: [2,3,1,1,4]
• 输出: 2
• 解释: 跳到最后一个位置的最小跳跃数是 2。 从下标为 0 跳到下标为 1 的位置，跳  1  步，然后跳  3  步到达数组的最后一个位置。

var jump = function (nums) {
	// 定义一个轮询方法，传入原始数组，当前下标，跳跃的步数统计。
	function one(num, start, step) {
		// 截取当前下标以及当前下标能够跳跃到的数组段落。
		let arr = num.slice(start, start + num[start] + 1)
		// 如果当前下标已经在最后了，返回步数。
		if (arr.length == 1) {
			return step
		}
		// 如果当前下标是0，那么返回无法跳跃。
		if (arr[0] === 0) {
			return false
		}
		// 如果当前下标能够一次性跳跃到原始数组末尾，返回步数+1。
		if (arr[0] + start >= num.length - 1) {
			return step + 1
		}
		// 定义最大值，一次跳跃了几个。
		let max = 0
		let jump = 0
		arr.forEach((item, index) => {
			if (item + index > max) {
				max = item + index
				jump = index
			}
		})
		// 如果一次跳跃了0个，返回无法跳跃。
		if (jump === 0) {
			return false
			// 否则，将跳跃后的结果继续传入方法中，步数+1。
		} else {
			return one(num, jump + start, step + 1)
		}
	}
	return one(nums, 0, 0)
}