前端技术文章
-
浅拷贝只复制第一层，Object.assign()和展开运算符属此类，不递归处理嵌套对象；深拷贝需避开循环引用和特殊类型，JSON.parse(JSON.stringify())有诸多限制，structuredClone()更可靠但不支持function等，手写递归可定制化处理。189 收藏 -
对象解构中别名（用冒号）解决命名冲突，默认值（用等号）仅对undefined生效；二者可共存，如{username:loginName='访客'}，先重命名再判断是否undefined。326 收藏 -
sticky失效的根本原因是父容器未形成可滚动上下文：高度不足、overflow:hidden/auto/scroll截断、未设top等偏移值，或父容器高度≤sticky元素自身高度。485 收藏 -
最简单方案是使用支持HTTPS且无域名限制的iframe天气小部件（如weatherapi.com官方embed）；若需自定义，则用其前端友好API配合key调用，注意q参数用英文名、禁用aqi减少体积。415 收藏 -
直接删掉冗余的<div>和<span>比任何CSS/JS优化都有效；DOM节点超2000时，低端设备layout耗时呈指数级增长。真正拖慢渲染的是人为嵌套的“结构惯性”，如多层<div>套娃、误用<ul>渲染表单、SSR空wrapper、图标单独包层等；应优先用::before/after、gap、outline、语义化标签（如<fieldset>）替代；可通过document.querySelectorAll('*').length快速检测节点353 收藏 -
HTML文件名必须用全小写+kebab-case，禁用下划线、大小写混用、空格、中文及特殊符号；首页统一为index.html；class和id命名同样须用kebab-case且语义化。249 收藏 -
WebTransport对象不可克隆，因其为持有底层网络句柄、事件监听器和瞬时状态的宿主对象，structuredClone()仅支持可序列化值，克隆会抛出DataCloneError；替代方案包括传配置重建连接、MessageChannel通信或只克隆可序列化属性。165 收藏 -
tfoot必须写在tbody前面，因为HTML规范强制要求该顺序；浏览器解析时若发现tfoot在tbody后会自动重排DOM，导致CSS定位失效、JS节点顺序异常、打印错乱及首屏优化失败。485 收藏 -
链接hover文字滑动效果应使用transform:translateX()配合transition实现，避免margin或top等触发重排；需设overflow:hidden、position:relative及inline-block，移动端需用@media(hover:hover)降级或JS监听touchstart。295 收藏 -
background-clip属性决定背景的绘制范围，其默认值border-box使背景延伸至边框外沿，包含padding和content区域；若设置为padding-box则背景覆盖内边距及内容，而content-box仅在内容区显示背景，常因误设后两者导致背景未覆盖padding区域；通过将background-clip设为border-box，可确保背景色或背景图正确填充padding区域，避免“padding遮挡背景”的误解，尤其在使用渐变或图片背景时更需注意该属性的合理设置。360 收藏 -
当使用inline-block布局多个div时，因HTML中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用Flexbox彻底解决。396 收藏 -
CSS 实现卡片堆叠效果，使用 absolute 与 z-index 是常见方法。以下是一个简单实现思路：设置容器为相对定位（position: relative），以便内部绝对定位元素以它为参考点。给每个卡片设置绝对定位（position: absolute），并调整 top 和 left 值来控制位置。通过 z-index 控制卡片的层级顺序，数值越大越靠前。示例代码如下：
卡片堆叠不必须用position:absolute；本质由层叠上下文和z-index控制，position:relative等也能触发，但z-index对static无效，且父子层叠上下文会隔离z-index作用域。105 收藏
lang属性必须写在<html>标签上才有效，写在<body>或子元素中无效；charset和lang缺一不可，且位置、格式、大小写均影响解析与渲染效果。479 收藏
WebSocket.send()可发送DOMString、ArrayBuffer、Blob或TypedArray；不可直接发送对象、undefined或null，须先JSON.stringify()序列化，且需确保ws.readyState为OPEN。167 收藏
富文本编辑器XSS漏洞检测需贯穿数据生命周期，核心是发现输入过滤、编码处理或上下文渲染中的缺陷。首先注入script标签、事件处理器、javascript:伪协议等Payload，观察是否被正确转义或执行；常见触发点包括onerror、onload等事件属性及SVG、data:URI等非常规标签。绕过机制常利用双重编码、大小写混淆、HTML注释分割、非标准语法或浏览器解析差异。除XSS外，还需防范HTML注入导致的钓鱼与页面破坏、文件上传漏洞引发的任意代码执行、SSRF导致内网探测、信息泄露及CSRF引起313 收藏