JavaScript本身不能直接实现AR，但可通过WebAR框架（如AR.js/A-Frame或WebXRAPI）在浏览器中叠加虚拟物体；AR.js+A-Frame适合图像识别轻量方案，WebXR支持无Marker平面检测与命中测试，需Three.js渲染，受限于设备、浏览器及HTTPS环境。

JavaScript面向对象编程基于构造函数和原型，ES6引入class语法糖使写法更直观。1.构造函数用于初始化实例，prototype存储共享方法；2.class中的constructor初始化属性，其他方法挂载到原型；3.使用extends实现继承，super调用父类构造函数；4.static定义静态方法，#前缀声明私有字段；5.实例访问自身属性及原型链上的方法，私有字段仅类内可访问。

解构赋值是JavaScript处理数据结构的底层操作习惯，支持数组跳位取值、默认值与剩余元素，对象解构可嵌套兜底避免null报错，适用于配置对象等场景，但需根据实际需求合理选用。

JavaScript原型链是对象属性委托查找机制，非类继承模拟；__proto__指向查找属性的对象，prototype是函数特有属性，用于new实例的__proto__赋值。

三列1fr不等宽是因内容撑开或min-width限制；应约束子元素尺寸，用minmax(0,1fr)、overflow隐藏及width:100%等确保内容服从列宽。

Map和Set是解决键值映射与自动去重问题的专用工具：Map支持对象作键、插入顺序遍历、O(1)查存；Set提供O(1)去重与存在性判断；小规模静态场景仍宜用对象和数组。

localStorage与sessionStorage均存储字符串且受同源策略限制，区别在于：1.localStorage同域所有标签页共享、永久保存；2.sessionStorage仅当前标签页有效、关闭即销毁；二者均不参与HTTP传输。

按需加载CSS最常用方式是JavaScript动态创建并插入link标签，设置rel="stylesheet"和href后添加到head；需检查重复加载、监听onload/onerror，并结合点击、路由切换等业务场景触发。

响应式卡片布局推荐Grid外层+Flex内层：Grid用auto-fit/minmax自动适配列数并统一间距，Flex用于卡片内部对齐；小屏单列、中屏两列、大屏三列可通过媒体查询精细控制，兼顾语义化与可访问性。

使用relative配合margin实现微调：元素保持文档流位置，通过top、left偏移并用margin控制外间距，适用于图标、按钮的局部调整。2.absolute与marginauto实现水平居中：设置width、left:0、right:0和margin:auto，可使模态框在父容器内水平居中，无需Flex或Grid。3.fixed元素通过margin或body上边距避免遮挡：如导航栏固定顶部时，body添加margin-top预留空间，防止内容被覆盖。4.absolute结合负margin精确定位

应设置preload="metadata"并启用HTTP范围请求；优先选用Opus（语音）或AAC（音乐）编码，配合ServiceWorker缓存元数据，避免URL带时间戳参数。

单页应用路由本质是用history.pushState/replaceState改URL并操作历史栈，配合popstate监听导航，需服务端兜底返回index.html且前端主动匹配初始路径。

JavaScript树遍历分DFS和BFS：DFS用递归或栈实现，适合子树优先场景如虚拟DOM构建、AST解析；BFS用队列逐层处理，适合层级敏感操作如UI动画、近根搜索。

align-items:center垂直居中生效需父容器设display:flex且有明确高度（如height、min-height）；主轴为row时控制交叉轴（垂直），改为column则控制水平，此时需justify-content:center。

卡片圆角由CSS的border-radius控制，非HTML5模板专属；需用开发者工具定位对应class，修改其border-radius值，注意参数顺序、单位统一及overflow:hidden等适配细节。