全部文章
共 1306 篇文章
css中，有哪些方式可以隐藏页面元素？区别?
一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单，设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应，想必都会想到 rem 、 vw 等相对单位，我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px \ 160px； 屏幕宽度小于120...
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编译核心引擎 | 必...