-
本文揭示JavaScript代码在浏览器控制台与Node.js环境中输出不一致的根本原因:并非运行时环境差异,而是浏览器DevTools的「表达式求值回显」机制导致多出一行'baz',实际逻辑行为完全一致。本文揭示JavaScript代码在浏览器控制台与Node.js环境中输出不一致的根本原因:并非运行时环境差异,而是浏览器DevTools的「表达式求值回显」机制导致多出一行`'baz'`,实际逻辑行为完全一致。你遇到的现象看似
-
TransformStream不能直接处理HTML字符串或DOM节点,因其仅工作于ReadableStream/WritableStream的字节块层面;必须先通过TextDecoderStream将fetch().body等原始流解码为字符串流,再接入自定义TransformStream进行逐块处理,而innerHTML或DOMParser是同步操作,流已结束,无法介入。
-
计算属性不能处理异步接口返回,因其设计为同步纯函数,依赖响应式数据实时计算并缓存结果;若引入async/await,则返回Promise而非实际值,破坏缓存与渲染逻辑;应改用watch监听变化并更新ref,再通过computed组合状态。
-
Map.prototype.set()返回undefined,故原生不支持链式调用;需继承Map并重写set等方法使其返回this,再扩展状态机语义如transition、exec,结合WeakMap可实现实例级隔离的状态映射。
-
WebSocket协议本身不支持消息优先级,必须在应用层用多队列+权重调度实现;uWebSockets.js和Swoole等高性能方案效果最稳,SocketRocket需依赖GCD队列优先级,sockjs-client只能靠缓冲延迟微调。
-
repeat()是CSSGrid的函数式语法,用于grid-template-columns/rows中定义重复轨道,需配合display:grid使用,常见形式有repeat(4,200px)、repeat(3,1fr2fr)、repeat(auto-fit,minmax(200px,1fr)),误用主因是缺失网格上下文或错用于子项属性。
-
JavaScript不直接适配屏幕,而是通过检测(如clientWidth、visualViewport)、响应(resize/orientationchange事件)和补位(动态改class、canvas像素比)实现;需节流监听、区分CSS/物理像素、配合viewport与dpr处理高清屏。
-
spellcheck属性仅提示浏览器允许拼写检查,不修正错字、不阻止提交、不校验语义;其生效需满足可编辑元素(如text/textarea/contenteditable)、用户正在输入、系统拼写开关开启、无autocorrect等属性压制等条件。
-
@media(orientation:landscape)单独使用效果差,因它仅检测方向而不感知视口高度骤减、vh抖动、fixed偏移及系统UI干扰等真实问题。
-
真实断点应从内容撑开或挤崩的临界宽度出发,用ChromeDevTools拖动宽度滑块观察导航换行、卡片堆叠、表单重叠、图片变形等现象,记录如623px等值后向上取整为640px、900px等;一律使用min-width媒体查询,避免max-width留白;CSS变量不可用于@media条件中;需同步处理表单和图片的固有行为,如input最小宽、textarea最小高、img的max-width:100%等。
-
直接重置fieldset边框和legend样式最省事:fieldset{border:none;padding:0;margin:0;},legend{display:block;width:fit-content;margin:0auto;},并注意浏览器对legend定位的隐式规则。
-
@extend是选择器合并而非复制粘贴,仅适用于无上下文依赖的纯辅助类(如.sr-only、%clearfix);滥用会导致选择器爆炸、优先级错乱和跨文件失效。
-
Less中需自定义单位转换函数,核心是用unit()提取数值、unitless()和isdimension()组合判断类型,基准值设为变量以支持响应式动态切换,拼接单位必须用+号。
-
navigator.deviceMemory无法获取精确内存信息,只能提供近似值。1.navigator.deviceMemory是当前唯一标准属性,但返回的是2的幂次方近似值,如4、8等,并非真实GB数;2.浏览器出于隐私保护限制精确值,防止用户指纹识别;3.可通过该值粗略判断设备性能,指导资源加载策略,如高配设备加载高清图,低配设备优化资源;4.其他API如performance.memory仅反映JS堆内存使用情况,无法获取整机内存;5.若需更详细硬件信息,需借助原生应用或特定环境工具。
-
iOSSafari中border-radius:0对表单按钮无效,因-webkit-appearance:button强制走原生渲染,跳过CSS圆角计算;需统一设-webkit-appearance:none才能生效。