前端技术文章
-
可通过操作DOM元素的style属性动态修改文本或背景颜色，方法包括：一、直接修改内联样式；二、切换预定义CSS类；三、修改CSS自定义属性；四、用getComputedStyle读取并智能计算新颜色；五、通过setAttribute设置style字符串。162 收藏 -
HTML编码规范的核心是减少歧义、避免浏览器误解析、保障协作效率；需强制写DOCTYPE和lang，class用语义化小写短横线命名，块级标签显式闭合，属性按class→id→data-→src/href/for→type→alt/title→aria-/role顺序并统一双引号。203 收藏 -
SCSS中@each用于编译期遍历列表或地图：列表用@each$itemin(a,b,c)，地图用@each$key,$valuein(k:v)；@for适用于数字范围生成类名；@while因变量不可重赋值且无递归支持，极少实用。421 收藏 -
@babel/plugin-transform-react-jsx不能删调试代码因仅做语法转换、不分析语义；需自定义插件匹配console、debugger和process.env条件判断，并前置声明以确保AST可识别。494 收藏 -
JavaScript解析JSON必须用JSON.parse()而非eval()以防XSS，生成时需处理循环引用和不可序列化值，解析前应校验数据来源与类型，大数据量需流式解析或懒加载。343 收藏 -
空隙过大主因是margin/padding过大、默认样式或外边距合并；应先用开发者工具定位来源，再针对性调整margin、改用gap、重置默认样式或用flex/grid布局优化。350 收藏 -
reduce()未提供初始值时存在三类隐患：空数组抛TypeError、单元素不执行回调、首项类型主导后续计算；应始终显式传入合理初始值以确保行为可控。198 收藏 -
JavaScript事件是用户或浏览器触发的通信机制，通过addEventListener绑定可避免覆盖、支持多监听和精确移除；需善用event对象属性（如target、preventDefault）、事件委托及语义化API（如key而非keyCode）。437 收藏 -
![使用 Array.prototype.entries() 配合 for...of 可以在遍历数组时同时获取索引和值。entries() 方法返回一个包含数组键值对的迭代器，每个元素是一个 [index, value] 的数组。示例代码：const arr = ['apple', 'banana', 'cherry'];
for (const [index, value] of arr.entri](/uploads/20260512/17785996706a0346f60fe79.png)
entries()返回一个数组迭代器对象，每次调用next()产出形如[index,value]的二元数组，支持for...of遍历，不可直接解构为对象。234 收藏 -
Tailwind默认不支持width过渡动画，需用transition-[width]配合内联style="width:X%"实现平滑动画，类名切换（如w-1/2）无法插值。471 收藏 -
fr单位是CSSGrid实现等宽多列最直接可靠的方式，通过grid-template-columns配合repeat()或混搭固定值与minmax()，可灵活实现等宽、响应式及自适应布局。157 收藏 -
forced-colors:active是独立于dark:的高对比度模式媒体查询，因系统强制渲染导致prefers-color-scheme不触发，Tailwind默认不支持，须手写CSS并谨慎控制forced-color-adjust。128 收藏 -
HTML5play()不能无条件直接调用，必须在用户手势（如click、touchend）回调中同步调用并处理Promise返回值，否则会因权限限制被拒绝。462 收藏 -
--prof是定位CPU瓶颈最轻量可靠的方式，每毫秒采样调用栈生成V8日志；需用--prof-process解析，优先优化selftime高且调用频繁的函数，并配合--trace-deopt、--trace-compiler和--inspect深入归因。164 收藏 -
transform:rotate()仅实现元素绕自身transform-origin的自转，非圆周运动；真圆周运动需结合translateX/Y与三角函数计算坐标，或用@keyframes预设关键帧、offset-path路径动画、或JS+requestAnimationFrame动态更新位置。110 收藏