前端技术文章
-
PerformanceObserver无法捕获LayoutShift，因为'layout-shift'不在其支持的entryTypes列表中，注册时会被静默忽略；仅Chromium120+、Safari17.4+等新版本部分支持getEntriesByType('layout-shift')，且需在document.readyState==='interactive'前调用，否则首屏抖动丢失；sources中节点为弱引用，访问前需可选链判断；移动端WebView普遍不支持，须双重检测；推荐使用web-vi326 收藏 -
现代三栏等高布局首选Flex或Grid：Flex通过display:flex与align-items:stretch自动等高，子项用flex:00200px（侧栏）和flex:1（主栏）；Grid通过grid-template-columns:200px1fr200px天然等高，二者均语义正确、响应式稳健，避免float/table-cell等易塌陷、难维护的旧方案。326 收藏 -
用minmax()与auto-fit组合实现列数自适应：grid-template-columns:repeat(auto-fit,minmax(300px,1fr)))；文字用clamp(1rem,2.5vw,1.5rem)防溢出；图片容器设aspect-ratio+object-fit:cover防变形；打印时显式定义grid-auto-rows或回退为block。326 收藏 -
验证HTML文件最权威的工具是W3CMarkupValidationService，可通过粘贴代码、上传文件或输入URL提交验证，获得包含错误位置的详细报告；2.HTML验证能避免跨浏览器兼容性问题、提升可访问性、增强SEO效果，并降低代码维护与调试难度；3.除浏览器外，可使用VSCode等编辑器的LiveServer插件、本地服务器（如http-server、Browsersync）或在线平台（如CodePen、JSFiddle）预览HTML文件；4.验证频率建议为关键功能完成后、部署前以及遇到疑难问题326 收藏 -
object-view-box不是标准CSS属性，不存在于任何规范或主流浏览器中；实际应使用container-type+aspect-ratio+@container查询，或object-fit配合aspect-ratio实现容器形状适配。326 收藏 -
Word无法正确渲染现代CSS，需将样式内联、用table替代flex/grid、图片用绝对路径或base64；Pandoc配合--standalone和--css可转换但支持有限；python-docx需手动解析HTML；浏览器打印PDF再转DOCX易致文字图片化、格式错乱。326 收藏 -
KeepAlive是Vue3.2+内置组件，用于缓存动态组件实例与状态，需显式命名、包裹RouterView，并利用onActivated/onDeactivated钩子及路由meta灵活控制缓存策略。326 收藏 -
KeepAlive最大缓存实例数必须通过max属性显式设置正整数，否则内存持续累积；超出时按LRU自动淘汰最久未用实例，并需配合include/exclude精准控制缓存范围及组件内手动清理副作用。325 收藏 -
Less的data-uri()函数需静态路径、不支持变量或构建别名，SVG易因BOM/XML声明静默降级，Safari不支持content:url(data:)，CSP须配置img-src'self'data:。325 收藏 -
纯CSS无法直接美化原生单选框，需隐藏input并用label+伪元素模拟；批量“选中所有”单选框在逻辑上不可行，因同name单选框组天然互斥。325 收藏 -
银行卡号掩码处理保留前4位和后4位，中间用星号替代；正则模式为^(\d{4})\d{7,15}(\d{4})$，配合代码动态计算星号数量，兼顾15–19位卡号兼容性。325 收藏 -
事件冒泡与捕获是 JavaScript 中处理事件的两种机制，理解它们有助于更好地控制事件行为。以下是详细解释：一、事件冒泡（Event Bubbling）定义： 当一个元素上的事件被触发时，该事件会从该元素开始，向上传播到其父元素，直到传播到 document 或 window。示例： 假设有一个嵌套结构：
事件冒泡和捕获的本质区别是传播方向不同：捕获阶段从document向下传递至目标元素，冒泡阶段从目标元素向上传递回document；两者是浏览器固定执行的两个连续阶段，非互斥模式。325 收藏
本文详解如何通过显式等待与CSS选择器精准定位并提取USNews搜索页面中嵌套结构内的动态加载链接，避免因DOM渲染延迟导致的元素查找失败。325 收藏
真正可交付的HTML模板美化必须依赖外部CSS+语义化结构+可控作用域，通过:root声明CSS变量统一管理主题色与间距，支持暗色模式切换，避免内联样式及appearance:none单独使用导致的兼容问题。325 收藏
直接修改document.body.style.backgroundColor是最简方式，但需通过style对象而非body元素直接赋值；推荐用classList切换预设CSS类以避免内联样式污染和兼容问题。325 收藏