-
移动端font-variant-numeric失效主因是字体未内置OpenType数字特性(如tnum/lnum),系统默认中西文字体普遍仅支持比例数字;需用font-feature-settings实测验证,或换用已知支持的字体栈。
-
Array.from仅通过Symbol.iterator协议识别可迭代对象,不依赖类型或类数组结构;只要对象拥有返回合法迭代器的[Symbol.iterator]方法,即可转换为数组。
-
html2text最稳,适合批量处理;turndown适合前端定制但已停更;pandoc高保真但丢样式;在线工具仅限临时救急。批量转HTML到Markdown首选html2text,需加-b0、-g、--unicode-snob等参数避坑。
-
CSS属性书写顺序对渲染性能没有可测量影响,浏览器先收集全部声明再统一计算,不按文本顺序逐条执行;Recess等工具推荐的顺序仅为提升可读性、可维护性和协作效率,并非性能优化手段。
-
可在HTML中用<metaname="auth"content="whitelist">声明免登录页,路由守卫据此跳过登录校验,适用于内部工具等无需鉴权场景,但关键接口仍需服务端鉴权。
-
tel链接失效主因是href含空格或中文,须用纯数字;mailto参数需URL编码防截断;移动端拦截需原生a标签同步触发;邮箱暴露风险无法前端规避。
-
预渲染适合内容静态、路由固定的关键页面(如首页、关于页),用于快速提升SEO和首屏性能;其原理是在构建时用无头浏览器访问路由并保存完整HTML快照,部署后直接返回静态文件。
-
本文详解如何使用原生JavaScript结合FullscreenAPI,实现点击触发全屏、滚动鼠标自动退出全屏,并妥善管理事件监听器生命周期,避免内存泄漏与重复绑定。本文详解如何使用原生JavaScript结合FullscreenAPI,实现点击触发全屏、滚动鼠标自动退出全屏,并妥善管理事件监听器生命周期,避免内存泄漏与重复绑定。在现代网页开发中,FullscreenAPI是提升沉浸式体验(如图片画廊、视频播放器、数据看板)的常用手段。
-
BEM本身不提供CSS全局变量,其block前缀(如search-form__input)是最轻量可控的命名空间机制;它通过三段式类名声明作用域边界,使样式归属、角色和状态明确,从而避免class冲突导致的覆盖,但前提是block必须真实存在且不越界。
-
rem适配本质是动态设置html字体大小,核心是以设计稿宽度为基准等比缩放屏幕宽度,使1rem对应设计稿中固定像素值,需内联JS设置、监听横竖屏变化并防抖、viewport必须设initial-scale=1且禁用缩放,配合构建工具自动转换px为rem。
-
语义化标签是网页可访问性与SEO的基础:<article>用于可独立分发的内容,<section>用于主题分组;<main>必须唯一;<nav>仅限主要导航;<aside>表示关联非必需内容。
-
判断表单提交前数据被JS修改,需检查submit事件监听器、input/change/blur事件绑定、FormData或URLSearchParams手动构造、event.preventDefault()使用及hidden字段动态计算等关键点。
-
width=device-width是告诉浏览器使用设备真实宽度而非默认980px桌面视口,避免内容缩小、文字模糊、点击失准;initial-scale=1.0则禁用iOSSafari自动缩放逻辑,确保布局准确。
-
event.preventDefault()仅对特定事件同步生效,监听对象错误、位置不当或异步调用均会导致失效;需正确绑定submit事件、避免passive限制、注意框架合成事件差异。
-
position:absolute+padding-bottom不是等高布局的可靠解法,因其使元素脱离文档流导致父容器高度塌陷、各子项实际高度不一致,且响应式下易错乱;真正可行的是在flex或grid等高容器中使用margin-top:auto或align-self:end。