BoardYoungC

防抖和节流本质上是优化⾼频率执⾏代码的⼀种⼿段 如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤ 绑定在事件上的回调函数，极⼤地浪费资源，降低前端性能 为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ 防抖（debounce） 和 节 流（throttle） 的⽅式来减少调⽤频率 节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 • 将时间戳写法的特性与定时器写法的特性相结合，实现⼀个更加精确的节流 1234567891011121314151617181 function throttled(fn, delay) {2 let timer = null3 let starttime = Date.now()4 return function () {5 let curTime = Date.now() // 当前时间6 let remaining = delay - (curTime - starttime) // 从上⼀次到现在，还剩下多少多余时间7...

XSS 攻击是什么？一、XSS 攻击是什么？XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的 Web 安全漏洞，攻击者通过在网页中注入恶意脚本（JavaScript、HTML、CSS 等），当用户访问被注入的页面时，恶意脚本会在用户的浏览器中执行，从而实现窃取用户信息（Cookie、Token）、伪造用户操作、劫持会话、植入恶意广告等恶意行为。 XSS 攻击的核心本质：违背 “前端渲染数据不可执行” 的原则—— 正常情况下，前端展示的用户输入 / 第三方数据应作为 “纯文本” 处理，若被当作 “可执行代码” 解析，就会触发 XSS。 XSS 的分类（按触发方式）： 类型 触发场景 示例 存储型 XSS 恶意脚本被永久存储在服务器（数据库 / 文件），用户访问页面时从服务器加载执行 攻击者在论坛发帖时注入 <script>偷Cookie()</script>，所有查看该帖的用户都会执行脚本 反射型 XSS 恶意脚本通过 URL 传入，服务器 “反射”...

Set 和 Map 的区别Set 和 Map 是 ES6 新增的有序集合类型（区别于普通对象 / 数组），核心定位不同：Set 是「值的集合」（无重复值），Map 是「键值对的集合」（键可任意类型），二者在数据结构、使用场景、核心方法上差异显著，以下是全面对比： 一、核心定位与本质区别 特性 Set Map 本质 「值的集合」（无序？不，ES6 后 Set 是有序的，按插入顺序迭代），元素唯一 「键值对的集合」（有序，按插入顺序迭代），键唯一、值可重复 核心作用 存储不重复的单一值（去重、成员检测） 存储键值对（键可为任意类型，替代普通对象） 数据结构 单值结构：[value1, value2, ...] 键值对结构：[[key1, value1], [key2, value2], ...] 索引 / 访问方式 无索引，无法通过下标访问，只能遍历 / 检测存在性 可通过 key 访问 value（map.get(key)） 重复判定规则 基于「值的严格相等（===）」，NaN 视为相等（弥补 === 缺陷） 键的重复判定同...

闭包⼀个函数和对其周围状态（lexical environment，词法环境）的引⽤捆绑在⼀起（或者说函数被引⽤ 包围），这样的组合就是闭包（closure） 也就是说，闭包让你可以在⼀个内层函数中访问到其外层函数的作⽤域 12345678function init() {var name = "Mozilla"; // name 是⼀个被 init 创建的局部变量function displayName() { // displayName() 是内部函数，⼀个闭包alert(name); // 使⽤了⽗函数中声明的变量}displayName();}init(); 任何闭包的使⽤场景都离不开这两点： • 创建私有变量 •...

em/px/rem/vh/vw区别传统的项⽬开发中，我们只会⽤到 px 、 % 、 em 这⼏个单位，它可以适⽤于⼤部分的项⽬开发，且 拥有⽐较良好的兼容性 从 CSS3 开始，浏览器对计量单位的⽀持⼜提升到了另外⼀个境界，新增了 rem 、 vh 、 vw 、 vm 等⼀些新的计量单位 利⽤这些新的单位开发出⽐较良好的响应式⻚⾯，适应多种不同分辨率的终端，包括移动设备等 单位 在 css 单位中，可以分为⻓度单位、绝对单位，如下表所指⽰ 这⾥我们主要讲述px、em、rem、vh、vw px，表⽰像素，所谓像素就是呈现在我们显⽰器上的⼀个个⼩点，每个像素点都是⼤⼩等同的，所以 像素为计量单位被分在了绝对⻓度单位中 有些⼈会把 px 认为是相对⻓度，原因在于在移动端中存在设备像素⽐， px 实际显⽰的⼤⼩是不确 定的 这⾥之所以认为 px 为绝对单位，在于 px 的⼤⼩和元素的其他属性⽆关 16.2.2. em em是相对⻓度单位。相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设 置，则相对于浏览器的默认字体尺⼨（...

设备像素、css像素、设备独⽴像素、dpr、ppi 之间的区别在 css 中我们通常使⽤px作为单位，在PC浏览器中 css 的1个像素都是对应着电脑屏幕的1个物理像 素 这会造成⼀种错觉，我们会认为 css 中的像素就是设备的物理像素但实际情况却并⾮如此， css 中的像素只是⼀个抽象的单位，在不同的设备或不同的环境中， css 中的1px所代表的设备物理像素是不同的 当我们做移动端开发时，同为1px的设置，在不同分辨率的移动设备上显⽰效果却有很⼤差异 这背后就涉及了css像素、设备像素、设备独⽴像素、dpr、ppi的概念 介绍 CSS像素 CSS像素（css pixel, px）: 适⽤于web编程，在 CSS 中以 px 为后缀，是⼀个⻓度单位 在 CSS 规范中，⻓度单位可以分为两类，绝对单位以及相对单位 px是⼀个相对单位，相对的是设备像素（device pixel） ⼀般情况，⻚⾯缩放⽐为1，1个CSS像素等于1个设备独⽴像素 CSS 像素⼜具有两个⽅⾯的相对性： • 在同⼀个设备上，每1个 CSS 像素所代表的设备像素是可以变化的（⽐如调整屏幕的分辨率） •...

css与scssCSS 是网页样式的基础语言，语法简洁但功能单一；SCSS 是 CSS 的超集（属于 Sass 预处理器的一种语法格式），它在 CSS 的基础上增加了变量、嵌套、混合、继承等高级功能，写起来更高效、易维护，最终还需要编译成普通 CSS 才能被浏览器识别。 一、核心定义与关系 CSS（层叠样式表）是浏览器原生支持的样式语言，用于描述 HTML 元素的显示样式，语法是 “选择器 + 声明块” 的形式，没有任何编程化的特性，属于纯样式描述语言。 SCSS（Sassy CSS）是 Sass（Syntactically Awesome Style Sheets，CSS 预处理器）在版本 3.0 后推出的新语法，完全兼容 CSS 的语法（你可以把普通 CSS 代码直接复制到 SCSS 文件中，完全生效），同时增加了编程化的特性。另外，Sass 还有一种老语法（缩进语法，后缀为.sass），但现在SCSS（后缀.scss）是主流，因为它和 CSS 语法更接近，学习成本更低。 二、关键区别（附代码示例）1....

实现两栏布局 右侧⾃适应 三栏布局中间⾃适应两栏布局两栏布局实现效果就是将⻚⾯分割成左右宽度不等的两列，宽度较⼩的列设置为固定宽度，剩余宽度 由另⼀列撑满， ⽐如 Ant Design ⽂档，蓝⾊区域为主要内容布局容器，侧边栏为次要内容布局容器 这⾥称宽度较⼩的列⽗元素为次要布局容器，宽度较⼤的列⽗元素为主要布局容器 flex弹性布局 123456789101112131415<style>.box{display: flex;}.left {width: 100px;}.right {flex: 1;}</style><div class="box"><div class="left">左边</div><div class="right">右边</div></div> 三栏布局三栏布局按照左中右的顺序进⾏排列，通常中间列最宽，左右两列次之 ⼤家最常⻅的就是...

flex布局和grid布局Flex 布局（弹性布局）Flex 是一维布局模型（仅针对「行」或「列」单一维度），核心解决「行内 / 列内元素的空间分配、对齐」问题，适合线性布局（如两栏 / 多栏、导航栏、居中对齐等）。 核心特点 ： 以「主轴（默认水平）+ 交叉轴」为核心，元素沿主轴排列； 侧重「剩余空间分配」（如 flex:1 自动占满剩余宽度）； 适配性强，适合响应式线性布局（如两栏、均分列表）。 典型场景：导航栏、两栏 / 多栏自适应、元素垂直居中、流式布局。 Grid 布局（网格布局）Grid 是二维布局模型（同时控制「行 + 列」），核心解决「多行列的网格分区」问题，适合复杂的二维布局（如卡片网格、表单布局、页面整体框架）。 核心特点 ： 把容器划分为「行 + 列」的网格，元素可占据任意单元格（跨行列）； 支持精确控制行列尺寸（固定 / 比例 / 自动），如 grid-template-columns: 100px 1fr 2fr； 布局更精准，适合复杂二维分区。 典型场景：页面整体框架（头部...

css中隐藏⻚⾯元素通过 css 实现隐藏元素⽅法有如下： • display:none 将元素设置为 display:none 后，元素在⻚⾯上将彻底消失 元素本⾝占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘 消失后，⾃⾝绑定的事件不会触发，也不会有过渡效果 特点：元素不可⻅，不占据空间，⽆法响应点击事件 • visibility:hidden 从⻚⾯上仅仅是隐藏该元素，DOM结果均会存在，只是当时在⼀个不可⻅的状态，不会触发重排，但 是会触发重绘 特点：元素不可⻅，占据⻚⾯空间，⽆法响应点击事件 • opacity:0 opacity 属性表⽰元素的透明度，将元素的透明度设置为0 • 设置height、width模型属性为0 将元素的 margin ， border ， padding ， height 和 width 等影响元素盒模型的属性设置成 0，如果元素内有⼦元素或内容，还应该设置其 overflow:hidden 来隐藏其⼦元素 特点：元素不可⻅，不占据⻚⾯空间，⽆法响应点击事件