1、项目开发中都是es6，实际浏览器里面运行的时候是不是要做一个处理？

是的，虽然现代浏览器对ES6已经有了很好的支持，但是仍然有一些浏览器（例如Internet Explorer）无法完全支持ES6语法和新的API，因此需要进行编译和转换。

在项目开发中，通常会使用类似于Babel这样的工具将ES6的代码转换为ES5的代码，以确保在所有浏览器中都能够运行。Babel可以将ES6的语法转换为ES5语法，例如箭头函数、模板字符串等，还可以转换ES6新增的API，例如Promise、Generator等。

除了转换ES6语法外，还可以使用一些polyfill库来模拟ES6的新API，以确保在不支持ES6的浏览器中也能够正常运行。

总之，在项目开发中，需要通过编译和转换来处理ES6代码，以确保在各种浏览器和设备上都能够正确运行。

1.2、正常前端里面一般用什么来做这个事情

在前端开发中，通常会使用一些工具来处理ES6代码和浏览器兼容性问题，其中比较常用的工具包括：

• Babel：Babel是一个流行的JavaScript编译器，可以将ES6/ES7等高级语法转换为ES5语法，以实现在不支持ES6的浏览器中运行。Babel可以通过插件扩展，支持很多ES6新特性、新API等，也可以支持TypeScript等其他类型的代码。
• Webpack：Webpack是一个模块打包器，可以将多个JavaScript模块打包成一个或多个文件，以便在浏览器中加载。Webpack可以处理ES6代码，还可以处理CSS、图片等资源，支持代码压缩、代码分割等功能。
• ESLint：ESLint是一个JavaScript代码检查工具，可以检查代码是否符合规范，避免潜在的错误。ESLint可以检查ES6语法、代码风格、变量使用等问题，并支持自定义规则。
• Polyfill库：Polyfill是一种JavaScript库，可以在浏览器中模拟新的API和特性。Polyfill可以解决浏览器兼容性问题，使得不支持某个API或特性的浏览器也能够使用。常用的Polyfill库包括core-js、babel-polyfill等。

总之，以上这些工具在前端开发中都是非常常用的，可以帮助开发者处理ES6代码和浏览器兼容性问题，提高开发效率和代码质量。

1.3、class，里面有一些成员变量和方法，转成es5后，浏览器里面实际运行是什么样

在ES6中，我们可以使用class语法来定义一个类，类中包含了成员变量和方法。当将ES6的class代码转换为ES5代码后，实际上是将类中的成员变量和方法转换为原型上的属性和方法。

例如，下面是一个ES6的class定义：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

将其转换为ES5代码后，实际上是：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name + ', I\'m ' + this.age + ' years old.');
}

可以看到，类的构造函数被转换为了一个普通的函数，而类中的成员方法则被转换为了原型上的方法。

在浏览器中运行时，实际上是先创建一个Person类的实例对象，然后通过原型链查找方式调用该对象的成员方法。这个过程是由JavaScript引擎自动完成的，开发者无需关心。

1.4、call 使用的场景是什么样

在JavaScript中，call()是一个函数对象的方法，可以用来在特定的作用域中调用函数，并且可以改变函数执行时this的指向。

call()方法的基本语法如下：

function.call(thisArg, arg1, arg2, ...)

其中，第一个参数thisArg是指定的this值，arg1、arg2等则是作为函数参数传递进去的值。

使用call()方法的场景如下：

1. 改变函数执行时的this指向：在JavaScript中，函数的this指向通常是调用该函数的对象。但是在某些情况下，我们需要改变函数的this指向，例如当函数作为对象的方法调用时，需要将this指向该对象。此时，可以使用call()方法来改变函数执行时的this指向。

例如：

var person = {
  name: 'Tom',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

var dog = {
  name: 'Jerry'
};

// 调用person的sayHello方法，并且将this指向dog对象
person.sayHello.call(dog); // 输出：Hello, my name is Jerry

1. 借用别的对象的方法：在JavaScript中，对象可以共享方法，即一个对象可以调用另一个对象的方法。在某些情况下，我们需要借用别的对象的方法来完成某些操作，此时可以使用call()方法来实现。

例如：

function showColor() {
  console.log(this.color);
}

var car1 = { color: 'red' };
var car2 = { color: 'blue' };

// 调用showColor函数，并且将this指向car1对象
showColor.call(car1); // 输出：red

// 调用showColor函数，并且将this指向car2对象
showColor.call(car2); // 输出：blue

总之，call()方法的作用是在指定的作用域中调用函数，并且可以改变函数执行时的this指向。它通常用于改变函数的上下文或者借用别的对象的方法。

2、工程打包使用什么工具

工程化打包通常使用的工具是Webpack。Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，它可以将各种资源（包括 JavaScript、CSS、图片等）作为模块来处理，并生成对应的静态资源文件。使用Webpack可以帮助我们自动化构建、打包、压缩等一系列工作，同时提高应用程序的性能和开发效率。除Webpack之外，其他常见的工程化打包工具还包括Rollup和Parcel等。

2.2、webpack 中 babel 属于什么，以什么样的方式存在？

在 Webpack 中，Babel 通常作为一个 Loader 存在。

Loader 是 Webpack 中一个非常重要的概念，它主要用于处理那些非 JavaScript 的模块文件。例如，Webpack 默认只能处理 JavaScript 文件，而对于 CSS、图片、JSON 等其他类型的文件，就需要使用不同的 Loader 来进行处理。Babel Loader 就是其中之一，它可以让 Webpack 在打包时通过 Babel 对 JavaScript 文件进行转译，从而实现对 ES6、ES7、ES8 等最新语法的支持。

使用 Babel Loader 时，我们需要在 Webpack 的配置文件中将它加入到模块的规则中，并指定需要使用的 Babel 插件和预设，如下所示：

module.exports = {
  // ... 其他配置 ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
      // ... 其他规则 ...
    ]
  }
}

上述配置中，我们将 Babel Loader 应用于所有以 .js 结尾的文件，排除了 node_modules 目录中的文件，然后通过 options 选项指定了使用的 Babel 插件和预设。@babel/preset-env 用于支持最新的 JavaScript 语法和特性，而 @babel/plugin-transform-runtime 可以让 Babel 在转译代码时使用较小的运行时库，以减少代码体积和重复。

2.3、webpack中具体要配哪些东西？

Webpack 是一个非常强大的工具，可以用来打包处理 JavaScript、CSS、图片、字体等各种类型的文件。要使用 Webpack，需要进行一些配置，下面是一些主要的配置项：

1. 入口(entry): 配置 Webpack 的入口文件。可以是单个文件或多个文件，也可以是一个对象或数组，具体格式取决于具体的场景。
2. 输出(output): 配置 Webpack 的输出文件，包括文件名、路径、URL、文件类型等。同样可以是单个文件或多个文件，也可以是一个对象或数组。
3. 模块(module): 配置 Webpack 如何处理不同类型的模块文件，包括文件类型、Loader 等。Loader 主要用于将非 JavaScript 文件转换为 JavaScript 文件，例如 CSS、图片、字体等。
4. 插件(plugins): 配置 Webpack 使用哪些插件，插件可以扩展 Webpack 的功能，例如压缩代码、优化性能等。
5. 模式(mode): 配置 Webpack 的模式，有 development、production 和 none 三种选项。development 模式会开启调试模式和优化，production 模式会开启压缩和优化，而 none 模式则不会进行任何优化和压缩。
6. 解析(resolve): 配置 Webpack 如何解析模块文件的路径和扩展名等。
7. 开发服务器(devServer): 配置 Webpack 的开发服务器，用于在开发环境中进行调试和热更新等操作。

2.4、webpack 怎么匹配到对应的loader的

在 Webpack 中，匹配 Loader 的过程是通过模块规则（Module Rule）来实现的。

模块规则是 Webpack 中一个非常重要的概念，用于指定模块的匹配规则和处理方式。在模块规则中，我们可以指定一个或多个条件，用于匹配模块文件的路径、文件名、文件类型等信息。当模块符合规则条件时，Webpack 就会使用相应的 Loader 对其进行处理。

下面是一个使用 Babel Loader 的模块规则的示例：

module: {
  rules: [
    {
      test: /\.js$/, // 匹配所有以 .js 结尾的文件
      exclude: /node_modules/, // 排除 node_modules 目录下的文件
      use: {
        loader: 'babel-loader', // 使用 babel-loader 进行处理
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在上述模块规则中，我们指定了一个 test 条件，它使用正则表达式匹配所有以 .js 结尾的文件；然后使用 exclude 条件排除了 node_modules 目录下的文件。当模块文件符合这两个条件时，Webpack 就会使用 babel-loader 这个 Loader 进行处理，并将 options 中指定的选项传递给 Loader 进行配置。

因此，Webpack 的匹配规则是通过模块规则来实现的，当模块文件符合规则条件时，Webpack 就会使用相应的 Loader 进行处理。

3、如果要开发一个类似 cli 的交互命令行工具怎么实现？

要开发一个类似 CLI 的交互命令行工具，可以使用 Node.js 提供的 readline 模块和 commander 模块来实现。

1. readline 模块

readline 模块提供了从标准输入中读取数据的功能，并且支持命令行编辑、自动补全等交互特性。使用 readline 模块可以很方便地实现命令行工具的交互式输入。

示例代码：

const readline = require('readline');

const rl = readline.createInt
  erface({
  input: process.stdin,
  output: process.stdout
});

rl.question('What do you think of Node.js? ', (answer) => {
  console.log(`Thank you for your valuable feedback: ${answer}`);
  rl.close();
});

在上述代码中，我们使用 readline 模块创建了一个 readline.Interface 对象，然后调用 rl.question 方法进行交互式输入，最后将用户输入的内容作为回调函数的参数输出。

1. commander 模块

commander 模块是一个轻量级的命令行解析器，可以方便地定义命令行命令和选项，并提供了命令行帮助输出等功能。

示例代码：

const program = require('commander');

program
  .version('0.1.0')
  .description('My CLI Tool')
  .option('-f, --file <file>', 'Specify the file to process')
  .option('-o, --output [output]', 'Specify the output file')
  .option('-v, --verbose', 'Verbose output')
  .action((options) => {
    console.log(options);
  });

program.parse(process.argv);

在上述代码中，我们使用 commander 模块定义了一个命令行工具，其中使用 .option 方法定义了三个选项（file、output 和 verbose），并使用 .action 方法定义了命令行工具的行为。最后使用 program.parse 方法解析命令行参数。

综上所述，要开发一个类似 CLI 的交互命令行工具，可以使用 Node.js 的 readline 模块和 commander 模块来实现，通过 readline 模块实现交互式输入，通过 commander 模块实现命令行参数解析。

3.2、node 里面怎么做命令行交互

在 Node.js 中，可以使用 readline 模块来实现命令行交互。以下是一个简单的示例，演示如何在 Node.js 中实现基本的命令行交互：

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('What is your name? ', (name) => {
  console.log(`Hello, ${name}!`);
  rl.close();
});

在这个示例中，我们首先使用 readline 模块的 createInterface 方法创建一个 readline.Interface 实例，并将 process.stdin 和 process.stdout 分别设置为输入和输出。然后，我们调用 question 方法来提示用户输入一个字符串，并在用户输入后执行回调函数。最后，我们在回调函数中将用户输入的字符串与其他文本组合起来输出。

可以根据需要添加更多的 question 方法来实现更复杂的命令行交互。例如，可以提示用户输入多个值，或者提供选项列表并根据用户的选择执行不同的操作。

下面是一个稍微复杂一些的案例，实现了一个简单的命令行 To-Do List 程序，用户可以通过命令行来添加、删除、列出和完成任务：

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

let todoList = [];

function printList() {
  if (todoList.length === 0) {
    console.log("Your to-do list is empty.");
  } else {
    console.log("Your to-do list:");
    todoList.forEach((item, index) => {
      console.log(`${index + 1}. ${item}`);
    });
  }
}

function addTask(task) {
  todoList.push(task);
  console.log(`Added "${task}" to your to-do list.`);
}

function removeTask(index) {
  if (index < 1 || index > todoList.length) {
    console.log("Invalid index.");
  } else {
    const removed = todoList.splice(index - 1, 1)[0];
    console.log(`Removed "${removed}" from your to-do list.`);
  }
}

function completeTask(index) {
  if (index < 1 || index > todoList.length) {
    console.log("Invalid index.");
  } else {
    const completed = todoList.splice(index - 1, 1)[0];
    console.log(`Marked "${completed}" as completed.`);
  }
}

console.log("Welcome to the To-Do List app!");
rl.prompt();

rl.on('line', (line) => {
  const words = line.trim().split(' ');
  const command = words[0];
  const arg = words.slice(1).join(' ');

  switch (command) {
    case 'list':
      printList();
      break;
    case 'add':
      addTask(arg);
      break;
    case 'remove':
      removeTask(parseInt(arg));
      break;
    case 'complete':
      completeTask(parseInt(arg));
      break;
    case 'quit':
      rl.close();
      break;
    default:
      console.log(`Invalid command: ${command}`);
  }

  rl.prompt();
});

rl.on('close', () => {
  console.log("Goodbye!");
});

在这个例子中，我们首先定义了一些函数来处理用户的命令。printList 函数打印当前的 To-Do List，addTask 函数添加一个任务，removeTask 函数删除一个任务，completeTask 函数将一个任务标记为已完成。我们还定义了一个 todoList 数组来保存所有的任务。

然后，我们在命令行上监听用户的输入，并将其解析为命令和参数。我们使用一个 switch 语句来根据用户的命令来调用相应的函数。用户可以使用 list 命令来列出所有的任务，使用 add 命令来添加一个任务，使用 remove 命令来删除一个任务，使用 complete 命令来将一个任务标记为已完成，使用 quit 命令来退出程序。如果用户输入了无效的命令，我们会输出一条错误信息。

最后，我们在程序结束时输出一条退出信息，并关闭 readline 实例。

3.3、工程类工具的研发，node层面的工具有哪些？

Node.js 是一个非常强大的平台，可以用来开发各种工程类工具。以下是一些常见的 Node.js 工具：

• 包管理工具：Node.js 有两个主要的包管理工具，分别是 npm 和 yarn。这些工具可以用来安装、管理、发布和分享 Node.js 模块。
• 任务自动化工具：Node.js 有许多任务自动化工具，比较流行的包括 Grunt、Gulp 和 Webpack。这些工具可以帮助你自动执行重复性的任务，比如编译代码、压缩文件、启动本地服务器等等。
• 调试工具：Node.js 自带了调试器，可以通过 node inspect 命令启动。此外，还有一些第三方调试工具，比如 ndb、node-inspector 等等。
• 性能分析工具：Node.js 有一些性能分析工具，比如 heapdump、profiler 等等。这些工具可以帮助你分析应用程序的内存使用、CPU 使用、响应时间等指标。
• 测试工具：Node.js 有很多测试框架，比较流行的包括 Mocha、Jest、Chai、Sinon 等等。这些工具可以帮助你编写单元测试、集成测试、端到端测试等等。
• 文档生成工具：Node.js 有很多文档生成工具，比较流行的包括 JSDoc、Swagger、apidoc 等等。这些工具可以帮助你生成 API 文档、代码文档等等。
• 构建工具：Node.js 有很多构建工具，比较流行的包括 npm scripts、Makefile、Grunt、Gulp、Webpack 等等。这些工具可以帮助你编译代码、打包文件、部署应用等等。

除了上述工具，Node.js 还有很多其他的工具，比如静态代码分析工具、代码质量检查工具、安全性检查工具、持续集成工具等等。这些工具可以帮助你提高代码的质量、安全性和可维护性。

3.4、自定义lint 的工具怎么做的，就官方会有一些rules，怎么做一个自定义的一个 rules ？

Lint 工具可以帮助我们在代码编写阶段发现一些常见的问题，例如代码风格、代码质量、潜在的错误等等，从而提高代码的可读性和可维护性。

在 Node.js 中，可以使用一些第三方的 lint 工具，例如 ESLint 和 JSLint 等等。这些工具提供了一些默认的规则，可以帮助开发者检查代码的质量。除了使用默认规则，我们也可以自定义规则，以适应不同的项目需求。

下面是一个简单的例子，演示如何在 ESLint 中定义一个自定义规则。

1. 创建一个新的 ESLint 规则文件，例如 my-custom-rule.js。该文件应该导出一个对象，其中包含了自定义规则的配置信息：

   module.exports = { rules: { 'my-custom-rule': { // 规则的描述信息 meta: { type: 'suggestion', docs: { description: 'My custom rule', category: 'Best Practices', recommended: true, }, fixable: null, schema: [], }, // 规则的实现 create: function (context) { return { // 指定 AST 节点类型，对应的 callback 函数用于检查该类型的节点 'FunctionDeclaration': function (node) { // 检查函数名是否以大写字母开头 if (/^[A-Z]/.test(node.id.name)) { context.report({ node: node, message: 'Function names should not start with a capital letter.', }); } }, }; }, }, }, };

上述代码定义了一个名为 my-custom-rule 的自定义规则。该规则的描述信息包括了规则的类型、文档描述、所属类别、是否建议使用等等。规则的实现通过 create 函数实现，该函数返回一个对象，其中包含了对应的 AST 节点类型及其对应的检查函数。

在上述例子中，我们定义了一个检查函数，用于检查函数名是否以大写字母开头。如果函数名以大写字母开头，就会向 Lint 工具报告一个错误。

1. 在 .eslintrc.js 文件中配置自定义规则。可以使用 rules 属性指定自定义规则的名称，并将其值设置为 error、warn 或 off。

   module.exports = { rules: { 'my-custom-rule': 'error', }, };

在上述例子中，我们将自定义规则 my-custom-rule 的级别设置为 error，表示如果该规则被违反，将会向 Lint 工具报告一个错误。

以上就是一个简单的例子，演示了如何在 ESLint 中定义和使用自定义规则。在实际项目中，我们可以根据项目需求定义不同的规则，并使用 lint 工具帮助我们检查代码质量。

4、vue 框架的特点是什么，跟传统的框架对比？渲染层面有没有什么特别，跟document 的方式有什么区别吗？

Vue.js 是一个轻量级的前端框架，其主要特点包括：

• 响应式数据绑定：Vue.js 提供了一种便捷的方式来绑定数据与视图，只需要在 HTML 中使用特定的语法绑定数据，当数据变化时，视图会自动更新。
• 组件化：Vue.js 允许将一个页面拆分成多个组件，每个组件可以拥有自己的状态和行为，这样可以提高代码的可复用性和可维护性。
• 模板语法：Vue.js 提供了一种模板语法，可以在 HTML 中编写 JavaScript 代码，从而可以更方便地操作 DOM 元素。
• 生态系统：Vue.js 生态系统非常丰富，有大量的插件和库可以供开发者使用，例如 Vuex 状态管理、Vue Router 路由管理等等。

相对于传统的前端框架，Vue.js 在以下方面具有一些优势：

• 更加轻量级：Vue.js 比传统框架如 AngularJS 更加轻量级，可以更快地加载和渲染页面。
• 更易于学习和使用：Vue.js 的 API 简单明了，易于学习和使用，开发者可以更快地上手。
• 更好的性能：Vue.js 采用了 Virtual DOM 技术，可以在渲染大量数据时提高性能。

在渲染层面，Vue.js 采用了 Virtual DOM 技术，它将 DOM 抽象成一个 JavaScript 对象树，每次更新时只需要比较新旧两棵树的差异，从而可以最小化 DOM 操作，提高性能。相比之下，传统的操作 DOM 的方式需要频繁地进行查询和修改，效率较低。

此外，Vue.js 还有一些其他的特点，包括：

• 模块化开发：Vue.js 可以与 Webpack 等模块化工具配合使用，实现模块化开发，提高代码的可维护性。
• 单文件组件：Vue.js 的单文件组件可以将一个组件的 HTML、CSS 和 JavaScript 放在同一个文件中，使得组件的开发更加方便和清晰。
• 插件机制：Vue.js 具有强大的插件机制，可以轻松地扩展其功能。
• 生命周期钩子函数：Vue.js 组件生命周期钩子函数可以在组件的不同阶段执行特定的操作，例如在组件挂载前和挂载后执行特定的操作等。

总的来说，Vue.js 的特点包括响应式数据绑定、组件化、模板语法和生态系统丰富等等。在渲染层面，Vue.js 采用了 Virtual DOM 技术，可以提高性能，与传统的操作 DOM 的方式有一定的区别。

4.2、虚拟dom变成实际 dom 是怎么发生的？vue怎么实现虚拟dom 和实际dom 的分离和衔接？

在 Vue.js 中，当数据发生变化时，Vue.js 会先创建一个新的虚拟 DOM 树，并将其与旧的虚拟 DOM 树进行比较，找出二者之间的差异。然后，Vue.js 会根据差异，更新实际 DOM。

具体的更新过程如下：

1. Vue.js 会通过模板或 render 函数生成一棵虚拟 DOM 树。

2. 当数据发生变化时，Vue.js 会再次生成一棵新的虚拟 DOM 树。

3. Vue.js 会将新旧两棵虚拟 DOM 树进行比较，找出它们之间的差异。

4. 根据差异，Vue.js 会将需要更新的部分从虚拟 DOM 转换为实际 DOM，然后将其插入到页面中，完成更新。

Vue.js 实现虚拟 DOM 和实际 DOM 的分离和衔接，主要是通过以下几个步骤实现的：

1. 首先，Vue.js 会创建一个虚拟 DOM 树，这个虚拟 DOM 树与实际 DOM 树无关，仅仅是一个 JavaScript 对象。
2. 当数据发生变化时，Vue.js 会生成一棵新的虚拟 DOM 树。
3. Vue.js 会将新旧两棵虚拟 DOM 树进行比较，找出它们之间的差异。
4. 根据差异，Vue.js 会将需要更新的部分从虚拟 DOM 转换为实际 DOM。
5. Vue.js 会将新生成的实际 DOM 插入到页面中，并将旧的实际 DOM 从页面中移除。
6. 最后，Vue.js 会将新的虚拟 DOM 树作为旧的虚拟 DOM 树，等待下一次数据变化时的比较和更新。

通过这样的方式，Vue.js 实现了虚拟 DOM 和实际 DOM 的分离和衔接，可以最小化 DOM 操作，提高渲染性能。

在 Vue.js 中，实现虚拟 DOM 和实际 DOM 的分离和衔接，还有以下几个方面需要注意

• 通过模板或 render 函数生成虚拟 DOM 树时，需要尽可能地使用可复用的组件，避免生成大量的嵌套标签。
• 虚拟 DOM 树的比较过程需要高效地进行，否则会影响渲染性能。为此，Vue.js 采用了优化的算法，例如只比较同级节点、使用 key 属性标记节点等。
• 更新实际 DOM 时，Vue.js 采用了批量更新的方式，将多个 DOM 操作合并为一个，从而减少了浏览器的重绘和回流，提高了渲染性能。
• Vue.js 还提供了一些优化性能的工具和技巧，例如异步组件、keep-alive 组件、懒加载、缓存 computed 值等。

总的来说，Vue.js 通过虚拟 DOM 的方式实现了高效的渲染，避免了频繁地操作实际 DOM，提高了应用的性能和用户体验。

4.3、h 函数具体是什么，一般该怎么写

在 Vue.js 中，h 函数是用来创建虚拟 DOM 的工厂函数，其实现原理与 React 中的 createElement 函数类似。

h 函数的完整形式为：

h(tag, propsOrChildren?, children?)

其中，第一个参数 tag 表示元素的标签名或组件的构造函数；第二个参数 propsOrChildren 是一个可选的对象或数组，用来表示元素的属性或子元素；第三个参数 children 是一个可选的数组或字符串，用来表示元素的子元素。

下面是一个示例：

import Vue from 'vue';

new Vue({
  el: '#app',
  render(h) {
    return h('div', { class: 'container' }, [
      h('h1', 'Hello, World!'),
      h('p', 'Welcome to my Vue.js app.')
    ]);
  }
});

上面的代码使用 h 函数创建了一个 div 元素，其属性包括 class: 'container'，子元素包括一个 h1 元素和一个 p 元素。注意，这里的 render 函数是 Vue.js 组件中的一个生命周期函数，用来返回组件的虚拟 DOM 树。

在实际开发中，可以使用 JSX 或模板语法来代替手动调用 h 函数，使代码更加简洁和易读。例如，使用 JSX 的示例代码如下：

import Vue from 'vue';

new Vue({
  el: '#app',
  render() {
    return (
      <div class="container">
        <h1>Hello, World!</h1>
        <p>Welcome to my Vue.js app.</p>
      </div>
    );
  }
});

总的来说，h 函数是 Vue.js 中非常重要的一个函数，用于创建虚拟 DOM 树，并最终渲染到实际 DOM 上。在实际使用中，建议使用模板语法或 JSX，以提高代码的可读性和编写效率。

在 Vue.js 中，使用 h 函数创建虚拟 DOM 树后，需要将其渲染到实际 DOM 上，这个过程是通过 Vue.js 的渲染器实现的。

渲染器的核心是 patch 函数，它用于将虚拟 DOM 树渲染到实际 DOM 上，并在需要时进行更新。patch 函数的实现是 Vue.js 中比较复杂和关键的部分之一，它的具体实现方式涉及到很多细节和算法，例如虚拟 DOM 的 diff 算法、组件的生命周期管理等等。

在 Vue.js 中，每个组件都有自己的渲染函数和虚拟 DOM 树，当组件需要更新时，Vue.js 会通过比较新旧虚拟 DOM 树的差异，然后有选择地更新实际 DOM 上的部分内容。这种优化方式称为“响应式更新”，它可以大大提高应用的性能和用户体验。

总的来说，Vue.js 的虚拟 DOM 和渲染器是实现其核心功能的重要组成部分，通过抽象和封装，使得开发者可以更加便捷地创建复杂的应用程序，并提高了应用的性能和可维护性。

4.4、JSX 和模板语法有什么区别吗

JSX 和模板语法都是用于生成视图的语言，但它们的语法和用法有所不同。

JSX 是一种基于 JavaScript 的语法扩展，它允许开发者在 JavaScript 中编写 HTML 结构和组件，并使用类似 XML 的语法来描述 UI。在 JSX 中，使用尖括号 (<>) 来表示 HTML 标签，使用花括号 ({}) 来表示 JavaScript 表达式。例如：

const element = (
  <div className="greeting">
    <h1>Hello, world!</h1>
    <p>Today is {new Date().toLocaleDateString()}.</p>
  </div>
);

模板语法则是一种基于 HTML 的模板语言，它允许开发者在 HTML 中嵌入表达式和指令，以生成动态的视图。在模板语法中，使用双大括号 ({{}}) 来表示表达式，使用 v- 开头的指令来表示指令。例如：

<div class="greeting">
  <h1>{{ message }}</h1>
  <p>Today is {{ new Date().toLocaleDateString() }}.</p>
</div>

可以看出，JSX 更加灵活，可以在 JavaScript 中编写任意复杂的逻辑和表达式，并且支持类似 JavaScript 的语法特性（如条件语句、循环语句等）。而模板语法则更加简洁明了，更容易理解和编写，适合用于快速生成简单的视图。当然，这两种语法都有各自的优点和适用场景，开发者可以根据实际需求选择使用。

4.5、JSX 和模板语法各自的优点和适用场景

JSX 和模板语法都有各自的优点和适用场景，具体如下：

JSX 的优点：

• 更加灵活：JSX 允许开发者在 JavaScript 中编写任意复杂的逻辑和表达式，以及使用 JavaScript 的语言特性，如条件语句、循环语句等，使得 UI 逻辑更加灵活，方便处理复杂的业务场景。
• 更加可读性和可维护性：由于 JSX 结构清晰，与 JavaScript 的语法特性相互融合，使得代码更加易于理解和维护。
• 更加高效：由于使用了虚拟 DOM，使得在更新 DOM 时只需要更新实际发生变化的部分，而不需要重新渲染整个页面，从而提高了页面的渲染效率。

JSX 的适用场景：

• 复杂的 UI 逻辑：对于复杂的 UI 逻辑，如需要根据条件渲染不同的组件、需要进行多层嵌套的组件等，使用 JSX 可以更加方便地实现。
• 需要使用 JavaScript 的语言特性：如果需要在视图中使用 JavaScript 的语言特性，如条件语句、循环语句等，使用 JSX 可以更加方便地实现。
• 需要高效渲染的页面：对于需要频繁更新的页面，使用 JSX 可以通过虚拟 DOM 的优化，提高页面的渲染效率。

模板语法的优点：

• 简洁易懂：模板语法与 HTML 结构类似，语法简单明了，易于理解和编写。
• 容易上手：对于新手来说，模板语法比 JSX 更加容易上手，因为不需要掌握 JSX 中复杂的语法特性。
• 更加直观：模板语法中的指令可以更加直观地描述出视图中的数据流向，更容易理解和维护。

模板语法的适用场景：

• 简单的 UI 逻辑：对于简单的 UI 逻辑，如只需要简单地展示数据，不需要进行复杂的业务逻辑处理，使用模板语法可以更加方便地实现。
• 对 JSX 不熟悉的开发者：对于对 JSX 不熟悉的开发者来说，使用模板语法可以更加容易上手。
• 不需要使用 JavaScript 的语言特性：如果在视图中不需要使用 JavaScript 的语言特性，如条件语句、循环语句等，使用模板语法可以更加简洁明了。

4.6、什么情况下用 JSX 会更好

当需要在组件中实现复杂的逻辑、动态生成组件或者组件嵌套比较深时，使用 JSX 可能更加方便和自然。以下是一些示例：

• 动态生成组件：在 JSX 中，可以通过函数或者变量来动态生成组件。

  function MyComponent(props) {
    const { componentType } = props;
    const Component = componentType;
    return <Component />;
  }
  

• 复杂的条件渲染：在 JSX 中，可以使用更加灵活的条件语句来实现复杂的条件渲染。

  function MyComponent(props) {
    const { condition } = props;
    return (
      <div>
        {condition ? (
          <p>This component will render if the condition is true.</p>
        ) : (
          <p>This component will render if the condition is false.</p>
        )}
      </div>
    );
  }
  

• 组件嵌套：在 JSX 中，可以方便地实现组件的嵌套。

  function MyComponent(props) {
    const { children } = props;
    return <div>{children}</div>;
  }
  
  function App() {
    return (
      <MyComponent>
        <h1>Hello, world!</h1>
        <p>This is a paragraph.</p>
      </MyComponent>
    );
  }
  

以上是一些在 JSX 中比较常见的使用场景。需要注意的是，JSX 语法本身并不复杂，但它需要一定的学习成本。而模板语法相对来说比较简单，容易上手。在实际项目中，可以根据团队的技术水平、项目的规模和需求等因素来选择合适的语法。

4.7、在模板语法中，如何实现动态生成组件

在模板语法中，要实现动态生成组件，可以使用 is 特性。is 特性用于指定要渲染的组件类型，在模板中可以通过动态绑定来实现组件类型的动态切换。具体实现方式如下：

在模板中定义一个包含 is 特性的组件标签，例如：

<component :is="currentComponent"></component>

在 Vue 实例中定义 currentComponent 数据，用于控制当前要渲染的组件类型，例如：

data() {
  return {
    currentComponent: 'ComponentA'
  }
}

可以通过事件或其他方式来动态修改 currentComponent 的值，从而实现组件类型的动态切换。例如：

methods: {
  switchComponent() {
    this.currentComponent = 'ComponentB'
  }
}

在上面的例子中，当 switchComponent 方法被触发时，currentComponent 的值会变为 'ComponentB'，此时 标签就会渲染 ComponentB 组件。注意，这里的 ComponentA 和 ComponentB 是组件的名称，需要在组件注册时指定。

某公司

1、根据id 和 parentid 将数组数据转成嵌套结构

将数组数据转换成嵌套结构可以使用递归算法来实现。具体步骤如下：

• 创建一个空的对象或数组，作为最终转换后的嵌套结构。
• 遍历数组数据，对于每个元素，查找它的父节点，如果找到了父节点，则将该元素添加到父节点的子节点数组中；否则，将该元素作为顶级节点添加到最终结构中。
• 递归遍历每个父节点的子节点数组，将它们转换成嵌套结构。
• 返回最终的嵌套结构。

以下是一个示例 JavaScript 代码实现：

function convertToNestedArray(arr) {
  let map = {};
  let result = [];

  for (let i = 0; i < arr.length; i++) {
    let obj = arr[i];
    obj.children = [];

    map[obj.id] = obj;

    let parent = obj.parentId || '-';
    if (!map[parent]) {
      map[parent] = {
        children: []
      };
    }

    map[parent].children.push(obj);
  }

  return map['-'].children;
}

反过来的话，怎么实现呢？树转数组

function convertToArray(obj) {
  let arr = [];

  function traverse(node) {
    arr.push(node);

    if (node.children.length > 0) {
      for (let i = 0; i < node.children.length; i++) {
        traverse(node.children[i]);
      }
    }
  }

  traverse(obj);

  return arr;
}

这个函数接受一个嵌套结构对象作为参数，并返回一个数组。它首先创建一个空数组，然后使用递归函数遍历整个嵌套结构，并将每个节点添加到数组中。最后，它返回这个数组。

2、什么是白屏检测？图片是怎么判断白屏的？

白屏检测是一种用于检测Web应用程序页面加载速度的技术。它通过监测页面的白屏时间来确定页面加载的速度和性能。白屏时间是指页面加载完成后，直到内容显示之前的时间。因此，白屏检测可以帮助Web开发人员优化页面加载速度，提高用户体验。

在进行白屏检测时，通常会使用图片加载作为检测依据。当浏览器请求页面时，它会首先加载HTML和CSS文件，然后再加载其他资源，如JavaScript和图片。在加载图片时，浏览器会向服务器发送请求，服务器会返回一个HTTP响应，并在响应中包含图片的二进制数据。当浏览器接收到响应时，它会将图片数据解析为位图，并将其渲染到页面上。

如果在图片加载过程中出现问题，浏览器将无法正常加载图片，并且将无法在页面上显示。这将导致页面出现白屏。因此，通过检测图片加载状态，我们可以确定页面是否已经加载完成，以及加载时间是否达到了我们的预期。

具体来说，可以使用JavaScript来检测图片加载状态。当一张图片加载完成时，浏览器会触发一个load事件，我们可以在这个事件中记录图片加载完成的时间，并根据记录的时间计算出白屏时间。如果白屏时间超过了一定的阈值，我们就可以认为页面加载速度过慢，并考虑进行优化。

3、页面性能监控以及接口监控？

juejin.cn/post/719590…

页面性能监控和接口监控是现代web开发中非常重要的一部分，可以帮助我们及时发现和解决性能问题。

页面性能监控一般包括以下几个方面：

• 页面加载时间：监控页面的首次加载时间，包括DNS解析、TCP连接、请求响应等过程，以及页面所有资源的加载时间。
• 页面渲染时间：监控浏览器解析HTML、CSS、JS以及渲染页面的时间，以及页面的重绘和回流时间。
• 用户交互响应时间：监控用户在页面上的交互操作（例如点击按钮、输入框等），以及页面响应这些操作的时间。

接口监控一般包括以下几个方面：

• 接口请求时间：监控接口请求的时间，包括DNS解析、TCP连接、请求响应等过程，以及请求数据的大小。
• 接口响应时间：监控接口响应的时间，包括服务器处理请求的时间和返回数据的时间。
• 接口错误率：监控接口请求的错误率，包括网络错误、服务器错误、业务错误等。

为了进行页面性能监控和接口监控，我们可以使用一些工具和技术，例如：

• 浏览器自带的性能监控工具，例如Chrome DevTools中的Performance和Network面板。
• 第三方的性能监控工具，例如Google Analytics、New Relic、SpeedCurve等。
• 自定义性能监控工具，例如使用JavaScript编写的性能监控脚本，可以通过window.performance API获取页面性能数据，并上传到服务器进行分析和监控。
• 使用日志分析工具，例如ELK Stack（Elasticsearch、Logstash、Kibana）等，可以对接口请求和服务器日志进行分析和监控。

4、讲一下工作中做的比较有意思的东西，或者说有一些主动发起推进去解决业务问题、痛点的事情

当面试官问到“讲一下工作中做的比较有意思的东西”或者“有一些主动发起推进去解决业务问题、痛点的事情”的时候，你可以根据自己的经验和实际情况来回答该问题。以下是一个可能的回答：

在我的工作中，我曾经遇到一个业务问题，客户需要在网站上实现在线预订功能。但是，由于网站的后端架构比较老旧，无法直接支持在线支付和预订功能，这给我们带来了很大的挑战。

为了解决这个问题，我首先研究了现有的在线支付和预订解决方案，并与团队一起进行了讨论。最终，我们决定采用第三方支付平台，并在网站中嵌入支付组件，以支持在线支付和预订功能。

在实现过程中，我负责与第三方支付平台的技术支持人员进行沟通和协调，以确保支付组件能够正常工作，并且与网站的后端接口能够无缝集成。我还编写了一些JavaScript代码，以便将用户输入的预订信息发送到后端，并处理服务器返回的响应。

最终，我们成功地实现了在线预订功能，并且得到了客户的高度评价。这个经历让我感到非常有成就感，因为我不仅解决了客户的业务问题，还学习到了很多新的技术和工具。

5、vue 使用中有哪些性能优化的方法？ 从1递增到10000，不可能每个都渲染一遍，是怎么处理的？

Vue框架是为了提高前端应用的性能而设计的。以下是Vue进行性能优化的一些方法：

• 使用v-if代替v-show：v-show只是控制元素的display属性，而v-if可以完全从DOM中移除不需要的元素，从而减少不必要的DOM操作。
• 避免使用过多的计算属性和监听器：计算属性和监听器可能需要执行很多次，而且它们的执行是同步的，如果过多地使用这些功能会影响应用的性能。
• 合理使用异步组件和keep-alive：异步组件可以延迟渲染，提高首屏加载速度，而keep-alive可以缓存组件状态，减少不必要的渲染。
• 使用v-for的key属性：使用唯一的key属性可以使Vue跟踪每个元素的身份，从而减少不必要的DOM操作。
• 合理使用Vue的生命周期函数：生命周期函数可以帮助我们控制组件的创建、更新和销毁过程，从而提高组件的渲染效率。

当从1递增到10000时，Vue会使用虚拟DOM技术来处理这个问题。虚拟DOM是一个轻量级的JavaScript对象，它在内存中保存了整个DOM树的结构和信息。当数据发生变化时，Vue会先通过比较虚拟DOM树的差异，然后只对需要更新的部分进行重新渲染，从而提高了性能。

对于大型数据列表的渲染，Vue会使用一种称为“分片渲染”的技术，将长列表拆分成多个小块，每次只渲染当前可见的部分，从而减少不必要的DOM操作，提高渲染效率。

6、工程化相关，.vue ,.tsx,.ts 这些文件是怎么编译成用户可以访问的页面的？越细越好。可以先讲一下大体有哪几步，然后再讲细节，比如先进的API怎么在旧版浏览器里面运行。

将.vue、.tsx、.ts等文件编译成用户可以访问的页面，需要经过以下几个步骤：

1. 代码转换：将.vue、.tsx、.ts等文件中的代码转换成浏览器可识别的JavaScript代码。这一步通常需要使用Babel等工具。
2. 模块打包：将转换后的代码按照依赖关系和入口文件进行打包，生成浏览器可执行的JavaScript文件。这一步通常需要使用Webpack等工具。
3. 资源处理：将页面中的图片、CSS、字体等资源进行打包和压缩，并生成对应的URL。这一步通常需要使用Webpack的loader或plugin。
4. 代码优化：对生成的JavaScript代码进行优化，包括代码压缩、去重、混淆等操作。这一步通常需要使用Webpack的优化插件或其他工具。
5. 浏览器兼容性处理：对于一些高级API或ES6语法，需要使用polyfill或transpile技术进行处理，以保证在低版本浏览器中也能正常运行。

在进行这些步骤时，我们可以使用一些工具和技术来简化开发流程，例如：

• Webpack：Webpack是一个模块打包工具，可以将各种类型的文件打包成浏览器可执行的JavaScript文件。
• Babel：Babel是一个JavaScript编译器，可以将ES6及以上版本的代码转换成ES5的代码，以保证在低版本浏览器中也能正常运行。
• TypeScript：TypeScript是一个JavaScript的超集，可以提供类型检查、代码提示等功能，从而提高代码的可维护性和可读性。
• ESLint：ESLint是一个JavaScript代码检查工具，可以检查代码质量、规范性等方面的问题，从而提高代码的可维护性和可读性。
• PostCSS：PostCSS是一个CSS处理工具，可以使用各种插件来处理CSS代码，例如自动添加前缀、压缩代码等。
• Polyfill：Polyfill是一种技术，可以在不支持某些高级API或ES6语法的浏览器中提供对这些功能的支持。

在处理浏览器兼容性问题时，我们可以使用以下技术：

• Polyfill：Polyfill可以为浏览器提供一些缺失的API或语法支持，例如Promise、Object.assign等。
• Transpile：Transpile可以将ES6及以上版本的代码转换成ES5的代码，以保证在低版本浏览器中也能正常运行。Babel就是一个常用的Transpile工具。
• Feature Detection：Feature Detection可以检查浏览器是否支持某个API或语法，从而决定是否使用Polyfill或Transpile技术。可以使用Modernizr等工具进行Feature Detection。
• 浏览器嗅探：浏览器嗅探可以检测用户使用的浏览器类型和版本，从而决定是否需要使用Polyfill或Transpile技术。可以使用库如Bowser等进行浏览器嗅探。

以上是将.vue、.tsx、.ts等文件编译成用户可以访问的页面的一些步骤和技术，其中浏览器兼容性处理是非常重要的一部分，可以帮助我们提高应用程序的兼容性和可靠性。

7、vite 是用什么去编译的？

vite 是一个基于ES Modules的构建工具，它使用现代浏览器原生支持的 import/export 语法来进行模块化开发，而不需要像传统构建工具（如Webpack）那样使用打包和编译的方式。

vite 的原理是使用浏览器的 ES Modules 特性，在浏览器端实时编译和构建代码，而不需要预先打包和编译。具体来说，vite 使用一个轻量级的开发服务器来提供代码的实时编译和构建，当浏览器发出请求时，vite 会根据请求的模块路径动态加载相应的模块，并且对模块进行实时编译和构建，然后返回给浏览器。

vite 的实时编译和构建是通过一些现代浏览器原生支持的技术实现的，例如：

• ES Modules：ES Modules 是一种原生支持模块化开发的技术，可以将代码分割成多个模块，从而提高代码的可维护性和可重用性。
• Dynamic Import：Dynamic Import 是一种动态加载模块的技术，可以根据需要动态加载模块，从而提高应用程序的性能和可维护性。
• Service Worker：Service Worker 是一种在浏览器端运行的脚本，可以缓存应用程序的资源，从而提高应用程序的性能和可靠性。
• Web Worker：Web Worker 是一种在浏览器端运行的脚本，可以在后台运行，从而不会影响应用程序的性能和响应性能。

总的来说，vite 是利用浏览器原生支持的技术，实现了一种轻量级、快速的开发方式，可以提高开发效率和应用程序的性能。

8、sourcemap 有了解过吗，讲一讲是什么？在生产环境下，怎么去使用，讲一下这个流程。

Sourcemap 是一种文件，用于将编译后的代码映射回原始源代码。Sourcemap 可以帮助我们在调试 JavaScript 应用程序时，将编译后的代码映射回原始源代码，从而更容易地定位和解决问题。Sourcemap 通常包括两个部分：映射关系和原始代码。映射关系是一种对多关系，用于将编译后的代码行号和源代码行号进行映射；原始代码是指源代码，用于在调试过程中显示原始代码。

在生产环境下，我们通常将 JavaScript 代码进行压缩和混淆，以减小文件大小和提高代码安全性。但是，压缩和混淆会使代码变得难以阅读和调试，因此我们需要使用 Sourcemap 来解决这个问题。具体来说，我们需要在编译 JavaScript 代码时生成 Sourcemap 文件，并将其与编译后的代码一起发布到生产环境。这样，在用户访问网站时，浏览器会自动下载并使用 Sourcemap 文件，将编译后的代码映射回原始源代码，从而帮助我们更容易地调试 JavaScript 应用程序。

以下是在生产环境下使用 Sourcemap 的一些流程：

1. 生成 Sourcemap 文件：在编译 JavaScript 代码时，需要生成 Sourcemap 文件。可以使用工具如Webpack、Rollup等进行生成。
2. 配置服务器：在生产环境下，需要配置服务器将编译后的代码和 Sourcemap 文件一起提供给用户。可以使用工具如Nginx、Apache等进行配置。
3. 配置浏览器：在用户访问网站时，需要浏览器自动下载并使用 Sourcemap 文件。可以在 HTML 页面中引入该代码。这样，浏览器会自动下载 app.js.map 文件，并将编译后的代码映射回原始源代码。
4. 调试代码：在调试 JavaScript 应用程序时，可以使用浏览器的开发者工具来查看源代码和映射关系。在 Chrome 和 Firefox 浏览器中，可以在 Sources 面板中找到 Sourcemap 文件和源代码，从而方便地调试 JavaScript 应用程序。

需要注意的是，Sourcemap 文件包含了源代码的信息，因此需要注意保护 Sourcemap 文件的安全性，以避免源代码泄露。可以使用工具如UglifyJS等来保护 Sourcemap 文件的安全性。

总的来说，Sourcemap 是一种非常有用的工具，可以帮助我们更容易地调试 JavaScript 应用程序。在生产环境下，我们需要生成 Sourcemap 文件，并将其与编译后的代码一起发布到生产环境，从而方便用户调试 JavaScript 应用程序。

9、搜索框远程搜索要保证可用性要考虑的点有哪些？

搜索框远程搜索是一种常见的搜索方式，通常包括用户在搜索框中输入关键字，然后将关键字发送给远程服务器进行搜索，并返回搜索结果给用户。为了保证搜索框远程搜索的可用性，需要考虑以下几个点：

1. 搜索框交互体验：搜索框应该提供良好的交互体验，包括输入提示、搜索建议等功能，以帮助用户快速找到需要的信息。
2. 搜索结果质量：搜索结果应该准确、完整、及时，以满足用户的需求。可以使用搜索引擎技术和算法来提高搜索结果质量。
3. 搜索性能和响应时间：搜索应该具有快速的响应时间和良好的性能，以提高用户的满意度。可以使用缓存、索引等技术来提高搜索性能和响应时间。
4. 搜索安全性：搜索应该具有良好的安全性，以保护用户的隐私和数据安全。可以使用加密、身份认证等技术来保障搜索安全性。
5. 搜索可扩展性：搜索应该具有良好的可扩展性，以适应不同的应用场景和用户需求。可以使用分布式、集群等技术来提高搜索可扩展性。
6. 搜索可访问性：搜索应该具有良好的可访问性，以满足不同用户的需求，包括视觉障碍用户、听力障碍用户等。可以使用无障碍技术来提高搜索可访问性。
7. 搜索错误处理：搜索应该具有良好的错误处理机制，以处理用户输入错误、服务器错误等情况。可以使用异常处理、日志记录等技术来提高搜索错误处理能力。

总的来说，为了保证搜索框远程搜索的可用性，还需要考虑以下几个点：

1. 搜索历史和自动完成：搜索应该具有搜索历史和自动完成功能，以提高搜索的效率和精度。
2. 搜索过滤和排序：搜索应该具有搜索过滤和排序功能，以帮助用户快速找到需要的信息。可以使用搜索引擎技术和算法来实现搜索过滤和排序功能。
3. 搜索语言和地域性：搜索应该具有良好的语言和地域性，以满足不同用户的需求。可以使用多语言和多地域支持技术来提高搜索的语言和地域性。
4. 搜索容错和纠错：搜索应该具有良好的容错和纠错能力，以处理用户输入错误和拼写错误等情况。可以使用拼写检查、纠错算法等技术来提高搜索容错和纠错能力。
5. 搜索结果分类和展示：搜索应该具有良好的结果分类和展示功能，以帮助用户快速找到需要的信息。可以使用分类和展示算法来提高搜索结果分类和展示功能。

综上所述，搜索框远程搜索的可用性需要考虑多方面的因素，包括交互体验、搜索结果质量、搜索性能和响应时间、搜索安全性、搜索可扩展性、搜索可访问性、搜索错误处理、搜索历史和自动完成、搜索过滤和排序、搜索语言和地域性、搜索容错和纠错、搜索结果分类和展示等。只有综合考虑这些因素，才能提高搜索框远程搜索的可用性，满足用户的需求。

10-13 略

14、按需加载的时候，HTML 上会提供一些标识，比如 pre-load 和 pre-fetch，你知道这是干什么的吗？

pre-load 是将某些资源在用户请求资源之前进行预先加载

pre-fetch 是当浏览器或者用户未来可能请求的资源加载到缓存中，以便在用户真正请求资源时可以更快地访问和加载

当我们使用按需加载技术时，可以使用 HTML 中的 pre-load 和 pre-fetch 标签来优化资源加载速度，提高用户体验。

pre-load 标签用于在页面加载时，预加载指定的资源，以便在后续页面中使用。一般情况下，pre-load 标签用于加载关键资源，以提高页面的加载速度和响应时间。pre-load 标签通常放置于 head 标签中，并使用 rel="preload" 属性进行标识。例如：

<head>
  <link rel="preload" href="image.jpg" as="image">
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="script.js" as="script">
</head>

在这个示例中，pre-load 标签用于预加载图片、样式和脚本等资源。

pre-fetch 标签用于在页面加载时，预取指定的资源，以便在后续页面中使用。一般情况下，pre-fetch 标签用于加载非关键资源，以提高页面的性能和用户体验。pre-fetch 标签通常放置于 head 标签中，并使用 rel="prefetch" 属性进行标识。例如：

<head>
  <link rel="prefetch" href="image.jpg">
  <link rel="prefetch" href="style.css">
  <link rel="prefetch" href="script.js">
</head>

在这个示例中，pre-fetch 标签用于预取图片、样式和脚本等资源。

需要注意的是，pre-load 和 pre-fetch 标签仅仅是对资源进行预加载和预取，并不保证资源一定会被使用。因此，在使用 pre-load 和 pre-fetch 标签时，需要根据实际需求和性能考虑，避免过度加载和浪费资源。

另外，需要注意以下几点：

• 浏览器支持：pre-load 和 pre-fetch 标签目前仅在一些现代浏览器中得到支持，因此需要进行兼容性测试。
• 预加载和预取的资源类型：pre-load 和 pre-fetch 标签支持多种资源类型，包括图片、样式、脚本、字体等。需要根据实际情况选择合适的资源类型进行预加载和预取。
• 资源优先级：pre-load 和 pre-fetch 标签支持设置资源的优先级，以便浏览器在加载资源时优先加载重要的资源。可以使用 as 属性设置资源的类型和优先级。
• 资源大小：pre-load 和 pre-fetch 标签预加载和预取的资源大小对页面性能有影响，因此需要根据资源大小和网络状况等因素进行合理的资源预加载和预取。
• 缓存机制：pre-load 和 pre-fetch 标签预加载和预取的资源可能会被浏览器缓存，从而影响后续页面的加载速度。需要根据实际情况选择是否启用缓存机制。

综上所述，pre-load 和 pre-fetch 标签可以用于优化资源加载速度，提高用户体验。但需要根据实际需求和性能考虑，避免过度加载和浪费资源。在使用 pre-load 和 pre-fetch 标签时，需要注意浏览器支持、资源类型、资源优先级、资源大小和缓存机制等因素。

15、手写题：动态规划（爬楼梯）

爬楼梯是一道经典的动态规划问题。题目描述如下：假设有 n 级楼梯，每次可以爬 1 级或 2 级，问有多少种不同的爬楼梯方式。

解题思路：

设 dp[i] 表示爬到第 i 级楼梯的不同爬法数量。由于每次只能爬 1 级或 2 级，因此到达第 i 级楼梯的不同爬法数量只能由到达第 i-1 级楼梯和第 i-2 级楼梯的不同爬法数量之和得到。因此，可以得到以下递推关系式：

dp[i] = dp[i-1] + dp[i-2]

边界条件为 dp[0] = 1, dp[1] = 1。

具体实现如下：

function climbStairs(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  let pre = 1, cur = 1;
  for (let i = 2; i <= n; i++) {
    const tmp = cur;
    cur = pre + cur;
    pre = tmp;
  }

  return cur;
}

该实现使用了滚动变量来优化空间复杂度。时间复杂度为 O(n)，空间复杂度为 O(1)。

除了使用滚动变量来优化空间复杂度外，也可以使用递归或记忆化搜索的方式来实现。递归的实现方式如下：

function climbStairs(n) {
  if (n === 0 || n === 1) {
    return 1;
  }

  return climbStairs(n - 1) + climbStairs(n - 2);
}

这个实现方式非常简单，但是时间复杂度为 O(2^n)，因为在每一步都有两个分支，会产生指数级别的计算量，因此不适用于大规模数据的求解。

记忆化搜索的实现方式如下：

function climbStairs(n) {
  const memo = new Array(n + 1).fill(-1);

  function helper(n, memo) {
    if (n === 0 || n === 1) {
      return 1;
    }
    if (memo[n] !== -1) {
      return memo[n];
    }
    memo[n] = helper(n - 1, memo) + helper(n - 2, memo);
    return memo[n];
  }

  return helper(n, memo);
}

这个实现方式使用了记忆化搜索的技巧，将之前计算的结果缓存下来，避免重复计算。时间复杂度为 O(n)，空间复杂度为 O(n)。

总结：

爬楼梯问题可以使用多种方式求解，包括动态规划、递归和记忆化搜索等。其中，动态规划是最优解，可以使用滚动变量来优化空间复杂度，时间复杂度为 O(n)，空间复杂度为 O(1)。递归和记忆化搜索的时间复杂度较高，不适用于大规模数据的求解。

马消部分略

最后

最近太忙了，上班 & 备面 & No Life，多线程真的是累啊（JS：知道我为啥设计成单线程了吧🐶），每每换鱼塘都是一次大考，新鱼塘也不好找 ，打工人好难。总的来说，认定目标，脚踏实地，一个字 “干” 就完事了，加油陌生人。

参考：

juejin.cn/post/720744…