阿里面试题整理(其二)

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)
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值