[{"data":1,"prerenderedAt":2049},["ShallowReactive",2],{"page-\u002Fbrowser\u002Fhtml技术的面试笔记":3},{"id":4,"title":5,"body":6,"description":12,"extension":2040,"meta":2041,"navigation":310,"path":2045,"seo":2046,"stem":2047,"__hash__":2048},"content\u002Fbrowser\u002Fhtml技术的面试笔记.md","Html技术的面试笔记",{"type":7,"value":8,"toc":2033},"minimark",[9,13,18,21,143,151,154,157,160,168,171,174,180,257,264,271,388,392,395,398,401,448,489,492,541,545,548,591,594,600,603,616,638,663,690,693,699,702,705,2030],[10,11,12],"p",{},"这里整理的是html相关技术的笔记，面试可能会考到，所以这里便积累了一些",[14,15,17],"h3",{"id":16},"src-和-href-的区别","Src 和 href 的区别",[10,19,20],{},"src是替换当前元素，href是建立关联，src会把外部资源嵌入到当前的元素的位置，替换掉这个元素，它的加载行为：浏览器会阻塞解析，等资源下载完再继续，因为资源是当前文档的一部分，必须等到位。",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"a.jpg\">\n\u003Cscript src=\"a.js\">\u003C\u002Fscript>\n\u003Ciframe src=\"page.html\">\u003C\u002Fiframe>\n\u003Cvideo src=\"a.mp4\">\u003C\u002Fvideo>\n\u003Caudio src=\"a.mp3\">\u003C\u002Faudio>\n","html","",[29,30,31,58,80,101,122],"code",{"__ignoreMap":27},[32,33,36,40,44,48,51,55],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","\u003C",[32,41,43],{"class":42},"s9eBZ","img",[32,45,47],{"class":46},"sScJk"," src",[32,49,50],{"class":38},"=",[32,52,54],{"class":53},"sZZnC","\"a.jpg\"",[32,56,57],{"class":38},">\n",[32,59,61,63,66,68,70,73,76,78],{"class":34,"line":60},2,[32,62,39],{"class":38},[32,64,65],{"class":42},"script",[32,67,47],{"class":46},[32,69,50],{"class":38},[32,71,72],{"class":53},"\"a.js\"",[32,74,75],{"class":38},">\u003C\u002F",[32,77,65],{"class":42},[32,79,57],{"class":38},[32,81,83,85,88,90,92,95,97,99],{"class":34,"line":82},3,[32,84,39],{"class":38},[32,86,87],{"class":42},"iframe",[32,89,47],{"class":46},[32,91,50],{"class":38},[32,93,94],{"class":53},"\"page.html\"",[32,96,75],{"class":38},[32,98,87],{"class":42},[32,100,57],{"class":38},[32,102,104,106,109,111,113,116,118,120],{"class":34,"line":103},4,[32,105,39],{"class":38},[32,107,108],{"class":42},"video",[32,110,47],{"class":46},[32,112,50],{"class":38},[32,114,115],{"class":53},"\"a.mp4\"",[32,117,75],{"class":38},[32,119,108],{"class":42},[32,121,57],{"class":38},[32,123,125,127,130,132,134,137,139,141],{"class":34,"line":124},5,[32,126,39],{"class":38},[32,128,129],{"class":42},"audio",[32,131,47],{"class":46},[32,133,50],{"class":38},[32,135,136],{"class":53},"\"a.mp3\"",[32,138,75],{"class":38},[32,140,129],{"class":42},[32,142,57],{"class":38},[10,144,145,146,150],{},"href作用是",[147,148,149],"strong",{},"建立当前文档和尾部资源的关联","，不会替换元素本身，加载行为：浏览器不阻塞解析，并行下载，资源是关联，非当前文档一部分。",[14,152,153],{"id":153},"iframe标签的优缺点",[10,155,156],{},"这个标签作用是创建一块独立的文档区域，有自己的DOM、js上下文（不同全局对象），css作用域，cookie和存储。",[10,158,159],{},"父页面的css不会污染iframe内容，反之亦然，这在嵌入第三方内容时非常关键。",[22,161,166],{"className":162,"code":164,"language":165},[163],"language-text","\u003C!-- 第三方广告、地图、视频播放器 -->\n\u003Ciframe src=\"https:\u002F\u002Fmaps.example.com\">\u003C\u002Fiframe>\n","text",[29,167,164],{"__ignoreMap":27},[10,169,170],{},"跨域部分，想在页面中显示另一个域的内容，iframe就是唯一的直接支持，其他方案会受到CORS限制，而且脚本不会执行。",[10,172,173],{},"sandbox属性可以精确控制iframe能力：",[22,175,178],{"className":176,"code":177,"language":165},[163],"\u003Ciframe\n  src=\"https:\u002F\u002Funtrusted.com\"\n  sandbox=\"allow-scripts\"\n>\u003C\u002Fiframe>\n",[29,179,177],{"__ignoreMap":27},[181,182,183,199],"table",{},[184,185,186],"thead",{},[187,188,189,196],"tr",{},[190,191,192,195],"th",{},[29,193,194],{},"sandbox"," 值",[190,197,198],{},"允许的能力",[200,201,202,213,223,237,247],"tbody",{},[187,203,204,210],{},[205,206,207],"td",{},[29,208,209],{},"allow-scripts",[205,211,212],{},"执行 JS",[187,214,215,220],{},[205,216,217],{},[29,218,219],{},"allow-forms",[205,221,222],{},"提交表单",[187,224,225,230],{},[205,226,227],{},[29,228,229],{},"allow-same-origin",[205,231,232,233,236],{},"保持同源（",[147,234,235],{},"慎用","）",[187,238,239,244],{},[205,240,241],{},[29,242,243],{},"allow-popups",[205,245,246],{},"打开弹窗",[187,248,249,254],{},[205,250,251],{},[29,252,253],{},"allow-top-navigation",[205,255,256],{},"跳转顶层页面",[10,258,259,260,263],{},"iframe的加载和主页面解耦，不会拖慢主页面渲染，如果iframe脚本崩溃，不会影响父页面。但是每一个iframe是一个独立的浏览上下文，是独立的js引擎实例，独立的dom树，独立事件循环，内存开销大，多个iframe会显著增加内存占用。搜索引擎",[147,261,262],{},"通常不索引 iframe 内容","。如果关键内容在 iframe 里，SEO 基本失效。",[10,265,266,267,270],{},"父页面和 iframe 通信只能通过 ",[29,268,269],{},"postMessage"," ，这里一定要和BroadcastChannel分开，这是两个不同技术。",[22,272,276],{"className":273,"code":274,"language":275,"meta":27,"style":27},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F 父页面发消息\niframe.contentWindow.postMessage('hello', 'https:\u002F\u002Fchild.com')\n\n\u002F\u002F 子页面接收\nwindow.addEventListener('message', (e) => {\n  if (e.origin !== 'https:\u002F\u002Fparent.com') return  \u002F\u002F 必须校验 origin\n  console.log(e.data)\n})\n","ts",[29,277,278,284,306,312,317,347,370,382],{"__ignoreMap":27},[32,279,280],{"class":34,"line":35},[32,281,283],{"class":282},"sJ8bj","\u002F\u002F 父页面发消息\n",[32,285,286,289,291,294,297,300,303],{"class":34,"line":60},[32,287,288],{"class":38},"iframe.contentWindow.",[32,290,269],{"class":46},[32,292,293],{"class":38},"(",[32,295,296],{"class":53},"'hello'",[32,298,299],{"class":38},", ",[32,301,302],{"class":53},"'https:\u002F\u002Fchild.com'",[32,304,305],{"class":38},")\n",[32,307,308],{"class":34,"line":82},[32,309,311],{"emptyLinePlaceholder":310},true,"\n",[32,313,314],{"class":34,"line":103},[32,315,316],{"class":282},"\u002F\u002F 子页面接收\n",[32,318,319,322,325,327,330,333,337,340,344],{"class":34,"line":124},[32,320,321],{"class":38},"window.",[32,323,324],{"class":46},"addEventListener",[32,326,293],{"class":38},[32,328,329],{"class":53},"'message'",[32,331,332],{"class":38},", (",[32,334,336],{"class":335},"s4XuR","e",[32,338,339],{"class":38},") ",[32,341,343],{"class":342},"szBVR","=>",[32,345,346],{"class":38}," {\n",[32,348,350,353,356,359,362,364,367],{"class":34,"line":349},6,[32,351,352],{"class":342},"  if",[32,354,355],{"class":38}," (e.origin ",[32,357,358],{"class":342},"!==",[32,360,361],{"class":53}," 'https:\u002F\u002Fparent.com'",[32,363,339],{"class":38},[32,365,366],{"class":342},"return",[32,368,369],{"class":282},"  \u002F\u002F 必须校验 origin\n",[32,371,373,376,379],{"class":34,"line":372},7,[32,374,375],{"class":38},"  console.",[32,377,378],{"class":46},"log",[32,380,381],{"class":38},"(e.data)\n",[32,383,385],{"class":34,"line":384},8,[32,386,387],{"class":38},"})\n",[14,389,391],{"id":390},"canvas和svg","Canvas和SVG",[10,393,394],{},"canvas是位图，svg是矢量图，canvas是立即模式渲染，逐像素绘制，svg是保留模式绘制，DOM节点描述。canvas本质是像素数组，svg本质是dom树。",[10,396,397],{},"稍微触底来看看，canvas像素数据在js层面使用的是uint8ClampedArray，不同于wasm里的uint8heap，都是字节数组，但是约束和用途不同。",[10,399,400],{},"使用getImageData()获取canvas像素的时候，返回的是ImageData对象，里面有一个data属性，类型就是Uint8ClampedArray。",[22,402,406],{"className":403,"code":404,"language":405,"meta":27,"style":27},"language-js shiki shiki-themes github-light github-dark","const imageData = ctx.getImageData(0, 0, width, height);\n\u002F\u002F imageData.data 是 Uint8ClampedArray\n\u002F\u002F 顺序是 RGBA：R, G, B, A, R, G, B, A...\n","js",[29,407,408,438,443],{"__ignoreMap":27},[32,409,410,413,417,420,423,426,428,431,433,435],{"class":34,"line":35},[32,411,412],{"class":342},"const",[32,414,416],{"class":415},"sj4cs"," imageData",[32,418,419],{"class":342}," =",[32,421,422],{"class":38}," ctx.",[32,424,425],{"class":46},"getImageData",[32,427,293],{"class":38},[32,429,430],{"class":415},"0",[32,432,299],{"class":38},[32,434,430],{"class":415},[32,436,437],{"class":38},", width, height);\n",[32,439,440],{"class":34,"line":60},[32,441,442],{"class":282},"\u002F\u002F imageData.data 是 Uint8ClampedArray\n",[32,444,445],{"class":34,"line":82},[32,446,447],{"class":282},"\u002F\u002F 顺序是 RGBA：R, G, B, A, R, G, B, A...\n",[10,449,450,451,454,455,458,459,462,463,466,467,470,471,474,475,477,478,481,482,484,485,488],{},"这个数组的每个元素是一个 ",[147,452,453],{},"0 到 255 之间的整数","，每 4 个一组（红、绿、蓝、透明度），",[147,456,457],{},"“Clamped”就是“钳制”的意思。"," 如果你给 ",[29,460,461],{},"Uint8ClampedArray"," 的元素赋值 ",[29,464,465],{},"300","，它会被自动截断为 ",[29,468,469],{},"255","；赋值 ",[29,472,473],{},"-10","，会变成 ",[29,476,430],{},"。而 ",[29,479,480],{},"Uint8Array"," 会做模运算，",[29,483,465],{}," 会变成 ",[29,486,487],{},"44","。",[10,490,491],{},"而wasm里面的线性内存WebAssembly.Memory中，在js侧是通过ArrayBuffer暴露的，我们可以用不同的TypedArray视图去查看：",[22,493,495],{"className":403,"code":494,"language":405,"meta":27,"style":27},"\u002F\u002F WebAssembly 的内存\nconst waMemory = waInstance.exports.memory;\n\n\u002F\u002F 用 Uint8Array 视图看这块内存\nconst u8Heap = new Uint8Array(waMemory.buffer);\n",[29,496,497,502,514,518,523],{"__ignoreMap":27},[32,498,499],{"class":34,"line":35},[32,500,501],{"class":282},"\u002F\u002F WebAssembly 的内存\n",[32,503,504,506,509,511],{"class":34,"line":60},[32,505,412],{"class":342},[32,507,508],{"class":415}," waMemory",[32,510,419],{"class":342},[32,512,513],{"class":38}," waInstance.exports.memory;\n",[32,515,516],{"class":34,"line":82},[32,517,311],{"emptyLinePlaceholder":310},[32,519,520],{"class":34,"line":103},[32,521,522],{"class":282},"\u002F\u002F 用 Uint8Array 视图看这块内存\n",[32,524,525,527,530,532,535,538],{"class":34,"line":124},[32,526,412],{"class":342},[32,528,529],{"class":415}," u8Heap",[32,531,419],{"class":342},[32,533,534],{"class":342}," new",[32,536,537],{"class":46}," Uint8Array",[32,539,540],{"class":38},"(waMemory.buffer);\n",[14,542,544],{"id":543},"typescript的dom类型定义","TypeScript的DOM类型定义",[10,546,547],{},"ts中的dom类型定义里，Element继承链是EventTarget-> Node-> element，",[22,549,551],{"className":273,"code":550,"language":275,"meta":27,"style":27},"interface EventTarget { }\ninterface Node extends EventTarget { }\ninterface Element extends Node { }\n",[29,552,553,564,578],{"__ignoreMap":27},[32,554,555,558,561],{"class":34,"line":35},[32,556,557],{"class":342},"interface",[32,559,560],{"class":46}," EventTarget",[32,562,563],{"class":38}," { }\n",[32,565,566,568,571,574,576],{"class":34,"line":60},[32,567,557],{"class":342},[32,569,570],{"class":46}," Node",[32,572,573],{"class":342}," extends",[32,575,560],{"class":46},[32,577,563],{"class":38},[32,579,580,582,585,587,589],{"class":34,"line":82},[32,581,557],{"class":342},[32,583,584],{"class":46}," Element",[32,586,573],{"class":342},[32,588,570],{"class":46},[32,590,563],{"class":38},[10,592,593],{},"再往下的话，就是具体元素HTMLElement、SVGElement、MathElement 都是继承自Element了。",[22,595,598],{"className":596,"code":597,"language":165},[163],"EventTarget\n  └── Node\n        └── Element\n              ├── HTMLElement\n              │     ├── HTMLDivElement\n              │     ├── HTMLInputElement\n              │     └── ...\n              ├── SVGElement\n              └── MathMLElement\n",[29,599,597],{"__ignoreMap":27},[10,601,602],{},"然后接下来可以看看每一层都提供了什么，这也是DOM的原型设计，记了有很多好处，如果后续想要自己开发跨平台组件的话，也可以参考看看。",[10,604,605,606,608,609,608,612,615],{},"EventTarget提供了 ",[29,607,324],{},"、",[29,610,611],{},"removeEventListener",[29,613,614],{},"dispatchEvent"," ，让DOM组件有了事件能力。",[10,617,618,619,608,622,608,625,608,628,608,631,608,634,637],{},"Node提供了 ",[29,620,621],{},"parentNode",[29,623,624],{},"childNodes",[29,626,627],{},"appendChild",[29,629,630],{},"removeChild",[29,632,633],{},"nodeType",[29,635,636],{},"textContent","，可以让我们随意增删节点和设置文本内容。",[10,639,640,641,608,644,608,647,608,650,608,653,608,656,608,659,662],{},"Element提供了",[29,642,643],{},"id",[29,645,646],{},"className",[29,648,649],{},"tagName",[29,651,652],{},"attributes",[29,654,655],{},"querySelector",[29,657,658],{},"getAttribute",[29,660,661],{},"innerHTML","，让我们可以在DOM组件上设置标识、查询后代、读写属性。",[10,664,665,670,671,608,674,608,677,608,680,608,683,608,686,689],{},[147,666,667],{},[29,668,669],{},"HTMLElement"," 提供了 ",[29,672,673],{},"style",[29,675,676],{},"dataset",[29,678,679],{},"offsetWidth",[29,681,682],{},"click()",[29,684,685],{},"focus()",[29,687,688],{},"hidden","，让DOM组件可以控制样式，读写data属性，测量尺寸，触发交互、控制可见性。",[14,691,692],{"id":692},"虚拟列表",[10,694,695,696,488],{},"这是一种前端优化的性能技术，用于高效渲染超长列表，和WPF的虚拟滚动是一种意思，",[147,697,698],{},"只渲染视口内可见的列表项，而不是一次性渲染全部数据",[10,700,701],{},"在遇到超多DOM的情况下可以做到小占用，滚动流程。只不过虚拟列表可能更常用，因为在前端UI组件中更加常用，组件叫做VirtualList。虚拟滚动在技术文章和浏览器API里讨论常见，描述滚动时动态更新内容这个行为。",[10,703,704],{},"我们需要保留视口内的容器，让新的数据替换掉，重新渲染。",[22,706,710],{"className":707,"code":708,"language":709,"meta":27,"style":27},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv\n    ref=\"viewportRef\"\n    class=\"virtual-list\"\n    @scroll.passive=\"onScroll\"\n  >\n    \u003C!-- 占位层：撑起总高度，让滚动条正确 -->\n    \u003Cdiv class=\"phantom\" :style=\"{ height: totalHeight + 'px' }\">\u003C\u002Fdiv>\n\n    \u003C!-- 渲染层：只放可见项 -->\n    \u003Cdiv class=\"render-layer\" :style=\"{ transform: `translateY(${offsetY}px)` }\">\n      \u003Cdiv\n        v-for=\"item in visibleItems\"\n        :key=\"item.id\"\n        class=\"list-item\"\n        :style=\"{ height: itemHeight + 'px' }\"\n      >\n        {{ item.name }}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, computed, onMounted, onBeforeUnmount } from 'vue';\n\nconst props = defineProps({\n  list: { type: Array, default: () => [] },\n  itemHeight: { type: Number, default: 50 },\n  buffer: { type: Number, default: 3 } \u002F\u002F 上下缓冲区，防止快速滚动白屏\n});\n\nconst viewportRef = ref(null);\nconst scrollTop = ref(0);\nconst viewportHeight = ref(0);\n\n\u002F\u002F 总高度：撑起滚动条\nconst totalHeight = computed(() => props.list.length * props.itemHeight);\n\n\u002F\u002F 可见起始索引（含缓冲区）\nconst startIndex = computed(() => {\n  const raw = Math.floor(scrollTop.value \u002F props.itemHeight);\n  return Math.max(0, raw - props.buffer);\n});\n\n\u002F\u002F 可见结束索引（含缓冲区）\nconst endIndex = computed(() => {\n  const raw = Math.ceil((scrollTop.value + viewportHeight.value) \u002F props.itemHeight);\n  return Math.min(props.list.length - 1, raw + props.buffer);\n});\n\n\u002F\u002F 当前可见的数据切片\nconst visibleItems = computed(() =>\n  props.list.slice(startIndex.value, endIndex.value + 1)\n);\n\n\u002F\u002F 渲染层的偏移量\nconst offsetY = computed(() => startIndex.value * props.itemHeight);\n\n\u002F\u002F 滚动处理（用 rAF 节流）\nlet ticking = false;\nconst onScroll = (e) => {\n  if (ticking) return;\n  ticking = true;\n  requestAnimationFrame(() => {\n    scrollTop.value = e.target.scrollTop;\n    ticking = false;\n  });\n};\n\n\u002F\u002F 初始化视口高度\nconst updateViewportHeight = () => {\n  if (viewportRef.value) {\n    viewportHeight.value = viewportRef.value.clientHeight;\n  }\n};\n\nonMounted(() => {\n  updateViewportHeight();\n  window.addEventListener('resize', updateViewportHeight);\n});\n\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateViewportHeight);\n});\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.virtual-list {\n  height: 500px;          \u002F* 固定视口高度 *\u002F\n  overflow-y: auto;\n  position: relative;\n  border: 1px solid #ddd;\n}\n\n.phantom {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: -1;            \u002F* 不遮挡内容，只撑高度 *\u002F\n}\n\n.render-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform; \u002F* 提示浏览器优化 *\u002F\n}\n\n.list-item {\n  box-sizing: border-box;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n}\n\u003C\u002Fstyle>\n","vue",[29,711,712,721,729,739,749,759,764,769,799,804,810,833,841,852,863,874,885,891,897,907,917,927,937,942,954,972,977,993,1010,1022,1037,1043,1048,1069,1087,1105,1110,1116,1146,1151,1157,1175,1200,1224,1229,1234,1240,1258,1285,1312,1317,1322,1328,1345,1363,1368,1373,1379,1403,1408,1414,1430,1451,1463,1476,1488,1499,1511,1517,1523,1528,1534,1551,1559,1570,1576,1581,1586,1598,1607,1623,1628,1633,1645,1658,1663,1672,1677,1689,1697,1718,1731,1744,1765,1771,1776,1784,1796,1808,1820,1832,1849,1854,1859,1867,1878,1889,1900,1911,1923,1928,1933,1941,1954,1973,1986,1999,2016,2021],{"__ignoreMap":27},[32,713,714,716,719],{"class":34,"line":35},[32,715,39],{"class":38},[32,717,718],{"class":42},"template",[32,720,57],{"class":38},[32,722,723,726],{"class":34,"line":60},[32,724,725],{"class":38},"  \u003C",[32,727,728],{"class":42},"div\n",[32,730,731,734,736],{"class":34,"line":82},[32,732,733],{"class":46},"    ref",[32,735,50],{"class":38},[32,737,738],{"class":53},"\"viewportRef\"\n",[32,740,741,744,746],{"class":34,"line":103},[32,742,743],{"class":46},"    class",[32,745,50],{"class":38},[32,747,748],{"class":53},"\"virtual-list\"\n",[32,750,751,754,756],{"class":34,"line":124},[32,752,753],{"class":46},"    @scroll.passive",[32,755,50],{"class":38},[32,757,758],{"class":53},"\"onScroll\"\n",[32,760,761],{"class":34,"line":349},[32,762,763],{"class":38},"  >\n",[32,765,766],{"class":34,"line":372},[32,767,768],{"class":282},"    \u003C!-- 占位层：撑起总高度，让滚动条正确 -->\n",[32,770,771,774,777,780,782,785,788,790,793,795,797],{"class":34,"line":384},[32,772,773],{"class":38},"    \u003C",[32,775,776],{"class":42},"div",[32,778,779],{"class":46}," class",[32,781,50],{"class":38},[32,783,784],{"class":53},"\"phantom\"",[32,786,787],{"class":46}," :style",[32,789,50],{"class":38},[32,791,792],{"class":53},"\"{ height: totalHeight + 'px' }\"",[32,794,75],{"class":38},[32,796,776],{"class":42},[32,798,57],{"class":38},[32,800,802],{"class":34,"line":801},9,[32,803,311],{"emptyLinePlaceholder":310},[32,805,807],{"class":34,"line":806},10,[32,808,809],{"class":282},"    \u003C!-- 渲染层：只放可见项 -->\n",[32,811,813,815,817,819,821,824,826,828,831],{"class":34,"line":812},11,[32,814,773],{"class":38},[32,816,776],{"class":42},[32,818,779],{"class":46},[32,820,50],{"class":38},[32,822,823],{"class":53},"\"render-layer\"",[32,825,787],{"class":46},[32,827,50],{"class":38},[32,829,830],{"class":53},"\"{ transform: `translateY(${offsetY}px)` }\"",[32,832,57],{"class":38},[32,834,836,839],{"class":34,"line":835},12,[32,837,838],{"class":38},"      \u003C",[32,840,728],{"class":42},[32,842,844,847,849],{"class":34,"line":843},13,[32,845,846],{"class":46},"        v-for",[32,848,50],{"class":38},[32,850,851],{"class":53},"\"item in visibleItems\"\n",[32,853,855,858,860],{"class":34,"line":854},14,[32,856,857],{"class":46},"        :key",[32,859,50],{"class":38},[32,861,862],{"class":53},"\"item.id\"\n",[32,864,866,869,871],{"class":34,"line":865},15,[32,867,868],{"class":46},"        class",[32,870,50],{"class":38},[32,872,873],{"class":53},"\"list-item\"\n",[32,875,877,880,882],{"class":34,"line":876},16,[32,878,879],{"class":46},"        :style",[32,881,50],{"class":38},[32,883,884],{"class":53},"\"{ height: itemHeight + 'px' }\"\n",[32,886,888],{"class":34,"line":887},17,[32,889,890],{"class":38},"      >\n",[32,892,894],{"class":34,"line":893},18,[32,895,896],{"class":38},"        {{ item.name }}\n",[32,898,900,903,905],{"class":34,"line":899},19,[32,901,902],{"class":38},"      \u003C\u002F",[32,904,776],{"class":42},[32,906,57],{"class":38},[32,908,910,913,915],{"class":34,"line":909},20,[32,911,912],{"class":38},"    \u003C\u002F",[32,914,776],{"class":42},[32,916,57],{"class":38},[32,918,920,923,925],{"class":34,"line":919},21,[32,921,922],{"class":38},"  \u003C\u002F",[32,924,776],{"class":42},[32,926,57],{"class":38},[32,928,930,933,935],{"class":34,"line":929},22,[32,931,932],{"class":38},"\u003C\u002F",[32,934,718],{"class":42},[32,936,57],{"class":38},[32,938,940],{"class":34,"line":939},23,[32,941,311],{"emptyLinePlaceholder":310},[32,943,945,947,949,952],{"class":34,"line":944},24,[32,946,39],{"class":38},[32,948,65],{"class":42},[32,950,951],{"class":46}," setup",[32,953,57],{"class":38},[32,955,957,960,963,966,969],{"class":34,"line":956},25,[32,958,959],{"class":342},"import",[32,961,962],{"class":38}," { ref, computed, onMounted, onBeforeUnmount } ",[32,964,965],{"class":342},"from",[32,967,968],{"class":53}," 'vue'",[32,970,971],{"class":38},";\n",[32,973,975],{"class":34,"line":974},26,[32,976,311],{"emptyLinePlaceholder":310},[32,978,980,982,985,987,990],{"class":34,"line":979},27,[32,981,412],{"class":342},[32,983,984],{"class":415}," props",[32,986,419],{"class":342},[32,988,989],{"class":46}," defineProps",[32,991,992],{"class":38},"({\n",[32,994,996,999,1002,1005,1007],{"class":34,"line":995},28,[32,997,998],{"class":38},"  list: { type: Array, ",[32,1000,1001],{"class":46},"default",[32,1003,1004],{"class":38},": () ",[32,1006,343],{"class":342},[32,1008,1009],{"class":38}," [] },\n",[32,1011,1013,1016,1019],{"class":34,"line":1012},29,[32,1014,1015],{"class":38},"  itemHeight: { type: Number, default: ",[32,1017,1018],{"class":415},"50",[32,1020,1021],{"class":38}," },\n",[32,1023,1025,1028,1031,1034],{"class":34,"line":1024},30,[32,1026,1027],{"class":38},"  buffer: { type: Number, default: ",[32,1029,1030],{"class":415},"3",[32,1032,1033],{"class":38}," } ",[32,1035,1036],{"class":282},"\u002F\u002F 上下缓冲区，防止快速滚动白屏\n",[32,1038,1040],{"class":34,"line":1039},31,[32,1041,1042],{"class":38},"});\n",[32,1044,1046],{"class":34,"line":1045},32,[32,1047,311],{"emptyLinePlaceholder":310},[32,1049,1051,1053,1056,1058,1061,1063,1066],{"class":34,"line":1050},33,[32,1052,412],{"class":342},[32,1054,1055],{"class":415}," viewportRef",[32,1057,419],{"class":342},[32,1059,1060],{"class":46}," ref",[32,1062,293],{"class":38},[32,1064,1065],{"class":415},"null",[32,1067,1068],{"class":38},");\n",[32,1070,1072,1074,1077,1079,1081,1083,1085],{"class":34,"line":1071},34,[32,1073,412],{"class":342},[32,1075,1076],{"class":415}," scrollTop",[32,1078,419],{"class":342},[32,1080,1060],{"class":46},[32,1082,293],{"class":38},[32,1084,430],{"class":415},[32,1086,1068],{"class":38},[32,1088,1090,1092,1095,1097,1099,1101,1103],{"class":34,"line":1089},35,[32,1091,412],{"class":342},[32,1093,1094],{"class":415}," viewportHeight",[32,1096,419],{"class":342},[32,1098,1060],{"class":46},[32,1100,293],{"class":38},[32,1102,430],{"class":415},[32,1104,1068],{"class":38},[32,1106,1108],{"class":34,"line":1107},36,[32,1109,311],{"emptyLinePlaceholder":310},[32,1111,1113],{"class":34,"line":1112},37,[32,1114,1115],{"class":282},"\u002F\u002F 总高度：撑起滚动条\n",[32,1117,1119,1121,1124,1126,1129,1132,1134,1137,1140,1143],{"class":34,"line":1118},38,[32,1120,412],{"class":342},[32,1122,1123],{"class":415}," totalHeight",[32,1125,419],{"class":342},[32,1127,1128],{"class":46}," computed",[32,1130,1131],{"class":38},"(() ",[32,1133,343],{"class":342},[32,1135,1136],{"class":38}," props.list.",[32,1138,1139],{"class":415},"length",[32,1141,1142],{"class":342}," *",[32,1144,1145],{"class":38}," props.itemHeight);\n",[32,1147,1149],{"class":34,"line":1148},39,[32,1150,311],{"emptyLinePlaceholder":310},[32,1152,1154],{"class":34,"line":1153},40,[32,1155,1156],{"class":282},"\u002F\u002F 可见起始索引（含缓冲区）\n",[32,1158,1160,1162,1165,1167,1169,1171,1173],{"class":34,"line":1159},41,[32,1161,412],{"class":342},[32,1163,1164],{"class":415}," startIndex",[32,1166,419],{"class":342},[32,1168,1128],{"class":46},[32,1170,1131],{"class":38},[32,1172,343],{"class":342},[32,1174,346],{"class":38},[32,1176,1178,1181,1184,1186,1189,1192,1195,1198],{"class":34,"line":1177},42,[32,1179,1180],{"class":342},"  const",[32,1182,1183],{"class":415}," raw",[32,1185,419],{"class":342},[32,1187,1188],{"class":38}," Math.",[32,1190,1191],{"class":46},"floor",[32,1193,1194],{"class":38},"(scrollTop.value ",[32,1196,1197],{"class":342},"\u002F",[32,1199,1145],{"class":38},[32,1201,1203,1206,1208,1211,1213,1215,1218,1221],{"class":34,"line":1202},43,[32,1204,1205],{"class":342},"  return",[32,1207,1188],{"class":38},[32,1209,1210],{"class":46},"max",[32,1212,293],{"class":38},[32,1214,430],{"class":415},[32,1216,1217],{"class":38},", raw ",[32,1219,1220],{"class":342},"-",[32,1222,1223],{"class":38}," props.buffer);\n",[32,1225,1227],{"class":34,"line":1226},44,[32,1228,1042],{"class":38},[32,1230,1232],{"class":34,"line":1231},45,[32,1233,311],{"emptyLinePlaceholder":310},[32,1235,1237],{"class":34,"line":1236},46,[32,1238,1239],{"class":282},"\u002F\u002F 可见结束索引（含缓冲区）\n",[32,1241,1243,1245,1248,1250,1252,1254,1256],{"class":34,"line":1242},47,[32,1244,412],{"class":342},[32,1246,1247],{"class":415}," endIndex",[32,1249,419],{"class":342},[32,1251,1128],{"class":46},[32,1253,1131],{"class":38},[32,1255,343],{"class":342},[32,1257,346],{"class":38},[32,1259,1261,1263,1265,1267,1269,1272,1275,1278,1281,1283],{"class":34,"line":1260},48,[32,1262,1180],{"class":342},[32,1264,1183],{"class":415},[32,1266,419],{"class":342},[32,1268,1188],{"class":38},[32,1270,1271],{"class":46},"ceil",[32,1273,1274],{"class":38},"((scrollTop.value ",[32,1276,1277],{"class":342},"+",[32,1279,1280],{"class":38}," viewportHeight.value) ",[32,1282,1197],{"class":342},[32,1284,1145],{"class":38},[32,1286,1288,1290,1292,1295,1298,1300,1303,1306,1308,1310],{"class":34,"line":1287},49,[32,1289,1205],{"class":342},[32,1291,1188],{"class":38},[32,1293,1294],{"class":46},"min",[32,1296,1297],{"class":38},"(props.list.",[32,1299,1139],{"class":415},[32,1301,1302],{"class":342}," -",[32,1304,1305],{"class":415}," 1",[32,1307,1217],{"class":38},[32,1309,1277],{"class":342},[32,1311,1223],{"class":38},[32,1313,1315],{"class":34,"line":1314},50,[32,1316,1042],{"class":38},[32,1318,1320],{"class":34,"line":1319},51,[32,1321,311],{"emptyLinePlaceholder":310},[32,1323,1325],{"class":34,"line":1324},52,[32,1326,1327],{"class":282},"\u002F\u002F 当前可见的数据切片\n",[32,1329,1331,1333,1336,1338,1340,1342],{"class":34,"line":1330},53,[32,1332,412],{"class":342},[32,1334,1335],{"class":415}," visibleItems",[32,1337,419],{"class":342},[32,1339,1128],{"class":46},[32,1341,1131],{"class":38},[32,1343,1344],{"class":342},"=>\n",[32,1346,1348,1351,1354,1357,1359,1361],{"class":34,"line":1347},54,[32,1349,1350],{"class":38},"  props.list.",[32,1352,1353],{"class":46},"slice",[32,1355,1356],{"class":38},"(startIndex.value, endIndex.value ",[32,1358,1277],{"class":342},[32,1360,1305],{"class":415},[32,1362,305],{"class":38},[32,1364,1366],{"class":34,"line":1365},55,[32,1367,1068],{"class":38},[32,1369,1371],{"class":34,"line":1370},56,[32,1372,311],{"emptyLinePlaceholder":310},[32,1374,1376],{"class":34,"line":1375},57,[32,1377,1378],{"class":282},"\u002F\u002F 渲染层的偏移量\n",[32,1380,1382,1384,1387,1389,1391,1393,1395,1398,1401],{"class":34,"line":1381},58,[32,1383,412],{"class":342},[32,1385,1386],{"class":415}," offsetY",[32,1388,419],{"class":342},[32,1390,1128],{"class":46},[32,1392,1131],{"class":38},[32,1394,343],{"class":342},[32,1396,1397],{"class":38}," startIndex.value ",[32,1399,1400],{"class":342},"*",[32,1402,1145],{"class":38},[32,1404,1406],{"class":34,"line":1405},59,[32,1407,311],{"emptyLinePlaceholder":310},[32,1409,1411],{"class":34,"line":1410},60,[32,1412,1413],{"class":282},"\u002F\u002F 滚动处理（用 rAF 节流）\n",[32,1415,1417,1420,1423,1425,1428],{"class":34,"line":1416},61,[32,1418,1419],{"class":342},"let",[32,1421,1422],{"class":38}," ticking ",[32,1424,50],{"class":342},[32,1426,1427],{"class":415}," false",[32,1429,971],{"class":38},[32,1431,1433,1435,1438,1440,1443,1445,1447,1449],{"class":34,"line":1432},62,[32,1434,412],{"class":342},[32,1436,1437],{"class":46}," onScroll",[32,1439,419],{"class":342},[32,1441,1442],{"class":38}," (",[32,1444,336],{"class":335},[32,1446,339],{"class":38},[32,1448,343],{"class":342},[32,1450,346],{"class":38},[32,1452,1454,1456,1459,1461],{"class":34,"line":1453},63,[32,1455,352],{"class":342},[32,1457,1458],{"class":38}," (ticking) ",[32,1460,366],{"class":342},[32,1462,971],{"class":38},[32,1464,1466,1469,1471,1474],{"class":34,"line":1465},64,[32,1467,1468],{"class":38},"  ticking ",[32,1470,50],{"class":342},[32,1472,1473],{"class":415}," true",[32,1475,971],{"class":38},[32,1477,1479,1482,1484,1486],{"class":34,"line":1478},65,[32,1480,1481],{"class":46},"  requestAnimationFrame",[32,1483,1131],{"class":38},[32,1485,343],{"class":342},[32,1487,346],{"class":38},[32,1489,1491,1494,1496],{"class":34,"line":1490},66,[32,1492,1493],{"class":38},"    scrollTop.value ",[32,1495,50],{"class":342},[32,1497,1498],{"class":38}," e.target.scrollTop;\n",[32,1500,1502,1505,1507,1509],{"class":34,"line":1501},67,[32,1503,1504],{"class":38},"    ticking ",[32,1506,50],{"class":342},[32,1508,1427],{"class":415},[32,1510,971],{"class":38},[32,1512,1514],{"class":34,"line":1513},68,[32,1515,1516],{"class":38},"  });\n",[32,1518,1520],{"class":34,"line":1519},69,[32,1521,1522],{"class":38},"};\n",[32,1524,1526],{"class":34,"line":1525},70,[32,1527,311],{"emptyLinePlaceholder":310},[32,1529,1531],{"class":34,"line":1530},71,[32,1532,1533],{"class":282},"\u002F\u002F 初始化视口高度\n",[32,1535,1537,1539,1542,1544,1547,1549],{"class":34,"line":1536},72,[32,1538,412],{"class":342},[32,1540,1541],{"class":46}," updateViewportHeight",[32,1543,419],{"class":342},[32,1545,1546],{"class":38}," () ",[32,1548,343],{"class":342},[32,1550,346],{"class":38},[32,1552,1554,1556],{"class":34,"line":1553},73,[32,1555,352],{"class":342},[32,1557,1558],{"class":38}," (viewportRef.value) {\n",[32,1560,1562,1565,1567],{"class":34,"line":1561},74,[32,1563,1564],{"class":38},"    viewportHeight.value ",[32,1566,50],{"class":342},[32,1568,1569],{"class":38}," viewportRef.value.clientHeight;\n",[32,1571,1573],{"class":34,"line":1572},75,[32,1574,1575],{"class":38},"  }\n",[32,1577,1579],{"class":34,"line":1578},76,[32,1580,1522],{"class":38},[32,1582,1584],{"class":34,"line":1583},77,[32,1585,311],{"emptyLinePlaceholder":310},[32,1587,1589,1592,1594,1596],{"class":34,"line":1588},78,[32,1590,1591],{"class":46},"onMounted",[32,1593,1131],{"class":38},[32,1595,343],{"class":342},[32,1597,346],{"class":38},[32,1599,1601,1604],{"class":34,"line":1600},79,[32,1602,1603],{"class":46},"  updateViewportHeight",[32,1605,1606],{"class":38},"();\n",[32,1608,1610,1613,1615,1617,1620],{"class":34,"line":1609},80,[32,1611,1612],{"class":38},"  window.",[32,1614,324],{"class":46},[32,1616,293],{"class":38},[32,1618,1619],{"class":53},"'resize'",[32,1621,1622],{"class":38},", updateViewportHeight);\n",[32,1624,1626],{"class":34,"line":1625},81,[32,1627,1042],{"class":38},[32,1629,1631],{"class":34,"line":1630},82,[32,1632,311],{"emptyLinePlaceholder":310},[32,1634,1636,1639,1641,1643],{"class":34,"line":1635},83,[32,1637,1638],{"class":46},"onBeforeUnmount",[32,1640,1131],{"class":38},[32,1642,343],{"class":342},[32,1644,346],{"class":38},[32,1646,1648,1650,1652,1654,1656],{"class":34,"line":1647},84,[32,1649,1612],{"class":38},[32,1651,611],{"class":46},[32,1653,293],{"class":38},[32,1655,1619],{"class":53},[32,1657,1622],{"class":38},[32,1659,1661],{"class":34,"line":1660},85,[32,1662,1042],{"class":38},[32,1664,1666,1668,1670],{"class":34,"line":1665},86,[32,1667,932],{"class":38},[32,1669,65],{"class":42},[32,1671,57],{"class":38},[32,1673,1675],{"class":34,"line":1674},87,[32,1676,311],{"emptyLinePlaceholder":310},[32,1678,1680,1682,1684,1687],{"class":34,"line":1679},88,[32,1681,39],{"class":38},[32,1683,673],{"class":42},[32,1685,1686],{"class":46}," scoped",[32,1688,57],{"class":38},[32,1690,1692,1695],{"class":34,"line":1691},89,[32,1693,1694],{"class":46},".virtual-list",[32,1696,346],{"class":38},[32,1698,1700,1703,1706,1709,1712,1715],{"class":34,"line":1699},90,[32,1701,1702],{"class":415},"  height",[32,1704,1705],{"class":38},": ",[32,1707,1708],{"class":415},"500",[32,1710,1711],{"class":342},"px",[32,1713,1714],{"class":38},";          ",[32,1716,1717],{"class":282},"\u002F* 固定视口高度 *\u002F\n",[32,1719,1721,1724,1726,1729],{"class":34,"line":1720},91,[32,1722,1723],{"class":415},"  overflow-y",[32,1725,1705],{"class":38},[32,1727,1728],{"class":415},"auto",[32,1730,971],{"class":38},[32,1732,1734,1737,1739,1742],{"class":34,"line":1733},92,[32,1735,1736],{"class":415},"  position",[32,1738,1705],{"class":38},[32,1740,1741],{"class":415},"relative",[32,1743,971],{"class":38},[32,1745,1747,1750,1752,1755,1757,1760,1763],{"class":34,"line":1746},93,[32,1748,1749],{"class":415},"  border",[32,1751,1705],{"class":38},[32,1753,1754],{"class":415},"1",[32,1756,1711],{"class":342},[32,1758,1759],{"class":415}," solid",[32,1761,1762],{"class":415}," #ddd",[32,1764,971],{"class":38},[32,1766,1768],{"class":34,"line":1767},94,[32,1769,1770],{"class":38},"}\n",[32,1772,1774],{"class":34,"line":1773},95,[32,1775,311],{"emptyLinePlaceholder":310},[32,1777,1779,1782],{"class":34,"line":1778},96,[32,1780,1781],{"class":46},".phantom",[32,1783,346],{"class":38},[32,1785,1787,1789,1791,1794],{"class":34,"line":1786},97,[32,1788,1736],{"class":415},[32,1790,1705],{"class":38},[32,1792,1793],{"class":415},"absolute",[32,1795,971],{"class":38},[32,1797,1799,1802,1804,1806],{"class":34,"line":1798},98,[32,1800,1801],{"class":415},"  top",[32,1803,1705],{"class":38},[32,1805,430],{"class":415},[32,1807,971],{"class":38},[32,1809,1811,1814,1816,1818],{"class":34,"line":1810},99,[32,1812,1813],{"class":415},"  left",[32,1815,1705],{"class":38},[32,1817,430],{"class":415},[32,1819,971],{"class":38},[32,1821,1823,1826,1828,1830],{"class":34,"line":1822},100,[32,1824,1825],{"class":415},"  right",[32,1827,1705],{"class":38},[32,1829,430],{"class":415},[32,1831,971],{"class":38},[32,1833,1835,1838,1840,1843,1846],{"class":34,"line":1834},101,[32,1836,1837],{"class":415},"  z-index",[32,1839,1705],{"class":38},[32,1841,1842],{"class":415},"-1",[32,1844,1845],{"class":38},";            ",[32,1847,1848],{"class":282},"\u002F* 不遮挡内容，只撑高度 *\u002F\n",[32,1850,1852],{"class":34,"line":1851},102,[32,1853,1770],{"class":38},[32,1855,1857],{"class":34,"line":1856},103,[32,1858,311],{"emptyLinePlaceholder":310},[32,1860,1862,1865],{"class":34,"line":1861},104,[32,1863,1864],{"class":46},".render-layer",[32,1866,346],{"class":38},[32,1868,1870,1872,1874,1876],{"class":34,"line":1869},105,[32,1871,1736],{"class":415},[32,1873,1705],{"class":38},[32,1875,1793],{"class":415},[32,1877,971],{"class":38},[32,1879,1881,1883,1885,1887],{"class":34,"line":1880},106,[32,1882,1801],{"class":415},[32,1884,1705],{"class":38},[32,1886,430],{"class":415},[32,1888,971],{"class":38},[32,1890,1892,1894,1896,1898],{"class":34,"line":1891},107,[32,1893,1813],{"class":415},[32,1895,1705],{"class":38},[32,1897,430],{"class":415},[32,1899,971],{"class":38},[32,1901,1903,1905,1907,1909],{"class":34,"line":1902},108,[32,1904,1825],{"class":415},[32,1906,1705],{"class":38},[32,1908,430],{"class":415},[32,1910,971],{"class":38},[32,1912,1914,1917,1920],{"class":34,"line":1913},109,[32,1915,1916],{"class":415},"  will-change",[32,1918,1919],{"class":38},": transform; ",[32,1921,1922],{"class":282},"\u002F* 提示浏览器优化 *\u002F\n",[32,1924,1926],{"class":34,"line":1925},110,[32,1927,1770],{"class":38},[32,1929,1931],{"class":34,"line":1930},111,[32,1932,311],{"emptyLinePlaceholder":310},[32,1934,1936,1939],{"class":34,"line":1935},112,[32,1937,1938],{"class":46},".list-item",[32,1940,346],{"class":38},[32,1942,1944,1947,1949,1952],{"class":34,"line":1943},113,[32,1945,1946],{"class":415},"  box-sizing",[32,1948,1705],{"class":38},[32,1950,1951],{"class":415},"border-box",[32,1953,971],{"class":38},[32,1955,1957,1960,1962,1964,1966,1968,1971],{"class":34,"line":1956},114,[32,1958,1959],{"class":415},"  border-bottom",[32,1961,1705],{"class":38},[32,1963,1754],{"class":415},[32,1965,1711],{"class":342},[32,1967,1759],{"class":415},[32,1969,1970],{"class":415}," #eee",[32,1972,971],{"class":38},[32,1974,1976,1979,1981,1984],{"class":34,"line":1975},115,[32,1977,1978],{"class":415},"  display",[32,1980,1705],{"class":38},[32,1982,1983],{"class":415},"flex",[32,1985,971],{"class":38},[32,1987,1989,1992,1994,1997],{"class":34,"line":1988},116,[32,1990,1991],{"class":415},"  align-items",[32,1993,1705],{"class":38},[32,1995,1996],{"class":415},"center",[32,1998,971],{"class":38},[32,2000,2002,2005,2007,2009,2012,2014],{"class":34,"line":2001},117,[32,2003,2004],{"class":415},"  padding",[32,2006,1705],{"class":38},[32,2008,430],{"class":415},[32,2010,2011],{"class":415}," 12",[32,2013,1711],{"class":342},[32,2015,971],{"class":38},[32,2017,2019],{"class":34,"line":2018},118,[32,2020,1770],{"class":38},[32,2022,2024,2026,2028],{"class":34,"line":2023},119,[32,2025,932],{"class":38},[32,2027,673],{"class":42},[32,2029,57],{"class":38},[673,2031,2032],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":27,"searchDepth":60,"depth":60,"links":2034},[2035,2036,2037,2038,2039],{"id":16,"depth":82,"text":17},{"id":153,"depth":82,"text":153},{"id":390,"depth":82,"text":391},{"id":543,"depth":82,"text":544},{"id":692,"depth":82,"text":692},"md",{"date":2042,"tags":2043},"2026-12-10",[2044,26],"browser","\u002Fbrowser\u002Fhtml技术的面试笔记",{"description":12},"browser\u002Fhtml技术的面试笔记","b8mf80AURz6RuT_sjR8CB2lJih5Lz5ACd0S14ecr8Nw",1791871170403]