前端(JavaScript)基础知识学习之浏览器相关与通信、跨域(CORS)

浏览器相关知识

前端及时通信

短轮询

Comet

SSE

SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。
总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为流信息本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdLHFJ2E-1608210834262)(/images/ryf-server-sent-events.jpg)]

但是，SSE 也有自己的优点。

• SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
• SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
• SSE 默认支持断线重连，WebSocket 需要自己实现。
• SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
• SSE 支持自定义发送的消息类型。

websocket

WebSocket 协议在 2008 年诞生，2011 年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bkme1XhY-1608210834264)(/images/ryf-websocket.png)]
其他特点包括：

• （1）建立在 TCP 协议之上，服务器端的实现比较容易。

• （2）与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

• （3）数据格式比较轻量，性能开销小，通信高效。

• （4）可以发送文本，也可以发送二进制数据。

• （5）没有同源限制，客户端可以与任意服务器通信。

• （6）协议标识符是 ws（如果加密，则为 wss），服务器网址就是 URL。

• 优点：真正意义上的实时双向通信，性能好，低延迟

• 缺点：独立与 http 的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器

webworker

service worker

浏览器同源

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSRF 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOYyGUqy-1608210834264)(/images/site-origin.webp)]

可实现跨域的标签
<link>
<img>
<script>

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKvHKoVs-1608210834265)(/images/cross-site-type.webp)]

如何实现跨域

JSONP

最经典

CORS

最流行

NGINX

最方便

其他方案