-
掌握WebCodecsAPI需了解音视频编码及JS技巧，1.复用解码器并动态配置；2.编码器动态调整码率；3.使用EncodedVideoChunk/EncodedAudioChunk封装数据；4.处理音频采样率与声道布局；5.VideoFrame的copyTo高效图像处理；6.结合WebTransport实现低延迟传输。兼容性方面Chrome/Edge支持较好，调试可用开发者工具、控制台输出和chrome://media-internals。性能优化包括实例重用、合理配置参数、WASM加速、减少内存分配
-
Flexbox通过flex-grow、flex-shrink和flex-basis控制子元素伸缩行为，实现响应式布局：flex:1常用于均分空间，结合媒体查询可调整不同屏幕下的布局表现，如等宽分布、固定与自适应组合、移动端堆叠等；需注意父容器设display:flex，避免width与flex-basis冲突，并用min-width防止内容重叠，提升布局灵活性。
-
外部脚本加载慢主要因阻塞渲染、网络延迟和资源过大。1.默认同步加载会暂停HTML解析，导致白屏；2.服务器响应慢、文件体积大、串行请求加剧延迟；3.可通过async异步加载统计类脚本、defer延迟执行依赖DOM的脚本、将script移至body末尾、启用压缩、使用CDN及代码分割优化；4.按脚本用途选择策略：广告统计用async，主逻辑用defer，非首屏功能延迟加载。合理组合这些方法可显著提升性能。
-
使用Flexbox实现自适应布局是响应式表单优化的核心，通过设置display:flex和flex-wrap:wrap，使表单项在不同屏幕下自动换行并保持良好可读性。
-
CSStransition与transform:scale()结合可实现按钮悬停放大、图片预览等平滑缩放动画，通过设置transition:transform0.3sease控制过渡时间与速度，scale(1.1)定义缩放比例，利用硬件加速提升性能，避免布局重排，增强交互体验。
-
HSLA颜色模式通过色相、饱和度、明度和透明度定义颜色，语法为hsla(hue,saturation,lightness,alpha)，其中hue范围0-360，saturation和lightness为百分比，alpha为0到1的透明度值。相比RGBA，HSLA更直观地调节颜色明暗与鲜艳程度，同时保留透明效果，常用于背景色设置以提升可读性。结合linear-gradient函数，可创建如从半透明蓝到紫的平滑渐变，适用于卡片遮罩或按钮悬停。利用CSS自定义属性定义HSLA变量，仅修改色相即可统一更新配色方
-
margin控制元素外间距，用于布局分离；padding定义内容内边距，影响元素尺寸；gap专用于flex和grid布局中子元素的间距控制，避免外边距合并。三者协同使用可提升页面美观与维护性。
-
使用HTML的video标签可直接嵌入mp4、webm等格式视频，支持自定义尺寸、控制条和封面图；对于YouTube等平台视频，则应复制其提供的iframe代码嵌入。两种方法简单有效，兼容主流浏览器，注意避免自动播放以提升体验。
-
grid-template-rows和grid-template-columns用于定义网格行列的大小与分布。1.grid-template-columns设置列宽，支持fr、px、%、auto及minmax()等单位，可实现等宽列、固定加弹性布局或响应式列。2.grid-template-rows控制行高，用法类似，适用于均分高度、固定头尾加自适应主体等场景。3.二者结合可创建二维网格，如三列两行布局，配合fr、repeat()、minmax()等提升灵活性。4.推荐显式定义行列以增强控制，结合auto
-
requestIdleCallback与事件循环的关系是：它在每帧渲染完成后、浏览器判断有空闲时间时执行回调，利用主线程的碎片时间处理低优先级任务；2.它解决了因耗时任务阻塞主线程导致的UI卡顿问题，提升响应性；3.区别在于：setTimeout只按时间延迟执行、不避让渲染，requestAnimationFrame专为动画设计、高优先级同步渲染，而requestIdleCallback则主动让出执行权给高优先级任务，仅在空闲时运行；4.实际使用需识别非关键任务（如数据上报、预加载）、拆分任务并基于dea
-
通过JavaScript阻止默认右键菜单并创建自定义菜单：1.监听contextmenu事件并调用preventDefault()；2.获取鼠标坐标定位自定义菜单；3.创建含data-action的HTML菜单结构；4.绑定点击事件执行对应操作后隐藏菜单；5.添加页面点击关闭菜单及边界检测等优化体验。
-
巩固Vue.js知识的最佳方法是通过实际项目进行实践。1.通过项目将理论转化为实际操作，发现学习中的细节和问题。2.面对实际问题，如组件性能优化、状态管理、路由管理，深入理解核心概念。3.使用Vuex管理状态，学习模块化技巧提高代码可维护性。4.选择合适的工具，如VueRouter、ElementUI，根据项目需求学习成长。5.解决组件通信问题，使用provide/inject特性增强灵活性。6.优化性能，理解虚拟DOM和diff算法，使用v-if/v-show提升渲染效率。通过项目实践，你能巩固知识并培
-
在Vue.js中防止XSS攻击可以通过以下步骤实现：1)使用v-text指令展示文本内容，确保内容被转义；2)使用DOMPurify库过滤和清理用户输入的内容；3)使用v-bind指令动态绑定属性值，防止属性值被注入恶意代码；4)结合marked和DOMPurify处理Markdown内容，确保富文本安全展示。通过这些高级技巧和最佳实践，可以有效地保护Vue.js应用免受XSS攻击。
-
Proxy实现数据验证的核心在于利用set陷阱拦截属性赋值操作并执行验证逻辑。1.当尝试设置属性值时，set陷阱被触发，可在其中定义验证规则；2.若验证失败，抛出错误或返回false阻止赋值；3.若验证通过，使用Reflect.set将值写入原对象；4.相比传统方式，Proxy具有非侵入性、集中化管理和更广的拦截范围等优势；5.Proxy还可用于响应式系统、权限控制、日志记录等场景；6.错误处理推荐抛出Error实例，并结合try...catch捕获，同时转化为用户友好的界面反馈。
-
使用localStorage实现持久化缓存，将数据序列化为JSON字符串存储，适用于配置信息、用户偏好等不常变动的数据，提升前端性能和用户体验。
