前端技术文章
-
lastIndexOf()是提取文件后缀最直接可靠的方式：先用lastIndexOf('.')获取最后一点索引，再通过substring(index+1)截取后缀，并需判断索引有效性及边界情况如无点、点在末尾或开头等。120 收藏 -
max-width需配合width（如width:100%或width:fit-content）和display（如inline-block）才能避免塌陷或溢出；margin:0auto仅对有明确宽度的静态块级元素有效，Flex/绝对定位/行内元素需其他居中方式。104 收藏 -
<var>是纯语义化标签，仅标注变量名，不存储值、不绑定JS变量；其内容需用textContent获取字符串，不能直接当作JS变量使用。369 收藏 -
navigator.connection.effectiveType仅是浏览器基于历史数据估算的粗略网络类型，非实时网速指标；应以saveData为最高优先级，辅以downlink和rtt判断，结合防抖、兜底及手动开关实现可靠切换。348 收藏 -
ChromeDevTools的Capturefullsizescreenshot是最可靠零依赖全页截图方案，基于Blink引擎真实渲染快照，完整支持阴影、滤镜、SVG、WebGL等效果，不拼接不模拟；而html2canvas等库仅靠CSS解析重绘，对字体、跨域图、伪元素、Flex/Grid等支持极弱，仅适用于简单静态模块。242 收藏 -
URLPatternAPI是专为URL多维语义匹配设计的原生方案，非正则替代品；pathname模式需显式定义，支持:param、*、?、+等语法，test()返回布尔值，exec()返回含分组的完整匹配对象，需搭配newURL和URLSearchParams使用，并须兼容性兜底。487 收藏 -
transition属性必须写全，仅用all会导致Chrome/Safari/Firefox行为不一致；Safari中transform卡顿需加translateZ(0)或will-change；IE/EdgeLegacy不支持ease-in-out等缓动函数，须用cubic-bezier()显式声明；height:auto无法参与过渡。434 收藏 -
本文详解ReactRedux应用中因ActionPayload解构命名不一致导致wishlistItemId为undefined的典型崩溃问题，并提供两种兼容性修复方案及完整调试建议。135 收藏 -
浏览器扩展API可通过注入内容脚本增强网页功能。1.内容脚本在特定时机（如document_idle）注入，可操作DOM；2.通过postMessage安全通信，避免环境冲突；3.可添加按钮、自动填表、高亮文本等；4.权限需最小化，用activeTab和明确host声明保障隐私。448 收藏 -
页面将在5秒">
<metahttp-equiv="refresh">是HTML中唯一原生支持的页面跳转meta方式，语法为content="秒数;url=目标地址"，需置于<head>内，支持0秒跳转但SEO不友好、无错误处理且现代浏览器限制增多。265 收藏 -
HTML兼容性问题靠标准声明+特性检测+降级兜底三层解决：DOCTYPE必须首行无空格，html5shiv需配display:block规则，用Normalize.css统一默认样式，JS用存在性检测而非UA判断，构建配置须精准覆盖目标浏览器。501 收藏 -
dns-prefetch仅解析DNS，开销小、兼容好，适用于确定会访问但暂不加载的第三方域名；preconnect则完成DNS、TCP及TLS握手，代价高但收益直接，适用于即将高频加载的关键第三方资源。479 收藏 -
只写max-width不居中，因它仅设宽度上限而不控制定位；必须配合margin:0auto且确保元素为块级、未受flex/grid/float/position干扰。移动端推荐max-width:min(750px,100vw)双保险。154 收藏 -
双飞翼布局是2006年为兼容IE6–IE7设计的基于float、负margin和padding的CSShack方案，flex因其不依赖浮动、负边距及BFC清除机制，本质无法实现真正双飞翼。270 收藏 -
单文件组件（SFC）的模块划分本质取决于script中的设计思路，而非文件形式本身；应通过组合式函数按功能域抽离逻辑、语义化分组代码、角色化区分职责，并借助TypeScript与工具链强化边界。261 收藏