• DOCTYPE声明的作用解析
    • HTML文档head核心结构
    • src与href属性差异对比
    • script标签加载策略
    • HTML语义化实现原则
    • HTML元素分类标准
    • HTML5新特性全景解读
    • 响应式图像实现方案
    • 离线存储技术实现
    • iframe应用场景分析
    • 表单元素关联技术
    • meta标签功能解析
    • 语义化标签对比
    • CSS选择器类型与优先级机制
    • 盒模型与布局属性关系
    • 现代布局方案对比
    • 元素隐藏技术方案
    • CSS动画实现原理
    • 层叠上下文与定位体系
    • 预处理器的工程化价值
    • 移动端适配核心方案
    • CSS性能优化策略
    • 经典布局问题解决方案
    • 排版系统深度解析
    • CSS工程化实践
    • 图形绘制高级技巧
    • 现代CSS特性应用
    • 伪类与伪元素机制解析
    • 浮动布局问题解决方案
    • 层叠规则与定位失效
    • 像素精确控制技术
    • 字体渲染与缩放策略
    • CSS继承体系解析
    • 现代选择器增强特性
    • CSS性能检测方法
    • 替换元素渲染特性
    • CSS变量高级应用
    • 媒体查询深度适配
    • CSS数学表达式应用
    • CSS预处理器核心价值
    • 弹性布局弹性系数解析
    • 内联元素间隙消除方案
    • CSS数学函数应用场景
    • 浏览器渲染层优化策略
    • CSS计数器高级应用
    • 滚动驱动动画实现
    • 容器查询技术实践
    • CSS作用域隔离方案
    • 颜色空间现代演进
    • CSS逻辑属性适配
    • 视口单位动态计算
    • CSS后代选择器性能影响
    • CSS计数器实现步骤编号
    • 优雅降级和渐进增强
    • CSS混合模式应用场景
    • JavaScript中的垃圾回收机制
    • JavaScript数据类型分类及差异
    • 类型检测方法对比
    • null与undefined的语义差异
    • typeof null的返回值问题
    • 对象比较的特殊情况
    • NaN检测方法差异
    • 隐式类型转换规则
    • 浮点数精度问题解决方案
    • 相等运算符的类型转换
    • 字符串拼接触发条件
    • 基本类型方法调用机制
    • 对象拷贝方法对比
    • Map与Object的适用场景
    • 空对象检测与对象合并
    • 原型链类型检测
    • 数组方法分类与应用
    • 数组操作副作用对比
    • 遍历方法中断控制
    • 类数组转换技术
    • arguments对象遍历
    • 函数加载模式差异
    • 严格模式限制特性
    • AJAX核心实现原理
    • 请求库特性对比
    • DOM与BOM操作场景
    • 可视区域检测方法
    • 鼠标事件冒泡差异
    • JSON与对象转换规范
    • URI编码方法对比
    • BigInt的数值处理
    • const声明特性解析
    • 迭代协议实现差异
    • 字符串截取方法区别
    • 箭头函数核心特性解析
    • Symbol类型应用场景
    • 模块系统差异对比
    • Proxy元编程能力
    • 解构赋值高级用法
    • 扩展运算符应用场景
    • rest参数机制解析
    • 模板字符串增强特性
    • apply,call,bind异同
    • 字符串处理新方法
      • Vue 组件中 data 属性为何必须是函数?
      • Vue 如何解决对象新增属性不触发视图更新的问题?
      • 计算属性与方法的本质区别是什么?
      • 计算属性与 data 属性同名会引发什么问题?
      • Vue对$或_开头属性有何特殊处理?
      • 如何理解Vue的单向数据流与双向绑定?
      • Vue的MVVM模式与MVC/MVP有何区别?
      • Vue生命周期阶段划分及作用
      • created与mounted钩子的差异与应用
      • 异步数据请求的最佳生命周期阶段
      • 强制初始化执行watch监听的方法
      • DOM渲染完成的生命周期阶段
      • v-show与v-if的原理差异及适用场景
      • 避免同时使用v-if和v-for的原因
      • v-for中key属性的核心作用
      • v-cloak和v-pre指令的典型应用
      • 保留模板中HTML注释的方法
      • Vue模板引擎的实现原理
      • v-model的实现机制与修饰符
      • 组件模板单根限制与Vue3变化
      • Vue组件通信方式及应用场景
      • 插槽机制与高级应用
      • 子组件实例与DOM访问方法
      • 组件name属性的核心作用
      • 动态组件与异步加载原理
      • .vue文件作为组件的实现原理
      • 组件/插件/插槽的核心区别
      • 路由404页面配置方法
      • hash与history路由模式对比
      • 路由参数params与query的获取
      • router-link的active-class作用
      • 编程式导航与声明式导航区别
      • 路由跳转与location.href的本质区别
      • watch与计算属性的核心区别
      • 自定义指令的典型应用场景
      • 过滤器(filter)的现代化替代方案
      • nextTick的异步更新原理
      • Scoped CSS的模块化实现
      • 表单与事件修饰符应用原理
      • Vue风格指南核心规范
      • 组件data状态重置方法
      • 键盘事件监听与修饰符
      • 模板中$event对象的使用规范
      • 组件命名规范与约定
      • 避免data与方法同名的原因
      • Vue2对IE的兼容性支持范围
      • v-html指令的XSS风险与防护
      • 模板编译与虚拟DOM的协同机制
      • 响应式依赖收集的实现原理
      • Vue对比原生开发的核心优势
      • Vue3与Vue2响应式原理差异
      • Proxy替代Object.defineProperty的原因
      • reactive与ref的核心区别
      • reactive处理基本类型的限制
      • watch与watchEffect的差异
      • Options API与Composition API架构对比
      • 组合式API常用方法解析
      • script setup语法糖的优势
      • 组合式API生命周期变化
      • 组合式API逻辑复用实现
      • Vue3的Tree shaking实现原理
      • Fragment特性的多根节点支持
      • Teleport组件的DOM传送场景
      • Suspense组件的异步解决方案
      • 静态提升(Static Hoisting)优化原理
      • Vue3组件通信方式的变化
      • mitt库与EventBus的核心差异
      • Modal组件设计(组合API+Teleport)
      • 自定义指令API的生命周期变化
      • v-if与v-for优先级变化(Vue3)
      • v-memo指令的缓存优化作用
      • 渲染函数h函数的导入变化
      • 组合式API的TS类型推导改进
      • defineProps/defineEmits类型声明
      • Vue3的IE11兼容性方案
      • Vue3移除API的替代方案
      • 组合式API+Teleport实现Modal
      • 组件库Tree shaking优化策略
      • composition api 与 options api 的区别
      • vue3 的设计目标是什么?做了哪些优化?
      • vue3 实现一个 Modal 组件设计思路与流程分析
      • vue3 的性能提升主要体现在哪些方面?
      • proxy api 与 defineProperty API 比较
      • Vue3.0中Treeshaking特性
      • React设计理念与核心优势
      • 虚拟DOM原理与Diff算法优化
      • React与Vue对比分析
      • Fiber架构核心思想
      • 类组件与函数组件区别
      • React生命周期阶段与方法
      • React生命周期变更原因
      • React组件通信方式
      • 受控与非受控组件区别
      • Redux设计思想与工作流程
      • Redux与Mobx对比分析
      • Context API使用与限制
      • React Hooks核心原理
      • 常用Hooks使用场景
      • useMemo与useCallback优化原理
      • 自定义Hooks实现与规范
      • 避免不必要的渲染策略
      • React性能分析工具
      • Immutable.js在React中的作用
      • React合成事件机制
      • React服务端渲染实现与优化
      • React Portal应用场景
      • 错误边界实现与使用
      • React Router原理与配置
      • Redux中间件原理与常用库
      • Redux状态持久化方案
      • React项目性能优化手段
      • 组件库设计原则与实现
      • React项目常见问题解决
      • React与Vue核心区别
      • Redux与Vuex异同分析
      • React Native核心原理
      • RN混合开发兼容性问题
      • Next.js核心功能与场景
      • React新特性:并发与Suspense
    • TypeScript基础类型种类
    • void类型的应用场景
    • never类型的特殊用途
    • object与Object类型区别
    • any与unknown类型对比
    • 对象类型定义方式对比
    • 接口继承特性
    • 类型别名联合与交叉运算
    • 接口与类型别名核心区别
    • 模块化类型导入导出
    • 类成员可见性修饰符
    • static修饰符的静态成员特性
    • readonly修饰符初始化限制
    • 抽象类与接口实现差异
    • 泛型基础与类型约束
    • 条件类型与infer关键字
    • 映射类型实现原理
    • 模板字面量类型特性
    • keyof操作符类型索引
    • typeof操作符类型推导
    • 索引访问类型深度提取
    • Awaited工具类型作用
    • Partial工具类型作用
    • Required工具类型作用
    • Pick工具类型作用
    • Record工具类型作用
    • Exclude工具类型作用
    • Extract工具类型作用
    • Omit工具类型作用
    • NonNullable工具类型作用
    • Parameters工具类型作用
    • ConstructorParameters工具类型作用
    • ReturnType工具类型作用
    • InstanceType工具类型作用
    • NoInfer工具类型作用
    • ThisParameterType工具类型作用
    • OmitThisParameter工具类型作用
    • ThisType工具类型作用
    • TypeScript核心优势与特性
    • 类型声明文件管理规范
    • 类型守卫实现方式
    • 声明合并机制应用
    • 渐进式类型迁移策略
      • Webpack及其核心作用
      • Webpack核心原理
      • Webpack中的bundle、chunk和module的区别
      • Webpack生命周期(构建流程)
      • Webpack支持的模块规范及import与require处理
      • Webpack中--config选项的作用
      • Loader和Plugin的区别
      • 常见Loader及CSS-Loader与Style-Loader区别
      • 编写自定义Loader或Plugin
      • Webpack处理内联CSS/SASS/图片资源
      • File-Loader与URL-Loader的区别
      • Webpack多页与单页应用配置
      • Webpack按需加载实现
      • Webpack的Tree Shaking机制
      • Webpack打包速度与体积优化
      • Webpack持久化缓存配置
      • Webpack公共代码抽取
      • Webpack独立打包JS/CSS/HTML
      • Webpack与LocalStorage离线缓存
      • webpack-dev-server的作用与原理
      • webpack-dev-server端口与跨域配置
      • Live-Reload与HMR热更新区别
      • 提升HMR热更新效率
      • Ant Design按需加载配置
      • Webpack与Vue/React项目集成
      • Webpack与构建工具对比
      • Vite与Webpack热更新差异
      • html-webpack-plugin的作用与配置
      • Webpack整合Monaco Editor
      • publicPath配置的作用
      • 条件组件的按需打包
      • CSS代码结构优化
      • npm模块安装机制
      • package-lock.json的作用与影响
      • package-lock.json与yarn.lock区别
      • npm缓存管理与配置
      • 依赖类型区别与使用场景
      • optionalDependencies的应用场景
      • 检测项目依赖的方法
      • npm script生命周期钩子
      • npm run命令执行流程
      • 加速npm install的策略
      • npm install与npm ci的区别
      • npm包平滑升级策略
      • npm包紧急Bug修复方法
      • npm workspaces的用途与配置
      • npm/Yarn/pnpm对比分析
      • npm脚本参数传递规则
      • npm publish生命周期钩子
      • package.json创建方法
      • Vite的定义与核心目标
      • Vite工作原理与快速开发实现
      • Vite模块预构建机制
      • Vite热模块替换机制对比
      • Vite的Tree Shaking与Rollup集成
      • Vite性能优势核心原因
      • Vite项目创建与模板支持
      • vite.config.js的作用与配置
      • build与server配置项详解
      • Vite环境变量配置方法
      • Vite对CSS预处理器的支持
      • Vite静态资源处理策略
      • Vite的Gzip与代码分割配置
      • Vite多页应用与懒加载实现
      • Vite插件机制与常见Hook
      • 自定义Vite插件开发与执行顺序
      • 扩展Rollup配置的实践
      • 实用Vite插件举例
      • Vite对Vue/React的深度支持
      • Vite服务端渲染(SSR)实现
      • Vite的TypeScript处理机制
      • Vite集成WebAssembly
      • Vite调试独立文件的方法
      • Vite启动与构建性能优化
      • Vite构建性能分析工具
      • Vite持久化缓存机制
      • Vite包体积优化策略
      • Vite生产环境优化配置
      • Vite与Webpack/Rollup对比
      • Vite对CommonJS模块的支持
      • Vite插件生态与Rollup兼容性
      • Vite开发服务器HTTPS配置
      • Vite全局常量定义方法
      • Vite的base配置项作用
      • Vite开发与生产构建差异
      • Vite按需加载实现方案
      • Vite自定义路由解析扩展
    • 浏览器多进程架构与进程职责
    • 关键渲染流程阶段解析
    • 重排与重绘的优化策略
    • 事件循环与任务队列管理
    • Chrome版本通道特性差异
    • HTTP协议版本核心特性对比
    • HTTPS加密握手流程解析
    • 强缓存与协商缓存机制
    • HTTP状态码分类与语义
    • HTTP请求方法语义规范
    • CDN边缘缓存与资源分发策略
    • 浏览器多级缓存层级结构
    • Nginx缓存配置与失效机制
    • ETag与Last-Modified校验对比
    • Cache-Control指令集详解
    • TCP三次握手与四次挥手
    • TCP与UDP协议特性对比
    • 滑动窗口与流量控制
    • 网络分层模型核心职责
    • QUIC协议与HTTP/3性能优势
    • XSS攻击防御与CSP策略
    • CSRF攻击Token验证机制
    • HTTPS中间人攻击防护
    • 点击劫持与X-Frame防护
    • 资源加载性能优化
    • 同源策略与跨域解决方案
    • Cookie安全属性配置策略
    • JWT认证机制实现原理
    • OAuth2.0授权码模式流程
    • WebAssembly性能优化场景
    • SSE与WebSocket协议对比
    • 常见HTTP请求头作用详解
    • 内容编码与传输优化策略
    • 分块传输编码实现原理
    • 预检请求触发条件与优化
    • 文件上传协议实现方案
    • 对称与非对称加密算法对比
    • 数字签名与证书链验证
    • TLS协议版本演进与兼容性
    • HTTPS混合加密工作流程
    • 国密算法应用场景解析
    • DNS解析过程详解
    • CDN的DNS调度策略
    • 域名劫持与HTTP DNS方案
    • IPv4与IPv6协议差异
    • 浏览器输入url并按下回车后,期间发生了什么
    • 反向代理与正向代理区别
    • 求数组中最大的两个值
    • 实现无限累加的一个函数
    • GitHub
  • to navigate
  • to select
  • to close
    • Home
    • Engineering
    On this page
    engineering

    Engineering

    前端工程化是指在前端开发过程中,为了提高效率、降低成本、保证质量而采用的一系列工具、方法和流程。它涵盖了代码规范、构建优化、自动化测试、持续集成等多个方面。

    folder

    Webpack

    webpack是一个现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些信息打包成一个或多个包

    folder

    Npm

    npm 是 Node.js的包管理工具,用于安装和管理JavaScript库和框架。它允许开发者通过简单的命令行操作来下载、共享和分发代码。npm的全称是Node Package Manager,它提 …

    folder

    Vite

    vite是一个现代化的前端构建工具,它使用Rollup作为打包器。Vite提供了一个开发服务器,支持热模块替换(HMR),并且可以快速启动和重新加载你的项目。这使得开发者可以更快地看到他们的更改,并提 …


    © 2025 Zi.Yang. Built with Lotus Docs