[{"_1":2,"_1039":-5,"_1040":-5},"loaderData",{"_3":4,"_53":54},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_25":26,"_27":28,"_29":28,"_30":24,"_31":28,"_32":28,"_33":28,"_34":28,"_35":28,"_36":28,"_37":28,"_38":28,"_39":40,"_49":28,"_50":28,"_51":24,"_52":24},"__clerk_ssr_state",{"_11":12,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5,"_20":-5,"_21":-5,"_22":-5,"_23":24},"tokenType","session_token","sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_41":24,"_23":24,"_42":28,"_43":44,"_45":28,"_46":26,"_47":24,"_48":28},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_55":56,"_1035":1036},"questions",[57,196,224,271,300,325,350,379,404,438,467,497,522,545,569,593,617,641,665,690,715,739,770,795,834,859,890,915,939,963,987,1011],{"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_111":112,"_131":132,"_133":24,"_134":-5,"_135":136,"_137":138,"_159":152,"_153":160,"_155":161,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":166,"_170":171,"_176":177,"_178":179,"_190":191,"_192":-5,"_193":-5,"_194":195},"url","https://api.github.com/repos/pro-collection/interview-question/issues/727","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/727/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/727/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/727/events","html_url","https://github.com/pro-collection/interview-question/issues/727","id",2266075586,"node_id","I_kwDOJGDC6c6HEZHC","number",727,"title","介绍一下 MutationObserver【热度: 632】","user",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[113,124],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","name","浏览器","color","f9d0c4","default","description","浏览器相关知识点",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴","ededed","公司标签","state","open","locked","assignee","assignees",[],"milestone",{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":148,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题","creator",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"open_issues",510,"closed_issues",0,"created_at","2023-03-06T15:00:15Z","updated_at","2025-09-07T06:08:31Z","due_on","closed_at","comments","2024-04-26T15:56:30Z","2024-05-10T14:12:11Z","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_167":152,"_168":152,"_169":152},"total","completed","percent_completed","issue_dependencies_summary",{"_172":152,"_173":152,"_174":152,"_175":152},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：MutationObserver api\n\n`MutationObserver` 是一种能够响应 DOM 树变动的 Web API，它可以监听几乎所有类型的 DOM 变动，比如元素被添加、删除或修改。你可以通过它执行 callback 来应对这些变化。\n\n下面是 `MutationObserver` 的基本用法：\n\n### 创建 `MutationObserver` 实例\n\n```javascript\nvar observer = new MutationObserver(callback);\n```\n\n### 配置观察者\n\n你可以指定要观察的 DOM 变动的类型和具体的目标节点：\n\n```javascript\nvar config = {\n attributes: true, // 观察属性变动\n childList: true, // 观察子列表变动\n subtree: true, // 观察后代节点\n};\n\nobserver.observe(targetNode, config);\n```\n\n这里的 `callback` 是一个在观察到变动时执行的函数，它有两个参数：`mutationsList` 是一个变动列表，`observer` 是观察者实例。\n\n### 回调函数\n\n`MutationCallback` 函数会被调用，它有两个参数：\n\n1. `mutationsList`：一个 `MutationRecord` 对象的数组，每个对象都描述了一个变动。\n2. `observer`：触发通知的 `MutationObserver` 实例。\n\n```javascript\nfunction callback(mutationsList) {\n for (var mutation of mutationsList) {\n if (mutation.type === \"childList\") {\n console.log(\"A child node has been added or removed.\");\n } else if (mutation.type === \"attributes\") {\n console.log(`The ${mutation.attributeName} attribute was modified.`);\n }\n }\n}\n```\n\n### 停止观察\n\n你可以通过调用 `disconnect` 方法来停止观察：\n\n```javascript\nobserver.disconnect();\n```\n\n这将停止观察并且清除之前的记录。\n\n### 注意\n\n- 使用 `MutationObserver` 应该谨慎，因为它可能对页面性能产生影响，尤其是在观察大型 DOM 树或频繁变动时。\n- 尽量不要过度使用 `MutationObserver` 或过度指定需要它观察的变动种类和节点。\n\n比如，如果你只想监听某个特定属性的变动，那么就不应该打开 `childList` 或者 `attributes`（如果不需要观察它们）。\n\n`MutationObserver` 非常适用于响应 DOM 的动态变动来执行特定的 JavaScript 代码，而且是现代前端开发中的一个重要工具。在使用它时，考虑使用最严格的选项来优化性能并减少不必要的性能损耗。\n","reactions",{"_58":180,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/727/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/727/timeline","performed_via_github_app","state_reason","score",1,{"_58":197,"_60":61,"_62":198,"_64":199,"_66":200,"_68":201,"_70":202,"_72":203,"_74":204,"_76":205,"_78":206,"_111":207,"_131":132,"_133":24,"_134":-5,"_135":214,"_137":215,"_159":152,"_153":217,"_155":217,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":218,"_170":219,"_176":220,"_178":221,"_190":223,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/697","https://api.github.com/repos/pro-collection/interview-question/issues/697/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/697/comments","https://api.github.com/repos/pro-collection/interview-question/issues/697/events","https://github.com/pro-collection/interview-question/issues/697",2241593034,"I_kwDOJGDC6c6Fm_7K",697,"JS 的加载会阻塞浏览器渲染吗？【热度: 243】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[208,209],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":210,"_72":211,"_58":212,"_117":213,"_119":129,"_121":24,"_122":130},6294910473,"LA_kwDOJGDC6c8AAAABdzS2CQ","https://api.github.com/repos/pro-collection/interview-question/labels/TOP100%E4%BA%92%E8%81%94%E7%BD%91","TOP100互联网",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":216,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2024-04-13T14:47:10Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：浏览器渲染阻塞、JS 阻塞浏览器渲染\n\nJavaScript 的加载、解析和执行默认情况下会阻塞浏览器的渲染过程。这是因为浏览器渲染引擎和 JavaScript 引擎是单线程的，并且二者共享同一个线程。JavaScript 在执行时会阻止 DOM 构建，因为 JavaScript 可能会修改 DOM 结构（例如添加、修改或删除节点）。出于这个原因，浏览器必须暂停 DOM 的解析和渲染，直到 JavaScript 执行完成。\n\n默认情况下，当浏览器遇到一个`\n ```\n\n 使用`async`时，脚本会在下载完成后尽快执行，这可能会在文档解析完成之前或之后。\n\n2. **延迟脚本（defer）**：\n `defer`属性使得脚本在 HTML 解析完成之后、DOMContentLoaded 事件触发之前执行，不阻塞 HTML 的解析。\n\n ```html\n \n ```\n\n 使用`defer`，脚本的执行顺序将按照它们在 DOM 中出现的顺序执行。\n\n3. **动态脚本加载**：\n 你可以使用 JavaScript 动态创建`\n \n\n```\n\n在上面的示例中，`.draggable` 类的元素被设置为可拖动（`draggable=\"true\"`），当开始拖动时，触发了 `dragstart` 事件，并设置了拖动数据。\n\n`.droppable` 类的元素作为目标元素，它监听了 `dragover` 事件以阻止默认的拖放行为，并在 `drop` 事件中获取拖放数据并执行相应的操作。\n\n通过以上代码，你可以在浏览器中看到一个红色的可拖动元素和一个蓝色的目标元素。你可以尝试将可拖动元素拖放到目标元素上，拖放完成后，目标元素的内容将会被设置为拖放的数据。\n",{"_58":615,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/426/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/426/timeline",{"_58":618,"_60":61,"_62":619,"_64":620,"_66":621,"_68":622,"_70":623,"_72":624,"_74":625,"_76":626,"_78":627,"_111":628,"_131":132,"_133":24,"_134":-5,"_135":630,"_137":631,"_159":152,"_153":633,"_155":634,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":635,"_170":636,"_176":637,"_178":638,"_190":640,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/425","https://api.github.com/repos/pro-collection/interview-question/issues/425/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/425/comments","https://api.github.com/repos/pro-collection/interview-question/issues/425/events","https://github.com/pro-collection/interview-question/issues/425",1746070572,"I_kwDOJGDC6c5oEuws",425,"iframe 标签有那些优点和缺点？【热度: 411】",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[629],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":632,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-06-07T14:41:56Z","2023-06-07T14:41:57Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"**关键词**：iframe优点、iframe缺点、iframe应用\n\n`