-
JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升执行效率并兼顾可维护性，关键在于保障用户所需时的快速响应，需通过优化DOM操作、事件处理、异步任务、内存管理、资源加载及工具辅助等多维度协同改进。
-
使用CSSModules或ShadowDOM可有效避免第三方库的样式污染。CSSModules通过构建时将类名转换为唯一标识，实现局部作用域，确保样式仅作用于当前组件；ShadowDOM则提供真正的样式隔离，内部样式不泄露、外部样式不穿透，适合独立组件封装；若无法模块化，可手动添加容器类前缀限定作用域；还可通过动态加载与移除样式表减少长期污染风险。根据项目场景选择合适方案，推荐优先采用CSSModules或ShadowDOM从根本上解决冲突问题。
-
可利用HTML5CanvasAPI在客户端直接裁剪图片：一、准备img与canvas元素并确保图片加载完成；二、用drawImage将图绘至canvas；三、通过鼠标/触摸事件定义并绘制矩形选区；四、创建新canvas提取裁剪区域并导出Base64或Blob；五、适配移动端，监听touch事件替代mouse事件。
-
CSS动画不平滑主因是时长和节奏控制不当，合理设置animation-duration（建议200ms~500ms）和animation-timing-function（如ease-out、cubic-bezier），结合transform位移与will-change提升性能，可实现流畅动画。
-
有限状态机（FSM）是一种描述对象在有限状态间转换的模型，包含状态、事件、转移和动作。通过JavaScript实现状态模式可管理如播放器的状态流转：定义状态类封装行为，上下文委托操作，实现清晰解耦。示例中播放器有idle、playing、paused三种状态，支持play、pause、stop操作，状态切换逻辑隔离，符合开闭原则。还可扩展为通用FSM类，通过配置定义初始状态和转移规则，提升复用性与可维护性，适用于订单、登录等场景。
-
要让HTML适配移动端，核心是应用响应式设计，而媒体查询是实现的关键技术。1.首先在HTML头部设置正确的视口元标签：<metaname="viewport"content="width=device-width,initial-scale=1.0">，确保页面按设备宽度渲染且无初始缩放；2.采用“移动优先”策略，先为小屏幕编写基础样式，再通过媒体查询针对更大屏幕添加或覆盖样式；3.使用合理的断点（如768px、1024px），根据布局变化而非具体设备设
-
浮动布局在响应式设计中易出现错位、溢出等问题，需结合媒体查询动态调整宽度与排列方式。通过设置不同断点（如768px）改变元素宽度，实现桌面端并排（50%）、移动端堆叠（100%），并配合清除浮动与box-sizing优化布局；长期建议迁移到Flexbox或Grid等现代布局方案以提升适配性与维护性。
-
剩余参数和默认参数提升JavaScript函数灵活性：剩余参数（...args）收集多余参数为数组，必须位于参数列表末尾；默认参数为形参提供备用值，调用时未传参或为undefined则使用默认值，可依赖前置参数；二者可结合使用，适用于日志、配置等场景，减少冗余判断，增强代码可读性与健壮性。
-
需将旧版HTML升级为HTML5：一、用<!DOCTYPEhtml>替换旧DOCTYPE；二、根元素改为<htmllang="zh-CN">并移除xmlns；三、用<metacharset="UTF-8">声明编码；四、用<header><nav><main><footer><aside><article>等语义标签替代div；五、更新表单type和requi
-
答案：优化Canvas动画性能需减少重绘区域，采用分层绘制与clearRect局部清除；避免重复设置样式、简化路径并缓存高频内容以优化绘图操作；使用requestAnimationFrame控制帧率，按需更新与限帧；通过对象池、解除引用等方式合理管理内存，降低GC压力，从而提升整体渲染效率。
-
HTML项目打包是将网页文件整理压缩以便部署，需确保资源完整、路径正确。1.手动打包适用于简单项目，将文件放入dist等目录后用zip压缩；2.构建工具如Vite、Webpack可自动化处理，提升效率；3.优化资源包括压缩图片、CSS/JS，移除注释，合并小文件；4.部署可选Vercel、Netlify等静态托管或上传至服务器。关键在于路径管理与细节检查。
-
:nth-last-child伪类选择器用于从父元素最后一个子元素开始倒序选中指定位置的子元素，语法为:nth-last-child(an+b)，其中a为步长、b为偏移量；例如li:nth-last-child(1)选中最后一个li，li:nth-last-child(2n)选中倒数偶数位的li元素；该选择器常用于隐藏最后几个子元素（如li:nth-last-child(-n+3){display:none}隐藏最后三项）、为倒数几项添加特殊样式或表格中突出倒数行；与:nth-child不同，后者从前向后
-
使用opacity与transition实现渐隐渐显效果，通过设置透明度变化及过渡动画提升用户体验。例如.hover触发时opacity从0到1平滑过渡，适用于遮罩层、模态框等场景，注意避免重排并优化性能。
-
useEffect用于处理函数组件中的副作用，如数据请求、事件监听等，通过依赖项数组控制执行时机；2.依赖项遗漏会导致闭包捕获旧值，必须将所有用到的变量加入依赖数组或使用函数式更新；3.不稳定依赖（如每次渲染重建的函数）会引发无限循环或频繁执行，需用useCallback或useMemo固化引用；4.useEffect在DOM更新后异步执行不阻塞渲染，useLayoutEffect则同步执行适合需立即测量DOM的场景；5.拆分多个useEffect按不同依赖独立执行更高效，复杂逻辑应封装成自定义Hook提
-
背景图片不显示最常见的原因是background-image路径错误；CSS路径相对于CSS文件位置而非HTML文件，需确认相对路径正确、文件真实存在且命名严格匹配（含大小写），并用开发者工具Network标签检查请求状态码。
