Flexbox 弹性布局
一、是什么 简称 box，意为”弹性布局”，是一种一维的布局模型。一次只能处理一个维度上的元素布局，一行或者一列。 采用Flex布局的元素，称为 容器（ ），简称”容器“；它的所有子元素自动成为容器成员，称为 项目（ ），简称”项目“。 容器中默认存在两条轴， 主轴 和 交叉轴 。项目默认沿主轴排列，通过 来决定主轴的方向。 每根轴都有起始线和终止线，用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...
JavaScript 并发模型与事件循环：单线程的异步魔法
1\. JavaScript 的单线程特性 JavaScript 是单线程的，这意味着它一次只能执行一个任务。这种设计简化了编程模型，避免了多线程环境中的复杂问题（如死锁、竞态条件等）。然而，单线程也意味着如果某个任务耗时较长，可能会阻塞后续任务的执行。 为了解决这个问题，JavaScript 引入了 事件循环 和 非阻塞 I/O 机制，使得它能够在执行同步代码的同时，处理异步任务（如定时器、网络请求、I/O 操作等）。 2\. （Ev...
Proxy 与 Reflect 的关系、作用与应用场景
1\. Proxy 与 Reflect 简介 代理（Proxy）是一种 ，允许为其他对象创建一个代表或占位符对象，以控制对它的访问。在JavaScript中， 对象是一个内置对象，用于创建一个对象的代理，从而可以拦截和自定义对象的 ，如属性查找、赋值、枚举、函数调用等。 反射（Reflect）是ES6中引入的一个内置对象，它提供了拦截JavaScript操作的方法，这些方法与 对象的陷阱（trap）方法相对应。 对象的方法可以用来实现默...
提升CSS渲染性能
1\. 提升CSS渲染性能: 2\. 合适使用css选择器: 3\. 提升css文件加载的性能: 4\. 精简css代码: 5\. 合理使用web fonts: 6\. css动画优化:
深入解析 Webpack 的构建流程
1\. 初始化阶段：准备启动引擎 当你启动 时，它就像一个超级工厂的启动按钮，开始准备好一切——加载配置文件、初始化插件，并准备好开始生产。 实例：准备你的工厂配置 解释： 入口文件（Entry） ：Webpack 从这里开始它的构建任务，像一个工厂的生产线入口。 输出路径（Output） ：Webpack 会把构建好的产品放在这里。 就是每个产品的唯一标识，确保浏览器不会缓存过时的文件。 模块加载（Loaders） ：当 Webpac...
网络代理详解
一、 的基础概念 1\. 什么是代理？ 代理是一种通过中间服务器来帮助 访问目标服务器的技术。代理服务器位于客户端与服务器之间，充当两者的中介，从而实现客户端和服务器之间的隔离。用户的所有请求经过代理后，再发往目标服务器，而目标服务器的响应则返回代理，再由代理传递给用户。 2\. 网络代理的工作流程 在基本的网络代理工作流程中， 扮演了“请求转发者”和“响应返回者”的角色： 1. 客户端请求 ：客户端将请求发送到代理服务器，而不是直接发...
Babel 全面解析（原理+实践指南）
一、核心定位与架构 Babel工作流程图 1\. 技术定位 JavaScript 编译器 ：将新版JS代码转换为旧版 语法转换器 ：处理新语法特性 代码转换平台 ：支持插件扩展 2\. 核心架构 输入代码 解析器 AST抽象语法树 转换器 生成器 输出代码 二、核心组件详解 1\. 核心包对比 | 包名 | 作用 | 必要程度 | | | | | | @babel/core | Babel编译核心引擎 | 必...
Browserslist: caniuse-lite is outdated
问题 然后就出现这样的情况 在开发时，不知道动了哪块蛋糕，突然页面变成了这样子，打开控制台 后，发现定义的px都被转换成了 rem，而且比较小，因此出现了这样的情况 分析 caniuse lite已过时 Browserslist 帮助我们在 和包大小之间保持适当的平衡。 使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。 为什么要定期更新 caniuse lite 浏览器兼容性：canius...
了解babel的作用、原理、基本使用，为什么有babel，以及在webpack中的babel-loader
一、为什么有 ？ babel是一个工具链，如今大多数的浏览器都支持 +的语法和特性，但难免有些旧版本的浏览器是不支持的，为了兼容这些旧版本的浏览器，有了babel这一个 JavaScript 编译器。它能为我们做一些事情：对更高级的语法进行转换，引入第三方 polyfill 模块，对旧版本浏览器不支持的特性打补丁（补充缺失的功能）。 二、基本使用 1.命令行使用 安装以下包： 运行此命令将 目录下的所有代码编译到 dist目录： 也可以...