烟雨数流年的博客

本文将详细讲解实战场景中的综合问题，包括性能优化、安全问题、跨浏览器兼容等内容，适合初学者阅读。 1.如何实现一个防抖函数？并说明其在搜索框输入联想场景中的应用一、防抖函数的实现防抖（Debounce）的核心思想是：当事件被频繁触发时，只在最后一次触发后等待指定时间再执行回调函数。如果在等待期间再次触发事件，则重新计时，避免函数被频繁执行。 基础版防抖函数实现1234567891011121314151617181920212223/** * 防抖函数 * @param {Function} func - 需要防抖的函数 * @param {number} delay - 延迟时间（毫秒） * @returns {Function} 防抖处理后的函数 */function debounce(func, delay) { let timer = null; // 定时器变量，用于保存和清除定时器 // 返回一个新函数，作为事件处理函数 return function(...args)
...

本文将详细讲解前端安全的基础概念，包括XSS攻击、CSRF攻击、点击劫持等内容，适合初学者阅读。 1.什么是 XSS（跨站脚本攻击）？XSS 的类型有哪些（存储型、反射型、DOM 型）？一、XSS（跨站脚本攻击，Cross-Site Scripting）的定义XSS是一种注入式攻击，攻击者通过在网页中注入恶意JavaScript脚本（或HTML代码），当用户访问被注入的页面时，脚本会在用户浏览器中执行，从而窃取用户信息（如Cookie、账号密码）、劫持用户会话、伪造用户操作，甚至控制用户设备。 XSS的核心是“绕过浏览器的安全机制，让恶意脚本被当作合法代码执行”。由于“Cross-Site Scripting”的缩写“CSS”与层叠样式表（CSS）冲突，因此简称“XSS”。 二、XSS的三种主要类型根据恶意脚本的“注入方式”和“执行时机”，XSS可分为存储型、反射型、DOM型，核心区别在于脚本的“存储位置”和“触发流程”。 1. 存储型XSS（Persistent XSS，持久型）原理：攻击者将恶意脚本注入并存储到服务器数据库（如评论区、用户资料、文章内容...

本文将详细讲解前端性能优化的基础概念，包括代码压缩、图片压缩、缓存策略等内容，适合初学者阅读。 1.简述前端性能优化的重要性，性能优化的核心指标有哪些（如 FCP、LCP、FID、CLS）？一、前端性能优化的重要性前端性能直接决定用户对产品的第一印象和使用体验，同时深刻影响业务转化、SEO 排名及技术成本，其重要性可从以下 4 个核心维度展开： 1. 提升用户体验，减少用户流失 页面加载慢（如超过 3 秒）会导致 70% 以上的用户放弃访问（谷歌数据）； 交互响应延迟（如点击按钮后 1 秒才反馈）会让用户感知“卡顿”，降低产品易用性； 布局偏移（如图片加载后挤压文字）会导致用户误操作（如点错按钮），破坏使用流畅性。 2. 提升业务转化，降低获客成本 电商场景：页面加载速度每提升 1 秒，转化率可提升 7%（亚马逊数据）； 内容场景：加载快的页面用户停留时间更长，广告曝光和内容消费率更高； 性能差的产品会导致用户复购率下降，间接增加获客成本（需不断拉新弥补流失）。 3. 优化 SEO 排名，获取更多自然流量 谷歌自 2021 年起将 Core W...

本文将详细讲解Vue框架的基础概念，包括组件化开发、响应式数据绑定、指令等内容，适合初学者阅读。 一、Vue 基础深化1. Vue2 和 Vue3 的核心差异有哪些？从响应式原理（Object.defineProperty vs Proxy）、API 设计（Options API vs Composition API）、性能优化（编译优化、体积优化）等方面说明Vue2 和 Vue3 作为 Vue 框架的两个主要版本，在核心设计理念、底层实现和开发体验上有显著差异。以下从 响应式原理、API 设计、性能优化 三个核心维度详细对比： 一、响应式原理：从 Object.defineProperty 到 Proxy响应式系统是 Vue 的核心（实现数据变化自动更新视图），但 Vue2 和 Vue3 采用了完全不同的底层实现，直接导致了功能和性能的差异。 1. Vue2：基于 Object.definePropertyVue2 的响应式通过 遍历对象属性，使用 Object.defineProperty 为每个属性添加 getter 和 setter 实现监听。 123...

本文将详细讲解前端工程化的基础概念，包括项目结构、模块管理、代码质量等内容，适合初学者阅读。 1.什么是前端工程化？它解决了哪些问题？前端工程化是将前端面试流程规范化、标准化、自动化的一系列方法论、工具和实践的集合。它借鉴了传统软件工程的思想，通过工具链和流程设计，解决前端面试中“效率低、协作难、质量乱、部署繁”等问题，让开发过程更可控、可维护。 前端工程化解决的核心问题传统前端面试（尤其是复杂项目）中，常面临以下痛点，而工程化通过系统性方案逐一解决： 1. 代码组织与复用问题 传统痛点：早期前端代码多通过 <script> 标签直接引入，缺乏模块化拆分，导致代码冗余、依赖混乱（如“全局变量污染”“文件加载顺序冲突”），复用性极差。 工程化解决方案：引入模块化规范（如 ES Module、CommonJS），将代码拆分为独立模块（文件），通过 import/export 或 require 管理依赖，实现“按需加载”和“高内聚低耦合”。工具示例：Webpack、Vite 等构建工具支持模块化打包，消除全局变量污染。 2. 代码质量与风格统一问题 ...

本文将详细讲解DOM与BOM的基础概念，包括文档对象模型（DOM）和浏览器对象模型（BOM），适合初学者阅读。 1.简述 DOM（文档对象模型）的概念及 DOM 树的结构DOM（Document Object Model，文档对象模型）是一套处理HTML和XML文档的编程接口，它将文档内容转换为一个结构化的对象树（DOM树），使程序（如JavaScript）能够访问、修改文档的内容、结构和样式。简单来说，DOM是文档与脚本语言（如JavaScript）之间的“桥梁”，让静态的文档具备了动态交互的能力。 DOM的核心特点 平台无关：DOM定义了通用的文档操作规范，与具体编程语言（如JavaScript、Python）和平台无关。 树状结构：文档的所有内容（标签、文本、属性等）被抽象为“节点”，按层级关系组织成树，便于遍历和操作。 动态性：通过DOM提供的API，可实时修改文档的结构（如添加/删除标签）、内容（如修改文本）和样式（如改变颜色），且修改会即时反映到页面上。 DOM树的结构DOM树是节点（Node）的层次化集合，每个节点代表文档中的一个部分...

本文将详细讲解JavaScript的基础语法，包括变量、数据类型、运算符、表达式等内容，适合初学者阅读。 1.JavaScript 的数据类型有哪些？基本数据类型和引用数据类型的区别是什么？一、数据类型 基本数据类型：Number、String、Boolean、Null、Undefined、Symbol（ES6）、BigInt（ES2020）。 引用数据类型：Object（含Array、Function、Date、RegExp等）。 二、核心区别 维度 基本数据类型 引用数据类型 存储 栈内存直接存值 栈存地址，堆内存存值 赋值 值拷贝，变量独立 地址拷贝，指向同一对象 比较 比较值是否相等 比较引用地址是否相同 可变性 不可变（修改生成新值） 可变（直接修改内部属性） 2.如何判断一个变量的数据类型？typeof、instanceof、Object.prototype.toString () 的区别是什么？一、判断变量数据类型的常用方法常用方法有三种：typeof、instanceof、Object.prototype.toString(...

本文将详细讲解CSS的基础语法，包括选择器、属性、值等内容，适合初学者阅读。 1、简述 CSS 的盒模型（标准盒模型和 IE 盒模型）的区别CSS 的盒模型是用于布局和计算元素尺寸的基础概念，它将每个 HTML 元素视为一个矩形的“盒子”，包含内容、内边距、边框和外边距。标准盒模型（W3C 盒模型）和 IE 盒模型（怪异盒模型）的核心区别在于元素总宽度和高度的计算方式： 一、标准盒模型（W3C 盒模型） 默认模式：现代浏览器默认采用的盒模型。 尺寸计算方式：元素的总宽度 = width（内容宽度） + padding-left + padding-right + border-left + border-right元素的总高度 = height（内容高度） + padding-top + padding-bottom + border-top + border-bottom 特点：width 和 height 仅作用于内容区域（content），内边距（padding）和边框（border）会增加元素的实际占用空间。 示例： 12345...

本文将详细讲解HTML的基础语法，包括标签、属性、实体字符等内容，适合初学者阅读。 1、什么是语义化 HTML？有哪些常用的语义化标签?语义化 HTML 是指使用恰当的 HTML 标签来描述内容的含义，使标签本身能够清晰地表达其包裹内容的性质和用途，而不仅仅是通过 CSS 来定义外观。 语义化的核心价值在于： 提高代码的可读性和可维护性，让开发者能快速理解页面结构 帮助搜索引擎更好地解析页面内容，提升 SEO 效果 便于屏幕阅读器等辅助设备理解页面，提高 accessibility（可访问性） 即使没有 CSS 样式，页面也能保持清晰的结构层次 常用的语义化标签包括： 结构类标签： <header>：页面或区块的头部，通常包含标题、logo、导航等 <nav>：导航栏，包含链接到其他页面或当前页面不同部分的链接 <main>：页面的主要内容区域，一个页面通常只有一个 <footer>：页面或区块的底部，通常包含版权信息、联系方式等 <section>：表示一个独立的主题区块，通常包含标题 <ar...

Express.js 是由 TJ Holowaychuk 开发的，现在由 Node.js 基金会和众多开源贡献者维护。它是一个保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。 一、安装与基本使用 安装Node.js： 首先，需要在计算机上安装Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许JavaScript代码在服务器端运行。 安装Express： 使用npm（Node.js的包管理器）来安装Express。在项目目录下，打开命令行工具，执行以下命令： 1npm install express 这将下载并安装Express及其依赖项。 创建简单的Express服务器： 创建一个JavaScript文件（例如app.js），并在其中编写以下代码： 1234567891011const express = require('express'); const app = express();const port = 3000;app...