为HTML5搜索框添加loading动画有四种方法：一、CSS旋转动画配合伪元素；二、SVG内联加载图标；三、CSS自定义属性控制动画开关；四、纯CSS无JS状态模拟。

现代浏览器对相同URL的CSS文件有强缓存机制，只要Cache-Control或ETag配置合理，重复引入不会触发多次HTTP请求；但URL需完全一致，且CSS规则重复声明会因源顺序导致后引入者覆盖先引入者。

display:none无法触发动画，因display是离散属性；应改用opacity+visibility组合实现渐显/隐，或用max-height/transform模拟无占位隐藏效果。

CSS动画结合opacity可实现淡入淡出效果。通过transition控制状态变化，如:hover时opacity从0.5到1，实现0.3秒平滑过渡；使用@keyframes定义关键帧动画，如“呼吸”效果在2秒内循环改变opacity；opacity还可与transform等属性协同，创建滑动显现、缩放入场等复合动画。建议避免display切换显隐，优先用opacity和visibility配合，提升性能。

媒体查询必须写在样式表顶层，不能嵌套在CSS选择器内部；推荐使用min-width实现移动优先；常见失效原因包括优先级覆盖、加载顺序错误和浏览器缓存；断点应统一用px单位。

Object.keys()方法用于获取对象自身所有可枚举的字符串属性名，并以数组形式返回。①它仅包含自有属性，忽略原型链属性；②只返回可枚举属性，不可枚举的不会被包含；③不包括Symbol类型的属性名；④处理非对象类型时，基本类型值会被包装成对象，null和undefined会抛出错误。与for...in循环不同，Object.keys()更精确、可控，适合现代开发习惯。其他相关方法如Object.values()获取属性值，Object.entries()获取键值对，Object.getOwnPrope

JavaScript游戏开发中碰撞检测可不用完整物理引擎，关键在理解逻辑、选合适方法并平衡性能与精度；矩形用AABB检测判断重叠，圆形用距离平方比较避免开方。

Promise对象是JavaScript中处理异步操作的核心机制，通过pending、fulfilled和rejected三种状态管理异步流程，解决回调地狱问题；使用then、catch、finally链式调用处理成功与失败，支持Promise.all（全成功才成功）、Promise.race（首个完成即返回）和Promise.allSettled（全部完成才返回结果数组）等静态方法处理多个异步任务，结合async/await语法可让异步代码更简洁易读，但需注意错误处理、避免过度链式调用及合理选择并发控制

JavaScript实现3D效果主要依靠WebGL，实际开发多用封装库：Three.js（入门首选）、Babylon.js（游戏级交互）、PlayCanvas（协作编辑）、R3F（React集成）；轻量需求可选Regl或glMatrix。

事件冒泡是DOM事件从目标元素逐级向上传播至document的过程；点击嵌套button时，监听器按inner→middle→outer顺序执行；stopPropagation仅阻止后续冒泡路径，stopImmediatePropagation则彻底中断当前事件流并阻止同一元素其他监听器执行。

try...catch仅捕获运行时错误，无法捕获语法错误；catch参数必须是单个标识符；finally中return会覆盖try/catch的返回值；异步错误须用await或.catch()捕获。

Bootstrap通过.card类和网格系统快速构建响应式卡片，适合标准化项目；Tailwind则利用实用类组合实现高度定制化卡片布局，二者均需关注响应式设计、间距、阴影及图片适配，提升跨设备体验。

使用CSS和HTML可实现网页水印，方法包括：一、通过background-image与dataURI嵌入斜向文字水印；二、利用伪元素结合transform旋转生成叠加文字层；三、插入img标签或背景图设置固定位置图片水印；四、用Canvas绘制多行斜纹并转Base64作背景；五、通过禁用右键、屏蔽快捷键及透明遮罩限制用户复制行为，增强防护。

TypeScript是JavaScript的超集，提供类型系统以提升开发效率与代码可靠性。它支持渐进式采用、智能推断、编辑器增强、安全重构，并已成为现代前端开发标配。

使用CSS原生scroll-snap属性即可实现类似TikTok/YouTubeShorts的全屏视频垂直滚动与精准吸附效果，无需JavaScript；关键在于为html元素设置scroll-snap-type:ymandatory，并为每个视频容器添加scroll-snap-align:start。