携程前端一面面经 20min

虚拟 DOM 的工作原理可以概括为以下几个步骤：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9初始渲染：当应用程序加载时，首先进行一次初始渲染，将虚拟 DOM 结构构建出来。虚拟 DOM 是由 JavaScript 对象构成的树形结构，它对应于真实 DOM 的层次结构。更新生成新虚拟 DOM：当应用程序的状态发生变化时（比如用户交互），需要更新 UI。这时会生成一个新的虚拟 DOM 树，新的虚拟 DOM 表示了更新后的 UI 状态。对比差异：将新的虚拟 DOM 树与之前的虚拟 DOM 树进行对比，找出两者之间的差异（即哪些节点需要被更新、添加或删除）。这个对比过程的算法被称为"Diffing"。生成更新：根据对比得出的差异，生成一个表示更新操作的"补丁"（Patch）对象。该补丁对象包含了需要修改真实 DOM 的具体操作，比如添加节点、删除节点、更新属性等。应用更新：将补丁对象应用到真实 DOM 上，即将所有的变更操作一次性地应用到真实 DOM 上，从而实现 UI 的更新。这个过程通常使用最小化 DOM 操作的方式进行，以提高性能。

ES6，箭头函数和普通函数ES6其他特性JS的事件循环机制闭包CSS中的positionHTTP请求头内容常用的请求方法OPTIONS是什么？？？用于获取目的资源所支持的通信选项HTTP状态码 强缓存和协商缓存webpack实习经历

虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示真实 DOM 结构的概念。它是由 React 引入的一种优化技术，旨在提高前端应用性能和开发效率。虚拟 DOM 是一个轻量级的抽象层，它对应于真实 DOM 的结构，并且可以以一种高效的方式进行操作和更新。它包含了与真实 DOM 相同的层次结构、属性和内容信息，但它只存在于内存中，并不直接渲染到浏览器中。虚拟 DOM 的原理是通过对比前后两个虚拟 DOM 树的差异，然后将差异部分应用到真实 DOM 上，从而减少直接操作真实 DOM 的次数。这种优化可以提高性能，因为直接操作真实 DOM 是一项昂贵的操作，会导致浏览器执行大量的重排和重绘操作。https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9

        这一期把京东二面剩下的问题复盘一下，主要是针对构建项目中的各文件的作用。考察的点很细很细，工程化根本不需要问多复杂的原理，问这些答不上来就能知道你水平如何了，我答得特别烂，但是学习了很多东西。1.package.json文件中的script部分是干嘛的，scrpit中有个dev指令，后面配置了vite，这个vite哪里来的，如何运行起来的？        这个问题想回答好首先要知道package.json文件是干嘛的，里面的scrpit应该大部分同学都知道，但是vite从哪里来可能是大部分人没想过的问题。        关于package.json：在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。当我们克隆一个新的项目到本地时，需要执行 npm install（yarn install）命令来安装项目所需的依赖文件。当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。package.json 中最重要的两个字段就是 name 和 version，它们都是必须的，如果没有，就无法正常执行 npm install 命令。npm 规定 package.json 文件是由名称和版本号作为唯一标识符的。        scrpits部分就是配置了我们常用的开发、打包等指令的，如我们常见的npm run dev和npm run build为什么能够运行或打包项目就是在这里进行了配置        那么vite是如何被找到的？我当时的第一反应是下面配置的devDependencies中有vite，这当然有关系，但是这只是配置了vite作为开发过程中的依赖，而真正能够让他被使用的包则是在node_modules中。我的理解是，当我们安装或者新建一个项目时，开发所用的devDependencies将vite作为我们开发时的依赖，通过这个配置让我们的程序关联上node——modules中的vite工具，再通过scripts中的指令调用。2.devdependencies和dependencies的区别，如果这两块的东西都写到devdependencies或dependencies里面有什么区别？        通过名字大部分同学都知道devDependencies配置的是开发环境所用的依赖，dependencies配置的是生产环境中的依赖。        他俩的详细作用如下：        dependencies 字段中声明的是项目的生产环境中所必须的依赖包。devDependencies 中声明的是开发阶段需要的依赖包，如 Webpack、Eslint、Babel 等，用于辅助开发。它们不同于 dependencies，因为它们只需安装在开发设备上，而无需在生产环境中运行代码。当打包上线时并不需要这些包，所以可以把这些依赖添加到 devDependencies 中，这些依赖依然会在本地指定 npm install 时被安装和管理，但是不会被安装到生产环境中。        那么如果这两块的东西都写到devdependencies或dependencies里面会影响什么？如果你的项目会被发为npm包被使用，那么devdependencies，dependencies必须分开写；如果并不发布，那么声明在dependencies 和 devDependencies 中的依赖没有大的区别。        如果安装一个npm包，那么这个包的dependencies意思是在运行时还需要依赖什么其他的包才能满足你的运行要求。安装的时候会安装这个包的dependencies，并且是向上递归的（可以看图2网友的解释）。3.编译完的dist和node_modules有啥关系吗，部署的是dist，node_modules会部署吗？        在构建项目的过程中（将源代码转换为 dist 中的可分发文件时），构建工具可能会读取 node_modules 中的包。例如，在使用 Webpack 构建一个包含 React 应用的项目时，Webpack 会从 node_modules 中找到 react 和 react - dom 等相关包，然后根据项目的配置将这些包中的必要代码与项目的源代码一起进行处理，最终生成的优化后的文件存放到 dist 中。        在开发过程中，开发者会在 node_modules 中安装各种开发依赖和生产依赖。当项目准备部署时，构建过程会将这些依赖的相关部分（根据代码的引用情况）正确地整合到 dist 中的文件里，从而确保项目在生产环境中能够正常运行，生产环境中不需要直接访问 node_modules 文件夹。        项目最终在 dist 中的可分发文件可能依赖于 node_modules 中的包所提供的功能。比如一个基于 Vue.js 构建的项目，node_modules 中的 vue 包提供了 Vue 框架的核心功能，构建工具会将这些功能整合到 dist 中的 JavaScript 文件里，使得浏览器在加载 dist 中的文件时能够正常运行 Vue 应用。4.pnpm-lock是什么        pnpm-lock.yaml 是 pnpm 包管理器生成的锁定文件。它类似于 npm 的 package-lock.json 或 yarn 的 yarn.lock 文件，用于记录项目的依赖关系和确保在不同环境中安装相同的包版本。        当你使用 pnpm 安装依赖时，它会自动生成 pnpm-lock.yaml 文件。这个文件包含了项目的依赖关系树，以及每个包的版本信息和依赖项的精确版本范围。这样，当你在不同的环境中重新安装依赖时，pnpm 会根据 pnpm-lock.yaml 文件来确保安装相同的包版本，以保持项目的一致性。该系列往期链接：第一期：https://www.nowcoder.com/feed/main/detail/a79cb52ce00c4f6d874683e65b8eb718?sourceSSR=users第二期：https://www.nowcoder.com/feed/main/detail/04aee48cc23f4b09a04d0dba327f0c5d?sourceSSR=users第三期：https://www.nowcoder.com/feed/main/detail/0195906f12dd4fc0826251e9ceee19ab?sourceSSR=users第四期：https://www.nowcoder.com/feed/main/detail/2c0a525fa04240778e6c43d7d355a7ca?sourceSSR=users第五期：https://www.nowcoder.com/discuss/673869939018588160?sourceSSR=users京东二面面经：https://www.nowcoder.com/feed/main/detail/18cb2c4275544c79af169aa92d2c3fd1?sourceSSR=users#牛客在线求职答疑中心##我的求职思考##京东##软件开发2024笔面经##前端#