大厂前端面试|# 开始
前端工程师有很多，而是技能全面、独当一面的前端工程师到哪里都是“香饽饽”，企业争抢。所以，技术广度将决定你的稀缺性，以及未来的发展空间。本章将通过多个面试题，讲解前端面试常考的技术广度问题，涉及前端、移动端、服务端等全流程。
## 为何要考察
现代前端工程师已经不单单是开发页面了，你可能需要去开发移动端、服务端。或者和他们有亲密的合作，你需要了解他们的运作流程。
企业想要招聘到一些全能型的工程师，能在工作中串通上下流程，而不是只做开发。
## 考察重点
- 移动端相关支持
- HTTP 网路相关支持
- nodejs 相关支持
## 注意事项
不会从 0 基础讲起，基础不熟悉的可以给我提问
## 看几个问题
列几个代表性的问题
在当前的前端开发领域中，网页多标签页之间的通信是一个非常重要的技术话题。随着Web应用的复杂性增加，前端开发者不仅仅局限于开发单个页面，还需要处理页面间的通信问题。企业为了招聘能够处理前后端交互、多页面数据同步的全能型前端工程师，通常会在面试中考察应聘者对这一技术点的理解和掌握程度。
我们来看看通过什么方式实现多标签页之间的通信。
1. **WebSocket**：WebSocket协议为浏览器和服务器提供了一个全双工通信机制。这种方式可以创建持久的连接，并允许数据以流的形式传输。对于多标签页通讯而言，服务端只需要发送一次消息，所有监听的标签页都能接收到更新。WebSocket具有跨域的优势，适用于需要实时通信的场景。由于需要服务端的参与，这就意味着需要配置相应的服务器端逻辑以支持WebSocket通讯。
2. **localStorage**：这是一种在客户端存储数据的机制，适用于同域下不同标签页之间的数据共享。一个标签页修改了localStorage中的数据，另一个标签页通过监听`storage`事件来获取数据更新。这种方式简单易用，但它有同源策略限制，并且存储空间有限。localStorage通常用于不需要即时通讯的场景，因为事件监听会有一定的延迟。
3. **SharedWorker**：SharedWorker是Web Workers的一种，它可以被同一域下的多个标签页共享。SharedWorker适用于需要跨标签页共享数据或者进行计算的复杂场景。在使用SharedWorker时，可以通过`postMessage`方法和`onmessage`事件处理来在不同标签页之间传递消息。不过需要注意的是，Web Worker不是线程而是独立的后台线程，不支持DOM操作。
4. **iframe通讯**：iframe内嵌页面作为一个独立的域，可以使用`window.postMessage`方法进行跨域通讯。postMessage提供了一种安全的消息传递方式，可以用来从一个iframe向另一个iframe发送消息。此外，父页面也可以向iframe发送消息，同时子页面也可以向父页面发送消息。这种通讯方式的事件监听器和消息发送都较为简单，但需要确保通过`event.origin`来验证消息来源的合法性，避免安全风险。
在这些方法中，WebSockets和postMessage都需要进行跨源通信策略设置，这是因为在浏览器中出于安全考虑，默认是不允许跨域请求的。不同浏览器对这些特性支持的程度也有差异，因此在实际应用中需要对浏览器兼容性进行充分考虑。
总结来看，前端工程师需要了解并掌握多种通讯方式来实现多标签页之间的数据同步。每种通讯方式都有其使用场景和限制，例如WebSockets适合于需要实时响应的场景；localStorage适合于非实时的、存储空间要求不高的场景；SharedWorker适合于需要多标签页共享复杂逻辑的场景；postMessage适合于跨域和iframe内的场景。掌握这些技术点对于在面试中展示自己的技术广度和深度非常重要。企业寻求的不仅仅是能够开发页面的工程师，更希望找到能够理解整个前端架构、前后端协作的开发者，这样才能提高整个开发团队的效率和产品的质量。
