- 博客(76)
- 收藏
- 关注
RSS订阅原创 webpack原理和打包过程，与vite的区别
本文深入解析了Webpack的核心原理与打包流程，并与Vite进行对比分析。主要内容包括：1) Webpack的核心概念（入口、Loader、Plugin等）和详细打包流程（依赖分析、Loader处理、代码分割等）；2) 深入探讨模块系统实现、Tree Shaking和热更新原理；3) 对比Webpack与Vite在架构、性能和配置上的差异；4) 提供实际配置示例和选型建议；5) 分析构建工具未来趋势。文章指出Webpack适合复杂企业应用，而Vite更适用于现代框架项目和新项目开发，强调应根据项目需求选择
2025-12-18 17:15:22
385
原创 Cookie 与 Session 的区别及 Cookie 传输机制
本文详细对比了Cookie和Session的核心区别：Cookie存储在客户端，安全性较低但性能影响小；Session存储在服务端，安全性高但需要服务器查询。重点介绍了Cookie的结构属性、传输方式以及Session的工作原理和存储方案。文章提供了完整的登录流程示例，涵盖前后端实现，并分析了Cookie传输的跨域问题、SameSite策略等常见问题解决方案。通过对比Session、JWT和OAuth2.0等认证方案，给出了安全实践建议：使用HttpOnly+Secure+SameSite的Cookie配置
2025-12-18 17:09:44
404
原创 HTTPS 原理详解
HTTPS是HTTP的安全版本，通过SSL/TLS协议实现加密传输。它采用混合加密机制：非对称加密交换密钥，对称加密传输数据，并配合数字证书验证身份。HTTPS能有效防范窃听、篡改和冒充攻击，已成为现代网站的标配。其核心优势包括：数据加密传输、内容完整性校验、服务器身份认证。实际部署时需注意选择TLS 1.2/1.3协议、配置安全加密套件、启用HSTS等安全措施。随着HTTP/2的普及，HTTPS在保证安全性的同时也能提供良好性能。建议所有网站启用HTTPS，这不仅是安全需求，也影响SEO排名和用户信任度。
2025-12-18 17:03:07
309
原创 受控组件 vs 非受控组件
React表单组件分为受控和非受控两种类型。受控组件由React管理表单数据，通过state和onChange事件实现双向绑定，适合需要实时验证、表单联动等复杂场景。非受控组件由DOM自身管理数据，通过ref获取值，适用于文件上传、简单表单或集成第三方库等场景。现代React开发推荐优先使用受控组件以获得更好的可维护性，仅在性能要求极高或特殊需求时采用非受控组件。React 18的useDeferredValue等新特性进一步优化了受控组件的性能表现。
2025-12-18 16:57:50
272
原创 Vue 组件通讯方式
本文总结了Vue2和Vue3中的组件通信方式。通用方法包括Props(父传子)、$emit(子传父)、ref/$refs(访问子组件)、Provide/Inject(跨层级)和EventBus(事件总线)。Vue3新增了mitt替代EventBus，以及defineProps/defineEmits等语法糖。状态管理推荐Vuex(Vue2)和Pinia(Vue3)。
2025-12-10 18:46:51
340
原创 Vue3相比Vue2的改进之处
Vue3相比Vue2进行了全面升级：性能提升（体积减少41%，渲染提速55%）；采用Composition API实现更好的代码组织；基于Proxy重构响应式系统；增强TypeScript支持；新增Fragment、Teleport等组件特性；优化生命周期和v-model用法；提供自定义渲染器API；改进全局API设计；支持逻辑复用组合函数。这些改进使Vue3在保持易用性的同时，显著提升了开发效率和运行性能，但需注意不再支持IE11等迁移问题。
2025-12-09 15:41:21
296
原创 [代码例题] var 和 let 在循环中的作用域差异，以及闭包和事件循环的影响
这段代码展示了var和let在循环中的关键区别。使用var时，由于函数作用域特性，所有setTimeout回调共享同一个变量a，最终打印4次4；而let具有块级作用域，每次循环创建独立变量，打印0,1,2,3。文章还介绍了三种让var正确输出的方法（IIFE、setTimeout参数、forEach），并对比了两种声明方式在事件绑定和异步请求中的实际应用差异。核心结论：let的块级作用域能自动解决循环中的闭包问题，是现代JS开发的首选，而var在循环中容易引发意料之外的结果。
2025-12-09 15:10:29
313
原创 媒体查询详解
媒体查询是CSS3的核心技术，用于根据设备特性（如屏幕尺寸、方向等）应用不同样式。其工作原理是浏览器检测设备特性后匹配条件，动态调整样式。主要包括媒体类型（screen/print等）和特性（宽度/高度/分辨率等），支持AND/OR/NOT逻辑运算。实践应用包括移动优先设计、常用断点设置和响应式布局，可结合CSS变量、JavaScript检测等高级用法。优化建议包括减少查询数量、使用相对单位，并介绍了容器查询等现代替代方案。媒体查询是实现响应式设计的基础，需结合设备测试和现代CSS特性灵活使用。
2025-12-09 11:42:59
289
原创 行内盒子、块级盒子、content-box 和 border-box 的区别
CSS盒子模型与布局类型详解 本文系统介绍了CSS中的三种盒子类型和两种盒子模型。行内盒子（inline）内容决定尺寸，不换行；块级盒子（block）独占一行，可设宽高；行内块盒子（inline-block）兼具两者特性。盒子模型分为content-box（默认）和border-box（推荐），后者width/height包含padding和border，更易控制布局。文章还对比了不同类型盒子的特性差异，提供了实际应用场景和常见问题解决方案，建议始终使用border-box并合理选择布局类型
2025-12-09 11:27:53
558
原创 CSS权重计算与优先级规则
CSS权重（Specificity）是决定样式优先级的关键机制，通过四部分计算选择器权重：[内联样式,ID选择器,类/属性选择器,元素选择器]。内联样式最高（1,0,0,0），!important可覆盖所有规则但需慎用。权重比较从左到右逐位进行，同权重时后定义的生效。最佳实践建议减少ID和!important的使用，优先采用类选择器，保持代码简洁。浏览器开发者工具可帮助调试权重问题，理解这一机制对编写可维护的CSS至关重要。
2025-12-09 11:12:33
293
原创 JavaScript 数组方法和属性详解
JavaScript数组常用方法摘要：length属性可设置用于截断/扩展数组。修改原数组的方法包括push/pop（末尾增删）、unshift/shift（开头增删）、splice（任意位置增删）、reverse/sort（排序）等。不修改原数组的方法有concat/slice（合并/截取）、join/toString（转字符串）、map/filter（转换/过滤）等。查找方法包括indexOf/includes/find等。ES6新增Array.from/of等静态方法。
2025-10-22 18:16:51
770
原创 Vue 生命周期详解
Vue组件生命周期分为创建、更新和销毁三个阶段。关键数据访问时机：created阶段可首次访问data数据，mounted阶段可操作DOM元素。生命周期钩子包括beforeCreate（无法访问data）、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted。理解这些阶段有助于合理初始化数据、操作DOM及执行清理工作。示例代码通过日志直观展示了各阶段的触发顺序和数据访问情况。
2025-10-22 18:03:29
401
原创 Vue.js 的数据双向绑定原理讲解
Vue数据双向绑定的核心是通过响应式系统和v-model指令实现。Vue2使用Object.defineProperty实现数据劫持，通过getter/setter进行依赖收集和派发更新，但存在无法检测新增属性和数组变化的缺陷。Vue3改用Proxy实现响应式，全面拦截对象操作，性能更优且支持属性增删。v-model本质是:value和@input的语法糖，Vue3还支持多v-model绑定。完整流程包括：初始化响应式数据、模板编译、依赖收集、数据变更触发更新、组件重新渲染，实现数据与视图的自动同步。
2025-10-16 21:19:32
978
原创 Vue.js 的常见性能优化讲解
Vue.js性能优化指南：从代码到构建的全面策略 本文系统介绍了Vue.js性能优化的四个关键层面：代码、构建、运行时和开发模式。在代码层面，强调合理组件设计、正确使用v-for与key、善用计算属性、静态内容优化等技巧；构建层面建议使用仅运行时版本、代码分割和压缩；运行时优化包括响应式数据处理和组件缓存；开发工具方面推荐性能分析工具的使用。文章提供了具体代码示例和实施建议，核心原则是减少不必要的工作。通过从基础优化措施开始，开发者可以显著提升Vue应用性能。
2025-10-16 21:16:11
1166
原创 RESTful 前后端协作模式讲解
RESTful前后端协作模式是现代Web开发的核心范式，强调关注点分离：后端专注数据服务，前端专注用户界面。其标准流程包括契约式开发（接口设计先行）、并行开发（前端使用Mock数据）、联调测试等关键环节。文章详细阐述了RESTful接口规范（资源定位、HTTP方法、状态码）、统一响应格式等最佳实践，并指出常见问题如文档维护不及时、数据结构不稳定等解决方案。成功实施的关键在于权威的API文档、团队对规范的共识以及Mock工具的使用，这种模式能显著提升开发效率和质量。
2025-10-16 21:11:05
763
原创 前端存储方式汇总及对比
本文介绍了5种常见的前端数据存储方式：1.Cookie（4KB，自动发送到服务器）；2.WebStorage（localStorage持久化5-10MB，sessionStorage会话级）；3.IndexedDB（≥250MB，适合结构化大数据）；4.CacheAPI（缓存网络请求）；5.WebSQL（已废弃）。
2025-10-09 18:15:58
315
原创 Apache服务器不支持的超文本传输协议
Apache服务器对主流HTTP协议支持良好，但在新标准HTTP/3上存在明显短板。它完全支持HTTP/1.1和HTTP/2（需mod_http2模块），但不原生支持基于QUIC的HTTP/3协议，仅能通过第三方模块实现。同时，Apache已不再支持过时的HTTP/0.9和部分HTTP/1.0特性。虽然Apache在传统协议支持上表现优异，但若需完整HTTP/3功能，建议考虑Nginx等替代方案。
2025-09-16 20:11:34
175
原创 CSS背景图片设置方法
CSS背景属性详解：本文介绍了CSS中设置背景图片的核心属性和用法。基本语法通过background-image设置背景图，常用属性包括：background-repeat控制重复方式、background-size调整尺寸、background-position定位图片位置、background-attachment控制滚动行为。文章还介绍了简写方式background和多背景图片的实现方法，最后给出注意事项：建议使用相对路径、考虑CSS渐变替代、优化图片大小、确保文本可读性以及提供备用背景色。
2025-09-16 20:10:34
301
原创 JavaScript浏览器版本推测方法
本文介绍了JavaScript中检测浏览器版本的几种方法：1.直接解析userAgent字符串获取浏览器版本信息；2.使用特征检测方法通过API支持情况推测浏览器版本；3.推荐使用Bowser等现成的检测库；4.提供了综合检测函数示例。文章还指出了注意事项：userAgent可能被修改、不同浏览器可能有相似字符串、建议针对现代浏览器使用特性检测而非版本检测，并推荐了Bowser、UAParser.js等专业检测库。
2025-09-16 20:06:57
454
原创 浏览器主线程（Main Thread）的工作讲解
浏览器主线程是处理核心任务的关键单线程，负责解析HTML/CSS、构建渲染树、布局计算、页面绘制、执行JavaScript以及处理用户交互等串行任务。由于所有操作都是顺序执行的，长时间任务会导致页面卡顿。优化策略包括拆分长任务、使用WebWorker转移计算、避免强制同步布局，以及利用CSS动画属性跳过主线程处理。理解主线程的工作机制是前端性能优化的基础。
2025-09-05 16:19:15
831
原创 浏览器事件流的核心机制讲解
DOM事件流包含三个阶段：捕获阶段（由外向内）、目标阶段（到达事件源）和冒泡阶段（由内向外）。捕获阶段使用addEventListener(...,true)监听，冒泡阶段是默认行为。目标阶段的事件处理按代码顺序执行。事件委托利用冒泡机制，通过在父节点监听子节点事件来优化性能。关键方法包括stopPropagation()阻止事件传播，以及通过event.target识别事件源。理解这三个阶段对实现高效事件处理至关重要。
2025-09-05 16:17:20
714
原创 JavaScript 中对象比较和 Set 去重机制的核心
在JavaScript中，Set不会对结构相同的对象字面量（如{}）去重，因为它比较的是对象的内存引用而非内容。每次创建{}都会生成新对象，即使结构相同也被视为不同元素。Set能有效去重原始值（数字、字符串等），但对引用类型需自行实现去重逻辑，如使用唯一ID、JSON序列化或自定义哈希函数。核心区别在于Set是基于SameValueZero算法比较引用地址，而非深度比较对象内容。
2025-09-05 16:13:00
297
原创 ＜script＞标签若不加任何属性，会默认异步加载和执行吗？
摘要：默认情况下，<script>标签会同步加载和执行，阻塞HTML解析。通过async和defer属性可以改变这一行为：async实现异步加载和立即执行（不保证顺序），defer异步加载并在HTML解析完成后按顺序执行。最佳实践建议关键脚本放body末尾，第三方脚本用async，依赖脚本用defer，模块化代码默认类似defer行为。
2025-09-05 16:06:18
348
原创 WebSocket 的缺点与挑战
WebSocket虽然具有全双工实时通信优势，但也存在明显缺点：有状态连接消耗服务器资源且扩展复杂；可能被老旧代理或防火墙阻断；缺乏内置重连等高级功能；调试工具不足；旧浏览器兼容性差；安全风险增加；SEO和缓存受限。建议仅在需要持续双向推送的场景使用WebSocket，否则从简单HTTP开始更为明智。
2025-09-05 16:04:17
869
原创 死锁介绍及产生原因和如何解决
死锁是并发编程中多个进程因争夺资源而相互等待的现象。其产生需同时满足四个条件：互斥（资源独占）、请求与保持（占用资源时请求新资源）、不剥夺（资源不可强制回收）和循环等待（进程间形成等待环）。典型例子如"哲学家就餐问题"。通过破坏任意一个条件即可预防死锁，如按固定顺序获取锁（破坏循环等待）、一次性申请所有资源（破坏请求与保持）等。编程中最实用的方法是规范锁的获取顺序。
2025-09-05 16:03:20
772
原创 并发编程的核心：线程与线程/进程间通讯
进程和线程的根本区别在于资源共享方式：线程共享进程资源，通信直接高效但需同步机制；进程资源隔离，通信需复杂IPC。线程通信主要通过共享内存、消息队列、条件变量和信号量，需同步保护；进程通信则依赖系统级IPC机制。进程稳定性高但开销大，线程性能好但风险高。现代应用通常采用混合模式，兼顾安全与性能。
2025-09-05 16:00:36
821
原创 操作系统中，进程与线程的定义与区别
本文对比了进程和线程的核心概念与区别。进程是程序执行的独立单位，拥有独立内存和资源；线程是进程内的执行单元，共享进程资源。关键区别在于独立性、开销和通信机制：进程更独立但开销大，线程更轻量但共享资源。文中用公司比喻进程（独立组织），员工比喻线程（共享资源的工作者），并解释了线程的优势在于高效并发、资源共享和改善响应性。进程实现系统级并发，线程实现进程内并发，两者共同提升计算机系统的执行效率。
2025-08-25 20:02:11
671
原创 讲解 JavaScript 中的深拷贝和浅拷贝
JavaScript中的拷贝分为浅拷贝和深拷贝。浅拷贝仅复制对象的第一层属性，如果属性是引用类型，则复制的是内存地址，导致新旧对象共享嵌套对象。常用方法包括展开运算符(...)和Object.assign()。深拷贝会递归复制所有层级，创建完全独立的新对象，常用方法有JSON.parse(JSON.stringify())（但有缺陷）和手动递归实现。主要区别在于：浅拷贝快但共享引用类型，深拷贝慢但完全独立。选择取决于是否需要共享嵌套对象。理解深浅拷贝需要掌握JS的堆栈存储机制和引用类型概念。
2025-08-25 20:00:51
866
原创 讲解计网中OSI模型及各层作用
OSI七层模型是计算机网络的核心理论框架，它将网络通信过程分为七个层次，从下到上依次是物理层（传输比特流）、数据链路层（MAC寻址）、网络层（IP路由）、传输层（端到端连接）、会话层（对话管理）、表示层（数据转换）和应用层（用户接口）。每层都有特定功能，下层为上层提供服务，通过封装/解封装实现数据传输。该模型通过分层设计简化了网络复杂性，实现了标准化和故障定位。虽然实际TCP/IP协议栈不完全对应OSI模型，但理解其分层思想对网络设计、排错至关重要。
2025-08-25 19:57:36
732
原创 常见前端性能优化讲解
本文系统介绍了前端性能优化的主要方法，分为加载和渲染两大方向。加载优化包括资源压缩（JS/CSS最小化、Gzip/Brotli）、图片优化（WebP格式、懒加载）、减少HTTP请求（代码拆分、精灵图）、利用缓存和CDN。渲染优化则聚焦减少主线程负担，如CSS优化、避免长任务、使用Web Workers、批量DOM操作等。文章还介绍了预加载、性能监测工具（Lighthouse）和核心用户体验指标（Core Web Vitals），并提供了可立即实施的优化清单。强调性能优化应基于数据分析，持续改进。
2025-08-25 19:56:06
862
原创 JavaScript 主线程执行长时间任务会导致什么？
JavaScript作为单线程语言，与浏览器渲染共享主线程，长时间任务会阻塞页面响应。这会导致用户输入无反馈、动画卡顿，甚至浏览器警告页面无响应并提示终止。现代浏览器会主动检测超过50ms的任务并干预。
2025-08-25 19:54:51
182
原创 部分CSS笔试题讲解
本文介绍了CSS核心概念和动画实现方法。在盒模型方面，box-sizing:border-box使width/height包含padding和border，便于布局控制。动画实现有transition平滑过渡属性和@keyframes定义复杂动画序列两种方式。选择器优先级规则依次为!important>内联样式>ID>类>元素>通配符。透明效果可通过opacity或RGBA/HSLA实现。动画实现途径包括CSS3、JS、SVG和Canvas，CSS3性能最优。
2025-08-25 19:53:50
685
原创 Promise 对象状态及其处理方法讲解
Promise是JavaScript异步编程的核心，具有三种不可逆状态：Pending（初始状态）、Fulfilled（成功）和Rejected（失败）。创建Promise后可通过resolve()和reject()改变状态。主要处理方法包括.then()（注册回调）、.catch()（错误捕获）和.finally()（最终清理）。静态方法如Promise.all()（并行执行）、Promise.race()（竞速）等提供了不同并发控制策略。
2025-08-25 19:50:33
1021
原创 自闭合标签讲解
HTML自闭合标签（空标签）是无需闭合标签且不能包含内容的元素，常用于嵌入资源或控制布局。常见标签包括<br>、<img>、<input>、<meta>等。HTML标准推荐简洁写法（如<br>），但XML风格（如<br/>）在XHTML或Vue/JSX中必须使用。需注意<script>、<div>等必须闭合。自闭合标签使HTML更简洁高效，但不同环境（HTML/Vue/JSX）的写法规则不同。
2025-08-25 19:46:03
357
原创 Vue3.Composition Api讲解
Vue3的CompositionAPI是一套基于函数的API，通过逻辑关注点组织代码，解决了OptionsAPI的碎片化和复用困难问题。核心功能包括：setup()作为入口；ref()和reactive()创建响应式数据；computed()定义计算属性；on前缀的生命周期钩子；watch()和watchEffect()监听数据变化。其最大优势是可提取逻辑为Composables实现高效复用，特别适合复杂组件和TypeScript项目，同时保持对OptionsAPI的兼容性。
2025-08-25 19:43:27
718
原创 Vue.nextTick讲解
Vue.nextTick是Vue.js的核心API，用于在DOM异步更新后执行回调。它解决了Vue数据变更后DOM不会立即更新的问题，通过微任务机制确保回调在DOM更新完成后执行。主要使用场景包括：操作更新后的DOM元素、与子组件交互、集成第三方库等。Vue 2.x支持回调函数风格，Vue 3.x推荐使用async/await方式。其底层会根据环境选择Promise.then、MutationObserver或setTimeout实现。掌握nextTick对于处理Vue的异步DOM更新至关重要。
2025-08-25 19:38:31
796
原创 JavaScript中的函数parseInt(string, radix)解析
console.log(parseInt("10+15",2));输出结果为2。这是因为parseInt函数以二进制（基数2）解析字符串"10+15"，遇到有效数字字符"10"后，在无效字符"+"处停止解析。二进制"10"转换为十进制即为2。parseInt会从左到右解析字符串，遇到第一个不符合指定进制的字符时立即停止，仅转换已解析的有效部分。此例展示了parseInt严格按基数验证字符并截断处理的特点。
2025-08-20 17:02:42
797
原创 JavaScript 中的数据类型详解
JavaScript数据类型分为原始类型和引用类型。原始类型包括undefined、null、boolean、number、string、symbol(ES6)和bigint(ES2020)，存储在栈内存中，不可变，比较的是值。引用类型包括对象、数组、函数等，存储在堆内存中，可变，比较的是内存地址。类型检测可使用typeof、instanceof、Array.isArray()等方法，其中Object.prototype.toString.call()最准确。
2025-08-20 16:55:03
769
原创 JavaScript 原型继承与属性访问规则详解
JavaScript采用原型继承作为面向对象编程的基础机制，通过原型链实现属性查找和继承。文章系统介绍了原型继承的核心概念、实现方式及特性：1）原型链工作原理，包括__proto__和prototype的区别；2）属性查找规则与遮蔽现象；3）构造函数、Object.create()和ES6 Class三种实现方式；4）特殊属性访问场景和原型相关方法；5）最佳实践建议。理解原型机制对编写高效JavaScript代码具有重要意义，文中通过代码示例清晰展示了原型继承的实际应用。
2025-08-18 16:57:31
676
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人