前端技术文章
-
transition不支持LCH/HSL插值，浏览器强制转为sRGB线性插值；唯一可行方案是拆解LCH分量为自定义属性并用@property分别声明动画。358 收藏 -
Chrome桌面端可直接用SpeechRecognition，但需HTTPS或localhost；Safari和Firefox完全不支持；无有效polyfill；最小可用需检测兼容性、设lang为zh-CN、interimResults为true并监听onresult事件。358 收藏 -
100vw导致水平溢出是因为它按视口总宽度（含滚动条占位）计算，而Windows等系统滚动条宽度不固定，造成“自己撑出滚动条”的循环；应使用document.documentElement.clientWidth动态获取真实可用宽度。358 收藏 -
JavaScript是运行于多宿主环境的动态弱类型原型语言，核心机制包括执行上下文与调用栈、TDZ、事件循环、this绑定规则及原型链查找逻辑。358 收藏 -
JavaScript类型转换分显式和隐式：显式由开发者调用Number()、String()、Boolean()等控制，隐式由引擎在==、+、!等操作中自动触发；应优先用===、显式转换和类型检查来规避bug。358 收藏 -
RGBA颜色通过红绿蓝分量和阿尔法通道控制透明度，alpha取值0到1，常用于半透明背景、遮罩层和文字阴影等场景，相比十六进制透明更直观且兼容性好。358 收藏 -
应使用语义化HTML结构：用<aside>包裹整体说明，<dl><dt><dd>分层组织规则，关键数值用或<mark>强调，动态更新时仅修改textContent并用data-属性存规则数据。358 收藏 -
默认CSS盒模型使width不包含padding和border，导致实际宽度超出；使用box-sizing:border-box可让width包含二者，推荐全局设置*{box-sizing:border-box}，并配合calc()、flex:1等避免溢出。358 收藏 -
Intl对象是浏览器和Node.js原生国际化API，无需第三方库即可精准适配全球日期、数字、货币等本地化格式，基于ICU实现高性能格式化。358 收藏 -
crossorigin="use-credentials"由浏览器自动携带Cookie等凭证，模块加载器不管理Token；服务端必须返回精确Origin域名和Access-Control-Allow-Credentials:true，缺一则加载失败。358 收藏 -
优先使用JavaScript的location.href或location.replace()实现定时跳转，因<metahttp-equiv="refresh">过时、不可控、破坏历史栈且影响SEO；其仅适用于无JS环境的静态页。358 收藏 -
块级元素与行内元素的核心差异在于默认盒模型行为和HTML语义约束：块级元素独占一行、可设宽高、可嵌套任意元素；行内元素横向排列、宽高由内容决定、不可嵌套块级元素（如<p>内不能放<div>），否则解析器将自动闭合，破坏DOM结构。358 收藏 -
JavaScript生成器函数是可暂停和恢复执行的特殊函数，通过function*声明并返回迭代器对象，调用next()方法逐步运行，yield关键字实现暂停、返回值及双向通信，适用于惰性计算、异步流程和自定义迭代等场景。358 收藏 -
JavaScript内存泄漏指本该回收的对象因意外保留引用而无法释放，导致内存持续增长、页面变卡甚至崩溃，常见于全局变量、未清理事件监听器、闭包持有大对象、定时器残留等场景。358 收藏 -
用div模拟进度条并用linear-gradient实现彩色效果，需通过width或transform:scaleX()控制填充长度，避免直接样式原生progress标签，兼容IE9需加纯色兜底和-ms-前缀。358 收藏