技术爱好者周刊（第40期）

Map vs Object 终极对决:90%开发者不知道的六大性能杀招💡 开篇灵魂拷问为什么Vue3源码中使用了12 - 掘金 `车泽民`

说是map性能好

async/await 必须使用 try/catch 吗?在 JavaScript 中使用 `async/await` - 掘金 `王森`

刚好今天讨论过 try…catch，这位作者也有自己的观点，求同存异。

WebSocket太笨重?试试SSE的轻量级魅力!一、前言 Hello~ 大家好。我是秋天的一阵风~ 关注我时间长一点 - 掘金 `李勇鲁`

轮询的缺点
- 资源浪费
  - 网络带宽：频繁请求会增加不必要的网络流量。
  - 服务器负载：即使空返回，也会增加服务器的CPU和内存负载。
- 用户体验
  - 界面卡顿：频繁请求和更新可能造成界面卡顿。
WebSocket与SSE对比
- 客户端实现
  - WebSocket需处理连接建立、维护、关闭及重连逻辑，SSE相对简单，只需处理接收数据和连接关闭。
- 适用场景
  - WebSocket适用于双向通信场景，如聊天应用、在线游戏；SSE适合单向数据推送场景，如股票价格更新、新闻订阅。
- 实现复杂性
  - WebSocket是全双工通信协议，实现复杂；SSE是单向通信协议，实现中等。
- 数据格式
  - WebSocket支持二进制和文本数据；SSE仅支持文本数据，通常为JSON。
- 控制流
  - WebSocket客户端和服务器都可控制消息发送；SSE服务器完全控制数据推送。
- 安全性
  - WebSocket需要wss://保证安全；SSE通过HTTPS提供数据传输安全。
- 适用场景（补充）
  - WebSocket适用于需要双向交互的应用；SSE适用于服务器到客户端的单向数据流；轮询适用于更新频率不高的场景。
SSE详细介绍
- 定义：允许服务器主动向客户端浏览器推送数据的技术，基于HTTP协议，但不同于传统请求 - 响应模式。
- 工作原理
  - 建立连接：客户端通过HTTP请求订阅SSE端点，服务器响应并保持连接打开。
  - 服务器推送消息：服务器有新数据时通过连接发送事件，包含文本数据流。
  - 客户端接收消息：客户端监听事件，收到新数据时触发处理程序。
  - 连接管理：连接中断时客户端可自动尝试重新连接。
- 代码示例
  - Java后端代码：使用Spring框架的SseEmitter实现，通过无限循环发送待办数量更新事件，每5秒发送一次。
  - 前端代码：创建EventSource对象订阅端点，监听onmessage和onerror事件，组件销毁时关闭连接。
- 改造后效果：客户端只发送一次HTTP请求，后续结果在event.data中获取，改善了界面效果。
总结
- SSE优势与局限
  - 优势：简单、实时性好、开销相对较低，适用于服务器频繁更新客户端数据的场景。
  - 局限：不支持二进制数据传输，只支持文本格式数据流，兼容性在一些旧版浏览器中需polyfill或降级方案。
- 技术选择建议
  - 需要双向通信或传输二进制数据选WebSocket；数据更新频率不高或偶尔查询服务器状态选轮询；需要服务器频繁更新客户端数据选SSE。选择应综合考虑项目需求、资源限制、用户体验和可维护性。

使用electron+vue3+ts+vite搭建桌面端项目 `陆欣`

使用electron+vue3+ts+vite搭建桌面端项目

都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？ - 前端欧阳 - 博客园 `徐堂鑫`

这篇文章详细解释了前端开发中的“编译时”和“运行时”概念。编译时通常发生在Node.js环境中，如使用Webpack或Vite等构建工具将源代码打包成浏览器可执行的代码，分为生产环境和开发环境两种情况。运行时则发生在浏览器中，如Vue应用通过挂载组件到DOM进行渲染。文章还提到Vue的全局构建版本内置了编译器，允许直接在浏览器中编译代码，无需构建工具，但这种方式的性能不如使用构建工具提前打包。最后，文章总结了编译时和运行时的区别，并指出在特殊情况下，编译时也可以在浏览器中进行。