-
本文详解如何将模板化的多行HTML字符串（如地铁站卡片）正确解析为真实的DOM节点对象，并通过localStorage跨脚本持久化与追加到目标列表中，避免常见的TypeError:Node.appendChild:Argument1isnotanobject错误。
-
Promise解决回调地狱问题，通过链式调用提升可读性、统一错误处理、支持并行与中断；但无法取消、无进度反馈、错误易静默，需配合AbortController等方案。
-
应使用requestAnimationFrame替代setInterval实现动画主循环，因其与屏幕刷新率同步、精度高且不易卡顿；需在回调中更新状态并重绘，末尾递归调用自身，避免耗时操作，配合keydown/keyup监听按键状态，注意Canvas坐标系、图像加载时机、变换隔离及AABB碰撞检测等关键细节。
-
滚动卡顿主因是overflow:scroll未触发硬件加速，需加-webkit-overflow-scrolling:touch和transform:translateZ(0)；安卓WebView需启用hardwarelayer；touchmove必须设passive:true；图片字体加载需异步优化。
-
JavaScript调试测试应从第一行代码开始，用DevTools断点、console.group/table等提升可观测性，Jest需正确处理异步和mock，sourcemap与严格模式保障调试质量。
-
HTML文件必须通过W3C验证器校验且无错误，关键包括：正确闭合标签、属性值加引号、合法嵌套、完整根结构；编码须为UTF-8withoutBOM，并在<title>前声明<metacharset="UTF-8">。
-
<p>Math.random()不安全、不可重现且易产生分布偏差，密码等场景须用crypto.getRandomValues()；生成整数应使用Math.floor(Math.random()*(max-min+1))+min。</p>
-
box-sizing默认值是content-box，width/height仅指内容区尺寸，实际宽度=内容宽+左右padding+左右border；margin折叠使相邻块级元素垂直外边距取较大值而非相加。
-
用transform:translate()移动元素不触发重排，因仅合成不改变文档流，但需启用硬件加速；避免混用top/left与transform；position:absolute会脱离文档流引发布局断裂；margin和left/top触发重排导致卡顿。
-
Object.getPrototypeOf用于获取对象的原型。1.查看对象原型：console.log(Object.getPrototypeOf({}))返回Object.prototype。2.检查继承关系：console.log(Object.getPrototypeOf(Object.create({foo:'bar'}))==={foo:'bar'})返回true。3.遍历原型链：使用递归函数getPrototypeChain(obj)可以查看完整原型链。
-
HTML的lang属性必须显式声明，:lang()仅匹配元素自身或最近祖先的lang值，不识别文本内容；多语言混合时需为具体元素设lang，区分简繁宜用属性选择器而非:lang(zh-CN)；open-quote行为取决于元素自身lang，非选择器中的:lang()；lang值须严格符合BCP47标准。
-
混用%和fr时，百分比列先按容器宽度计算，fr列再平分剩余空间；顺序影响布局，如50%1fr1fr中后两列各得剩余空间的1/2，而非容器的25%。
-
localStorage用于长期存储字符串数据，关闭浏览器不丢失，sessionStorage仅限当前标签页，关闭即清除；二者均需手动序列化/解析对象，容量约5–10MB，不随请求发送。
-
掌握HTML解析需五步：一、识别html根元素及head/body骨架；二、依缩进分析嵌套层级；三、辨识header、nav等语义标签功能；四、解析class、href等属性与文本关联；五、用浏览器开发者工具验证DOM结构。
-
本文详解如何在Next.js13+Supabase环境中正确配置persistSession及配套的storage选项，解决因缺失持久化机制导致的SessionRequired错误与控制台警告。
