在主线程与 Worker 之间用 postMessage 传递复杂对象时,数据是如何拷贝的?
围绕“在主线程与 Worker 之间用 postMessage 传递复杂对象时,数据是如何拷贝的”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖解释结构化克隆算法的拷贝行为,不涵盖 Transferable 对象。
程序员面试题库第 23 页,收录第 1101–1150 题,共 5000 道完整解析,覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。
按稳定语义路径排序
围绕“在主线程与 Worker 之间用 postMessage 传递复杂对象时,数据是如何拷贝的”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖解释结构化克隆算法的拷贝行为,不涵盖 Transferable 对象。
围绕“Worker 能访问主页面所在的 cookie 吗”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕Worker 没有 DOM 但可 fetch 时携带 cookie,但无法直接读 document.cookie。
本题解释加载Worker脚本时的同源与CORS规则,包括跨域时所需的HTTP头、file协议限制、以及模块脚本的额外MIME要求,并提供实际场景与判断方法。
围绕“普通 Web Worker 和 Service(服务)Worker 在被用户关闭标签页后的生命周期有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕专用 worker 被终止,service worker 可能存活。
围绕“能否继承 Worker 类来创建自定义 Worker”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕可以继承,但实际中可能不如封装。
本文解释 Worker.terminate() 的强制终止机制,包括对运行中任务、事件循环、资源清理的影响,并比较与正常结束的区别,给出工程场景和边界条件。
围绕“在 Worker 内部调用 self.close() 和主线程调用 worker.terminate() 有什么异同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要比较主动关闭与外部终止,及各自触发的事件。
围绕“Worker 中支持 setTimeout 和 setInterval 吗?它们与主线程有何异同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕同样支持,但不涉及 requestAnimationFrame。
围绕“如何利用绝对定位与 auto 外边距将一个元素水平垂直居中,其原理是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释设置 top/left/right/bottom 为 0 与 margin: auto 的包含块尺寸分配机制。
本题解释绝对定位包含块的形成规则:由最近的非 static 定位祖先或具有 transform 等属性祖先的 padding 盒决定,若均无则初始包含块。通过示例说明非定位祖先通常不建立包含块,但可借助 transform 等属性改变定位参照,并强调百分比偏移基于包含块的尺寸。
本题梳理 BFC 的多种触发条件,如浮动、overflow、display: flow-root,并用实例解释其清除浮动、阻止 margin 合并等布局作用。
围绕“行内元素(如 span)设置 margin-top 和 height 为什么不会产生预期的垂直效果”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释行内非替换元素高度由 line-height 决定,垂直 margin 不影响行距,只影响水平 margin。
围绕“在默认 content-box 下,给一个 width: 200px 的元素添加左右 padding: 20px 和”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须计算总宽度为 200+20*2+5*2=250px,并说明附加在内容尺寸之外。
围绕“CSS 中 clear 属性设置 both 的原理是什么?它如何处理左右两侧的浮动元素”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释 clear 会在该元素上方增加 clearance 以避开浮动,并不清除浮动的“影响”,提到 clear 与 BFC 的区别。
围绕“当一个父元素只有浮动子元素而没有显式高度时,其高度为何塌陷为零?给出两种可行的修复方案”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释浮动脱离文档流导致父高度不撑开,并展示 overflow:hidden(BFC)与::after clearfix 两种方法,不。
围绕“CSS 的 contain: layout 或 contain: paint 如何帮助解决由全屏不必要的重排或绘制引”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释 containment 隔离盒内容与外部布局,减少重排范围,并说明应用场景(如长列表项),不深入小册子。
本题解释 content-box 与 border-box 在 width 计算上的差异,说明为何布局时优先选 border-box,并给出具体场景与边界条件。
围绕“在 Flex 容器中,要让子项文本溢出显示省略号,需要如何设置 min-width 或 overflow”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释 flex 项 min-width:auto 阻止收缩导致溢出,需设置 min-width:0 等,并说明与块级的不同。
围绕“为什么对 inline-block 元素设置 text-overflow: ellipsis 通常无效?请分析原因并”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 text-overflow 适用于块容器,inline-block 需要 overflow hidden 与 white-sp。
围绕“一个空的块级元素(无内容、无 padding/border)自身的上下外边距会合并吗?对布局有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确空块的自身上下外边距合并情形,并说明对垂直间距的影响。
围绕“给元素设置 float 与 display: inline-block 都能实现文字环绕效果吗?二者主要区别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 float 使元素脱离流并环绕,inline-block 在行内流中且不会环绕,需要对比文档流和空白节点差异。
围绕“为什么给父元素设置 height: auto 无法包含其绝对定位的子元素?如何使父元素随绝对子元素扩展”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明绝对定位移除文档流,父高度不透传;介绍用相对定位扩展或 JS 测量,也提到现代替代如 grid,但不扩展 grid 细节。
围绕“为什么使用 display: inline-block 排列的多个元素之间会有间隙?如何移除这些间隙”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 HTML 源码空格生成间隙,并提供 font-size:0 或注释空格等修复。
围绕“CSS 的 isolation: isolate 属性有何用途?与手动设置 transform 创建层叠上下文比有什”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 isolation 只为创建层叠上下文而不产生视觉影响,避免 transform 导致的副作用。
围绕“层叠上下文的建立条件有哪些?请列举至少三种常见属性,并说明它对 z-index 的影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须列出 position+z-index、opacity<1、transform 等,并说明独立层叠上下文中 z-index 只能与同。
围绕“margin 的百分比究竟相对于哪个轴的尺寸?为什么 margin-top: 50% 并不是基于父元素的高度”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 margin 百分比都相对于包含块的 width,解释 CSS 规范原因。
围绕“如何设计一个既响应式又具有最大宽度的容器?max-width 与 width 结合使用时有什么注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出 max-width: 100% 或固定值加 margin:auto 的方案,并说明 margin 与百分比的关系。
围绕“在无 flexbox 或 grid 时,如何用 -webkit-line-clamp 实现多行文本省略?它与单行省略”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕必须描述 display: -webkit-box 与 -webkit-box-orient 等配合,并说明这是非标准属性且。
围绕“负的 z-index 元素在层叠顺序中的位置如何?它与背景和普通流内容的关系是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明负 z-index 会显示在背景和负层叠上下文之后,普通内容之前,并注意在父层叠上下文内的行为。
围绕“给块级元素设置 overflow: auto 后会产生哪些布局副作用?(例如创建 BFC、裁剪内容、生成滚动容器)”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须列出创建滚动容器与 BFC、裁剪溢出内容、影响 sticky 定位等至少三个副作用。
围绕“overflow: clip 与 overflow: hidden 在滚动与裁剪方面有什么关键区别”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须明确 clip 禁止程序化滚动且不建立格式化上下文,hidden 允许 JS 滚动且可能产生滚动容器。
围绕“当两个元素都没有设置 z-index 时,它们由后往前的绘制顺序遵循什么原则”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答需要围绕必须介绍 document 顺序、背景与边框、流内块级等顺序,并给出非定位与定位元素的区分。
围绕“CSS 中父元素与第一个子元素的外边距塌陷是如何发生的,如何防止父元素被“拉下来””给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要聚焦父-子边距重叠机制及预防手段(padding、border、BFC)。
围绕“position: relative 加上 z-index: auto 会创建层叠上下文吗?为什么说 z-index”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须区分 auto 与整数值在定位元素上的影响,并说明 auto 不创建层叠上下文(除非其他属性)。
围绕“相对定位(position: relative)的元素在设置 top/left 后,会不会影响文档流中其他元素的位置”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须确认相对定位保留原空间,因此偏移不影响其他元素的布局,并说明其作为绝对定位包含块的特性。
围绕“如果一个父元素创建了层叠上下文,其子元素的 z-index 很大能覆盖另一个父级层叠上下文中的元素吗?为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释层叠上下文是原子性的,父级整体参与比较,子 z-index 不影响外部,用例子说明。
本文解释 position: sticky 在 overflow: hidden 父元素中失效的机制,即 overflow 创建滚动容器使 sticky 参照改变,并提供具体修复方案与边界条件。
围绕“sticky 定位元素在哪些条件下会“粘住”,又会在什么时候随页面滚动离开?请给出一个典型实现方案”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 top 等阈值与父容器边界的限制,并给出实现导航吸顶的例子。
围绕“实现单行文本溢出显示省略号需要哪些 CSS 属性,为什么这些属性缺一不可”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须列出 white-space, overflow, text-overflow 以及块容器约束,并解释各属性作用。
围绕“让表格单元格中的文本溢出显示省略号需要什么额外的 CSS?为什么 table 布局与普通块不同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 table-cell 需要 table-layout: fixed 和 max-width,并解释表格布局的宽度算法。
解释 transform 非 none 时该元素会成为绝对定位后代的包含块,导致子元素定位坐标、百分比尺寸相对其 padding box,包含与定位祖先的取舍规则、典型场景与失效边界,用于分析意外偏移。
围绕“行内元素的垂直对齐如何受 line-height 与 vertical-align 影响?请以图片与文字基线不一致为”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明基线与 line-height、vertical-align 机制,以及默认 baseline 导致底部空隙,可提供修复思路。
围绕“CSS 中相邻兄弟元素的垂直外边距为什么会合并,如何避免或利用这一行为”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释合并的规则与条件,并给出避免合并的途径(如 BFC)。
围绕“display: none 与 visibility: hidden 在盒模型尺寸和布局重排上有什么本质区别”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须明确 display:none 移除盒子并导致重排,visibility:hidden 保留盒子与空间,不影响其他元素,也不讨论 o。
围绕“块级元素的 width: auto 与 width: 100% 在常规流中的表现有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 auto 填满可用空间且不溢出,100% 基于包含块内容区可能会溢出有 padding 的场景。
围绕“writing-mode 或 direction 决定“块轴”的方向时,margin 的折叠与百分比宽度的含义会改变”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明垂直书写模式下 margin 百分比仍相对于包含块宽度,但边距折叠方向随主轴变化,用示例说明。
围绕“使用 all: unset 或 all: revert 会重置哪些属性?对继承属性有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 all 快捷重置所有属性,unset 会恢复为继承值或初始值,revert 回退到用户代理。
围绕“可否在 @media 内定义 @layer?如果可以,其作用域如何影响层叠”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确可以,但会影响条件规则,但普遍浏览器支持?需要说明浏览器版本,不深入其他 at-rules。
本文解释自定义属性(CSS变量)的继承行为:默认可继承、可被后代覆盖、并说明 initial 和 unset 的影响,与普通属性对比。
围绕“如何让自定义属性参与过渡动画?需要满足哪些条件”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明需要注册属性(如@property)并指定初始值,或值类型已知,且过渡代理,不深入到注册方式细节。