引言在前端开发中，路由管理是构建单页面应用（SPA）的核心部分。Vue Router作为Vue.js官方的路由管理器，提供了两种路由模式：Hash模式和History模式。这两种模式的核心区别在于如何在浏览器中管理 URL 的变化，尤其是在 URL 路径与页面的映射关系上。下面我们从这两种模式的底层实现、优缺点及 Vue 配备的 Vue Router 的优势进行详细分析。
1. Hash模式与History模式的区别1.1 Hash模式Hash模式是通过 URL 中的 # 字符来模拟不同的路由。浏览器的哈希值不会引起页面的重新加载，浏览器会将 URL 中的 # 后的部分作为页面的一部分进行处理，通常通过 JavaScript 来控制页面的更新。
特点：
URL格式：http://wyxup.top/#/path
不发送到服务器：浏览器不会将#后面的部分发送到服务器，因此服务器不需要做任何配置。
兼容性好：Hash模式在所有浏览器中都能正常工作，包括一些老旧的浏览器。
优点：
无需额外的服务器配置：由于 # 后的路径并不会真正发送给服务器，所以服务器不需要额外的路由配置来处理 UR ...
Vue 2 的模板编译流程是将开发者编写的模板（template）转换为渲染函数（render）的过程。这个过程是 Vue 2 的核心之一，它使得 Vue 能够将模板中的声明式语法转换为高效的 JavaScript 代码，最终生成虚拟 DOM 并渲染到页面上。
以下是 Vue 2 模板编译流程的详细解析，包括各个阶段的底层逻辑。
1. 模板编译的整体流程Vue 2 的模板编译流程可以分为以下几个阶段：
解析（Parse）：将模板字符串解析为抽象语法树（AST）。
优化（Optimize）：对 AST 进行静态标记，优化渲染性能。
生成代码（Generate）：将 AST 转换为可执行的渲染函数（render 函数）。
2. 解析阶段（Parse）2.1 目标将模板字符串解析为抽象语法树（AST）。AST 是一个树形结构，用于描述模板的语法结构。
2.2 解析过程Vue 2 使用一个基于正则表达式的解析器，逐字符扫描模板字符串，并根据 HTML 和 Vue 的语法规则生成 AST。
解析器的核心逻辑：
解析器会识别模板中的 HTML 标签、属性、文本内容以及 Vue 的指令（ ...
知识星球
未读1. 垃圾回收的背景与意义在现代编程语言中，内存管理是一个核心问题。手动管理内存（如C/C++中的malloc和free）容易导致内存泄漏或野指针等问题。为了解决这些问题，高级语言（如JavaScript）引入了自动垃圾回收机制，由宿主环境（如浏览器引擎）自动管理内存的分配和释放，使开发者可以更专注于业务的开发。
浏览器的垃圾回收机制的目标是：
自动回收不再使用的内存 ，防止内存泄漏。
优化内存使用 ，提高程序性能。
减少开发者的负担 ，让开发者专注于业务逻辑。
2. 内存分配与回收的基本原理2.1 内存分配当程序创建对象、字符串、数组等数据结构时，浏览器会从堆内存（Heap）中分配一块内存。堆内存是一个动态区域，用于存储程序运行时创建的所有对象。
2.2 内存回收当对象不再被程序使用时，垃圾回收器会将其占用的内存标记为“可回收”，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会并在适当的时机释放这块内存。
2.3 关键问题：如何判断对象是否“不再使用”？这是垃圾回收的核心问题。浏览器通过以下两种主要策略来判断对象是否可以被回收：
引用计数 ：通过统 ...
什么是微前端？微前端（Micro Frontends）是一种将前端应用拆分为多个独立模块的开发方式。每个模块可以独立开发、测试、部署，最终组合成一个完整的应用。简单来说，微前端就是将“微服务”的理念应用到前端开发中，将 Web应用由单一的大型个体应用转变为多个小型前端应用聚合的应用。
为什么会有微前端？随着前端应用的复杂度不断增加，传统的单体前端架构逐渐暴露出一些问题：
代码臃肿：随着功能增加，代码库变得庞大，难以维护。
团队协作困难：多个团队在同一个代码库中开发，容易产生冲突。
技术栈单一：整个应用必须使用同一种技术栈，限制了技术的灵活性。
部署风险高：每次更新都需要重新部署整个应用，增加了风险。
微前端的出现就是为了解决这些问题，它允许团队独立开发和部署各自的模块，提升了开发效率和灵活性。
实现微前端的方案
方案
描述
优点
缺点
iframe
使用iframe嵌入不同的子应用
简单易用，天然隔离
性能较差，SEO不友好，通信复杂
Web Components
使用Web Components创建自定义元素，实现模块化
原生支持，兼容性好
历史系统改造成本高，通信 ...
前端开发
未读1. 什么是浏览器缓存？浏览器缓存是浏览器将一些静态资源（如 HTML、CSS、JavaScript、图片等）保存在本地的一种机制。这样，当用户再次访问同一个网站时，浏览器可以直接从本地加载这些资源，而不需要重新从服务器下载，从而提升页面加载速度和用户体验。
简单来说，浏览器缓存就是 “把东西存起来，下次直接用” 的一种技术。
2. 为什么需要浏览器缓存？
提升页面加载速度：从本地加载资源比从服务器下载快得多。
减少服务器压力：缓存可以减少服务器的请求量，节省带宽。
提升用户体验：页面加载更快，用户会更满意。
3. 浏览器缓存的类型浏览器缓存主要分为两种：
强缓存：直接从本地加载资源，不向服务器发送请求。
协商缓存：向服务器发送请求，由服务器决定是否使用缓存。
4. 强缓存强缓存是通过 HTTP 响应头中的 Cache-Control 和 Expires 字段来控制的。
4.1 Cache-ControlCache-Control 是 HTTP/1.1 中引入的字段，常用的值有：
max-age=3600：资源在 3600 秒内有效。
no-cache：不使用强 ...
知识星球
未读最近，公司决定成立北京技术小组，我负责再招聘几个前端，以前只是以面试者的身份参与面试，这次换个角度让我来当面试官，对我来说也是一个不小的挑战，毕竟第一次嘛，我甚至感觉比面试者更紧张，我必须做好充分的准备来应对这件事。为此我根据平时写的工作总结，查阅了很多文章题库总结了下面这些可以说是近乎固定的面试题。这些题目不多，但是涉及的范围有大有小，有深有浅，更多的是以基础知识为主。虽然很多人摒弃八股选人这样的招聘策略，但是八股文回答的怎么样也能反映出一些问题。例如：八股文网上随便查，它就在这，只要背了就能多少回答出来一些。可以看出来求职者的技术能力，有一定逻辑的组织语言的能力，更多的是反映出一个态度。一个我愿意为了找工作去认真复习的态度。
1.说说输入URL回车后的过程引申问题：TCP握手协议的详细过程；HTTPS和HTTP在这一块有区别吗；HTTPS和HTTP的不同点在哪？对HTTP2.0是否有了解；2.0比1.1有什么不同? 渲染阶段 解析HTML的过程中遇到异步的资源，浏览器是怎么处理的，asyc和defer这两种异步加载方式区别点在哪？
2.JavaScript的深拷贝浅拷贝是指什么，有 ...
JavaScript数据类型与存储机制：从基础到ES6新特性JavaScript是一门动态类型语言，它的数据类型和存储机制是理解这门语言的核心之一。本文将带你深入探讨JavaScript的数据类型、堆栈存储机制，以及ES6中新增的数据类型和特性。无论你是初学者还是有一定经验的开发者，这篇文章都会为你提供新的见解。
1. JavaScript的数据类型JavaScript的数据类型可以分为两大类：基本类型（Primitive Types）和引用类型（Reference Types）。
1.1 基本类型基本类型是存储在栈内存中的简单数据段，它们的值直接存储在变量访问的位置。JavaScript中的基本类型包括：
**number**：数字类型，包括整数和浮点数。
12let age = 27;let price = 9.99;
**string**：字符串类型，表示文本数据。
1let name = "Wang Yuxiang";
**boolean**：布尔类型，表示逻辑值true或false。
1let bol = true;
**null**：表示一个空值 ...
前端开发
未读在编程中，我们经常需要复制数据。然而，并不是所有的复制操作都是一样的。根据复制的深度，我们可以将复制分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。这两种方式有着本质的区别，本文将深入探讨浅拷贝和深拷贝的概念、实现方式以及使用场景。
1. 什么是浅拷贝？1.1 定义浅拷贝是指创建一个新对象，并将原对象的属性值复制到新对象中。如果属性是基本类型（如number、string、boolean），则直接复制值；如果属性是引用类型（如object、array），则复制引用地址。
换句话说，浅拷贝只复制对象的第一层属性，而不会递归复制嵌套的对象。
1.2 实现方式在JavaScript中，浅拷贝可以通过多种方式实现：
1.2.1 使用Object.assign1234const obj = { a: 1, b: { c: 2 } };const shallowCopy = Object.assign({}, obj);console.log(shallowCopy); // { a: 1, b: ...
知识星球
未读浏览器内核（也称为渲染引擎 或布局引擎）是浏览器的核心组件，负责解析HTML、CSS、JavaScript等内容，并将其渲染成用户可见的网页。不同的浏览器品牌可能使用相同或不同的内核，内核的选择直接影响了浏览器的性能、兼容性和功能支持。
以下是对浏览器内核的深入解析，以及不同品牌浏览器之间的共同点和差异。
1. 浏览器内核的核心功能浏览器内核的主要职责包括：
解析HTML ：将HTML文档解析为DOM（文档对象模型）树。
解析CSS ：将CSS样式表解析为CSSOM（CSS对象模型）树。
布局（Layout） ：结合DOM和CSSOM，计算每个元素的位置和大小。
绘制（Painting） ：将布局后的内容绘制到屏幕上。
JavaScript执行 ：通过JavaScript引擎执行脚本，动态修改DOM和CSSOM。
2. 主要的浏览器内核目前主流的浏览器内核有以下几种：
2.1 WebKit
开发者 ：最初由苹果公司开发，基于KHTML（KDE的开源项目）。
特点 ：
轻量级，性能优秀。
主要用于Safari浏览器。
曾经是Chrome浏览器的内核，后来被Goo ...
当我们每天在浏览器中输入一个URL并按下回车时，背后其实发生了一系列复杂的过程。这篇文章将详细解析从输入URL到页面渲染的完整流程，帮助你更好地理解浏览器的工作原理。
1. 输入URL并解析一切从用户在浏览器地址栏输入URL开始。例如，输入 https://www.wyxup.top。
URL解析浏览器会解析URL，提取以下信息：
协议 ：如 https 或 http。
域名 ：如 www.wyxup.top。
端口 ：如 443（HTTPS默认端口）或 80（HTTP默认端口）。
路径 ：如 /index.html。
查询参数 ：如 ?id=123。
片段标识 ：如 #section1。
2. DNS解析浏览器需要通过域名找到服务器的IP地址，这个过程称为DNS解析。
DNS解析步骤
浏览器缓存 ：浏览器首先检查自身缓存中是否有该域名的IP地址。
系统缓存 ：如果浏览器缓存中没有，浏览器会检查操作系统的缓存（如Windows的hosts文件）。
路由器缓存 ：如果系统缓存也没有，请求会发送到路由器缓存。
ISP DNS服务器 ：如果以上缓存都没有，浏览器会向 ...
