1. 轮询（不适于频繁请求的场景）

• 长轮询 前端发起请求，获取最新的消息，后端不会响应，除非有最新消息，再响应前端
  会出现线程堆积，造成服务器压力过大
• 短轮询 隔一段时间就发送请求，以便获取最新的消息，造成资源浪费，

什么是 web 性能？

MDN 上的 web 性能定义： Web 性能是网站或应用程序的客观度量和可感知的用户体验。

• 减少整体加载时间： 减少文件体积、减少 HTTP 请求、使用预加载
• 使得网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载
• 平滑和交互性：使用 CSS 替代 JS 动画、减少 UI 重绘
• 感知表现：你的页面可能不难做到更快，但你可以让用户感觉更快。耗时操作要给用户反馈，比如加载动画、进度条、骨架屏等提示信息
• 性能测定：性能指标、性能测试、性能监控持续优化

如何进行 Web 性能优化？

1. 首先需要了解性能指标 - 多快才算快？
2. 使用专业的工具可量化的评估出网站或应用的性能表现
3. 然后立足于网站页面响应的生命周期，分析出造成较差性能表现的原因
4. 最后进行技术改造、可行性分析等具体的优化实践
5. 迭代优化

设计

规则

1. 贪吃蛇初始为 1 点，可通过上、下、左、右键控制方向移动
2. 每吃一个食物分数+1，每吃 10 个食物，等级+1，每升一级，速度 + 20ms
3. 贪吃虫不能撞墙和自己，否则游戏失败
4. 每吃掉一个食物，贪吃蛇长度+1，下一个食物会在随机位置出现。

pnpm(performant npm) 通过软、硬链接（hark link、symbolic link） + 全局存储（store）结合的依赖管理方式完全实现了依赖树结构的包管理方式，解决了 npm3 及 yarn 中的幽灵依赖和 npm 分身的问题，提升了依赖包的安装速度，减小了磁盘空间占用。

vw/vh 和 vmin/vmax

vmin 可以照顾手机端 横屏和竖屏 的显示效果

通过动画可视化数据结构和算法: https://visualgo.net/zh

网站里面包含了排序、链表、哈希表、二叉搜索树、递归树、循环查找等常见算法动画，而部分高级算法，现今也只能在 VisuAlgo 上找到具体的动画展示效果。

Asset Modules 资源模块，针对于图片字体等这一类型的文件模块，无须额外的预处理器，webpack 可以通过一些配置完成对它们的解析，这是 webpack5 新加入的，和 file-loader,raw-loader,url-loader 预处理器功能相似

性能优化

Vue 3 在性能方面有显著提升。它引入了一个全新的虚拟 DOM 算法（Faster Virtual DOM），该算法使用了更有效的数据结构和算法，使得在渲染大型组件树时更快速。
另外，Vue 3 还引入了静态树提升（Static Tree Hoisting）技术，通过在编译阶段将静态部分的节点提升为常量，进一步减少了运行时的开销。

虚拟 DOM 算法

CI 环境下的 npm 优化

CI 环境下的 npm 配置 和 本地环境下的 npm 操作有些许不同，我们首先来看看 CI 环境下的 npm 优化方法

1. 合理使用 npm ci 命令 和 npm install 命令

顾名思义，npm ci 命令就是专门为 CI 环境准备的安装命令，相比于 npm install命令，它的不同之处有以下几点。

Webpack 的热更新（Hot Module Replacement，HMR）是一种使得开发者在修改代码时，无需手动刷新浏览器页面即可立即查看到更新效果的技术。其原理如下：