前端技术文章
-
直接用innerHTML插入用户输入会引发XSS和DOM错乱，因浏览器将<script>等字符解析为HTML；关键在于按上下文（文本节点、属性值、JS字符串等）精准转义或使用textContent/DOMPurify。167 收藏 -
Breadcrumb必须严格使用breadcrumb__element--modifier命名，块名是语义锚点；当前页应为breadcrumb__item--current作用于li，分隔符用li:not(:last-child)::before控制，中间项需保留DOM仅隐藏。379 收藏 -
localStorage不能直接替换Cookie，因二者语义不同：Cookie自动随请求发送、支持服务端控制字段和HttpOnly，localStorage纯客户端、无自动传输与过期机制、存取需手动序列化且不安全。380 收藏 -
isPrototypeOf()用于检测原型链关系，调用在潜在原型对象上并传入待检测对象，返回布尔值；它比instanceof更底层灵活，不依赖构造函数，仅检查实际原型链。265 收藏 -
counter-reset在子元素中不生效，根本原因是它只对后续同级或后代中满足作用域条件的counter-increment生效，且重置动作不继承、不传播、不穿透伪元素边界。333 收藏 -
track标签不添加字幕，仅声明外部轨道；显示依赖WebVTT合规性、路径可访问、浏览器加载成功及用户启用。440 收藏 -
必须用@forward+@use：ElementPlusSCSS变量系统基于SassModules重构，$colors等变量以嵌套map结构组织并带!default声明；@import已被官方弃用，会导致覆盖失效或编译错误，正确做法是先@forward原始var.scss并with覆盖值，再@useindex.scssas*，且需配置插件importStyle:'sass'确保走源码编译。317 收藏 -
metacharset和http-equiv的顺序会影响浏览器解析吗会，而且影响很实际：如果不在文档前1024字节内，某些旧版IE或移动端WebView可能按默认编码（如ISO-8859-1）解码后续HTML，导致中文乱码或脚本加载失败。实操建议：必须放在最开头，紧随标签之后，前面不能有注释、空格或任何其他标签等兼容性声明可以放它后面，但不要前置避免用http-equiv="Content-Type"替代charset——它已被废弃，且不被所有119 收藏 -
HTML中input的maxlength和minlength属性用于限制输入长度。其中，maxlength属性定义了用户可以在输入框中输入的最大字符数，而minlength属性则定义了最小字符数。1. maxlength 属性作用：限制用户最多可以输入的字符数。语法：示例：
示例：
maxlength仅截断键盘输入，对粘贴、拖拽、移动端组词等无效，需监听input事件手动截断；minlength=6与maxlength=6需配合required才强制6字符；number/date等type不支持maxlength，应改用min/max或JS校验；emoji混输时按UTF-16计数导致不准，推荐服务端最终校验。419 收藏
HTML压缩对传输效率提升有限，仅当服务器未启用Gzip/Brotli时才有效；真正起效的是Content-Encoding:br或gzip响应头，而非本地删减空格注释。433 收藏
BootstrapModal必须配合JS才能实现完整交互功能，仅HTML+CSS无法自动弹出、加遮罩或管理焦点；最小结构需包含modal容器、dialog、content三部分并设唯一id；常用问题包括未引入bootstrap.bundle.js、触发按钮属性缺失或ID错误；自定义样式推荐使用CSS变量以兼容JS行为。206 收藏
用@keyframes定义可复用边框动画需将关键帧置于顶层且名称静态，如@keyframesborder-pulse；通过Mixin封装动画参数并显式设置animation-fill-mode:forwards；禁止在Mixin内声明@keyframes，多文件共用时应集中定义并@import引入。175 收藏
JavaScript垃圾回收由引擎自动管理，采用标记-清除算法，结合分代收集与增量/并发标记；常见内存泄漏包括闭包不当引用、全局变量、未清理定时器及DOM引用未解除。215 收藏
reduce的强大在于完全可控的归并过程：用户自定义每步累加器状态，支持求和、乘积、最值、计数、拼接、对象聚合、多级分组、去重及转Map等灵活数据处理。479 收藏
localStorage操作必须用setItem()/getItem()，存对象需JSON序列化，注意5MB限制、无痕模式兼容性、storage事件仅跨tab触发、无自动过期机制需手动实现TTL。386 收藏