-
window.print()方法能直接调用打印对话框，结合@mediaprint规则可优化打印样式。要优化打印页面，首先使用@mediaprint隐藏导航栏、侧边栏等非必要元素；其次调整字体颜色、大小和行高以增强可读性；再者处理图片，确保其清晰且布局合理；最后利用page-break属性控制分页，避免内容断裂。常见问题包括无法判断用户是否实际打印，可通过window.onbeforeprint和window.onafterprint事件进行近似控制；不同浏览器打印样式解析差异需通过多测试和调整CSS解决；
-
组件化开发中，CSS按需引入的核心是避免全局污染和冗余加载。1.使用CSSModules将类名局部化，通过.module.css文件实现样式隔离与TreeShaking；2.利用Vue等框架的scoped样式，编译时添加唯一标识确保作用域隔离；3.动态加载异步组件时，其关联CSS随组件chunk按需加载；4.采用Tailwind等原子化方案，结合PurgeCSS或JIT模式扫描模板，仅保留实际使用的实用类。关键在于借助构建工具将样式与组件绑定，由打包系统自动处理依赖分析和无用代码剔除，实现高效按需加载。
-
WebWorkers是浏览器的多线程API，可将耗时任务移至后台线程执行，避免阻塞主线程。通过创建独立JS文件并用newWorker()实例化，主程序与Worker间以postMessage通信，实现如斐波那契计算等密集任务，提升页面响应性。
-
答案：在HTML5Canvas上绘制矩形需获取2D上下文，使用fillRect()填充、strokeRect()描边、clearRect()清除；通过fillStyle、strokeStyle、lineWidth等属性控制颜色与边框，结合路径方法可绘制圆角矩形，并需注意Canvas坐标系及实际尺寸与CSS尺寸的差异以避免显示异常。
-
使用HTML5语义化标签可提升SEO与可访问性：1、用<header>标记页眉，包含logo与主导航；2、用<nav>定义主导航链接组；3、用<main>包裹唯一主体内容；4、用<article>标识独立内容单元；5、用<section>按主题划分区块并配标题；6、用<aside>放置相关辅助信息；7、用<footer>定义页脚或区块底部信息。
-
使用Flexbox实现一侧固定、一侧自适应的响应式布局，结合position处理局部定位需求。1.父容器设display:flex，固定元素设宽度，流动元素设flex:1；2.需绝对定位时，在flex子项内设置position:relative/absolute，确保层级清晰；3.移动端通过媒体查询将侧边栏设为fixed并隐藏，点击按钮展开；4.避免对同一元素混用flex与绝对定位控制主布局，保持结构分离。
-
JavaScript通过SharedArrayBuffer实现多线程间共享内存，结合Atomics对象提供的原子操作确保数据安全。1.SharedArrayBuffer允许主线程与WebWorkers共享同一块内存，实现高效数据传递；2.Atomics提供load、store、add、sub、compareExchange等方法，保证操作的原子性，避免数据竞争；3.可用于构建跨线程计数器、自旋锁等同步机制；4.使用需配置CORS策略以应对Spectre漏洞风险。
-
客户端可通过localStorage实时缓存表单数据并在页面加载时恢复，提交成功后清除缓存，以防止用户输入丢失，对于敏感数据应避免使用此方式或结合加密处理，此方法能有效提升用户体验并保障数据完整性。
-
:first-of-type选择父元素中同类型的首个子元素，如p:first-of-type选中第一个p标签，不受其他类型元素影响，常用于段落、列表等首项样式设置。
-
答案：HTML元素添加水印主要通过CSS背景图或JavaScript结合Canvas/SVG实现。静态水印用CSSbackground-image，简单高效但易被移除；动态水印用Canvas或SVG，可生成带用户信息、时间戳等内容，防篡改性更强但实现复杂、有性能开销。不同方案适用于版权保护、信息溯源、状态提示等场景。
-
HTML中CSS文件的加载顺序由link标签的书写顺序决定，后引入的样式会覆盖先引入的相同选择器样式。2.通过合理安排基础、组件、主题样式的引入顺序来控制优先级。3.避免使用@import防止阻塞渲染和串行加载影响性能。4.推荐使用构建工具合并或排序CSS文件以确保样式层级正确。关键点是利用link顺序管理样式覆盖逻辑。
-
事件冒泡指事件从目标元素向上逐层传递，可通过stopPropagation阻止；事件捕获是从外向内传递，需设addEventListener第三参数为true；事件委托利用冒泡机制将事件绑定到父元素，通过event.target处理子元素事件，减少内存占用并提升性能。
-
WebComponents提供原生组件化能力，由CustomElements、ShadowDOM和HTMLTemplates组成，支持跨框架复用、样式隔离与语义化标签，适合轻量级项目和设计系统，但存在兼容性限制、缺乏内置状态管理、事件通信复杂及开发体验较弱等问题，需结合其他工具用于复杂应用。
-
模块联邦通过Webpack5实现微前端架构，支持运行时共享代码。1.核心机制：配置ModuleFederationPlugin，Host应用引入Remote应用暴露的模块，通过remoteEntry.js注册并按需加载。2.基本配置：Remote应用使用exposes导出组件（如Header），Host应用通过remotes引用远程模块，实现import"navApp/Header"。3.共享依赖：shared配置避免重复加载React等库，singleton确保单例，防止版本冲突。4.应用场景：主应用集
-
在使用JavaScript动态向DOM添加元素时，像Select2这样的jQuery插件不会自动应用于新元素。本文将详细讲解，当向表格动态添加包含<select>元素的行时，如何正确地初始化Select2插件，确保其功能正常，并指出常见的语法错误及修正方法，以提供一个完整的解决方案。
