Vite 与 Webpack 比较：选型与折衷选择构建工具时常见的争论点集中在开发体验、插件生态与生产产物质量上。这里给出一个实用的比较框架，帮助在项目中做决定。

总结：当用户在浏览器地址栏输入 URL 并按下回车，一场跨越网络和计算机内部的复杂协作便拉开了序幕。这个过程是前端知识体系的全面体现。 旅程始于 DNS 查询，浏览器需要将用户输入的域名(如 google.com)解析为服务器的IP 地址。这个过程会依次查询浏览器缓存、系统缓存、路由器缓存，直至向 DNS 服务器发起请求。拿到 IP 地址后，浏览器会通过三次握手与服务器建立一条可靠的TCP 连接。如果网站是 HTTPS 的，还需要在此之上进行一次 TLS 握手，以建立加密信道。连接建立后，浏览器便可以发送 HTTP 请求报文，服务器接收到请求后，进行外理，可能涉及数据库查询，业务逻辑计算等，然后返回一个 HTTP 响应报文，其中包含了状态码(如 200 0K )和响应体(通常是 HTML 内容)。浏览器接收到 HTML 后，渲染引擎开始工作，进入关键渲染路径。它会解析 HTML 构建 DOM，解析 CSS 构建CSSOM。在解析过程中，如果遇到其他资源引用(如 JS、图片、字体文件)，浏览器会为这些资源再次发起 HTTP 请求。这些后续请求可能会复用已建立的 TCP 连接(得益于 HTTP 持久连接或 HTTP/2 的多路复用)，从而提高效率。最终，页面被渲染出来，并在后续的“水合”过程中绑定交互事件。几乎每个环节都存在优化空间:DNS 预解析、TCP 预连接、利用 CDN 加速内容分发、启用 HTTP/2 或 HTTP/3、对资源进行压缩和缓存、优化关键渲染路径等等，这些共同决定了最终的用户体验。 详细分析1. URL 解析

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

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

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

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

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

通过动画可视化数据结构和算法: 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 算法