2023.08.25 - 2023.09.16 更新前端面试问题总结（26道题）
获取更多面试相关问题可以访问
github 地址: github.com/pro-collect…
gitee 地址: gitee.com/yanleweb/in…

初级开发者相关问题【共计 5 道题】
- 536.http 请求中 GET 和 POST 有什么区别【热度: 505】【网络】【出题公司: Shopee】
- 537.typeof 与 instanceof 的区别【热度: 906】【JavaScript】【出题公司: Shopee】
- 538.引用类型有哪些，有什么特点【热度: 902】【JavaScript】【出题公司: 快手】
- 540.类型的转换有哪些【热度: 631】【JavaScript】【出题公司: 滴滴】
- 560.splice 和 slice 有什么区别？【热度: 282】【JavaScript】【出题公司: 滴滴】
中级开发者相关问题【共计 13 道题】
- 534.长连接了解多少【热度: 567】【网络】【出题公司: 网易】
- 535.如何实现大文件断点续传【热度: 897】【网络】【出题公司: 网易】
- 539.箭头函数解决了什么问题【热度: 568】【JavaScript】【出题公司: 滴滴】
- 541.副作用是什么概念【热度: 230】【JavaScript】【出题公司: 百度】
- 550.[代码实现] JS 中如何实现大对象深度对比【热度: 906】【代码实现/算法】【出题公司: 百度】
- 551.[代码实现] JS 中数组深对比实现【热度: 985】【代码实现/算法】【出题公司: 网易】
- 553.WeakMap 是什么样的数据结构【热度: 431】【JavaScript】【出题公司: 网易】
- 554.如何理解数据驱动视图，有哪些核心要素？【热度: 943】【web应用场景】【出题公司: 网易】
- 555.vue-cli 都做了哪些事儿，有哪些功能？【热度: 386】【web应用场景】【出题公司: Shopee】
- 557.git reset 作用是啥，有哪些操作？【热度: 275】【工程化】【出题公司: 快手】
- 558.git 中回滚代码有哪些操作？【热度: 237】【工程化】【出题公司: 快手】
- 559.什么是匿名函数？【热度: 275】【JavaScript】【出题公司: 快手】
- 561.weakSet 是什么数据结构，有什么应用场景【热度: 161】【JavaScript】【出题公司: 阿里巴巴】

高级开发者相关问题【共计 5 道题】
- 544.web 网页如何禁止别人移除水印【热度: 540】【web应用场景】【出题公司: 小米】
- 546.如何理解前端工程化？【工程化】【出题公司: 阿里巴巴】
- 548.如果用户反馈说感觉网页很卡顿，这个时候该如何排查问题?【热度: 768】【web应用场景】【出题公司: 腾讯】
- 549.用户访问页面白屏了，原因是啥，如何排查？【热度: 609】【web应用场景】【出题公司: 腾讯】
- 556.为什么现代前端应用需要打包工具进行打包编译？【热度: 1,588】【工程化】【出题公司: 快手】

资深开发者相关问题【共计 3 道题】
- 543.前端基建设计到哪些方面【热度: 782】【工程化】
- 545.如何理解前端架构？【工程化】【出题公司: 阿里巴巴】
- 547.前端架构和前端工程化有什么区别？【工程化】【出题公司: 阿里巴巴】

初级开发者相关问题【共计 5 道题】

536.http 请求中 GET 和 POST 有什么区别【热度: 505】【网络】【出题公司: Shopee】

关键词：GET 和 POST 区别

	GET请求	POST请求
参数传递方式	参数通过URL的查询字符串传递，例如：example.com/api?param1=…	参数通过请求体传递，不会暴露在URL中
参数长度限制	有长度限制，不适合传输大量数据	没有长度限制，适合传输大量数据
URL暴露	参数会被附加在URL中，可以通过浏览器地址栏直接访问	参数不会显示在浏览器地址栏中
缓存	会被浏览器缓存	不会被浏览器缓存
副作用	不具有副作用，只是获取数据	具有副作用，可以对服务器数据进行修改、新增或删除操作
适用场景	获取数据	提交表单数据
	在URL中传递少量参数	传输大量数据
	缓存数据	修改、新增或删除数据
		不希望数据暴露在URL中

537.typeof 与 instanceof 的区别【热度: 906】【JavaScript】【出题公司: Shopee】

关键词：typeof 与 instanceof、typeof 作用、instanceof 作用

在JavaScript中，typeof和instanceof是两个用于检查变量类型的操作符，但它们具有不同的用途和区别。

typeof是一个一元操作符，用于确定给定变量的数据类型。它返回一个字符串，表示变量的数据类型。typeof可以用于任何变量，包括基本数据类型（如字符串、数字、布尔值）和引用数据类型（如对象、数组、函数等）。

例如：

typeof 42; // "number"
typeof "Hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof [1, 2, 3]; // "object"
typeof { name: "John", age: 30 }; // "object"
typeof function() {
} // "function"

注意，typeof null返回的是"object"，这是一个历史遗留问题。

instanceof是一个二元操作符，用于检查对象是否属于指定的构造函数的实例。它返回一个布尔值，表示对象是否是特定构造函数的实例或其子类的实例。

例如：

var arr = [1, 2, 3];
arr instanceof Array; // true

var obj = { name: "John", age: 30 };
obj instanceof Object; // true

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

var john = new Person("John");
john instanceof Person; // true

typeof用于确定变量的数据类型，而instanceof用于确定对象是否为某个构造函数的实例。虽然typeof可以检查基本数据类型和引用数据类型，但无法检查对象的具体类型。而instanceof可以在对象的继承链上进行检查，可以明确对象是否为某个类的实例或其子类的实例。

538.引用类型有哪些，有什么特点【热度: 902】【JavaScript】【出题公司: 快手】

关键词：js引用类型

在JavaScript中，引用类型是指非基本数据类型，它们是由对象、数组、函数等复杂数据结构组成的。

常见的引用类型包括：

对象（Object）：对象是JavaScript中最基本的引用类型，它可以用来存储键值对，也可以通过原型链实现继承。
数组（Array）：数组是一种有序的集合，可以存储任意类型的数据，它的长度是动态的，可以随时添加或删除元素。
函数（Function）：函数是一种可执行的对象，可以封装一段可重复使用的代码。函数可以接收参数并返回值。

引用类型的特点包括：

引用类型的值是可变的：引用类型的值是存储在堆内存中的，当我们修改一个引用类型的值时，实际上是修改了它在内存中的地址，而不是修改了该值本身。
引用类型值的比较是引用的比较：当使用"=="或"==="运算符比较两个引用类型的值时，它们会进行引用的比较，即判断它们是否指向同一个内存地址。只有当两个引用指向同一个对象时，它们才被认为是相等的。
引用类型可以有自己的属性和方法：引用类型的值可以拥有自己的属性和方法。例如，数组对象有长度属性和一些常用的数组方法（例如push、pop、sort等），而函数对象有call、apply等方法。
引用类型可以通过原型链实现继承：通过原型链，引用类型可以继承父类型的属性和方法。

基本类型（如数字、字符串、布尔值）在JavaScript中是按值传递的，而引用类型是按引用传递的。

这意味着当将一个引用类型的值赋给另一个变量时，实际上是将内存地址复制给了新的变量，两个变量引用的是同一对象。而基本类型的值赋给另一个变量时，会创建一个新的值并赋给新的变量。

540.类型的转换有哪些【热度: 631】【JavaScript】【出题公司: 滴滴】

关键词：js类型转换

可以将上述类型转换分为以下几类：

显式转换：显式转换是通过特定的函数或操作符来实现的，开发者明确地指定了类型转换的规则和目标类型。例如使用String()、Number()、Boolean()等函数进行类型转。
隐式转换：隐式转换是在特定的运算或操作中自动发生的，不需要开发者明确指定类型转换的规则和目标类型。例如在字符串拼接时，JavaScript会自动将其他类型转换为字符串类型；在使用比较操作符（如==、>、< ）进行比较时，JavaScript会自动进行类型转换以满足比较的要求。或者使用+、-、*、/等操作符进行数值转换和计算。
强制转换：强制转换是指将一个类型强制转换为另一个类型，无论是显式转换还是隐式转换，都是通过强制转换来实现的。例如使用parseInt()、parseFloat()等函数将字符串转换为数字类型；使用Boolean() 函数将其他类型转换为布尔类型。

隐式转换在某些情况下可能会导致不可预测的结果，因此在开发中应尽量避免依赖隐式转换，而是通过显式转换来确保类型转换的准确性。

560.splice 和 slice 有什么区别？【热度: 282】【JavaScript】【出题公司: 滴滴】

关键词：Array 方法 splice、Array 方法 slice、splice 和 slice 区别

splice() 和 slice() 是 JavaScript 中用于操作数组的两个方法，它们的功能和用法有一些区别。

splice() 方法：
- 功能：从数组中添加、删除或替换元素。
- 用法：array.splice(start, deleteCount, item1, item2, ...)。
- 参数：
  - start：表示修改的起始位置的下标。
  - deleteCount：可选参数，表示要删除的元素数量。
  - item1, item2, ...：可选参数，表示要添加到数组的元素。
- 返回值：返回一个被删除元素组成的数组。
slice() 方法：
- 功能：从数组中提取指定范围内的元素，返回一个新的数组。
- 用法：array.slice(start, end)。
- 参数：
  - start：可选参数，表示提取的起始位置的下标。
  - end：可选参数，表示提取的结束位置的下标（不包含该位置的元素）。
- 返回值：返回一个新的数组，包含提取出的元素。

主要区别：

splice() 方法会对原数组进行修改，而 slice() 方法不会修改原数组，而是返回一个新的数组。
splice() 方法可以在指定位置添加、删除或替换元素，而 slice() 方法只能提取指定范围内的元素。
splice() 方法返回被删除的元素组成的数组，而 slice() 方法返回一个新的数组。

总结：

如果需要修改原数组，并且需要添加、删除或替换元素，可以使用 splice() 方法。
如果只是需要提取指定范围内的元素，并且不想修改原数组，可以使用 slice() 方法。

中级开发者相关问题【共计 13 道题】

534.长连接了解多少【热度: 567】【网络】【出题公司: 网易】

关键词：http 长连接过程

HTTP/1.1 的长连接（Keep-Alive）是一种机制，使客户端和服务器在同一连接上可以发送和接收多个 HTTP 请求和响应。它的原理如下：

客户端发送请求：当客户端发起一个 HTTP 请求时，在请求头中会包含一个 Connection 字段，标识这个连接是否需要保持持久连接。如果客户端希望保持连接，它会将该字段设置为 keep-alive。
服务器响应：当服务器收到客户端的请求后，如果它支持长连接，它会在响应头中添加一个 Connection 字段，也设置为 keep-alive，表示服务器同意保持连接。
客户端发送下一个请求：在客户端收到服务器的响应后，如果它也同意保持连接，客户端可以继续发送下一个请求。这个请求会被发送到同一连接上，而不是创建一个新的连接。
保持连接或关闭连接：客户端和服务器可以在多个请求和响应之间重复步骤 3。当一方决定不再继续发送请求时，它可以在请求头或响应头中将 Connection 字段设置为 close，表示关闭连接。

长连接的原理是通过减少连接的建立和关闭次数，来提高性能和效率。它可以减少网络延迟和连接建立的开销，从而加快请求和响应的传输速度。同时，长连接还可以减少服务器的负载，因为服务器不需要频繁地处理连接的建立和关闭。

需要注意的是，尽管 HTTP/1.1 支持长连接，但它并不是默认启用的，需要在请求头中明确指定 Connection: keep-alive 才能使用长连接。此外，服务器也可以在响应头中明确指定长连接。如果客户端和服务器都支持长连接，并在请求和响应中都明确设置了长连接，那么连接就会被保持，直到其中一方关闭连接或指定关闭。

535.如何实现大文件断点续传【热度: 897】【网络】【出题公司: 网易】

关键词：文件上传断点续传

前端实现断点续传一般涉及到以下几个步骤：

分片上传：将大文件分割成多个小的文件块。可以使用 JavaScript 的 File 对象的 slice 方法来实现分片。
上传文件块：使用 XMLHttpRequest 或 Fetch API 发送每个文件块到服务器。可以将每个文件块的索引、总文件大小等信息一同发送到服务器。
保存上传进度：在每个文件块上传成功后，可以将已上传的块数、已上传的字节数等信息保存到本地，以便在继续上传时恢复进度。
续传：在继续上传时，先从本地恢复已上传的进度信息。然后根据已上传的字节数，计算出下一个文件块的起始位置，然后继续上传剩余的文件块。
合并文件块：在所有文件块都上传完成后，服务器可以将这些文件块合并为完整的文件。可以通过将所有文件块的内容拼接在一起或使用服务器端的工具进行合并。

需要注意的是，断点续传的实现还需要服务器端的支持。服务器端需要接收和处理分片上传的请求，并保存和管理已上传的文件块，以便在续传时恢复文件的完整性。因此，前端实现断点续传需要和后端进行协作。

539.箭头函数解决了什么问题【热度: 568】【JavaScript】【出题公司: 滴滴】

关键词：箭头函数、箭头函数特点

箭头函数是ES6中引入的一种新的函数语法，它主要解决了以下几个问题：

简化函数表达式：箭头函数提供了一种更简洁的函数定义方式，可以用更短的语法来定义函数，减少了冗余的代码。例如，使用箭头函数可以将一个函数表达式 function(x) { return x * x; } 简化为 (x) => x * x;。
简化this的指向：在传统的函数定义中，函数内部的this指向的是调用该函数的对象。而在箭头函数中，this的指向是在定义函数时确定的，指向的是箭头函数所在的上下文。这解决了传统函数中this 指向容易混淆的问题，使得代码更加易读和简洁。
消除了arguments对象：在箭头函数中，不存在arguments对象，这是因为箭头函数没有自己的arguments，它继承了所在上下文的arguments。这样可以避免在传统函数中使用arguments 对象时出现的一些问题，如无法使用arguments对象的一些方法，以及与命名参数的冲突等。
适用于回调函数：箭头函数的简洁性和对this指向的处理使其特别适用于作为回调函数使用。在传统的函数定义中，由于this指向的问题，经常需要使用额外的变量来绑定this，而箭头函数可以直接使用外层作用域的this ，减少了代码的复杂性。

箭头函数也有一些限制和注意事项，例如箭头函数没有自己的arguments、super和new.target，不能作为构造函数使用。

541.副作用是什么概念【热度: 230】【JavaScript】【出题公司: 百度】

关键词：js副作用

在 JavaScript 中，副作用（side effect）是指函数或表达式在执行过程中对外部环境产生的影响，而不仅仅是返回一个值。副作用可能包括但不限于对全局变量、参数、数据结构、文件系统、网络请求等进行修改。

副作用可以是有意为之，也可以是无意之间发生的。在函数式编程中，减少副作用是一种被推崇的编程风格，因为副作用使得代码的行为更难以跟踪和理解，容易引发不可预见的 bug。尽可能减少副作用有助于代码更加可靠、可测试和易于维护。

以下是一些常见的 JavaScript 中可能产生副作用的操作：

修改全局变量：直接对全局变量进行赋值或修改会导致副作用。
修改函数参数：修改传入函数的参数值也会引起副作用。
I/O 操作：与文件系统、网络请求等进行交互时，可能会对外部环境产生副作用。
修改数据结构：对数组、对象等数据结构进行添加、删除或修改操作会改变它们的状态，也属于副作用。

在函数式编程中，函数应该尽量避免产生副作用，而是通过纯函数的方式，根据输入返回一个确定的输出，不修改外部环境的状态。这样可以提高代码的可测试性、可复用性和可维护性。

550.[代码实现] JS 中如何实现大对象深度对比【热度: 906】【代码实现/算法】【出题公司: 百度】

关键词：JS对象对比

在JavaScript中，可以使用递归的方式实现大对象的深度对比。以下是一个示例函数，用于比较两个大对象的每个属性是否相等：

function deepEqual(obj1, obj2) {
  // 检查类型是否相同
  if (typeof obj1 !== typeof obj2) {
    return false;
  }

  // 检查是否是对象或数组
  if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {
    // 检查对象或数组长度是否相同
    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
      return false;
    }

    for (let key in obj1) {
      // 递归比较每个属性的值
      if (!deepEqual(obj1[key], obj2[key])) {
        return false;
      }
    }

    return true;
  }

  // 比较基本类型的值
  return obj1 === obj2;
}

使用示例：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

const obj2 = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

const obj3 = {
  name: 'Jane',
  age: 25,
  address: {
    street: '456 Park Ave',
    city: 'Los Angeles'
  }
};

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

在上述示例中，deepEqual函数会递归比较两个对象的每个属性的值，包括嵌套的对象或数组。如果两个对象是相等的，则返回true，否则返回false。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。

551.[代码实现] JS 中数组深对比实现【热度: 985】【代码实现/算法】【出题公司: 网易】

关键词：JS数组对比

在JavaScript中，可以使用递归的方式实现数组的深度对比。以下是一个示例函数，用于比较两个数组是否相等：

// 判断对象是否相同
function deepEqual(obj1, obj2) {
  // 检查类型是否相同
  if (typeof obj1 !== typeof obj2) {
    return false;
  }

  // 检查是否是对象或数组
  if (typeof obj1 === 'object' && obj1 !== null && obj2 !== null) {
    // 检查对象或数组长度是否相同
    if (Object.keys(obj1).length !== Object.keys(obj2).length) {
      return false;
    }

    for (let key in obj1) {
      // 递归比较每个属性的值
      if (!deepEqual(obj1[key], obj2[key])) {
        return false;
      }
    }

    return true;
  }

  // 比较基本类型的值
  return obj1 === obj2;
}

function deepArrayEqual(arr1, arr2) {
  // 检查数组长度是否相同
  if (arr1.length !== arr2.length) {
    return false;
  }

  for (let i = 0; i < arr1.length; i++) {
    const value1 = arr1[i];
    const value2 = arr2[i];

    // 递归比较每个元素的值
    if (Array.isArray(value1) && Array.isArray(value2)) {
      if (!deepArrayEqual(value1, value2)) {
        return false;
      }
    } else if (typeof value1 === 'object' && typeof value2 === 'object') {
      if (!deepEqual(value1, value2)) {
        return false;
      }
    } else {
      // 比较基本类型的值
      if (value1 !== value2) {
        return false;
      }
    }
  }

  return true;
}

使用示例：

const arr1 = [1, [2, 3], { name: 'John' }];
const arr2 = [1, [2, 3], { name: 'John' }];
const arr3 = [1, [2, 3], { name: 'Jane' }];

console.log(deepArrayEqual(arr1, arr2)); // true
console.log(deepArrayEqual(arr1, arr3)); // false

在上述示例中，deepArrayEqual函数会递归比较两个数组的每个元素的值，包括嵌套的数组和对象。如果两个数组是相等的，则返回true，否则返回false。注意，该函数不会检查函数、正则表达式、日期等复杂类型的值。

553.WeakMap 是什么样的数据结构【热度: 431】【JavaScript】【出题公司: 网易】

关键词：WeakMap应用、WeakMap数据、WeakMap api

基本概念

WeakMap 是一种键值对存储的数据结构，类似于 Map。它的特点是键必须是对象，值可以是任意类型的数据。

WeakMap 内部使用了引用计数的方式来判断键是否存活，当键不再被引用时，垃圾回收机制会自动清除对应的键值对。这意味着如果没有其他地方引用该键，WeakMap 中的键值对会被自动清理，并释放内存。

与 Map 不同的是，WeakMap 的键是弱引用，不会阻止垃圾回收。这意味着在 WeakMap 中，键不能被枚举、迭代或获取键的数量。同时，WeakMap 也没有提供像 Map 中的 size 属性和 clear 方法。

因为键是弱引用，所以 WeakMap 也不能使用普通对象作为键，只能使用具有引用类型的对象作为键。这是为了避免内存泄漏问题，因为如果键是普通对象，即使它没有被其他地方引用，也无法被垃圾回收。

因为 WeakMap 的键是弱引用并且没有提供常用的方法，所以它的使用场景相对有限，主要用于存储对象的私有数据或附加元数据。

有哪些 api

WeakMap 提供了以下的 API：

set(key, value): 向 WeakMap 中设置键值对，键必须是对象。
get(key): 获取指定键对应的值。
has(key): 判断指定键是否存在于 WeakMap 中。
delete(key): 删除指定键对应的键值对。
注意：WeakMap 没有提供 size 属性和 clear 方法，也不能直接迭代或枚举键。

需要注意的是，由于 WeakMap 的键是弱引用，只能使用对象作为键，同时也意味着无法通过值来查找对应的键。所以 WeakMap 适用于需要存储对象的私有数据或附加元数据的场景，而不适合用于需要根据值来查找键的情况。

554.如何理解数据驱动视图，有哪些核心要素？【热度: 943】【web应用场景】【出题公司: 网易】

关键词：理解数据驱动视图

数据驱动视图是指将数据作为主要驱动力，通过对数据的处理和分析，动态地更新和呈现视图的过程。它强调将数据与视图进行解耦，使得视图的呈现可以根据数据的变化自动更新，实现更灵活、可扩展和可维护的视图。

数据驱动视图的核心要素包括：

数据源：数据驱动视图需要有一个或多个数据源，这些数据源可以是来自数据库、API接口、文件等不同的来源。
数据处理：对数据进行处理和分析的过程。这包括对数据进行清洗、过滤、转换、计算等操作，以便于后续的视图呈现。
视图模板：视图模板定义了视图的结构和样式，并指定了如何将数据展示在视图中。视图模板通常使用一种模板语言，可以根据数据的变化自动生成最终的视图。
视图更新机制：视图更新机制是指如何根据数据的变化自动更新视图。这可以基于事件驱动的方式，当数据发生变化时主动更新视图；也可以采用响应式编程的方式，通过观察数据的变化来自动更新视图。
用户交互：数据驱动视图通常与用户进行交互，用户可以通过界面操作改变数据，从而触发视图的更新。用户交互可以通过表单、按钮、滑块等不同的方式实现。

通过将数据与视图解耦，数据驱动视图可以实现更灵活、可扩展和可维护的视图呈现方式。同时，它也可以提高开发效率，减少开发人员对视图的手动管理。

555.vue-cli 都做了哪些事儿，有哪些功能？【热度: 386】【web应用场景】【出题公司: Shopee】

关键词：vue-cli 作用、vue-cli 功能

Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建、开发和构建 Vue.js 项目。它提供了一系列的功能来简化 Vue.js 项目的开发和部署流程，包括：

项目脚手架：Vue CLI 可以通过简单的命令行交互方式快速生成一个新的 Vue.js 项目的基础结构，包括目录结构、配置文件、示例代码等。
开发服务器：Vue CLI 提供了一个开发服务器，用于在本地运行项目，在开发过程中实时预览和调试应用程序。它支持热模块替换（HMR），可以实时更新页面内容，提高开发效率。
集成构建工具：Vue CLI 集成了 Webpack，可以自动配置和管理项目的构建过程。它通过配置文件可以进行定制，例如设置打包输出路径、优化代码、压缩资源等。
插件系统：Vue CLI 提供了丰富的插件系统，可以通过安装插件来扩展项目的功能。这些插件可以帮助处理样式、路由、状态管理、国际化等方面的需求，提供更多的开发工具和功能支持。
测试集成：Vue CLI 集成了测试工具，可以快速配置和运行单元测试和端到端测试。它支持多种测试框架，如 Jest、Mocha、Cypress 等，可以帮助开发人员编写和运行各种类型的测试。
项目部署：Vue CLI 提供了命令行接口，可以方便地将项目部署到不同的环境，如开发环境、测试环境和生产环境。它支持生成优化过的静态文件、自动压缩和缓存等功能。

提供了一整套开发和构建 Vue.js 项目的功能和工具链，可以大大简化和加速 Vue.js 项目的开发过程。

557.git reset 作用是啥，有哪些操作？【热度: 275】【工程化】【出题公司: 快手】

关键词：git reset 作用、git reset 操作

git reset 是一个用于撤销提交的命令，可以将当前分支指向某个特定的提交，同时可以选择是否修改工作区和暂存区。

常见的 git reset 操作有以下三种：

git reset --soft ：将当前分支的 HEAD 指向指定的 commit，并保留之后的修改。这种方式不改变工作区和暂存区的内容，可以用于撤销之前的提交，重新修改后重新提交。
git reset --mixed （默认操作）：将当前分支的 HEAD 指向指定的 commit，并取消之后的提交，但保留修改。这种方式会重置暂存区的内容，但不改变工作区的内容，可以用于撤销之前的提交，重新修改后重新提交。
git reset --hard ：将当前分支的 HEAD 指向指定的 commit，并丢弃之后的修改。这种方式会重置工作区和暂存区的内容，慎用，会永久丢失未提交的修改。

除了上述操作之外，还可以搭配使用 git reset 的其他选项和参数。其中，可以是一个提交的哈希值、分支名或者标签名，用于指定要回退到的提交。

558.git 中回滚代码有哪些操作？【热度: 237】【工程化】【出题公司: 快手】

关键词：git 回滚代码、git reset 操作、git revert 操作

在 Git 中，可以使用以下几种操作来回滚代码：

git revert：使用 git revert 命令可以创建一个新的提交来撤销之前的提交。它会创建一个新的提交，恢复之前的更改，从而回滚代码。这种方式比较安全，不会改变历史提交记录。
git reset --soft：使用 git reset --soft 命令可以将当前分支的 HEAD 指向指定的提交，同时保留修改。这将撤销指定提交之后的所有提交，但是保留更改的文件在暂存区中，可以用于回滚代码并重新提交。
git reset --mixed（默认操作）：使用 git reset --mixed 命令可以将当前分支的 HEAD 指向指定的提交，同时取消之后的提交，但保留修改。这将撤销指定提交之后的所有提交，并重置暂存区的内容，但是不改变工作区的内容，可以用于回滚代码并重新修改后重新提交。
git reset --hard：使用 git reset --hard 命令可以将当前分支的 HEAD 指向指定的提交，并丢弃之后的修改。这将撤销指定提交之后的所有提交，并重置工作区和暂存区的内容，慎用，会永久丢失未提交的修改。

需要注意的是，git revert 会保留之前提交的历史记录，而 git reset 则会直接修改历史提交记录。因此，在多人协作或者公共仓库中，建议使用 git revert 来回滚代码，以避免对他人代码的影响。在个人项目或者正在开发中的分支中，可以使用 git reset 更灵活地回滚代码。

559.什么是匿名函数？【热度: 275】【JavaScript】【出题公司: 快手】

关键词：匿名函数

在JavaScript中，匿名函数是一种没有名称的函数。它是一种可以直接被定义和使用的函数，而不需要通过函数名进行引用。匿名函数通常用于需要临时定义一个函数并在某个地方立即调用它的情况下使用。

匿名函数可以使用两种方式进行定义：函数表达式和箭头函数。

函数表达式：
```
var func = function() {
  // 函数的代码块
};
```
在上述代码中，我们定义了一个没有名称的函数，并将其赋值给了变量func。这个函数可以通过func变量进行调用。
箭头函数：
```
var func = () => {
  // 函数的代码块
};
```
箭头函数是ES6引入的一种简化的函数表达式。它使用箭头（=>）来定义函数，并且没有自己的this值，继承了外层作用域的this值。

匿名函数常用于以下场景：

作为回调函数：匿名函数可以作为参数传递给其他函数，并在需要的时候被调用，例如事件处理函数、定时器回调等。
自执行函数：匿名函数可以在定义后立即调用，避免在全局作用域中定义过多的变量。
模块化开发：匿名函数可以用于封装私有变量和方法，实现模块化的开发和避免变量名冲突。

需要注意的是，由于匿名函数没有名字，所以在调试和异常追踪时可能会比较困难，因此在开发中建议给函数命名，以提高代码的可读性和可维护性。

追问: function 是匿名函数吗?

在JavaScript中，function关键字用于定义函数，而不是匿名函数。function关键字后面可以跟一个函数名，用于定义具名函数，也可以省略函数名，定义匿名函数。

具名函数示例：

function add(a, b) {
  return a + b;
}

上述代码中的add函数是一个具名函数，可以通过函数名add进行引用和调用。

匿名函数示例：

var sum = function(a, b) {
  return a + b;
};

上述代码中的sum是一个匿名函数，它没有名称，但可以通过变量sum进行引用和调用。

可以看到，具名函数和匿名函数的区别在于函数名的存在与否。具名函数可以在函数内部和外部通过函数名进行引用和调用，而匿名函数则需要通过赋值给变量或作为参数传递给其他函数来引用和调用。

需要注意的是，在使用函数表达式定义匿名函数时，函数名是可选的，但在使用函数声明定义具名函数时，函数名是必需的，且函数声明的语法要求将函数名和函数体写在一起。

561.weakSet 是什么数据结构，有什么应用场景【热度: 161】【JavaScript】【出题公司: 阿里巴巴】

关键词：weakSet 数据、weakSet 结构、weakSet 作用

WeakSet 是一种特殊的集合数据结构，它只能存储对象引用，并且这些对象是弱引用。WeakSet 中的对象是被弱引用的，意味着如果没有其他引用指向这个对象，垃圾回收机制就会自动将其回收，即使该对象存在于 WeakSet 中。与 Set 不同，WeakSet 不支持迭代和遍历。

API

WeakSet 提供了以下几个常用的 API：

add(value)：向 WeakSet 中添加一个值。
delete(value)：从 WeakSet 中删除指定的值。
has(value)：判断 WeakSet 中是否存在指定的值，返回一个布尔值。

需要注意的是，WeakSet 不支持迭代和遍历操作，所以没有类似于 Set 的 keys()、values()、entries() 或 forEach() 等方法。同时，WeakSet 也没有类似于 Set 的 size 属性来获取 WeakSet 中的元素个数。

另外，WeakSet 是一个构造函数，可以使用 new WeakSet() 来创建一个空的 WeakSet。

使用场景

WeakSet 的主要应用场景是在需要存储对象集合，并且不希望这些对象的存在阻止它们被垃圾回收时使用。一些常见的使用场景包括：

对象存储：WeakSet 可以用来存储一组对象，并且不会阻止这些对象被垃圾回收。这在需要跟踪一组对象，但又不希望这些对象阻止被释放时很有用。
数据缓存：由于 WeakSet 中的对象是弱引用的，当对象从其他地方被删除时，它们会自动从 WeakSet 中移除。这在需要缓存一些对象，但又希望能够自动清理不再需要的对象时很有用。

需要注意的是，由于 WeakSet 中的对象是弱引用的，所以不能通过遍历或迭代来访问 WeakSet 中的对象。同时，WeakSet 也不提供像 Set 那样的方法，无法判断对象是否存在于 WeakSet 中。

高级开发者相关问题【共计 5 道题】

544.web 网页如何禁止别人移除水印【热度: 540】【web应用场景】【出题公司: 小米】

关键词：前端防止移除水印

关于加水印的问题，可以看这篇文档： github.com/pro-collect…

关于如何防止移除水印：

可以通过监听 DOM 的变化来检测是否有人删除水印，可以使用 MutationObserver API。 MutationObserver 可以观察 DOM 树的变化，并在变化发生时触发回调函数。你可以在回调函数中检查是否有水印被删除，然后采取相应的措施。

以下是一个简单的示例代码，演示了如何使用 MutationObserver 监听 DOM 变化：

// 目标节点
const targetNode = document.body;

// 创建 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
  for (let mutation of mutationsList) {
    // 检查是否有子节点被删除
    if (mutation.removedNodes.length > 0) {
      // 在此处判断是否有水印被删除
      // 如果水印被删除，则重新插入水印的 DOM 元素到目标节点
      // 例如： targetNode.appendChild(watermarkElement);
    }
  }
});

// 配置 MutationObserver
const config = { childList: true, subtree: true };

// 开始观察目标节点
observer.observe(targetNode, config);

在上述代码中，我们创建了一个 MutationObserver 实例，并通过 observe 方法将其绑定到目标节点上。在回调函数中，我们使用 mutation.removedNodes 来检查是否有子节点被删除，如果发现水印被删除，则可以采取相应的措施来重新插入水印的 DOM 元素。

需要注意的是，MutationObserver API 是现代浏览器提供的功能，在老旧的浏览器中可能不支持。因此，在实际使用时，你需要对浏览器的兼容性进行测试和处理。

另外，如果水印被删除后立即加回去，你可以在检测到水印被删除时，立即执行插入水印的代码，以确保水印能够迅速地重新出现在页面上。

546.如何理解前端工程化？【工程化】【出题公司: 阿里巴巴】

前端工程化是指将前端开发过程中的各种工具、技术和流程进行规范化和自动化，以提高前端开发效率、代码质量和团队协作能力的一种方法。前端工程化主要涵盖以下几个方面：

代码管理：使用版本控制系统（如Git）对前端项目进行代码管理，实现代码的版本控制、协作开发和代码回滚等功能。
代码规范：制定和遵循统一的前端代码规范，包括缩进、命名、注释等，以提高代码的可读性和可维护性。
模块化开发：使用模块化的开发方式，将前端代码拆分为独立的模块，以便于复用和维护。
构建工具：使用构建工具（如Webpack、Gulp）对前端代码进行构建、打包、压缩和优化等处理，提高开发效率和应用性能。
自动化测试：编写自动化测试用例，使用测试工具（如Jest、Mocha）进行自动化测试，以确保代码质量和功能的稳定性。
持续集成和部署：使用持续集成工具（如Jenkins、Travis CI）将代码自动构建、测试和部署到服务器，加快代码交付速度和减少人工操作。
性能优化：使用性能优化工具（如Webpack、Lighthouse）来分析和改进前端应用程序的性能，包括文件加载、资源压缩、缓存策略等方面。
文档和知识管理：编写和维护开发文档、API 文档以及团队知识库，方便团队成员之间的沟通和知识分享。

通过前端工程化的实践，可以减少重复劳动、提高代码质量、加速开发流程和降低维护成本，从而更好地满足项目需求和提升用户体验。

548.如果用户反馈说感觉网页很卡顿，这个时候该如何排查问题?【热度: 768】【web应用场景】【出题公司: 腾讯】

关键词：网页卡顿、网页卡顿处理办法

排查网页卡顿问题时，可以按照以下步骤进行处理：

验证用户反馈：首先，确认用户反馈的卡顿问题是否普遍存在，还是个别用户的特殊情况。可以与其他用户进行沟通或观察其他设备上的表现。
检查网络连接：检查用户的网络连接是否稳定。卡顿问题可能由于网络延迟或不稳定导致。可以要求用户进行网络速度测试，或者与用户确认网络连接是否正常。
检查服务器性能：确认服务器是否能够处理用户的请求。可以检查服务器的负载情况、处理请求的时间以及资源使用情况。如果服务器负载过高，可能导致网页卡顿。
检查前端代码：检查网页的前端代码是否存在问题。主要看是否有内存泄露、long task 等情况；
关于内存泄露和 long task 可以看下面两个文档：

优化网页性能：对于前端代码存在性能问题的情况，可以尝试优化网页性能。例如，压缩和合并CSS和JavaScript文件、减少网络请求次数、使用缓存等方法来提高页面加载速度。
可以参考下面文档文档：

从哪些方面可以对网站性能优化？

做好性能监控：持续监测网页的性能，并定期更新网页的代码和设计，以提升用户体验。

[性能] 衡量页面性能的指标有哪些？

549.用户访问页面白屏了，原因是啥，如何排查？【热度: 609】【web应用场景】【出题公司: 腾讯】

关键词：白屏处理办法

用户访问页面白屏可能由多种原因引起，以下是一些可能的原因和排查步骤：

网络问题：用户的网络连接可能存在问题，无法正确加载页面内容。可以要求用户检查网络连接，或者自己尝试在不同网络环境下测试页面的加载情况。
服务端问题：服务器未正确响应用户请求，导致页面无法加载。可以检查服务器的状态、日志和错误信息，查看是否有任何异常。同时，可以确认服务器上的相关服务是否正常运行。

前端代码问题：页面的前端代码可能存在错误或异常，导致页面无法正常渲染。可以检查浏览器的开发者工具，查看是否有任何错误信息或警告。同时，可以尝试将页面的JavaScript、CSS和HTML代码分离出来进行单独测试，以确定具体的问题所在。

浏览器兼容性问题：不同浏览器对于某些代码的支持可能不一致，导致页面在某些浏览器中无法正常加载。可以尝试在不同浏览器中测试页面的加载情况，同时使用浏览器的开发者工具检查是否有任何错误或警告。
第三方资源加载问题：页面可能依赖于某些第三方资源（如外部脚本、样式表等），如果这些资源无法加载，可能导致页面白屏。可以检查网络请求是否正常，是否有任何资源加载失败的情况。
缓存问题：浏览器可能在缓存中保存了旧版本的页面或资源，导致新版本无法加载。可以尝试清除浏览器缓存，或者通过添加随机参数或修改文件名的方式强制浏览器重新加载页面和资源。
其他可能原因：页面白屏问题还可能由于安全策略（如CSP、CORS等）限制、跨域问题、DNS解析问题等引起。可以使用浏览器的开发者工具检查网络请求和错误信息，查找可能的问题。

在排查问题时，可以根据具体情况逐步进行排查，并结合浏览器的开发者工具、服务器日志等工具来辅助定位问题所在，并且可以与用户进行进一步沟通以获取更多信息。如果问题无法解决，可以寻求专业的技术支持或咨询。

556.为什么现代前端应用需要打包工具进行打包编译？【热度: 1,588】【工程化】【出题公司: 快手】

关键词：打包构建必要性

现代前端应用需要打包工具进行打包编译的主要原因有以下几点：

模块化管理：现代前端应用通常采用模块化的开发方式，将代码划分为多个模块，每个模块具有独立的功能和依赖关系。打包工具可以将这些模块进行分析，将它们打包成一个或多个静态文件，方便管理和维护。
解决浏览器兼容性问题：不同的浏览器对于 JavaScript 和 CSS 的支持程度不同，而且随着新特性的不断出现，旧版浏览器可能无法完全支持。打包工具可以通过转译、压缩和兼容性处理等手段，将当前前端代码转化为浏览器可识别和运行的代码，解决兼容性问题。
静态资源处理和优化：现代前端应用涉及大量的静态资源，如图片、字体等。打包工具可以对这些资源进行处理和优化，如图片压缩、字体文件打包等，以减小资源文件的体积，提高页面的加载速度和性能。
代码分割和按需加载：打包工具可以将应用程序拆分成多个小块，实现代码分割和按需加载。这样可以实现懒加载，只在需要时加载特定的代码块，提高页面的加载速度。
开发环境支持：打包工具通常提供开发服务器和热模块替换（HMR）等功能，方便开发人员进行开发和调试。开发服务器可以实时预览代码变化，HMR 可以在修改代码后只替换修改的部分，而不是整个页面刷新，提高开发效率。
提升性能：打包工具可以通过代码优化、压缩和混淆等技术手段，减小文件体积，提升应用程序的加载速度和执行效率。
支持多种前端技术：现代前端应用通常使用多种前端技术和语言，如JavaScript、CSS、TypeScript、Sass等。打包工具可以集成这些技术，并提供相应的编译、转译和处理功能，使开发人员能够更轻松地使用这些技术。
自动化工作流程：打包工具可以配合其他构建工具和自动化任务运行器，如Webpack配合Grunt或Gulp，实现自动化的构建和部署流程。这可以减少手动操作，提高开发效率和代码质量。
第三方库管理：现代前端应用通常使用大量的第三方库和框架，这些库可能包含多个文件和依赖关系。打包工具可以自动管理这些库的依赖关系，并将它们打包为单个文件，减少网络请求和提高代码的可维护性。
高度可定制化：打包工具通常提供丰富的插件和配置选项，允许开发人员根据项目需求进行定制。可以灵活配置打包过程中的各种处理和优化方式，以满足项目的具体需求。

总结 - 现代前端应用需要打包工具进行打包编译的原因是为了：实现模块化管理、解决兼容性问题、静态资源处理和优化、代码分割和按需加载、开发环境支持、性能提升、多技术支持、自动化工作流程、第三方库管理和可定制化等方面的需求。

资深开发者相关问题【共计 3 道题】

543.前端基建设计到哪些方面【热度: 782】【工程化】

关键词：前端工程化建设、前端基建

前端基建是指在前端开发过程中，为提高开发效率、代码质量和团队协作而构建的一些基础设施和工具。下面是前端基建可以做的一些事情：

脚手架工具

开发和维护一个通用的脚手架工具，可以帮助团队快速初始化项目结构、配置构建工具、集成常用的开发依赖等。

组件库

开发和维护一个内部的组件库，包含常用的UI组件、业务组件等，提供给团队成员复用，减少重复开发的工作量。

构建工具和打包工具

搭建和维护一套完善的构建和打包工具链，包括使用Webpack、Parcel等工具进行代码的压缩、合并、打包等工具，优化前端资源加载和性能。

自动化测试工具

引入自动化测试工具，如Jest、Mocha等，编写和维护测试用例，进行单元测试、集成测试、UI测试等，提高代码质量和可靠性。

文档工具

使用工具如JSDoc、Swagger等，生成项目的API文档、接口文档等，方便团队成员查阅和维护。

Git工作流

制定和规范团队的Git工作流程，使用版本控制工具管理代码，方便团队协作和代码回退。

性能监控和优化

引入性能监控工具，如Lighthouse、Web Vitals等，对项目进行性能分析，优化网页加载速度、响应时间等。

工程化规范

制定并推广团队的代码规范、目录结构规范等，提高代码的可读性、可维护性和可扩展性。

持续集成和部署

搭建持续集成和部署系统，如Jenkins、Travis CI等，实现代码的自动构建、测试和部署，提高开发效率和代码质量。

项目文档和知识库

建立一个内部的项目文档和知识库，记录项目的技术细节、开发经验、常见问题等，方便团队成员查阅和学习。

代码质量工具

引入代码质量工具，如ESLint、Prettier等，对代码进行静态分析和格式化，提高代码的一致性和可读性。

国际化支持

为项目添加国际化支持，可以通过引入国际化库，如i18next、vue-i18n等，实现多语言的切换和管理。

错误监控和日志收集

引入错误监控工具，如Sentry、Bugsnag等，实时监控前端错误，并收集错误日志，方便进行问题排查和修复。

前端性能优化工具

使用工具如WebPageTest、Chrome DevTools等，对项目进行性能分析和优化，提高页面加载速度、响应时间等。

缓存管理

考虑合理利用浏览器缓存和服务端缓存，减少网络请求，提升用户访问速度和体验。

移动端适配

针对移动端设备，采用响应式设计或使用CSS媒体查询等技术，实现移动端适配，保证页面在不同尺寸的设备上有良好的显示效果。

安全防护

对项目进行安全审计，使用安全防护工具，如CSP（Content Security Policy）、XSS过滤等，保护网站免受常见的安全攻击。

性能优化指标监控

监控和分析关键的性能指标，如页面加载时间、首次渲染时间、交互响应时间等，以便及时发现和解决性能问题。

前端日志分析

使用日志分析工具，如ELK（Elasticsearch、Logstash、Kibana）等，对前端日志进行收集和分析，了解用户行为和页面异常情况。

跨平台开发

考虑使用跨平台开发框架，如React Native、Flutter等，实现一套代码在多个平台上复用，提高开发效率。

编辑器配置和插件

为团队提供统一的编辑器配置文件，包括代码格式化、语法高亮、代码自动补全等，并推荐常用的编辑器插件，提高开发效率。

文档生成工具

使用工具如Docusaurus、VuePress等，为项目生成漂亮的文档网站，方便团队成员查阅和维护项目文档。

Mock数据和接口管理

搭建一个Mock服务器，用于模拟后端接口数据，方便前端开发和测试，同时可以考虑使用接口管理工具，如Swagger等，方便接口的定义和调试。

前端监控和统计

引入前端监控工具，如Google Analytics、百度统计等，收集用户访问数据和行为信息，用于分析和优化用户体验。

移动端调试工具

使用工具如Eruda、VConsole等，帮助在移动端设备上进行调试和错误排查，提高开发效率。

自动化部署

配置自动化部署流程，将项目的代码自动部署到服务器或云平台，减少人工操作，提高发布效率和稳定性。

前端团队协作工具

使用团队协作工具，如GitLab、Bitbucket等，提供代码托管、项目管理、任务分配和团队沟通等功能，增强团队协作效率。

前端培训和知识分享

组织定期的前端培训和技术分享会，让团队成员相互学习和交流，推动技术的共享和提升。

客户端性能优化

针对移动端应用，可以使用工具如React Native Performance、Weex等，进行客户端性能优化，提高应用的响应速度和流畅度。

技术选型和评估

定期评估和研究前端技术的发展趋势，选择适用的技术栈和框架，以保持项目的竞争力和可持续发展。

统一的状态管理

引入状态管理工具，如Redux、Vuex等，帮助团队管理前端应用的状态，提高代码的可维护性和可扩展性。

前端日志记录

引入前端日志记录工具，如log4javascript、logrocket等，记录前端应用的运行日志，方便排查和解决问题。

前端代码扫描

使用静态代码扫描工具，如SonarQube、CodeClimate等，对前端代码进行扫描和分析，发现潜在的问题和漏洞。

前端数据可视化

使用数据可视化工具，如ECharts、Chart.js等，将数据以图表或图形的形式展示，增强数据的可理解性和可视化效果。

前端容灾和故障处理

制定容灾方案和故障处理流程，对前端应用进行监控和预警，及时处理和恢复故障，提高系统的可靠性和稳定性。

前端安全加固

对前端应用进行安全加固，如防止XSS攻击、CSRF攻击、数据加密等，保护用户数据的安全性和隐私。

前端版本管理

建立前端代码的版本管理机制，使用工具如Git、SVN等，管理和追踪代码的变更，方便团队成员之间的协作和版本控制。

前端数据缓存

考虑使用Local Storage、Session Storage等技术，对一些频繁使用的数据进行缓存，提高应用的性能和用户体验。

前端代码分割

使用代码分割技术，如Webpack的动态导入（Dynamic Import），将代码按需加载，减少初始加载的资源大小，提高页面加载速度。

前端性能监测工具

使用性能监测工具，如WebPageTest、GTmetrix等，监测前端应用的性能指标，如页面加载时间、资源加载时间等，进行性能优化。

参考文档

前端基建原来可以做这么多事情

545.如何理解前端架构？【工程化】【出题公司: 阿里巴巴】

前端架构是指在开发前端应用程序时，为了提高开发效率、代码可维护性和可扩展性，将前端代码组织和设计的一种架构体系。它涵盖了前端项目的整体结构、代码组织方式、技术选型、模块化开发、数据管理、状态管理、网络请求、路由管理等方面的规划和设计。

前端架构的目标是使前端开发更加规范、高效和可持续。良好的前端架构可以帮助团队成员更好地协作、降低维护成本、提高开发效率、减少代码冗余和bug等。

以下是一些常见的前端架构概念和思想：

分层架构：将前端应用程序划分为不同的层次，如视图层、业务逻辑层、数据层等，以实现各个层次的解耦和职责清晰。
组件化开发：将界面拆分为独立的可复用组件，通过组合不同的组件来构建页面，提高代码的可维护性和可复用性。
模块化开发：将代码按照功能或业务模块进行拆分，每个模块都有独立的职责和功能，便于团队协作和代码维护。
数据管理和状态管理：使用状态管理库（如Redux、Vuex）来管理应用程序的状态和数据流，使得数据的变化和传递更加可控和可预测。
路由管理：使用路由库（如React Router、Vue Router）来管理前端路由，实现页面之间的跳转和导航。
统一风格和规范：制定和遵循统一的编码规范、命名规范、目录结构等，以便于不同开发者之间的协作和代码的统一性。
自动化构建和部署：使用构建工具（如Webpack、Rollup）和自动化部署工具（如Jenkins、Travis CI）来提高开发效率和代码交付速度。
性能优化和项目优化：通过代码分割、懒加载、缓存、CDN 加速、前端性能监控等手段，提升应用程序的性能和用户体验。

前端架构是一种组织和规划前端代码的方法论，旨在提高前端开发的效率和质量，同时也要根据具体项目的需求和规模来选择和适配合适的架构方案。

547.前端架构和前端工程化有什么区别？【工程化】【出题公司: 阿里巴巴】

先说说对这两个概念的看法：

区别

前端架构和前端工程化是两个不同的概念，但它们之间有一些相互关联的特点。

前端架构是指在前端开发中，对整个前端应用程序的组织结构、模块划分、框架选择等方面的设计和规划。前端架构的目标是为了提高代码的可维护性、可扩展性和可重用性，以及优化前端应用程序的性能和用户体验。常见的前端架构包括MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）等。

前端工程化是指使用各种工具、技术和流程对前端开发过程进行管理和优化，以提高开发效率、代码质量和团队协作能力。前端工程化的目标是通过规范化和自动化的方式，解决前端开发中的重复劳动、低效率、代码质量不稳定等问题。前端工程化包括代码管理、代码规范、模块化开发、构建工具、自动化测试、持续集成和部署、性能优化、文档和知识管理等方面。

虽然前端架构和前端工程化是两个不同的概念，但它们之间存在一些相似的目标和方法。前端架构关注的是前端应用程序的结构和设计，而前端工程化关注的是前端开发的流程和工具的使用。前端架构可以通过前端工程化的方式实现，而前端工程化可以提供支持和保障，以实现良好的前端架构。

2023.09.16 更新前端面试问题总结（26道题）