1.手撕版本号排序 // 版本号排序 function compareV(a,b){ const Sorta = a.split('.').map(Number); const Sortb = b.split('.').map(Number); const maxLength = a.length > b.length ? a.length : b.length; for(let i=0;i<maxLength;i++){ const numA = a[i] || 0; const numB = b[i] || 0; if(numA < numB) return -1; if...

1.浏览器渲染过程（输入 URL 到页面展示）地址解析与网络请求用户在浏览器地址栏输入 URL，浏览器开始进行 DNS 解析（域名转 IP），建立 TCP 连接（三次握手），发送 HTTP 请求到服务器。服务器响应与资源下载服务器返回 HTML 文档，浏览器开始解析 HTML 流，遇到 CSS、JS、图片等资源时，继续发起请求下载。HTML 解析生成 DOM 树浏览器解析 HTML，构建出DOM 树（Document Object Model），这是页面的节点树，代表页面结构。CSS 解析生成 CSSOM 树浏览器解析 CSS，生成CSSOM（CSS Object Model），表示样式信息。...

1.vue3封装一个只读变量我们可以使用readonly API来实现这个功能，它涉及代理模式，我们通过一个代理包装对象，对外之报读可读的能力，隐藏写能力。 // dataStore.js import { reactive, readonly } from 'vue' const _state = reactive({ count: 0, message: 'Hello' }) // 封装：外部只能读，不能写 export const state = readonly(_state) // 内部函数：可用于更新状态 export function increment() { _state.c...

1. 前端设计模式设计模式的目的就是编写更好 高内聚、低耦合、可维护的代码，下面是我的前端中常见的设计模式和相应的场景。单例模式：单例模式是一种只允许创建一个实例的模式。在前端中常用于创建全局唯一的对象，例如全局的状态管理器(vuex)、日志记录器等，避免了重复创建和资源浪费的问题。 class Store { constructor() { if (Store.instance) return Store.instance; this.data = {}; Store.instance = this; } } 工厂模式：工厂模式是一种根据参数不同创建不同对象的模式，工厂模式是前端中组件封装、...

1.前端工程化项目构建工具：使用自动化构建（Webpack, Vite）来处理和打包前端资源（JavaScript, CSS, 图片），从而简化开发流程，提升开发体验。这些工具通常支持模块化开发、代码压缩、混淆、热更新等功能。模块化开发：采用模块化的开发模式（如 ES6 模块、CommonJS、AMD 等），可以将代码拆分为更小、更易于管理的部分，有助于团队协作和代码复用。每个模块负责单一功能，并且通过明确的接口与其他模块交互。组件化开发：基于组件的思想构建用户界面，比如 React、Vue中的组件。组件是独立且可复用的 UI 构建块，它们封装了自身的逻辑和样式，可以在不同的页面或应用之间共享...

模板字符串是ES6引入的一种新型字符串表示法，使用反引号( ` ) 包裹内容，相比传统字符串具有更强大的功能。1.核心特性多行字符串：直接支持换行。字符串插值：使用 ${ 对象 } 嵌入变量和表达式。标签模板：可以自定义字符串处理函数。1.1 基本语法 // 传统字符串 const name = 'Alice'; const greeting = 'Hello, ' + name + '!'; // 模板字符串 const greeting = `Hello, ${name}!`; 1.2 多行字符串处理 // ES5实现多行字符串 var message = '第一行\n' + '第二行\n...

浏览器缓存是性能优化的一个非常重要的指标，而前端缓存也是我们在开发中必不可少的模块。1.浏览器缓存1.1 缓存流程通常来说，浏览器首次加载资源会返回200，并且下载服务器文件，缓存资源及版本号，再次加载资源的时候就可根据资源请求头字段（强缓存&协商缓存）去判断是否使用缓存资源。HTTP Cache 是我们开发中接触最多的缓存，它分为强缓存和协商缓存。强缓存：直接从本地副本比对读取请求头，不去请求服务器，返回的状态码是200。协商缓存：会去服务器对比，若梅该百年才直接读取本地缓存，返回的状态码为304。1.2 强缓存（expires\Cache-Control）强缓存就是像浏览器缓存中查...

1.HTTP状态码HTTP状态码是由三位数字组成的代码，用于表示客户端向服务器发起请求后，服务器对请求的响应状态。这些状态码可以大致分为五类，包括信息性状态码、成功状态码、重定向状态码、客户端错误状态码和服务器错误状态码。1.1 信息性状态码：1xx100（Continue）：客户端应继续其请求。1.2 成功状态码：2xx200（Ok）：请求成功。201（Created）：请求已经被实现，并因此创建了一个新的资源。204（No Content）：服务器成功处理了请求，但没有返回任何内容。1.3 重定向状态码：3xx301（Moved Permanently）：请求的资源已被永久移动到新的URL...

1.概念HTTP：超文本传输协议（Hyper Text Transfer Protocol）是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。HTTPS：超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由 HTTP 进行通信，利用 SSL/TLS 来加密数据包。HTTPS 的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。2.http和https区别HTTP是明文传输，连接很简单，是无状态的。https协议是有SSL...

1. 伪类伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。伪类由冒号（:）后跟着伪类名称组成（例如，:active）,函数式伪类还包含一对括号来定义参数（例如，:dir（））。1.1 表示状态的伪类:link 所有为访问的链接:visited 所有访问过的链接:hover 鼠标点击标签的状态:activate 鼠标点击标签的状态:focus 标签获得焦点时的样式注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。注意：在CSS定义中，a:active 必须至于 a:hover 之后，才是有效的。 <a href="w...

原型和原型链都是来源于对象而服务于对象的概念，所以我们要明确一点：JavaScript的一切引用类型都是对象，对象就是属性的集合。1.原型和原型链每一个对象从被创建开始就和另一个对象关联，从另一个对象上继承其属性，这个另一个对象就是原型。当访问一个对象的属性时，先在对象的本身找，找不到就去对象的原型上找，如果还是找不到，就去对象的原型（原型也是对象，也有它自己的原型）的原型上找，如此继续，直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回undefined。这条由对象及其原型组成的链就叫做原型链。原型存在的意义就是组成原型链：引用类型皆对象，每个对象都有原型，原型也是对象，...

在前端中，内存管理是一个非常重要的领域。浏览器的垃圾回收机制（Garbage Collection ,GC）是现在浏览器中的核心的部分之一，它可以自动管理内存的分配与回收，帮助开发者避免手动管理内存，从而减少内存泄露和性能问题的风险。1.垃圾回收机制垃圾回收是一种自动内存管理机制，用于识别和释放不再使用的内存，垃圾回收的核心目标是释放不在使用的内存空间。在浏览器中，当页面中的某些对象不在被需要时，垃圾回收机制会自动将他们从内存中移除，确保不会发生内存泄露。JavaScript是一种内存自动管理的语言，内存管理的核心就是垃圾回收。它主要通过两种方式来检测和释放内存：引用计数（Reference ...

在前端开发中，CSS性能对页面的加载速度和交互体验起着关键作用，其中重排（Reflow）和重绘（Repaint）机制是影响CSS性能的核心因素。深入理解并有效优化重排与重绘，能显著提升页面性能。在Vue使用环境下，重排和重绘有着独特的触发场景和优化策略。1. 重排（reflow） 和 重绘（repaint）重排：也叫回流，适当DOM的变化影响了元素的集合属性，如宽度、高度、位置、外边距、内边距、边框厚度等，浏览器需要重新计算元素的布局，并重新构建渲染树的过程。重绘：当一个元素的外观发生变化，比如改变元素的 color 、 background - color 、 visibility 、 ou...

requestldleCallback(rAF) 和 requestAnimationFrame(rIC) 都是浏览器提供的异步调度API，但是它们的执行时机和用途完全不同。注意：requestIdleCallback()既不属于宏任务，也不属于微任务。requestAnimationFrame()用途：高优先级更新执行：下一帧渲染前（通常在16.67ms之内）一定执行（下一帧到来时）适合场景：动画、滚动、WebSocket实时数据可视化requestIdleCallback()用途：低优先级任务执行：浏览器空闲时（时间不确定）不一定执行（如果浏览器一直忙）适合场景预加载、日志统计、AI计算、...