Logo

菜单

博客

所有标签

#表格式 1 #湖仓一体 1 #数据湖 1 #Apache Iceberg 1 #QQ 1 #PNPM 1 #NPM 1 #Elasticsearch 1 #Railway 1 #Vercel 1 #服务器 1 #阿里云 1 #SpringBoot 1 #无线网卡 1 #IP 1 #CentOS 6 #分布式锁 1 #ZooKeeper 1 #Composition API 1 #响应式 1 #Vue3 1 #esbuild 1 #Rollup 1 #构建工具 1 #前端工程化 1 #Vite 1 #后端开发 1 #Spring Boot 3 #分布式计算 1 #Spark 1 #运维 1 #中间件 1 #Hooks 1 #Fiber 1 #虚拟DOM 1 #React 1 #在线抠图 1 #锁机制 1 #事务 1 #ShardingSphere 1 #分库分表 1 #SSL 1 #权限管理 1 #安全 1 #高可用 1 #读写分离 1 #主从复制 1 #PITR 1 #XtraBackup 1 #备份恢复 1 #架构 1 #Nacos 1 #Spring Cloud 1 #微服务 2 #前端架构 1 #qiankun 1 #Module Federation 1 #微前端 1 #流处理 1 #分布式 4 #消息队列 1 #Kafka 1 #双亲委派 1 #async/await 1 #Promise 1 #事件循环 1 #JavaScript 1 #Java8 1 #单元测试 1 #工程化 1 #虚拟线程 1 #Stream 2 #Java新特性 1 #性能调优 3 #垃圾回收 1 #内存模型 1 #类加载 2 #JVM 4 #异步编程 1 #CompletableFuture 1 #线程池 1 #并发容器 1 #JUC 1 #JMM 1 #动态代理 1 #注解 1 #反射 1 #序列化 1 #源码分析 1 #Set 1 #类型系统 1 #泛型 1 #最佳实践 1 #异常处理 1 #日期时间 1 #String 1 #枚举 1 #内部类 1 #接口 1 #OOP 1 #面向对象 1 #数据类型 1 #基础语法 1 #开发环境 1 #JDK 1 #Java从入门到精通 18 #零拷贝 1 #网络编程 1 #NIO 2 #IO 2 #CAS 1 #多线程 2 #并发编程 4 #源码 1 #ArrayList 1 #HashMap 2 #集合框架 3 #JET 2 #Hadoop 1 #HQL 1 #数仓 1 #Hive 1 #经验分享 3 #Html 1 #主题美化 2 #Markdowm 1 #HDFS 1 #NoSQL 1 #HBase 1 #CSP 1 #CSRF 1 #XSS 1 #Web安全 1 #实时计算 1 #流计算 1 #Flink 1 #MPP 1 #实时数仓 1 #Apache Doris 1 #数据库 7 #列式存储 2 #OLAP 2 #ClickHouse 1 #应用部署 2 #破解 1 #缓存 1 #渲染原理 1 #性能优化 4 #浏览器 1 #前端 6 #防火墙 1 #Hexo 7 #Tag Plugins 1 #AQS 2 #LINUX 4 #SWAGGER 1 #MAVEN 2 #QUARTZ 1 #ES 0 #ChatGPT 3 #宝塔 3 #NODE.JS 2 #APP 1 #大数据 10 #端午节吃粽子 1 #NVM 1 #JOE 1 #分享 7 #EXCEL 1 #IDEA 6 #JAVA 36 #REDIS 2 #BIGDECIMAL 2 #LIST 2 #TOMCAT 4 #WEBLOGIC 1 #NGINX 4 #工具类Utils 8 #MYBATIS 3 #MYSQL 16 #Navicat 1 #Mac 2 #linux 2 #文章 1 #Halo 0
微前端架构实战：Module Federation、qiankun 与样式/JS 沙箱隔离
前端开发 #前端#微前端#Module Federation#qiankun#前端架构

微前端架构实战：Module Federation、qiankun 与样式/JS 沙箱隔离

当单体前端膨胀到几十万行、十几个团队共用一个仓库时，技术栈升级、独立部署、故障隔离都成了奢望。微前端把"巨石应用"拆成可独立开发、独立部署、运行时集成的子应用。本文先把微前端要解决的四件大事讲清——技术栈无关、独立部署、运行时集成、样式与 JS 隔离；再横向对比 iframe、Web Components、Module Federation、qiankun 四类集成方案的取舍。重点拆开微前端的命门：CSS 隔离（Shadow DOM / 运行时样式改写 / 约定式）与 JS 沙箱（快照沙箱、Proxy 沙箱的单例与多例、with+Proxy 拦截全局对象的原理），并给出 qiankun 注册子

神经蛙 发布于 2026-10-26
React 核心原理与 Hooks 实战：虚拟 DOM、Fiber 架构、Diff 算法与状态管理
前端开发 #前端#React#虚拟DOM#Fiber#Hooks

React 核心原理与 Hooks 实战：虚拟 DOM、Fiber 架构、Diff 算法与状态管理

React 与 Vue 走的是两条不同的路：Vue 用 Proxy 做响应式，React 则靠虚拟 DOM 与可中断的 Fiber 调度。本文先把 JSX 编译与 createElement 讲清，再拆解虚拟 DOM 的协调（Reconciliation）与 Diff 算法（同层比较、key 的作用、双端对比思路）；核心是一节 Fiber 架构——为什么 Stack Reconciler 会卡顿、Fiber 节点如何可中断可恢复、双缓存树与 workInProgress 如何避免白屏闪烁。随后深入 Hooks 心智模型：闭包陷阱、useState 的批量更新、useEffect 的依赖与清理、

神经蛙 发布于 2026-10-19
前端安全防护实战：XSS、CSRF、点击劫持的系统性防御
前端开发 #前端#Web安全#XSS#CSRF#CSP

前端安全防护实战：XSS、CSRF、点击劫持的系统性防御

前端是攻击者最常触碰的门面，一次 innerHTML 用错就可能交出去整个账号。本文从浏览器同源策略讲起，把 XSS（存储型/反射型/DOM 型）、CSRF、点击劫持三大高危漏洞的成因、利用链与防御方案一次讲透：输出编码与上下文、DOMPurify 白名单、Trusted Types、Cookie 的 HttpOnly 与 SameSite、CSRF Token 与 Origin 校验、X-Frame-Options 与 CSP frame-ancestors；再补充开放重定向、postMessage 未校验 origin、依赖供应链与原型污染等易忽视风险，最后给出一份可直接落地的 CSP 配

神经蛙 发布于 2026-10-14
浏览器渲染原理与前端性能优化：从 URL 输入到首屏、重排重绘与缓存策略
前端开发 #前端#浏览器#性能优化#渲染原理#缓存

浏览器渲染原理与前端性能优化：从 URL 输入到首屏、重排重绘与缓存策略

从浏览器输入 URL 到首屏呈现，页面到底经历了什么？本文系统拆解关键渲染路径（CRP）：DOM 与 CSSOM 如何构建、渲染树如何合并、Layout/Paint/Composite 各自做什么，为什么 CSS 会阻塞渲染、JS 会阻塞解析，defer 与 async 该如何选。随后讲清重排（Reflow）与重绘（Repaint）的区别与触发条件、什么是"强制同步布局"（layout thrashing）以及如何用先读后写规避，并深入合成层与 GPU 加速，解释为什么 transform/opacity 动画比 top/left 更流畅、will-change 为什么不能滥用。最后给出强缓存

神经蛙 发布于 2026-10-05
JavaScript 异步编程与事件循环机制：从回调地狱到 Promise、async/await 与宏微任务
前端开发 #前端#JavaScript#事件循环#Promise#async/await

JavaScript 异步编程与事件循环机制：从回调地狱到 Promise、async/await 与宏微任务

从 JavaScript 单线程与非阻塞 I/O 的设计出发，系统拆解事件循环（Event Loop）的完整模型：调用栈、宏任务队列与微任务队列如何协作，为什么微任务总在下一个宏任务之前清空；用一份份可运行的代码推演输出顺序，彻底讲清 setTimeout、Promise.then、queueMicrotask 的优先级关系。随后回溯回调地狱的痛点与 Promise 的三种状态、链式调用与错误穿透，对比 all/allSettled/race/any 的适用场景；再剖析 async/await 的语法糖本质、await 的串行陷阱与并行优化、try/catch 的捕获边界，并对比浏览器与 No

神经蛙 发布于 2026-10-02
Vue 3 响应式原理与 Composition API 实战：Proxy、依赖收集与性能优化
前端开发 #前端#Vue3#响应式#Composition API#性能优化

Vue 3 响应式原理与 Composition API 实战：Proxy、依赖收集与性能优化

从 Vue 2 的 Object.defineProperty 局限出发，系统拆解 Vue 3 基于 Proxy + Reflect 的响应式实现：reactive 如何拦截读写、effect/track/trigger 如何完成依赖收集与派发更新；对比 ref 与 reactive 的适用场景与模板自动解包，讲清解构丢失响应性的根因与 toRefs 解法；进一步剖析 computed 的 lazy + dirty 机制、watch 与 watchEffect 的差异，以及 Composition API 组合函数与生命周期实战。最后结合编译期 PatchFlag、静态提升、Block Tre

神经蛙 发布于 2026-09-15