[{"_1":2,"_1076":-5,"_1077":-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,"_1071":1072},"questions",[57,197,243,272,303,334,363,392,417,457,481,506,535,559,584,623,647,672,697,728,753,778,803,828,852,877,902,927,956,991,1021,1046],{"_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":135,"_136":137,"_158":151,"_152":159,"_154":160,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":166,"_170":171,"_176":177,"_178":179,"_190":191,"_192":-5,"_193":-5,"_194":-5,"_195":196},"url","https://api.github.com/repos/pro-collection/interview-question/issues/556","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/556/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/556/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/556/events","html_url","https://github.com/pro-collection/interview-question/issues/556","id",1899351618,"node_id","I_kwDOJGDC6c5xNc5C","number",556,"title","为什么现代前端应用需要打包工具进行打包编译？【热度: 588】","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},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","name","工程化","color","1d76db","default","description","web 项目工程化",{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},5597058003,"LA_kwDOJGDC6c8AAAABTZxT0w","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%BF%AB%E6%89%8B","快手","ededed","公司标签","state","open","locked","assignees",[],"milestone",{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":147,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题","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",454,"closed_issues",0,"created_at","2023-03-06T15:00:27Z","updated_at","2025-09-07T06:21:17Z","due_on","closed_at","comments","2023-09-16T08:20:46Z","2023-09-16T09:09:18Z","assignee","author_association","MEMBER","active_lock_reason","sub_issues_summary",{"_167":151,"_168":151,"_169":151},"total","completed","percent_completed","issue_dependencies_summary",{"_172":151,"_173":151,"_174":151,"_175":151},"blocked_by","total_blocked_by","blocking","total_blocking","body","**关键词**：打包构建必要性\n\n现代前端应用需要打包工具进行打包编译的主要原因有以下几点：\n\n1. 模块化管理：现代前端应用通常采用模块化的开发方式，将代码划分为多个模块，每个模块具有独立的功能和依赖关系。打包工具可以将这些模块进行分析，将它们打包成一个或多个静态文件，方便管理和维护。\n\n2. 解决浏览器兼容性问题：不同的浏览器对于 JavaScript 和 CSS 的支持程度不同，而且随着新特性的不断出现，旧版浏览器可能无法完全支持。打包工具可以通过转译、压缩和兼容性处理等手段，将当前前端代码转化为浏览器可识别和运行的代码，解决兼容性问题。\n\n3. 静态资源处理和优化：现代前端应用涉及大量的静态资源，如图片、字体等。打包工具可以对这些资源进行处理和优化，如图片压缩、字体文件打包等，以减小资源文件的体积，提高页面的加载速度和性能。\n\n4. 代码分割和按需加载：打包工具可以将应用程序拆分成多个小块，实现代码分割和按需加载。这样可以实现懒加载，只在需要时加载特定的代码块，提高页面的加载速度。\n\n5. 开发环境支持：打包工具通常提供开发服务器和热模块替换（HMR）等功能，方便开发人员进行开发和调试。开发服务器可以实时预览代码变化，HMR 可以在修改代码后只替换修改的部分，而不是整个页面刷新，提高开发效率。\n\n6. 提升性能：打包工具可以通过代码优化、压缩和混淆等技术手段，减小文件体积，提升应用程序的加载速度和执行效率。\n\n7. 支持多种前端技术：现代前端应用通常使用多种前端技术和语言，如JavaScript、CSS、TypeScript、Sass等。打包工具可以集成这些技术，并提供相应的编译、转译和处理功能，使开发人员能够更轻松地使用这些技术。\n\n8. 自动化工作流程：打包工具可以配合其他构建工具和自动化任务运行器，如Webpack配合Grunt或Gulp，实现自动化的构建和部署流程。这可以减少手动操作，提高开发效率和代码质量。\n\n9. 第三方库管理：现代前端应用通常使用大量的第三方库和框架，这些库可能包含多个文件和依赖关系。打包工具可以自动管理这些库的依赖关系，并将它们打包为单个文件，减少网络请求和提高代码的可维护性。\n\n10. 高度可定制化：打包工具通常提供丰富的插件和配置选项，允许开发人员根据项目需求进行定制。可以灵活配置打包过程中的各种处理和优化方式，以满足项目的具体需求。\n\n总结 - 现代前端应用需要打包工具进行打包编译的原因是为了： **实现模块化管理、解决兼容性问题、静态资源处理和优化、代码分割和按需加载、开发环境支持、性能提升、多技术支持、自动化工作流程、第三方库管理和可定制化等方面的需求**。\n","reactions",{"_58":180,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/556/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/556/timeline","performed_via_github_app","state_reason","pinned_comment","score",1,{"_58":198,"_60":61,"_62":199,"_64":200,"_66":201,"_68":202,"_70":203,"_72":204,"_74":205,"_76":206,"_78":207,"_111":208,"_131":132,"_133":24,"_134":221,"_136":222,"_158":151,"_152":235,"_154":236,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":237,"_170":238,"_176":239,"_178":240,"_190":242,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/555","https://api.github.com/repos/pro-collection/interview-question/issues/555/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/555/comments","https://api.github.com/repos/pro-collection/interview-question/issues/555/events","https://github.com/pro-collection/interview-question/issues/555",1899350454,"I_kwDOJGDC6c5xNcm2",555,"vue-cli 都做了哪些事儿，有哪些功能？【热度: 386】",{"_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},[209,216],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},5562711972,"LA_kwDOJGDC6c8AAAABS5A_pA","https://api.github.com/repos/pro-collection/interview-question/labels/Shopee","Shopee",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":231,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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,"中","中级程序面试问题",{"_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},510,"2023-03-06T15:00:15Z","2025-09-07T06:08:31Z","2023-09-16T08:16:19Z","2023-09-16T08:16:20Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：vue-cli 作用、vue-cli 功能\n\nVue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建、开发和构建 Vue.js 项目。它提供了一系列的功能来简化 Vue.js 项目的开发和部署流程，包括：\n\n1. 项目脚手架：Vue CLI 可以通过简单的命令行交互方式快速生成一个新的 Vue.js 项目的基础结构，包括目录结构、配置文件、示例代码等。\n\n2. 开发服务器：Vue CLI 提供了一个开发服务器，用于在本地运行项目，在开发过程中实时预览和调试应用程序。它支持热模块替换（HMR），可以实时更新页面内容，提高开发效率。\n\n3. 集成构建工具：Vue CLI 集成了 Webpack，可以自动配置和管理项目的构建过程。它通过配置文件可以进行定制，例如设置打包输出路径、优化代码、压缩资源等。\n\n4. 插件系统：Vue CLI 提供了丰富的插件系统，可以通过安装插件来扩展项目的功能。这些插件可以帮助处理样式、路由、状态管理、国际化等方面的需求，提供更多的开发工具和功能支持。\n\n5. 测试集成：Vue CLI 集成了测试工具，可以快速配置和运行单元测试和端到端测试。它支持多种测试框架，如 Jest、Mocha、Cypress 等，可以帮助开发人员编写和运行各种类型的测试。\n\n6. 项目部署：Vue CLI 提供了命令行接口，可以方便地将项目部署到不同的环境，如开发环境、测试环境和生产环境。它支持生成优化过的静态文件、自动压缩和缓存等功能。\n\n提供了一整套开发和构建 Vue.js 项目的功能和工具链，可以大大简化和加速 Vue.js 项目的开发过程。\n",{"_58":241,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/555/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/555/timeline",{"_58":244,"_60":61,"_62":245,"_64":246,"_66":247,"_68":248,"_70":249,"_72":250,"_74":251,"_76":252,"_78":253,"_111":254,"_131":132,"_133":24,"_134":261,"_136":262,"_158":151,"_152":264,"_154":265,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":266,"_170":267,"_176":268,"_178":269,"_190":271,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/554","https://api.github.com/repos/pro-collection/interview-question/issues/554/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/554/comments","https://api.github.com/repos/pro-collection/interview-question/issues/554/events","https://github.com/pro-collection/interview-question/issues/554",1899349862,"I_kwDOJGDC6c5xNcdm",554,"如何理解数据驱动视图，有哪些核心要素？【热度: 943】",{"_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},[255,256],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":257,"_72":258,"_58":259,"_117":260,"_119":129,"_121":24,"_122":130},5312214934,"LA_kwDOJGDC6c8AAAABPKH3lg","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E6%98%93","网易",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":263,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-09-16T08:14:11Z","2023-09-16T08:14:12Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：理解数据驱动视图\n\n数据驱动视图是指将数据作为主要驱动力，通过对数据的处理和分析，动态地更新和呈现视图的过程。它强调将数据与视图进行解耦，使得视图的呈现可以根据数据的变化自动更新，实现更灵活、可扩展和可维护的视图。\n\n数据驱动视图的核心要素包括：\n\n1. 数据源：数据驱动视图需要有一个或多个数据源，这些数据源可以是来自数据库、API接口、文件等不同的来源。\n\n2. 数据处理：对数据进行处理和分析的过程。这包括对数据进行清洗、过滤、转换、计算等操作，以便于后续的视图呈现。\n\n3. 视图模板：视图模板定义了视图的结构和样式，并指定了如何将数据展示在视图中。视图模板通常使用一种模板语言，可以根据数据的变化自动生成最终的视图。\n\n4. 视图更新机制：视图更新机制是指如何根据数据的变化自动更新视图。这可以基于事件驱动的方式，当数据发生变化时主动更新视图；也可以采用响应式编程的方式，通过观察数据的变化来自动更新视图。\n\n5. 用户交互：数据驱动视图通常与用户进行交互，用户可以通过界面操作改变数据，从而触发视图的更新。用户交互可以通过表单、按钮、滑块等不同的方式实现。\n\n通过将数据与视图解耦，数据驱动视图可以实现更灵活、可扩展和可维护的视图呈现方式。同时，它也可以提高开发效率，减少开发人员对视图的手动管理。\n",{"_58":270,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/554/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/554/timeline",{"_58":273,"_60":61,"_62":274,"_64":275,"_66":276,"_68":277,"_70":278,"_72":279,"_74":280,"_76":281,"_78":282,"_111":283,"_131":132,"_133":24,"_134":292,"_136":293,"_158":151,"_152":295,"_154":296,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":297,"_170":298,"_176":299,"_178":300,"_190":302,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/553","https://api.github.com/repos/pro-collection/interview-question/issues/553/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/553/comments","https://api.github.com/repos/pro-collection/interview-question/issues/553/events","https://github.com/pro-collection/interview-question/issues/553",1899349328,"I_kwDOJGDC6c5xNcVQ",553,"WeakMap 是什么样的数据结构【热度: 431】",{"_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},[284,291],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":257,"_72":258,"_58":259,"_117":260,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":294,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-09-16T08:12:16Z","2023-09-16T08:12:45Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：WeakMap应用、WeakMap数据、WeakMap api\n\n**基本概念**\n\nWeakMap 是一种键值对存储的数据结构，类似于 Map。它的特点是键必须是对象，值可以是任意类型的数据。\n\nWeakMap 内部使用了引用计数的方式来判断键是否存活，当键不再被引用时，垃圾回收机制会自动清除对应的键值对。这意味着如果没有其他地方引用该键，WeakMap 中的键值对会被自动清理，并释放内存。\n\n与 Map 不同的是，WeakMap 的键是弱引用，不会阻止垃圾回收。这意味着在 WeakMap 中，键不能被枚举、迭代或获取键的数量。同时，WeakMap 也没有提供像 Map 中的 size 属性和 clear 方法。\n\n因为键是弱引用，所以 WeakMap 也不能使用普通对象作为键，只能使用具有引用类型的对象作为键。这是为了避免内存泄漏问题，因为如果键是普通对象，即使它没有被其他地方引用，也无法被垃圾回收。\n\n因为 WeakMap 的键是弱引用并且没有提供常用的方法，所以它的使用场景相对有限，主要用于存储对象的私有数据或附加元数据。\n\n**有哪些 api**\n\nWeakMap 提供了以下的 API：\n\n- `set(key, value)`: 向 WeakMap 中设置键值对，键必须是对象。\n- `get(key)`: 获取指定键对应的值。\n- `has(key)`: 判断指定键是否存在于 WeakMap 中。\n- `delete(key)`: 删除指定键对应的键值对。\n- 注意：WeakMap 没有提供 `size` 属性和 `clear` 方法，也不能直接迭代或枚举键。\n\n需要注意的是，由于 WeakMap 的键是弱引用，只能使用对象作为键，同时也意味着无法通过值来查找对应的键。所以 WeakMap 适用于需要存储对象的私有数据或附加元数据的场景，而不适合用于需要根据值来查找键的情况。\n",{"_58":301,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/553/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/553/timeline",{"_58":304,"_60":61,"_62":305,"_64":306,"_66":307,"_68":308,"_70":309,"_72":310,"_74":311,"_76":312,"_78":313,"_111":314,"_131":132,"_133":24,"_134":322,"_136":323,"_158":325,"_152":326,"_154":327,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":328,"_170":329,"_176":330,"_178":331,"_190":333,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/551","https://api.github.com/repos/pro-collection/interview-question/issues/551/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/551/comments","https://api.github.com/repos/pro-collection/interview-question/issues/551/events","https://github.com/pro-collection/interview-question/issues/551",1884318813,"I_kwDOJGDC6c5wUGxd",551,"[代码实现] JS 中数组深对比实现【热度: 985】",{"_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},[315,316],{"_70":257,"_72":258,"_58":259,"_117":260,"_119":129,"_121":24,"_122":130},{"_70":317,"_72":318,"_58":319,"_117":320,"_119":120,"_121":24,"_122":321},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":324,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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},6,"2023-09-06T16:00:24Z","2024-08-01T12:15:28Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JS数组对比\r\n\r\n在JavaScript中，可以使用递归的方式实现数组的深度对比。以下是一个示例函数，用于比较两个数组是否相等：\r\n\r\n```javascript\r\n// 判断对象是否相同\r\nfunction deepEqual(obj1, obj2) {\r\n // 检查类型是否相同\r\n if (typeof obj1 !== typeof obj2) {\r\n return false;\r\n }\r\n \r\n // 检查是否是对象或数组\r\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\r\n // 检查对象或数组长度是否相同\r\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\r\n return false;\r\n }\r\n \r\n for (let key in obj1) {\r\n // 递归比较每个属性的值\r\n if (!deepEqual(obj1[key], obj2[key])) {\r\n return false;\r\n }\r\n }\r\n \r\n return true;\r\n }\r\n \r\n // 比较基本类型的值\r\n return obj1 === obj2;\r\n}\r\n\r\nfunction deepArrayEqual(arr1, arr2) {\r\n // 检查数组长度是否相同\r\n if (arr1.length !== arr2.length) {\r\n return false;\r\n }\r\n \r\n for (let i = 0; i < arr1.length; i++) {\r\n const value1 = arr1[i];\r\n const value2 = arr2[i];\r\n \r\n // 递归比较每个元素的值\r\n if (Array.isArray(value1) && Array.isArray(value2)) {\r\n if (!deepArrayEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else if (typeof value1 === 'object' && typeof value2 === 'object') {\r\n if (!deepEqual(value1, value2)) {\r\n return false;\r\n }\r\n } else {\r\n // 比较基本类型的值\r\n if (value1 !== value2) {\r\n return false;\r\n }\r\n }\r\n }\r\n \r\n return true;\r\n}\r\n```\r\n\r\n使用示例：\r\n\r\n```javascript\r\nconst arr1 = [1, [2, 3], { name: 'John' }];\r\nconst arr2 = [1, [2, 3], { name: 'John' }];\r\nconst arr3 = [1, [2, 3], { name: 'Jane' }];\r\n\r\nconsole.log(deepArrayEqual(arr1, arr2)); // true\r\nconsole.log(deepArrayEqual(arr1, arr3)); // false\r\n```\r\n\r\n在上述示例中，`deepArrayEqual`函数会递归比较两个数组的每个元素的值，包括嵌套的数组和对象。如果两个数组是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\r\n",{"_58":332,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/551/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/551/timeline",{"_58":335,"_60":61,"_62":336,"_64":337,"_66":338,"_68":339,"_70":340,"_72":341,"_74":342,"_76":343,"_78":344,"_111":345,"_131":132,"_133":24,"_134":352,"_136":353,"_158":151,"_152":355,"_154":356,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":357,"_170":358,"_176":359,"_178":360,"_190":362,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/550","https://api.github.com/repos/pro-collection/interview-question/issues/550/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/550/comments","https://api.github.com/repos/pro-collection/interview-question/issues/550/events","https://github.com/pro-collection/interview-question/issues/550",1884284920,"I_kwDOJGDC6c5wT-f4",550,"[代码实现] JS 中如何实现大对象深度对比【热度: 906】",{"_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},[346,351],{"_70":347,"_72":348,"_58":349,"_117":350,"_119":129,"_121":24,"_122":130},5312738037,"LA_kwDOJGDC6c8AAAABPKny9Q","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%99%BE%E5%BA%A6","百度",{"_70":317,"_72":318,"_58":319,"_117":320,"_119":120,"_121":24,"_122":321},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":354,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-09-06T15:39:53Z","2023-09-06T15:51:26Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：JS对象对比\n\n在JavaScript中，可以使用递归的方式实现大对象的深度对比。以下是一个示例函数，用于比较两个大对象的每个属性是否相等：\n\n```javascript\nfunction deepEqual(obj1, obj2) {\n // 检查类型是否相同\n if (typeof obj1 !== typeof obj2) {\n return false;\n }\n \n // 检查是否是对象或数组\n if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {\n // 检查对象或数组长度是否相同\n if (Object.keys(obj1).length !== Object.keys(obj2).length) {\n return false;\n }\n \n for (let key in obj1) {\n // 递归比较每个属性的值\n if (!deepEqual(obj1[key], obj2[key])) {\n return false;\n }\n }\n \n return true;\n }\n \n // 比较基本类型的值\n return obj1 === obj2;\n}\n```\n\n使用示例：\n\n```javascript\nconst obj1 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj2 = {\n name: 'John',\n age: 30,\n address: {\n street: '123 Main St',\n city: 'New York'\n }\n};\n\nconst obj3 = {\n name: 'Jane',\n age: 25,\n address: {\n street: '456 Park Ave',\n city: 'Los Angeles'\n }\n};\n\nconsole.log(deepEqual(obj1, obj2)); // true\nconsole.log(deepEqual(obj1, obj3)); // false\n```\n\n在上述示例中，`deepEqual`函数会递归比较两个对象的每个属性的值，包括嵌套的对象或数组。如果两个对象是相等的，则返回`true`，否则返回`false`。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。\n",{"_58":361,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/550/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/550/timeline",{"_58":364,"_60":61,"_62":365,"_64":366,"_66":367,"_68":368,"_70":369,"_72":370,"_74":371,"_76":372,"_78":373,"_111":374,"_131":132,"_133":24,"_134":381,"_136":382,"_158":151,"_152":384,"_154":385,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":386,"_170":387,"_176":388,"_178":389,"_190":391,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/549","https://api.github.com/repos/pro-collection/interview-question/issues/549/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/549/comments","https://api.github.com/repos/pro-collection/interview-question/issues/549/events","https://github.com/pro-collection/interview-question/issues/549",1884256790,"I_kwDOJGDC6c5wT3oW",549,"用户访问页面白屏了，原因是啥，如何排查？【热度: 609】",{"_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},[375,376],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":377,"_72":378,"_58":379,"_117":380,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":383,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-09-06T15:24:10Z","2023-09-06T15:24:11Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：白屏处理办法\n\n用户访问页面白屏可能由多种原因引起，以下是一些可能的原因和排查步骤：\n\n1. 网络问题：用户的网络连接可能存在问题，无法正确加载页面内容。可以要求用户检查网络连接，或者自己尝试在不同网络环境下测试页面的加载情况。\n\n2. 服务端问题：服务器未正确响应用户请求，导致页面无法加载。可以检查服务器的状态、日志和错误信息，查看是否有任何异常。同时，可以确认服务器上的相关服务是否正常运行。\n\n3. 前端代码问题：页面的前端代码可能存在错误或异常，导致页面无法正常渲染。可以检查浏览器的开发者工具，查看是否有任何错误信息或警告。同时，可以尝试将页面的JavaScript、CSS和HTML代码分离出来进行单独测试，以确定具体的问题所在。\n\n4. 浏览器兼容性问题：不同浏览器对于某些代码的支持可能不一致，导致页面在某些浏览器中无法正常加载。可以尝试在不同浏览器中测试页面的加载情况，同时使用浏览器的开发者工具检查是否有任何错误或警告。\n\n5. 第三方资源加载问题：页面可能依赖于某些第三方资源（如外部脚本、样式表等），如果这些资源无法加载，可能导致页面白屏。可以检查网络请求是否正常，是否有任何资源加载失败的情况。\n\n6. 缓存问题：浏览器可能在缓存中保存了旧版本的页面或资源，导致新版本无法加载。可以尝试清除浏览器缓存，或者通过添加随机参数或修改文件名的方式强制浏览器重新加载页面和资源。\n \n7. 其他可能原因：页面白屏问题还可能由于安全策略（如CSP、CORS等）限制、跨域问题、DNS解析问题等引起。可以使用浏览器的开发者工具检查网络请求和错误信息，查找可能的问题。\n\n在排查问题时，可以根据具体情况逐步进行排查，并结合浏览器的开发者工具、服务器日志等工具来辅助定位问题所在，并且可以与用户进行进一步沟通以获取更多信息。如果问题无法解决，可以寻求专业的技术支持或咨询。\n",{"_58":390,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/549/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/549/timeline",{"_58":393,"_60":61,"_62":394,"_64":395,"_66":396,"_68":397,"_70":398,"_72":399,"_74":400,"_76":401,"_78":402,"_111":403,"_131":132,"_133":24,"_134":406,"_136":407,"_158":151,"_152":409,"_154":410,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":411,"_170":412,"_176":413,"_178":414,"_190":416,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/548","https://api.github.com/repos/pro-collection/interview-question/issues/548/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/548/comments","https://api.github.com/repos/pro-collection/interview-question/issues/548/events","https://github.com/pro-collection/interview-question/issues/548",1884244048,"I_kwDOJGDC6c5wT0hQ",548,"如果用户反馈说感觉网页很卡顿，这个时候该如何排查问题?【热度: 768】",{"_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},[404,405],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":377,"_72":378,"_58":379,"_117":380,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":408,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-09-06T15:16:59Z","2023-09-06T15:23:59Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：网页卡顿、网页卡顿处理办法\n\n排查网页卡顿问题时，可以按照以下步骤进行处理：\n\n1. 验证用户反馈：首先，确认用户反馈的卡顿问题是否普遍存在，还是个别用户的特殊情况。可以与其他用户进行沟通或观察其他设备上的表现。\n\n2. 检查网络连接：检查用户的网络连接是否稳定。卡顿问题可能由于网络延迟或不稳定导致。可以要求用户进行网络速度测试，或者与用户确认网络连接是否正常。\n\n3. 检查服务器性能：确认服务器是否能够处理用户的请求。可以检查服务器的负载情况、处理请求的时间以及资源使用情况。如果服务器负载过高，可能导致网页卡顿。\n\n4. 检查前端代码：检查网页的前端代码是否存在问题。主要看是否有内存泄露、long task 等情况； \n关于内存泄露和 long task 可以看下面两个文档：\n- [JS 内存泄露问题该如何排查？](https://github.com/pro-collection/interview-question/issues/76)\n- [Long Tasks 了解多少？](https://github.com/pro-collection/interview-question/issues/255)\n\n5. 优化网页性能：对于前端代码存在性能问题的情况，可以尝试优化网页性能。例如，压缩和合并CSS和JavaScript文件、减少网络请求次数、使用缓存等方法来提高页面加载速度。 \n可以参考下面文档文档：\n- [从哪些方面可以对网站性能优化？](https://github.com/pro-collection/interview-question/issues/89)\n\n6. 做好性能监控：持续监测网页的性能，并定期更新网页的代码和设计，以提升用户体验。 \n- [`[性能]` 衡量页面性能的指标有哪些？](https://github.com/pro-collection/interview-question/issues/515)\n\n\n",{"_58":415,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/548/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/548/timeline",{"_58":418,"_60":61,"_62":419,"_64":420,"_66":421,"_68":422,"_70":423,"_72":424,"_74":425,"_76":426,"_78":427,"_111":428,"_131":132,"_133":24,"_134":435,"_136":436,"_158":151,"_152":449,"_154":450,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":451,"_170":452,"_176":453,"_178":454,"_190":456,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/547","https://api.github.com/repos/pro-collection/interview-question/issues/547/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/547/comments","https://api.github.com/repos/pro-collection/interview-question/issues/547/events","https://github.com/pro-collection/interview-question/issues/547",1878563896,"I_kwDOJGDC6c5v-Jw4",547,"前端架构和前端工程化有什么区别？",{"_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},[429,430],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":431,"_72":432,"_58":433,"_117":434,"_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","阿里巴巴",[],{"_58":437,"_68":438,"_62":439,"_70":440,"_72":441,"_74":442,"_76":443,"_122":444,"_146":445,"_148":446,"_150":151,"_131":132,"_152":447,"_154":448,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_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},50,"2023-03-06T15:00:45Z","2025-07-06T12:02:25Z","2023-09-02T10:05:40Z","2023-09-02T10:05:41Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"先说说对这两个概念的看法：\n- [如何理解前端架构？](https://github.com/pro-collection/interview-question/issues/545)\n- [如何理解前端工程化？](https://github.com/pro-collection/interview-question/issues/546)\n\n**区别**\n\n前端架构和前端工程化是两个不同的概念，但它们之间有一些相互关联的特点。\n\n前端架构是指在前端开发中，对整个前端应用程序的组织结构、模块划分、框架选择等方面的设计和规划。前端架构的目标是为了提高代码的可维护性、可扩展性和可重用性，以及优化前端应用程序的性能和用户体验。常见的前端架构包括MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）等。\n\n前端工程化是指使用各种工具、技术和流程对前端开发过程进行管理和优化，以提高开发效率、代码质量和团队协作能力。前端工程化的目标是通过规范化和自动化的方式，解决前端开发中的重复劳动、低效率、代码质量不稳定等问题。前端工程化包括代码管理、代码规范、模块化开发、构建工具、自动化测试、持续集成和部署、性能优化、文档和知识管理等方面。\n\n虽然前端架构和前端工程化是两个不同的概念，但它们之间存在一些相似的目标和方法。前端架构关注的是前端应用程序的结构和设计，而前端工程化关注的是前端开发的流程和工具的使用。前端架构可以通过前端工程化的方式实现，而前端工程化可以提供支持和保障，以实现良好的前端架构。\n",{"_58":455,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/547/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/547/timeline",{"_58":458,"_60":61,"_62":459,"_64":460,"_66":461,"_68":462,"_70":463,"_72":464,"_74":465,"_76":466,"_78":467,"_111":468,"_131":132,"_133":24,"_134":471,"_136":472,"_158":151,"_152":474,"_154":474,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":475,"_170":476,"_176":477,"_178":478,"_190":480,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/546","https://api.github.com/repos/pro-collection/interview-question/issues/546/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/546/comments","https://api.github.com/repos/pro-collection/interview-question/issues/546/events","https://github.com/pro-collection/interview-question/issues/546",1878562376,"I_kwDOJGDC6c5v-JZI",546,"如何理解前端工程化？",{"_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},[469,470],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":431,"_72":432,"_58":433,"_117":434,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":473,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-09-02T10:03:59Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"前端工程化是指将前端开发过程中的各种工具、技术和流程进行规范化和自动化，以提高前端开发效率、代码质量和团队协作能力的一种方法。前端工程化主要涵盖以下几个方面：\n\n1. 代码管理：使用版本控制系统（如Git）对前端项目进行代码管理，实现代码的版本控制、协作开发和代码回滚等功能。\n\n2. 代码规范：制定和遵循统一的前端代码规范，包括缩进、命名、注释等，以提高代码的可读性和可维护性。\n\n3. 模块化开发：使用模块化的开发方式，将前端代码拆分为独立的模块，以便于复用和维护。\n\n4. 构建工具：使用构建工具（如Webpack、Gulp）对前端代码进行构建、打包、压缩和优化等处理，提高开发效率和应用性能。\n\n5. 自动化测试：编写自动化测试用例，使用测试工具（如Jest、Mocha）进行自动化测试，以确保代码质量和功能的稳定性。\n\n6. 持续集成和部署：使用持续集成工具（如Jenkins、Travis CI）将代码自动构建、测试和部署到服务器，加快代码交付速度和减少人工操作。\n\n7. 性能优化：使用性能优化工具（如Webpack、Lighthouse）来分析和改进前端应用程序的性能，包括文件加载、资源压缩、缓存策略等方面。\n\n8. 文档和知识管理：编写和维护开发文档、API 文档以及团队知识库，方便团队成员之间的沟通和知识分享。\n\n通过前端工程化的实践，可以减少重复劳动、提高代码质量、加速开发流程和降低维护成本，从而更好地满足项目需求和提升用户体验。\n",{"_58":479,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/546/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/546/timeline",{"_58":482,"_60":61,"_62":483,"_64":484,"_66":485,"_68":486,"_70":487,"_72":488,"_74":489,"_76":490,"_78":491,"_111":492,"_131":132,"_133":24,"_134":495,"_136":496,"_158":196,"_152":498,"_154":499,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":500,"_170":501,"_176":502,"_178":503,"_190":505,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/545","https://api.github.com/repos/pro-collection/interview-question/issues/545/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/545/comments","https://api.github.com/repos/pro-collection/interview-question/issues/545/events","https://github.com/pro-collection/interview-question/issues/545",1878558373,"I_kwDOJGDC6c5v-Ial",545,"如何理解前端架构？",{"_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},[493,494],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":431,"_72":432,"_58":433,"_117":434,"_119":129,"_121":24,"_122":130},[],{"_58":437,"_68":438,"_62":439,"_70":440,"_72":441,"_74":442,"_76":443,"_122":444,"_146":497,"_148":446,"_150":151,"_131":132,"_152":447,"_154":448,"_156":-5,"_157":-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-09-02T10:00:52Z","2025-11-04T04:13:18Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"前端架构是指在开发前端应用程序时，为了提高开发效率、代码可维护性和可扩展性，将前端代码组织和设计的一种架构体系。它涵盖了前端项目的整体结构、代码组织方式、技术选型、模块化开发、数据管理、状态管理、网络请求、路由管理等方面的规划和设计。\n\n前端架构的目标是使前端开发更加规范、高效和可持续。良好的前端架构可以帮助团队成员更好地协作、降低维护成本、提高开发效率、减少代码冗余和bug等。\n\n以下是一些常见的前端架构概念和思想：\n\n1. 分层架构：将前端应用程序划分为不同的层次，如视图层、业务逻辑层、数据层等，以实现各个层次的解耦和职责清晰。\n\n2. 组件化开发：将界面拆分为独立的可复用组件，通过组合不同的组件来构建页面，提高代码的可维护性和可复用性。\n\n3. 模块化开发：将代码按照功能或业务模块进行拆分，每个模块都有独立的职责和功能，便于团队协作和代码维护。\n\n4. 数据管理和状态管理：使用状态管理库（如Redux、Vuex）来管理应用程序的状态和数据流，使得数据的变化和传递更加可控和可预测。\n\n5. 路由管理：使用路由库（如React Router、Vue Router）来管理前端路由，实现页面之间的跳转和导航。\n\n6. 统一风格和规范：制定和遵循统一的编码规范、命名规范、目录结构等，以便于不同开发者之间的协作和代码的统一性。\n\n7. 自动化构建和部署：使用构建工具（如Webpack、Rollup）和自动化部署工具（如Jenkins、Travis CI）来提高开发效率和代码交付速度。\n\n8. 性能优化和项目优化：通过代码分割、懒加载、缓存、CDN 加速、前端性能监控等手段，提升应用程序的性能和用户体验。\n\n前端架构是一种组织和规划前端代码的方法论，旨在提高前端开发的效率和质量，同时也要根据具体项目的需求和规模来选择和适配合适的架构方案。\n",{"_58":504,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/545/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/545/timeline",{"_58":507,"_60":61,"_62":508,"_64":509,"_66":510,"_68":511,"_70":512,"_72":513,"_74":514,"_76":515,"_78":516,"_111":517,"_131":132,"_133":24,"_134":524,"_136":525,"_158":151,"_152":527,"_154":528,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":529,"_170":530,"_176":531,"_178":532,"_190":534,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/544","https://api.github.com/repos/pro-collection/interview-question/issues/544/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/544/comments","https://api.github.com/repos/pro-collection/interview-question/issues/544/events","https://github.com/pro-collection/interview-question/issues/544",1878538861,"I_kwDOJGDC6c5v-Dpt",544,"web 网页如何禁止别人移除水印【热度: 540】",{"_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},[518,519],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":526,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-09-02T09:42:16Z","2023-09-02T09:42:17Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：前端防止移除水印\n\n关于加水印的问题，可以看这篇文档： https://github.com/pro-collection/interview-question/issues/351\n\n关于如何防止移除水印：\n\n可以通过监听 DOM 的变化来检测是否有人删除水印，可以使用 `MutationObserver API`。\n`MutationObserver` 可以观察 DOM 树的变化，并在变化发生时触发回调函数。你可以在回调函数中检查是否有水印被删除，然后采取相应的措施。\n\n以下是一个简单的示例代码，演示了如何使用 MutationObserver 监听 DOM 变化：\n\n```javascript\n// 目标节点\nconst targetNode = document.body;\n\n// 创建 MutationObserver 实例\nconst observer = new MutationObserver((mutationsList) => {\n for (let mutation of mutationsList) {\n // 检查是否有子节点被删除\n if (mutation.removedNodes.length > 0) {\n // 在此处判断是否有水印被删除\n // 如果水印被删除，则重新插入水印的 DOM 元素到目标节点\n // 例如： targetNode.appendChild(watermarkElement);\n }\n }\n});\n\n// 配置 MutationObserver\nconst config = { childList: true, subtree: true };\n\n// 开始观察目标节点\nobserver.observe(targetNode, config);\n```\n\n在上述代码中，我们创建了一个 MutationObserver 实例，并通过 `observe` 方法将其绑定到目标节点上。在回调函数中，我们使用 `mutation.removedNodes` 来检查是否有子节点被删除，如果发现水印被删除，则可以采取相应的措施来重新插入水印的 DOM 元素。\n\n需要注意的是，MutationObserver API 是现代浏览器提供的功能，在老旧的浏览器中可能不支持。因此，在实际使用时，你需要对浏览器的兼容性进行测试和处理。\n\n另外，如果水印被删除后立即加回去，你可以在检测到水印被删除时，立即执行插入水印的代码，以确保水印能够迅速地重新出现在页面上。\n",{"_58":533,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/544/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/544/timeline",{"_58":536,"_60":61,"_62":537,"_64":538,"_66":539,"_68":540,"_70":541,"_72":542,"_74":543,"_76":544,"_78":545,"_111":546,"_131":132,"_133":24,"_134":548,"_136":549,"_158":151,"_152":551,"_154":552,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":553,"_170":554,"_176":555,"_178":556,"_190":558,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/543","https://api.github.com/repos/pro-collection/interview-question/issues/543/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/543/comments","https://api.github.com/repos/pro-collection/interview-question/issues/543/events","https://github.com/pro-collection/interview-question/issues/543",1878487808,"I_kwDOJGDC6c5v93MA",543,"前端基建设计到哪些方面【热度: 782】",{"_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},[547],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},[],{"_58":437,"_68":438,"_62":439,"_70":440,"_72":441,"_74":442,"_76":443,"_122":444,"_146":550,"_148":446,"_150":151,"_131":132,"_152":447,"_154":448,"_156":-5,"_157":-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-09-02T08:35:05Z","2023-09-02T08:35:14Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：前端工程化建设、前端基建\n\n前端基建是指在前端开发过程中，为提高开发效率、代码质量和团队协作而构建的一些基础设施和工具。下面是前端基建可以做的一些事情：\n\n1. `脚手架工具`\n\n开发和维护一个通用的脚手架工具，可以帮助团队快速初始化项目结构、配置构建工具、集成常用的开发依赖等。\n\n2. `组件库`\n\n开发和维护一个内部的组件库，包含常用的UI组件、业务组件等，提供给团队成员复用，减少重复开发的工作量。\n\n3. `构建工具和打包工具`\n\n搭建和维护一套完善的构建和打包工具链，包括使用Webpack、Parcel等工具进行代码的压缩、合并、打包等工具，优化前端资源加载和性能。\n\n4. `自动化测试工具`\n\n引入自动化测试工具，如Jest、Mocha等，编写和维护测试用例，进行单元测试、集成测试、UI测试等，提高代码质量和可靠性。\n\n5. `文档工具`\n\n使用工具如JSDoc、Swagger等，生成项目的API文档、接口文档等，方便团队成员查阅和维护。\n\n6. `Git工作流`\n\n制定和规范团队的Git工作流程，使用版本控制工具管理代码，方便团队协作和代码回退。\n\n7. `性能监控和优化`\n\n引入性能监控工具，如Lighthouse、Web Vitals等，对项目进行性能分析，优化网页加载速度、响应时间等。\n\n8. `工程化规范`\n\n制定并推广团队的代码规范、目录结构规范等，提高代码的可读性、可维护性和可扩展性。\n\n9. `持续集成和部署`\n\n搭建持续集成和部署系统，如Jenkins、Travis CI等，实现代码的自动构建、测试和部署，提高开发效率和代码质量。\n\n10. `项目文档和知识库`\n\n建立一个内部的项目文档和知识库，记录项目的技术细节、开发经验、常见问题等，方便团队成员查阅和学习。\n\n\n11. `代码质量工具`\n\n引入代码质量工具，如ESLint、Prettier等，对代码进行静态分析和格式化，提高代码的一致性和可读性。\n\n12. `国际化支持`\n\n为项目添加国际化支持，可以通过引入国际化库，如i18next、vue-i18n等，实现多语言的切换和管理。\n\n13. `错误监控和日志收集`\n\n引入错误监控工具，如Sentry、Bugsnag等，实时监控前端错误，并收集错误日志，方便进行问题排查和修复。\n\n14. `前端性能优化工具`\n\n使用工具如WebPageTest、Chrome DevTools等，对项目进行性能分析和优化，提高页面加载速度、响应时间等。\n\n15. `缓存管理`\n\n考虑合理利用浏览器缓存和服务端缓存，减少网络请求，提升用户访问速度和体验。\n\n16. `移动端适配`\n\n针对移动端设备，采用响应式设计或使用CSS媒体查询等技术，实现移动端适配，保证页面在不同尺寸的设备上有良好的显示效果。\n\n17. `安全防护`\n\n对项目进行安全审计，使用安全防护工具，如CSP（Content Security Policy）、XSS过滤等，保护网站免受常见的安全攻击。\n\n18. `性能优化指标监控`\n\n监控和分析关键的性能指标，如页面加载时间、首次渲染时间、交互响应时间等，以便及时发现和解决性能问题。\n\n19. `前端日志分析`\n\n使用日志分析工具，如ELK（Elasticsearch、Logstash、Kibana）等，对前端日志进行收集和分析，了解用户行为和页面异常情况。\n\n20. `跨平台开发`\n\n考虑使用跨平台开发框架，如React Native、Flutter等，实现一套代码在多个平台上复用，提高开发效率。\n\n21. `编辑器配置和插件`\n\n为团队提供统一的编辑器配置文件，包括代码格式化、语法高亮、代码自动补全等，并推荐常用的编辑器插件，提高开发效率。\n\n22. `文档生成工具`\n\n使用工具如Docusaurus、VuePress等，为项目生成漂亮的文档网站，方便团队成员查阅和维护项目文档。\n\n23. `Mock数据和接口管理`\n\n搭建一个Mock服务器，用于模拟后端接口数据，方便前端开发和测试，同时可以考虑使用接口管理工具，如Swagger等，方便接口的定义和调试。\n\n24. `前端监控和统计`\n\n引入前端监控工具，如Google Analytics、百度统计等，收集用户访问数据和行为信息，用于分析和优化用户体验。\n\n25. `移动端调试工具`\n\n使用工具如Eruda、VConsole等，帮助在移动端设备上进行调试和错误排查，提高开发效率。\n\n26. `自动化部署`\n\n配置自动化部署流程，将项目的代码自动部署到服务器或云平台，减少人工操作，提高发布效率和稳定性。\n\n27. `前端团队协作工具`\n\n使用团队协作工具，如GitLab、Bitbucket等，提供代码托管、项目管理、任务分配和团队沟通等功能，增强团队协作效率。\n\n28. `前端培训和知识分享`\n\n组织定期的前端培训和技术分享会，让团队成员相互学习和交流，推动技术的共享和提升。\n\n29. `客户端性能优化`\n\n针对移动端应用，可以使用工具如React Native Performance、Weex等，进行客户端性能优化，提高应用的响应速度和流畅度。\n\n30. `技术选型和评估`\n\n定期评估和研究前端技术的发展趋势，选择适用的技术栈和框架，以保持项目的竞争力和可持续发展。\n\n31. `统一的状态管理`\n\n引入状态管理工具，如Redux、Vuex等，帮助团队管理前端应用的状态，提高代码的可维护性和可扩展性。\n\n32. `前端日志记录`\n\n引入前端日志记录工具，如log4javascript、logrocket等，记录前端应用的运行日志，方便排查和解决问题。\n\n33. `前端代码扫描`\n\n使用静态代码扫描工具，如SonarQube、CodeClimate等，对前端代码进行扫描和分析，发现潜在的问题和漏洞。\n\n34. `前端数据可视化`\n\n使用数据可视化工具，如ECharts、Chart.js等，将数据以图表或图形的形式展示，增强数据的可理解性和可视化效果。\n\n35. `前端容灾和故障处理`\n\n制定容灾方案和故障处理流程，对前端应用进行监控和预警，及时处理和恢复故障，提高系统的可靠性和稳定性。\n\n36. `前端安全加固`\n\n对前端应用进行安全加固，如防止XSS攻击、CSRF攻击、数据加密等，保护用户数据的安全性和隐私。\n\n37. `前端版本管理`\n\n建立前端代码的版本管理机制，使用工具如Git、SVN等，管理和追踪代码的变更，方便团队成员之间的协作和版本控制。\n\n38. `前端数据缓存`\n\n考虑使用Local Storage、Session Storage等技术，对一些频繁使用的数据进行缓存，提高应用的性能和用户体验。\n\n39. `前端代码分割`\n\n使用代码分割技术，如Webpack的动态导入（Dynamic Import），将代码按需加载，减少初始加载的资源大小，提高页面加载速度。\n\n40. `前端性能监测工具`\n\n使用性能监测工具，如WebPageTest、GTmetrix等，监测前端应用的性能指标，如页面加载时间、资源加载时间等，进行性能优化。\n\n\n\n**参考文档**\n- [前端基建原来可以做这么多事情](https://juejin.cn/post/7256879435339628604)\n",{"_58":557,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/543/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/543/timeline",{"_58":560,"_60":61,"_62":561,"_64":562,"_66":563,"_68":564,"_70":565,"_72":566,"_74":567,"_76":568,"_78":569,"_111":570,"_131":132,"_133":24,"_134":573,"_136":574,"_158":151,"_152":576,"_154":577,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":578,"_170":579,"_176":580,"_178":581,"_190":583,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/541","https://api.github.com/repos/pro-collection/interview-question/issues/541/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/541/comments","https://api.github.com/repos/pro-collection/interview-question/issues/541/events","https://github.com/pro-collection/interview-question/issues/541",1875808123,"I_kwDOJGDC6c5vzo97",541,"副作用是什么概念【热度: 230】",{"_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},[571,572],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},{"_70":347,"_72":348,"_58":349,"_117":350,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":575,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-31T15:51:14Z","2023-08-31T15:51:15Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：js副作用\n\n在 JavaScript 中，`副作用（side effect）`是指函数或表达式在执行过程中对外部环境产生的影响，而不仅仅是返回一个值。副作用可能包括但不限于对全局变量、参数、数据结构、文件系统、网络请求等进行修改。\n\n副作用可以是有意为之，也可以是无意之间发生的。在函数式编程中，减少副作用是一种被推崇的编程风格，因为副作用使得代码的行为更难以跟踪和理解，容易引发不可预见的 bug。尽可能减少副作用有助于代码更加可靠、可测试和易于维护。\n\n以下是一些常见的 JavaScript 中可能产生副作用的操作：\n\n1. **修改全局变量**：直接对全局变量进行赋值或修改会导致副作用。\n2. **修改函数参数**：修改传入函数的参数值也会引起副作用。\n3. **`I/O` 操作**：与文件系统、网络请求等进行交互时，可能会对外部环境产生副作用。\n4. **修改数据结构**：对数组、对象等数据结构进行添加、删除或修改操作会改变它们的状态，也属于副作用。\n\n在函数式编程中，函数应该尽量避免产生副作用，而是通过纯函数的方式，根据输入返回一个确定的输出，不修改外部环境的状态。\n这样可以提高代码的可测试性、可复用性和可维护性。\n",{"_58":582,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/541/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/541/timeline",{"_58":585,"_60":61,"_62":586,"_64":587,"_66":588,"_68":589,"_70":590,"_72":591,"_74":592,"_76":593,"_78":594,"_111":595,"_131":132,"_133":24,"_134":602,"_136":603,"_158":228,"_152":615,"_154":616,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":617,"_170":618,"_176":619,"_178":620,"_190":622,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/540","https://api.github.com/repos/pro-collection/interview-question/issues/540/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/540/comments","https://api.github.com/repos/pro-collection/interview-question/issues/540/events","https://github.com/pro-collection/interview-question/issues/540",1875790781,"I_kwDOJGDC6c5vzku9",540,"类型的转换有哪些【热度: 631】",{"_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},[596,597],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},{"_70":598,"_72":599,"_58":600,"_117":601,"_119":129,"_121":24,"_122":130},5748783891,"LA_kwDOJGDC6c8AAAABVqd7Ew","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%BB%B4%E6%BB%B4","滴滴",[],{"_58":604,"_68":605,"_62":606,"_70":607,"_72":608,"_74":196,"_76":609,"_122":610,"_146":611,"_148":612,"_150":151,"_131":132,"_152":613,"_154":614,"_156":-5,"_157":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_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},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-08-31T15:42:14Z","2025-02-11T08:39:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：js类型转换\r\n\r\n可以将上述类型转换分为以下几类：\r\n\r\n1. 显式转换：显式转换是通过特定的函数或操作符来实现的，开发者明确地指定了类型转换的规则和目标类型。例如使用`String()`、`Number()`、`Boolean()`等函数进行类型转。\r\n\r\n2. 隐式转换：隐式转换是在特定的运算或操作中自动发生的，不需要开发者明确指定类型转换的规则和目标类型。例如在字符串拼接时，JavaScript会自动将其他类型转换为字符串类型；在使用比较操作符（如`==`、`>`、`<`）进行比较时，JavaScript会自动进行类型转换以满足比较的要求。或者使用`+`、`-`、`*`、`/`等操作符进行数值转换和计算。\r\n\r\n3. 强制转换：强制转换是指将一个类型强制转换为另一个类型，无论是显式转换还是隐式转换，都是通过强制转换来实现的。例如使用`parseInt()`、`parseFloat()`等函数将字符串转换为数字类型；使用`Boolean()`函数将其他类型转换为布尔类型。\r\n\r\n隐式转换在某些情况下可能会导致不可预测的结果，因此在开发中应尽量避免依赖隐式转换，而是通过显式转换来确保类型转换的准确性。\r\n\r\n\r\n--------\r\n**补充**\r\n\r\n在JavaScript中，有以下几种常见的类型转换方式：\r\n\r\n1. 转换为字符串：可以使用String()函数或toString()方法将其他类型的值转换为字符串类型。例如：\r\n ```javascript\r\n var num = 42;\r\n var str = String(num); // 将数字转换为字符串\r\n var bool = true;\r\n var str2 = bool.toString(); // 将布尔值转换为字符串\r\n ```\r\n\r\n2. 转换为数字：可以使用Number()函数或使用parseInt()、parseFloat()等方法将其他类型的值转换为数字类型。例如：\r\n ```javascript\r\n var str = \"42\";\r\n var num = Number(str); // 将字符串转换为数字\r\n var str2 = \"3.14\";\r\n var floatNum = parseFloat(str2); // 将字符串转换为浮点数\r\n ```\r\n\r\n3. 转换为布尔值：可以使用Boolean()函数将其他类型的值转换为布尔类型。例如：\r\n ```javascript\r\n var num = 42;\r\n var bool = Boolean(num); // 将数字转换为布尔值\r\n var str = \"hello\";\r\n var bool2 = Boolean(str); // 将字符串转换为布尔值\r\n ```\r\n\r\n4. 隐式类型转换：JavaScript在某些情况下会自动进行类型转换，例如通过算术运算符、比较运算符等进行操作时，会根据需要隐式地将值转换为特定的类型。例如：\r\n ```javascript\r\n var num1 = 42;\r\n var num2 = \"3\";\r\n var sum = num1 + Number(num2); // 隐式将字符串转换为数字并进行相加\r\n ```\r\n\r\n",{"_58":621,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/540/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/540/timeline",{"_58":624,"_60":61,"_62":625,"_64":626,"_66":627,"_68":628,"_70":629,"_72":630,"_74":631,"_76":632,"_78":633,"_111":634,"_131":132,"_133":24,"_134":637,"_136":638,"_158":151,"_152":640,"_154":640,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":641,"_170":642,"_176":643,"_178":644,"_190":646,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/539","https://api.github.com/repos/pro-collection/interview-question/issues/539/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/539/comments","https://api.github.com/repos/pro-collection/interview-question/issues/539/events","https://github.com/pro-collection/interview-question/issues/539",1875771341,"I_kwDOJGDC6c5vzf_N",539,"箭头函数解决了什么问题【热度: 568】",{"_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},[635,636],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},{"_70":598,"_72":599,"_58":600,"_117":601,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":639,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-31T15:31:16Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：箭头函数、箭头函数特点\n\n箭头函数是ES6中引入的一种新的函数语法，它主要解决了以下几个问题：\n\n1. **简化函数表达式**：箭头函数提供了一种更简洁的函数定义方式，可以用更短的语法来定义函数，减少了冗余的代码。例如，使用箭头函数可以将一个函数表达式 `function(x) { return x * x; }` 简化为 `(x) => x * x;`。\n\n2. **简化this的指向**：在传统的函数定义中，函数内部的`this`指向的是调用该函数的对象。而在箭头函数中，`this`的指向是在定义函数时确定的，指向的是箭头函数所在的上下文。这解决了传统函数中`this`指向容易混淆的问题，使得代码更加易读和简洁。\n\n3. **消除了`arguments`对象**：在箭头函数中，不存在`arguments`对象，这是因为箭头函数没有自己的`arguments`，它继承了所在上下文的`arguments`。这样可以避免在传统函数中使用`arguments`对象时出现的一些问题，如无法使用`arguments`对象的一些方法，以及与命名参数的冲突等。\n\n4. **适用于回调函数**：箭头函数的简洁性和对`this`指向的处理使其特别适用于作为回调函数使用。在传统的函数定义中，由于`this`指向的问题，经常需要使用额外的变量来绑定`this`，而箭头函数可以直接使用外层作用域的`this`，减少了代码的复杂性。\n\n箭头函数也有一些限制和注意事项，例如箭头函数没有自己的`arguments`、`super`和`new.target`，不能作为构造函数使用。\n",{"_58":645,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/539/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/539/timeline",{"_58":648,"_60":61,"_62":649,"_64":650,"_66":651,"_68":652,"_70":653,"_72":654,"_74":655,"_76":656,"_78":657,"_111":658,"_131":132,"_133":24,"_134":661,"_136":662,"_158":151,"_152":664,"_154":665,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":666,"_170":667,"_176":668,"_178":669,"_190":671,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/538","https://api.github.com/repos/pro-collection/interview-question/issues/538/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/538/comments","https://api.github.com/repos/pro-collection/interview-question/issues/538/events","https://github.com/pro-collection/interview-question/issues/538",1875745869,"I_kwDOJGDC6c5vzZxN",538,"引用类型有哪些，有什么特点【热度: 902】",{"_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},[659,660],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},{"_70":125,"_72":126,"_58":127,"_117":128,"_119":129,"_121":24,"_122":130},[],{"_58":604,"_68":605,"_62":606,"_70":607,"_72":608,"_74":196,"_76":609,"_122":610,"_146":663,"_148":612,"_150":151,"_131":132,"_152":613,"_154":614,"_156":-5,"_157":-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-08-31T15:18:28Z","2023-08-31T15:18:29Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：js引用类型\n\n在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。\n\n常见的引用类型包括：\n\n1. `对象（Object）`：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。\n\n2. `数组（Array）`：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。\n\n3. `函数（Function）`：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。\n\n引用类型的特点包括：\n\n1. 引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。\n\n2. 引用类型值的比较是引用的比较：当使用\"==\"或\"===\"运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。\n\n3. 引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。\n\n4. 引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。\n\n基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。\n\n这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。\n",{"_58":670,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/538/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/538/timeline",{"_58":673,"_60":61,"_62":674,"_64":675,"_66":676,"_68":677,"_70":678,"_72":679,"_74":680,"_76":681,"_78":682,"_111":683,"_131":132,"_133":24,"_134":686,"_136":687,"_158":151,"_152":689,"_154":690,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":691,"_170":692,"_176":693,"_178":694,"_190":696,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/537","https://api.github.com/repos/pro-collection/interview-question/issues/537/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/537/comments","https://api.github.com/repos/pro-collection/interview-question/issues/537/events","https://github.com/pro-collection/interview-question/issues/537",1875740702,"I_kwDOJGDC6c5vzYge",537,"typeof 与 instanceof 的区别【热度: 906】",{"_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},[684,685],{"_70":285,"_72":286,"_58":287,"_117":288,"_119":289,"_121":24,"_122":290},{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":604,"_68":605,"_62":606,"_70":607,"_72":608,"_74":196,"_76":609,"_122":610,"_146":688,"_148":612,"_150":151,"_131":132,"_152":613,"_154":614,"_156":-5,"_157":-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-08-31T15:15:24Z","2023-08-31T15:15:25Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：typeof 与 instanceof、typeof 作用、instanceof 作用\n\n在JavaScript中，typeof和instanceof是两个用于检查变量类型的操作符，但它们具有不同的用途和区别。\n\ntypeof是一个一元操作符，用于确定给定变量的数据类型。它返回一个字符串，表示变量的数据类型。typeof可以用于任何变量，包括基本数据类型（如字符串、数字、布尔值）和引用数据类型（如对象、数组、函数等）。\n\n例如：\n```ts\ntypeof 42; // \"number\"\ntypeof \"Hello\"; // \"string\"\ntypeof true; // \"boolean\"\ntypeof undefined; // \"undefined\"\ntypeof null; // \"object\"\ntypeof [1, 2, 3]; // \"object\"\ntypeof {name: \"John\", age: 30}; // \"object\"\ntypeof function() {} // \"function\"\n```\n\n注意，typeof null返回的是\"object\"，这是一个历史遗留问题。\n\ninstanceof是一个二元操作符，用于检查对象是否属于指定的构造函数的实例。它返回一个布尔值，表示对象是否是特定构造函数的实例或其子类的实例。\n\n例如：\n```ts\nvar arr = [1, 2, 3];\narr instanceof Array; // true\n\nvar obj = {name: \"John\", age: 30};\nobj instanceof Object; // true\n\nfunction Person(name) {\nthis.name = name;\n}\nvar john = new Person(\"John\");\njohn instanceof Person; // true\n```\n\ntypeof用于确定变量的数据类型，而instanceof用于确定对象是否为某个构造函数的实例。虽然typeof可以检查基本数据类型和引用数据类型，但无法检查对象的具体类型。而instanceof可以在对象的继承链上进行检查，可以明确对象是否为某个类的实例或其子类的实例。\n",{"_58":695,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/537/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/537/timeline",{"_58":698,"_60":61,"_62":699,"_64":700,"_66":701,"_68":702,"_70":703,"_72":704,"_74":705,"_76":706,"_78":707,"_111":708,"_131":132,"_133":24,"_134":717,"_136":718,"_158":151,"_152":720,"_154":721,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":722,"_170":723,"_176":724,"_178":725,"_190":727,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/536","https://api.github.com/repos/pro-collection/interview-question/issues/536/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/536/comments","https://api.github.com/repos/pro-collection/interview-question/issues/536/events","https://github.com/pro-collection/interview-question/issues/536",1867239393,"I_kwDOJGDC6c5vS8_h",536,"http 请求中 GET 和 POST 有什么区别【热度: 505】",{"_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},[709,716],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",{"_70":217,"_72":218,"_58":219,"_117":220,"_119":129,"_121":24,"_122":130},[],{"_58":604,"_68":605,"_62":606,"_70":607,"_72":608,"_74":196,"_76":609,"_122":610,"_146":719,"_148":612,"_150":151,"_131":132,"_152":613,"_154":614,"_156":-5,"_157":-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-08-25T15:19:00Z","2023-08-25T15:19:01Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：GET 和 POST 区别\n\n| | GET请求 | POST请求 |\n| --- | --------------------------------------------------------- | --------------------------------------------------------- |\n| 参数传递方式 | 参数通过URL的查询字符串传递，例如：http://example.com/api?param1=value1¶m2=value2 | 参数通过请求体传递，不会暴露在URL中 |\n| 参数长度限制 | 有长度限制，不适合传输大量数据 | 没有长度限制，适合传输大量数据 |\n| URL暴露 | 参数会被附加在URL中，可以通过浏览器地址栏直接访问 | 参数不会显示在浏览器地址栏中 |\n| 缓存 | 会被浏览器缓存 | 不会被浏览器缓存 |\n| 副作用 | 不具有副作用，只是获取数据 | 具有副作用，可以对服务器数据进行修改、新增或删除操作 |\n| 适用场景 | 获取数据 | 提交表单数据 |\n| | 在URL中传递少量参数 | 传输大量数据 |\n| | 缓存数据 | 修改、新增或删除数据 |\n| | | 不希望数据暴露在URL中 |\n",{"_58":726,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/536/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/536/timeline",{"_58":729,"_60":61,"_62":730,"_64":731,"_66":732,"_68":733,"_70":734,"_72":735,"_74":736,"_76":737,"_78":738,"_111":739,"_131":132,"_133":24,"_134":742,"_136":743,"_158":151,"_152":745,"_154":746,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":747,"_170":748,"_176":749,"_178":750,"_190":752,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/535","https://api.github.com/repos/pro-collection/interview-question/issues/535/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/535/comments","https://api.github.com/repos/pro-collection/interview-question/issues/535/events","https://github.com/pro-collection/interview-question/issues/535",1867233833,"I_kwDOJGDC6c5vS7op",535,"如何实现大文件断点续传【热度: 897】",{"_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},[740,741],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":257,"_72":258,"_58":259,"_117":260,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":744,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-25T15:15:00Z","2023-08-25T15:15:26Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：文件上传断点续传\n\n前端实现断点续传一般涉及到以下几个步骤：\n\n1. 分片上传：将大文件分割成多个小的文件块。可以使用 JavaScript 的 `File` 对象的 `slice` 方法来实现分片。\n\n2. 上传文件块：使用 XMLHttpRequest 或 Fetch API 发送每个文件块到服务器。可以将每个文件块的索引、总文件大小等信息一同发送到服务器。\n\n3. 保存上传进度：在每个文件块上传成功后，可以将已上传的块数、已上传的字节数等信息保存到本地，以便在继续上传时恢复进度。\n\n4. 续传：在继续上传时，先从本地恢复已上传的进度信息。然后根据已上传的字节数，计算出下一个文件块的起始位置，然后继续上传剩余的文件块。\n\n5. 合并文件块：在所有文件块都上传完成后，服务器可以将这些文件块合并为完整的文件。可以通过将所有文件块的内容拼接在一起或使用服务器端的工具进行合并。\n\n需要注意的是，断点续传的实现还需要服务器端的支持。服务器端需要接收和处理分片上传的请求，并保存和管理已上传的文件块，以便在续传时恢复文件的完整性。因此，前端实现断点续传需要和后端进行协作。\n",{"_58":751,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/535/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/535/timeline",{"_58":754,"_60":61,"_62":755,"_64":756,"_66":757,"_68":758,"_70":759,"_72":760,"_74":761,"_76":762,"_78":763,"_111":764,"_131":132,"_133":24,"_134":767,"_136":768,"_158":151,"_152":770,"_154":771,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":772,"_170":773,"_176":774,"_178":775,"_190":777,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/534","https://api.github.com/repos/pro-collection/interview-question/issues/534/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/534/comments","https://api.github.com/repos/pro-collection/interview-question/issues/534/events","https://github.com/pro-collection/interview-question/issues/534",1867227476,"I_kwDOJGDC6c5vS6FU",534,"长连接了解多少【热度: 567】",{"_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},[765,766],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":257,"_72":258,"_58":259,"_117":260,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":769,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-25T15:10:41Z","2023-08-25T15:10:56Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：http 长连接过程\n\nHTTP/1.1 的长连接（Keep-Alive）是一种机制，使客户端和服务器在同一连接上可以发送和接收多个 HTTP 请求和响应。它的原理如下：\n\n1. 客户端发送请求：当客户端发起一个 HTTP 请求时，在请求头中会包含一个 `Connection` 字段，标识这个连接是否需要保持持久连接。如果客户端希望保持连接，它会将该字段设置为 `keep-alive`。\n\n2. 服务器响应：当服务器收到客户端的请求后，如果它支持长连接，它会在响应头中添加一个 `Connection` 字段，也设置为 `keep-alive`，表示服务器同意保持连接。\n\n3. 客户端发送下一个请求：在客户端收到服务器的响应后，如果它也同意保持连接，客户端可以继续发送下一个请求。这个请求会被发送到同一连接上，而不是创建一个新的连接。\n\n4. 保持连接或关闭连接：客户端和服务器可以在多个请求和响应之间重复步骤 3。当一方决定不再继续发送请求时，它可以在请求头或响应头中将 `Connection` 字段设置为 `close`，表示关闭连接。\n\n长连接的原理是通过减少连接的建立和关闭次数，来提高性能和效率。它可以减少网络延迟和连接建立的开销，从而加快请求和响应的传输速度。同时，长连接还可以减少服务器的负载，因为服务器不需要频繁地处理连接的建立和关闭。\n\n需要注意的是，尽管 HTTP/1.1 支持长连接，但它并不是默认启用的，需要在请求头中明确指定 `Connection: keep-alive` 才能使用长连接。此外，服务器也可以在响应头中明确指定长连接。如果客户端和服务器都支持长连接，并在请求和响应中都明确设置了长连接，那么连接就会被保持，直到其中一方关闭连接或指定关闭。\n",{"_58":776,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/534/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/534/timeline",{"_58":779,"_60":61,"_62":780,"_64":781,"_66":782,"_68":783,"_70":784,"_72":785,"_74":786,"_76":787,"_78":788,"_111":789,"_131":132,"_133":24,"_134":792,"_136":793,"_158":151,"_152":795,"_154":796,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":797,"_170":798,"_176":799,"_178":800,"_190":802,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/533","https://api.github.com/repos/pro-collection/interview-question/issues/533/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/533/comments","https://api.github.com/repos/pro-collection/interview-question/issues/533/events","https://github.com/pro-collection/interview-question/issues/533",1867203688,"I_kwDOJGDC6c5vS0Ro",533,"单点登录是什么，具体流程是什么【热度: 1,168】",{"_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},[790,791],{"_70":210,"_72":211,"_58":212,"_117":213,"_119":214,"_121":24,"_122":215},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":794,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-08-25T14:54:28Z","2023-08-25T14:54:49Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：单点登录流程\n\nSSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过 passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport 将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被 passport 授权以后，会建立一个局部会话，在一定时间内可以无需再次向 passport 发起认证。\n\n\n具体流程是：\n\n1. 用户访问系统 1 的受保护资源，系统 1 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数\n2. sso 认证中心发现用户未登录，将用户引导至登录页面\n3. 用户输入用户名密码提交登录申请\n4. sso 认证中心校验用户信息，创建用户与 sso 认证中心之间的会话，称为全局会话，同时创建授权令牌\n5. sso 认证中心带着令牌跳转会最初的请求地址（系统 1）\n6. 系统 1 拿到令牌，去 sso 认证中心校验令牌是否有效\n7. sso 认证中心校验令牌，返回有效，注册系统 1\n8. 系统 1 使用该令牌创建与用户的会话，称为局部会话，返回受保护资源\n9. 用户访问系统 2 的受保护资源\n10. 系统 2 发现用户未登录，跳转至 sso 认证中心，并将自己的地址作为参数\n11. sso 认证中心发现用户已登录，跳转回系统 2 的地址，并附上令牌\n12. 系统 2 拿到令牌，去 sso 认证中心校验令牌是否有效\n13. sso 认证中心校验令牌，返回有效，注册系统 2\n14. 系统 2 使用该令牌创建与用户的局部会话，返回受保护资源\n",{"_58":801,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/533/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/533/timeline",{"_58":804,"_60":61,"_62":805,"_64":806,"_66":807,"_68":808,"_70":809,"_72":810,"_74":811,"_76":812,"_78":813,"_111":814,"_131":132,"_133":24,"_134":817,"_136":818,"_158":151,"_152":820,"_154":821,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":822,"_170":823,"_176":824,"_178":825,"_190":827,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/532","https://api.github.com/repos/pro-collection/interview-question/issues/532/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/532/comments","https://api.github.com/repos/pro-collection/interview-question/issues/532/events","https://github.com/pro-collection/interview-question/issues/532",1867192918,"I_kwDOJGDC6c5vSxpW",532,"什么是 JWT【热度: 428】",{"_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},[815,816],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":520,"_72":521,"_58":522,"_117":523,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":819,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-25T14:47:51Z","2023-08-25T14:48:04Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：jwt 基本概念\n\nJWT是JSON Web Token的缩写，是一种用于在不同系统之间安全传输信息的开放标准。JWT通常用于身份验证和授权，它由三部分组成：头部（header）、载荷（payload）和签名（signature）。\n\n头部包含了关于令牌的元数据和算法信息，通常包括令牌的类型（例如JWT）、使用的加密算法（例如HMAC SHA256或RSA）等。\n\n载荷包含了要传输的数据，可以是用户的身份信息、权限、角色等。载荷可以自定义，但常见的标准字段有iss（令牌的签发者）、exp（令牌的过期时间）、sub（令牌的主题）等。\n\n签名是使用头部和载荷中的数据以及秘密密钥生成的，用于验证令牌的真实性和完整性。接收方可以使用相同的密钥对收到的令牌进行验证。\n\nJWT的优点包括可扩展性、易于使用和跨平台支持，它可以在各种语言和框架中使用。由于JWT是基于标准的JSON格式，因此它易于解析和处理。\n",{"_58":826,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/532/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/532/timeline",{"_58":829,"_60":61,"_62":830,"_64":831,"_66":832,"_68":833,"_70":834,"_72":835,"_74":836,"_76":837,"_78":838,"_111":839,"_131":132,"_133":24,"_134":842,"_136":843,"_158":151,"_152":845,"_154":845,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":846,"_170":847,"_176":848,"_178":849,"_190":851,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/531","https://api.github.com/repos/pro-collection/interview-question/issues/531/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/531/comments","https://api.github.com/repos/pro-collection/interview-question/issues/531/events","https://github.com/pro-collection/interview-question/issues/531",1867182204,"I_kwDOJGDC6c5vSvB8",531,"Http 状态码 301 和 302 的应用场景分别是什么",{"_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},[840,841],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":347,"_72":348,"_58":349,"_117":350,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":844,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-25T14:42:25Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"HTTP状态码301和302都是重定向状态码，用于将客户端请求重定向到另一个URL。\n\n- `301（Moved Permanently）`：表示请求的资源已永久移动到新位置。服务器发送301状态码时，还会在响应头中包含一个Location字段，指示新的资源位置。客户端接收到301响应后，会自动重定向到新的URL，并且搜索引擎也会更新索引将原来的URL替换为新的URL。301常见的应用场景包括网站改版、域名更换等需要永久重定向的情况。\n\n- `302（Found）`：表示请求的资源临时移动到不同的位置。与301不同，302状态码表示请求的资源只是暂时移动，将来可能还会回到原来的位置。服务器发送302状态码时，同样会在响应头中包含一个Location字段，指示暂时移动的位置。客户端接收到302响应后，也会自动重定向到新的URL，但搜索引擎通常不会更新索引，而是继续保留原来的URL。302常见的应用场景包括临时的维护页面、流量调度等需要临时重定向的情况。\n\n**总结**\n\n- HTTP状态码301是永久重定向，表示请求的资源已永久移动到新位置，客户端会自动重定向到新的URL，搜索引擎会更新索引。\n- HTTP状态码302是临时重定向，表示请求的资源暂时移动到不同的位置，客户端会自动重定向到新的URL，但搜索引擎会保留原来的索引。\n- 301适用于网站改版、域名更换等需要永久重定向的情况。\n- 302适用于临时的维护页面、流量调度等需要临时重定向的情况。\n\n",{"_58":850,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/531/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/531/timeline",{"_58":853,"_60":61,"_62":854,"_64":855,"_66":856,"_68":857,"_70":858,"_72":859,"_74":860,"_76":861,"_78":862,"_111":863,"_131":132,"_133":24,"_134":866,"_136":867,"_158":151,"_152":869,"_154":870,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":871,"_170":872,"_176":873,"_178":874,"_190":876,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/530","https://api.github.com/repos/pro-collection/interview-question/issues/530/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/530/comments","https://api.github.com/repos/pro-collection/interview-question/issues/530/events","https://github.com/pro-collection/interview-question/issues/530",1867164707,"I_kwDOJGDC6c5vSqwj",530,"http 常见状态码有哪些【热度: 1,410】",{"_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},[864,865],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":347,"_72":348,"_58":349,"_117":350,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":868,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-25T14:30:59Z","2023-08-25T14:31:00Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：http常见状态码\n\nHTTP（超文本传输协议）中常见的状态码包括：\n\n1xx（信息性状态码）：表示请求已被接收并正在处理。\n\n- 100（Continue）：请求已接收，客户端应继续发送请求的剩余部分。\n- 101（Switching Protocols）：服务器要求客户端切换协议。\n\n2xx（成功状态码）：表示请求已成功处理。\n\n- 200（OK）：请求成功。\n- 201（Created）：请求已成功并创建新的资源。\n- 202（Accepted）：请求已接受，但尚未处理完成。\n- 204（No Content）：服务器已成功处理请求，但无返回内容。\n\n3xx（重定向状态码）：表示需要进一步操作才能完成请求。\n\n- 301（Moved Permanently）：请求的资源已永久移动到新位置。\n- 302（Found）：请求的资源临时移动到不同的位置。\n- 304（Not Modified）：资源未被修改，可使用缓存版本。\n\n4xx（客户端错误状态码）：表示客户端发生错误。\n\n- 400（Bad Request）：无效的请求。\n- 401（Unauthorized）：请求需要身份验证或凭证无效。\n- 403（Forbidden）：服务器拒绝请求。\n- 404（Not Found）：请求的资源不存在。\n\n5xx（服务器错误状态码）：表示服务器发生错误。\n\n- 500（Internal Server Error）：服务器遇到了错误，无法完成请求。\n- 502（Bad Gateway）：服务器作为网关或代理，从上游服务器收到无效响应。\n- 503（Service Unavailable）：服务器无法处理请求，通常是因为过载或停机维护。\n\n以上是常见的 HTTP 状态码，每个状态码都有特定的含义，用于指示请求的处理结果。\n",{"_58":875,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/530/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/530/timeline",{"_58":878,"_60":61,"_62":879,"_64":880,"_66":881,"_68":882,"_70":883,"_72":884,"_74":885,"_76":886,"_78":887,"_111":888,"_131":132,"_133":24,"_134":891,"_136":892,"_158":151,"_152":894,"_154":895,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":896,"_170":897,"_176":898,"_178":899,"_190":901,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/529","https://api.github.com/repos/pro-collection/interview-question/issues/529/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/529/comments","https://api.github.com/repos/pro-collection/interview-question/issues/529/events","https://github.com/pro-collection/interview-question/issues/529",1861850103,"I_kwDOJGDC6c5u-ZP3",529,"http2 多路复用是什么, 原理是什么【热度: 353】",{"_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},[889,890],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":377,"_72":378,"_58":379,"_117":380,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":893,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-08-22T16:51:09Z","2023-08-22T16:51:22Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：http2多路复用、http2多路复用原理、http2帧和流、http2流的优先级、http2头部压缩\n\n多路复用是指在HTTP/2中，多个请求/响应可以同时在同一个TCP连接上进行传输和处理的机制。\n\n在HTTP/1.1中，每个请求都需要建立一个独立的TCP连接，导致连接的建立和关闭开销很大。而在HTTP/2中，多个请求可以通过同一个TCP连接同时进行，避免了建立和关闭连接的开销。\n\n多路复用的实现原理主要包括以下几个方面：\n\n1. **帧和流**：在HTTP/2中，通信的最小单位是帧（frames），每个帧包含了一个特定类型的数据，例如请求头、响应头、请求体、响应体等。帧属于一个或多个流（stream），每个流都有唯一的标识符。多个流可以同时在同一个TCP连接上进行传输。\n\n2. **流的优先级**：在HTTP/2中，每个流都可以设置优先级，用于指定处理请求的顺序。服务器可以根据流的优先级来决定响应的优先级，从而更好地利用带宽资源。\n\n3. **头部压缩**：为了减少头部信息的传输开销，HTTP/2使用了一种称为HPACK的压缩算法。HPACK对头部信息进行压缩，并在通信双方之间维护一个共享的头部表，用于存储已经发送或接收过的头部信息。这样就可以减少重复的头部信息传输，提高传输效率。\n\n通过上述机制，HTTP/2实现了多路复用。多个请求/响应可以同时在同一个TCP连接上进行传输，提高了传输效率，减少了连接建立和关闭的开销。\n",{"_58":900,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/529/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/529/timeline",{"_58":903,"_60":61,"_62":904,"_64":905,"_66":906,"_68":907,"_70":908,"_72":909,"_74":910,"_76":911,"_78":912,"_111":913,"_131":132,"_133":24,"_134":916,"_136":917,"_158":151,"_152":919,"_154":920,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":921,"_170":922,"_176":923,"_178":924,"_190":926,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/528","https://api.github.com/repos/pro-collection/interview-question/issues/528/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/528/comments","https://api.github.com/repos/pro-collection/interview-question/issues/528/events","https://github.com/pro-collection/interview-question/issues/528",1861835830,"I_kwDOJGDC6c5u-Vw2",528,"HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3之间的主要区别【热度: 1,447】",{"_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},[914,915],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":377,"_72":378,"_58":379,"_117":380,"_119":129,"_121":24,"_122":130},[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":918,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-22T16:40:50Z","2023-08-22T16:41:19Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：HTTP各版本之间区别\r\n\r\n下面是一个表格，展示了HTTP/1.0、HTTP/1.1、HTTP/2和HTTP/3之间的主要区别：\r\n\r\n| 特点 | HTTP/1.0 | HTTP/1.1 | HTTP/2 | HTTP/3 |\r\n|----------------|-------------------------------|-------------------------------|-------------------------------|-------------------------------|\r\n| 并发请求 | 不支持并发请求 | 支持有限的并发请求 | 引入多路复用(Multiplexing)，支持更高级别的并发请求 | 引入QUIC协议，通过多路复用和UDP传输支持更高级别的并发请求 |\r\n| 请求头压缩 | 不支持 | 不支持 | 引入HPACK算法对请求头进行压缩 | 引入QPACK算法对请求头进行压缩 |\r\n| 二进制传输 | 不支持 | 不支持 | 使用二进制格式传输数据 | 使用二进制格式传输数据 |\r\n| 流控制 | 不支持 | 不支持 | 支持流控制，可以控制每个流的数据传输速率 | 支持流控制，可以控制每个流的数据传输速率 |\r\n| 服务器推送 | 不支持 | 不支持 | 引入服务器推送机制，服务器可以主动推送资源给客户端 | 引入服务器推送机制，服务器可以主动推送资源给客户端 |\r\n| 连接复用 | 不支持 | 支持持久连接 | 支持多路复用，多个请求可以通过单个连接并行处理 | 支持多路复用，多个请求可以通过单个连接并行处理 |\r\n| 安全性 | 不支持 | 引入HTTPS协议，支持加密传输 | 引入HTTPS协议，支持加密传输 | 引入HTTPS协议，支持加密传输 |\r\n| 可靠性 | 不支持 | 不支持 | 支持头部压缩、流控制和服务器推送，提升传输的可靠性 | 引入QUIC协议，通过UDP传输提升传输的可靠性 |\r\n| 开发复杂性 | 简单 | 对开发者较友好 | 引入了新的概念和协议，对开发者相对复杂 | 依赖QUIC协议，对开发者相对复杂 |\r\n| 缓存机制 | 支持简单的请求响应缓存 | 引入了更强大的缓存控制机制，如ETag、Cache-Control等 | 引入了新的缓存机制，如Server Push、Priority等 | 类似HTTP/2，但通过QUIC对底层的传输进行了优化 |\r\n| 底层协议 | 基于TCP | 基于TCP | 基于TCP或基于TLS的加密传输 | 基于QUIC（Quick UDP Internet Connections） |\r\n| 连接管理 | 每个请求/响应都需要建立和关闭连接 | 引入了持久连接，通过keep-alive头部保持连接 | 通过单个连接并行处理多个请求/响应 | 通过QUIC的连接复用和多路复用进行处理 |\r\n| 传输效率 | 每个请求/响应都需要耗费时间来建立和关闭连接，浪费带宽 | 连接复用有助于减少建立连接的开销，并提高传输效率 | 通过多路复用、头部压缩等机制提高传输效率 | 通过QUIC的特性如连接复用、多路复用等提高传输效率 |\r\n| 对丢包和延迟的影响 | 对丢包和延迟的恢复较慢。一个请求阻塞可能导致后续请求也受到影响 | 对丢包和延迟的恢复较快。使用流的方式可以并行处理请求 | 对丢包和延迟的恢复较快。使用流的方式可以并行处理请求 | 对丢包和延迟的恢复较快，QUIC通过UDP传输有利于降低延迟和丢包的影响 |\r\n| 适用场景 | 简单的Web页面和静态资源 | 大多数Web应用程序 | 复杂的Web应用程序，需要更高的传输效率 | 复杂的Web应用程序，需要更高的传输效率和减少延迟 |\r\n",{"_58":925,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/528/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/528/timeline",{"_58":928,"_60":61,"_62":929,"_64":930,"_66":931,"_68":932,"_70":933,"_72":934,"_74":935,"_76":936,"_78":937,"_111":938,"_131":132,"_133":24,"_134":945,"_136":946,"_158":151,"_152":948,"_154":949,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":950,"_170":951,"_176":952,"_178":953,"_190":955,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/527","https://api.github.com/repos/pro-collection/interview-question/issues/527/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/527/comments","https://api.github.com/repos/pro-collection/interview-question/issues/527/events","https://github.com/pro-collection/interview-question/issues/527",1861823498,"I_kwDOJGDC6c5u-SwK",527,"常见的请求头和响应头",{"_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},[939,940],{"_70":710,"_72":711,"_58":712,"_117":713,"_119":714,"_121":24,"_122":715},{"_70":941,"_72":942,"_58":943,"_117":944,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":947,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-22T16:32:26Z","2023-08-22T16:32:57Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**通用头部字段**\r\n\r\n指的是在请求头和响应头中都可以使用的字段\r\n\r\n| 通用字段 | 作用 |\r\n| ----------------- | --------------------------------------------- |\r\n| Date | 表示报文创建的时间 |\r\n| Connection | 表示内部使用的TCP连接类型，keep-alive / close |\r\n| **Cache-Control** | 控制http缓存的行为 |\r\n| Transfer-Encoding | 传输报文时候的编码方式 |\r\n| Upgrade | 要求客户端升级协议 |\r\n\r\n\r\n\r\n**请求头字段**\r\n\r\n| 请求头字段 | 作用 |\r\n| ----------------- | ------------------------------------------------------------ |\r\n| Accept | 能正确接收的媒体类型 |\r\n| Accept-Charset | 能正确接收的字符集 |\r\n| Accept-Encoding | 能正确接收的编码格式列表。比如：gzip deflate |\r\n| Accept-Language | 能正确接收的语言列表 |\r\n| Host | 表示服务器的域名 |\r\n| if-Match | **比较两端资源的ETag，只有相等的时候才能正常完成请求** |\r\n| If-Modified-Since | 客户端记录的最后一次修改资源的时间，如果小于服务端最后一次修改的时间，则会返回200；否则返回304，去缓存中获取。 |\r\n| if-None-Match | 客户端记录的当前资源的Etag，如果和服务端不匹配，说明有了新的修改，返回200；否则返回304 |\r\n| User-Agent | 客户端的信息 |\r\n| Range | 片段请求中，表示请求资源中的某一个部分 |\r\n| Referer | 表示**当前是在哪个地址上请求这个资源** |\r\n| Cookie | 一些存在前端的信心，比如用户登录的信息。每次请求的时候都会带到后端 |\r\n\r\n\r\n\r\n**响应头字段**\r\n\r\n| 字段 | 作用 |\r\n| -------------------------------- | ----------------------------------------------------------- |\r\n| **Content-Type** | 表示内容的媒体类型，text/html;charset=UTF-8 |\r\n| Content-Encoding | 告诉客户端内容的编码格式 |\r\n| Content-Language | 表示返回内容使用的语言 |\r\n| Content-Length | 表示响应体的长度 |\r\n| Content-Range | 表示返回的实体的片段范围 |\r\n| Content-Location | 表示返回数据的备用地址 |\r\n| **Location** | 表示资源重定向之后的地址 |\r\n| Expires | 表示强缓存资源的过期时间 |\r\n| Last-Modified | 服务端记录的资源修改的最后时间，和If-Modified-Since配合使用 |\r\n| ETag | 服务端记录的资源标识，和if-None-Match配合使用 |\r\n| Allow | 当前资源允许的请求方法 |\r\n| **Access-Control-Allow-Origin** | 表示哪些网站可以跨域访问当前的资源，CORS |\r\n| Access-Control-Allow-Methods | 表示允许使用的方法 |\r\n| Access-Control-Allow-Credentials | 表示CORS请求中是否可以带Cookie |\r\n",{"_58":954,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/527/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/527/timeline",{"_58":957,"_60":61,"_62":958,"_64":959,"_66":960,"_68":961,"_70":962,"_72":963,"_74":964,"_76":965,"_78":966,"_111":967,"_131":132,"_133":24,"_134":980,"_136":981,"_158":151,"_152":983,"_154":984,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":985,"_170":986,"_176":987,"_178":988,"_190":990,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/526","https://api.github.com/repos/pro-collection/interview-question/issues/526/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/526/comments","https://api.github.com/repos/pro-collection/interview-question/issues/526/events","https://github.com/pro-collection/interview-question/issues/526",1861800898,"I_kwDOJGDC6c5u-NPC",526,"html 标签属性 src 和 href 有什么区别【热度: 1,134】",{"_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},[968,975],{"_70":969,"_72":970,"_58":971,"_117":972,"_119":973,"_121":24,"_122":974},5252299764,"LA_kwDOJGDC6c8AAAABOQ-79A","https://api.github.com/repos/pro-collection/interview-question/labels/%E6%B5%8F%E8%A7%88%E5%99%A8","浏览器","f9d0c4","浏览器相关知识点",{"_70":976,"_72":977,"_58":978,"_117":979,"_119":129,"_121":24,"_122":130},5597035813,"LA_kwDOJGDC6c8AAAABTZv9JQ","https://api.github.com/repos/pro-collection/interview-question/labels/PDD","PDD",[],{"_58":223,"_68":224,"_62":225,"_70":226,"_72":227,"_74":228,"_76":229,"_122":230,"_146":982,"_148":232,"_150":151,"_131":132,"_152":233,"_154":234,"_156":-5,"_157":-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-08-22T16:19:14Z","2023-08-22T16:19:48Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：src和href 有什么区别\r\n\r\n下面是一个表格，展示了`src`和`href`属性之间的异同点：\r\n\r\n| 特点 | src属性 | href属性 |\r\n|----------------|----------------------------------------|----------------------------------------|\r\n| 适用标签 | `\n```\n\n2. Error Boundary（错误边界）：\n\n```javascript\n// ErrorBoundary.vue\n\n\n\n\n// ParentComponent.vue\n\n```\n\n3. 异常处理：\n\n```javascript\n// ChildComponent.vue\n\n\n\n```\n\n4. 错误提示和日志记录：\n\n```javascript\n// main.js\nimport Vue from 'vue';\nimport * as Sentry from '@sentry/browser';\n\nVue.config.errorHandler = (err) => {\n console.error(err); // 错误提示\n Sentry.captureException(err); // 错误日志记录\n};\n\nnew Vue({\n // ...\n}).$mount('#app');\n```\n\n上述代码中，`Error Capturing`通过在父组件中的`errorCaptured`钩子函数中捕获子组件的错误，并展示在父组件中。`Error Boundary`通过自定义错误边界组件，在子组件发生错误时展示错误信息或替代内容。`异常处理`通过在子组件的生命周期钩子函数中使用`try-catch`语句来捕获异常并进行处理。`错误提示和日志记录`通过在`Vue.config.errorHandler`中定义全局的错误处理函数，将错误信息输出到控制台，并使用Sentry等工具记录错误日志。\n\n这些示例展示了不同的错误处理方式，可以根据实际需求选择合适的方式来处理Vue应用中的错误。\n",{"_58":1019,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/525/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/525/timeline",{"_58":1022,"_60":61,"_62":1023,"_64":1024,"_66":1025,"_68":1026,"_70":1027,"_72":1028,"_74":1029,"_76":1030,"_78":1031,"_111":1032,"_131":132,"_133":24,"_134":1035,"_136":1036,"_158":151,"_152":1038,"_154":1039,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1040,"_170":1041,"_176":1042,"_178":1043,"_190":1045,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/524","https://api.github.com/repos/pro-collection/interview-question/issues/524/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/524/comments","https://api.github.com/repos/pro-collection/interview-question/issues/524/events","https://github.com/pro-collection/interview-question/issues/524",1861758703,"I_kwDOJGDC6c5u-C7v",524,"[Vue] vue3 的 diff 算法是什么，简单介绍一下【热度: 693】",{"_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},[1033,1034],{"_70":1004,"_72":1005,"_58":1006,"_117":1007,"_119":1008,"_121":24,"_122":1009},{"_70":377,"_72":378,"_58":379,"_117":380,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":1037,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-08-22T15:58:51Z","2023-08-22T15:58:52Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：vue3 diff 算法、逐层比较和双端比较\n\nVue3的diff算法是一种用于比较虚拟DOM树之间差异的算法。它用于确定需要更新的部分，以便最小化对实际DOM的操作，从而提高性能。\n\nVue3的diff算法采用了一种称为\"逐层比较\"的策略，即从根节点开始逐层比较虚拟DOM树的节点。具体的比较过程如下：\n\n1. 对比两棵虚拟DOM树的根节点，判断它们是否相同。如果不相同，则直接替换整个根节点及其子节点，无需进一步比较。\n2. 如果根节点相同，则对比它们的子节点。这里采用了一种称为\"双端比较\"的策略，即同时从两棵树的头部和尾部开始比较子节点。\n3. 从头部开始，依次对比两棵树的相同位置的子节点。如果两个子节点相同，则继续比较它们的子节点。\n4. 如果两个子节点不同，根据一些启发式规则（如节点类型、key值等），判断是否需要替换、删除或插入子节点。\n5. 继续比较下一个位置的子节点，直到两棵树的所有子节点都被比较完。\n\n通过逐层比较和双端比较的策略，Vue3的diff算法能够高效地找到虚拟DOM树之间的差异，并只对需要更新的部分进行操作，从而减少了对实际DOM的操作次数，提高了性能。\n\n值得注意的是，Vue3还引入了一种称为\"静态标记\"的优化策略，用于在编译阶段将一些静态节点标记出来，从而在diff算法中更快地跳过这些静态节点的比较，进一步提升性能。这一优化策略在处理大型列表、静态内容等场景下特别有效。\n",{"_58":1044,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/524/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/524/timeline",{"_58":1047,"_60":61,"_62":1048,"_64":1049,"_66":1050,"_68":1051,"_70":1052,"_72":1053,"_74":1054,"_76":1055,"_78":1056,"_111":1057,"_131":132,"_133":24,"_134":1060,"_136":1061,"_158":151,"_152":1063,"_154":1064,"_157":-5,"_161":-5,"_162":163,"_106":-5,"_164":-5,"_165":1065,"_170":1066,"_176":1067,"_178":1068,"_190":1070,"_192":-5,"_193":-5,"_194":-5,"_195":196},"https://api.github.com/repos/pro-collection/interview-question/issues/523","https://api.github.com/repos/pro-collection/interview-question/issues/523/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/523/comments","https://api.github.com/repos/pro-collection/interview-question/issues/523/events","https://github.com/pro-collection/interview-question/issues/523",1858158524,"I_kwDOJGDC6c5uwT-8",523,"webpack tree-shaking 在什么情况下会失效？【热度: 171】",{"_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},[1058,1059],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":431,"_72":432,"_58":433,"_117":434,"_119":129,"_121":24,"_122":130},[],{"_58":138,"_68":139,"_62":140,"_70":141,"_72":142,"_74":143,"_76":144,"_122":145,"_146":1062,"_148":149,"_150":151,"_131":132,"_152":153,"_154":155,"_156":-5,"_157":-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-08-20T15:14:19Z","2023-11-01T15:46:48Z",{"_167":151,"_168":151,"_169":151},{"_172":151,"_173":151,"_174":151,"_175":151},"**关键词**：tree shaking 失效\r\n\r\n在以下情况下，`webpack` 的 `tree-shaking` 可能会失效：\r\n\r\n1. 使用了 `sideEffects` 属性：在 webpack 的配置文件中，如果设置了 `sideEffects: true`，则 webpack 会假设所有模块都有副作用，因此不会进行 tree-shaking。这通常用于避免某些模块被误标记为无用代码而被删除。\r\n\r\n2. 动态导入：如果你使用了动态导入（例如使用了 `import()` 或 `require.ensure()`），webpack 无法静态分析模块的导入和导出，因此无法进行 tree-shaking。\r\n\r\n3. 使用了 `commonjs` 模块语法：如果你的代码中使用了 `commonjs` 模块语法（例如使用了 `require()` 或 `module.exports`），webpack 无法进行静态分析，因此无法进行 tree-shaking。\r\n\r\n4. 未使用 ES6 模块语法：tree-shaking 只能对 ES6 模块语法进行优化，如果你的代码中没有使用 ES6 模块语法，webpack 将无法进行 tree-shaking。\r\n\r\n5. 模块被动态引用或条件引用：如果模块的引用方式是动态的（例如在循环或条件语句中引用），或者通过字符串拼接来引用模块，webpack 无法确定哪些模块会被引用，因此无法进行 tree-shaking。\r\n\r\n6. 使用了副作用的代码：如果你的代码中包含有副作用的代码（例如在模块的顶级作用域中执行了一些操作），webpack 无法确定哪些代码是无用的，因此无法进行 tree-shaking。\r\n\r\n需要注意的是，即使 tree-shaking 可能会失效，webpack 仍然会进行其他优化，例如代码压缩和代码分割等。同时，你可以通过设置 `mode` 为 `production`，来启用 webpack 的优化功能，包括 tree-shaking。\r\n",{"_58":1069,"_181":151,"_182":151,"_183":151,"_184":151,"_185":151,"_186":151,"_187":151,"_188":151,"_189":151},"https://api.github.com/repos/pro-collection/interview-question/issues/523/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/523/timeline","pagination",{"_1073":1074,"_167":1075},"value",19,32,"actionData","errors"]