2023前端开发面经大合集

说一下 CommonJS 和 ES Module 的差异

CommonJS 和 ES Module 是两种流行的 JavaScript 模块系统，它们在多个方面有显著的区别。理解这些区别对于编写模块化的 JavaScript 代码非常重要，尤其是在使用不同的 JavaScript 环境（如 Node.js 和前端开发）时。

CommonJS

CommonJS 是 Node.js 使用的模块系统。它的特点包括：

1. 同步加载:

   • CommonJS 模块通常在服务器端使用，模块是同步加载的。这意味着当模块被 require 时，代码会停止执行，直到模块完全加载。

2. 对象导出:

   • 在 CommonJS 中，模块通过 module.exports 对象导出，并通过 require 函数导入。

   // 导出
   module.exports = {
       sayHello: function() { console.log('Hello!'); }
   };
   
   // 导入
   const myModule = require('./myModule');
   myModule.sayHello();
   

3. 值拷贝:

   • 当模块被导入时，它的导出值被拷贝到导入模块中。这意味着如果导出值发生变化，这些变化不会反映到导入模块中。

4. 模块缓存:

   • 每个 CommonJS 模块在首次被加载后会被缓存。这意味着每次通过 require 调用同一模块时，总是会得到相同的导出对象。

ES Module (ESM)

ES Module 是 ECMAScript 标准的官方模块系统，被许多现代浏览器原生支持。它的特点包括：

1. 异步加载:

   • ES Module 支持异步加载，使其非常适合用于浏览器环境。import 语句可以与浏览器的事件循环并行工作，不会阻塞代码的执行。

2. 静态结构:

   • 在 ES Module 中，import 和 export 语句都是静态的，意味着它们不能被条件地执行。这有助于编译时优化，如 tree shaking（用于移除未使用的代码）。

   // 导出
   export function sayHello() {
       console.log('Hello!');
   }
   
   // 导入
   import { sayHello } from './myModule';
   sayHello();
   

3. 实时绑定:

   • ESM 的导入是实时绑定的，也就是说，如果导出的值在模块内部发生变化，这些变化会实时反映到所有导入的模块中。

4. 无缓存:

   • ES Module 不缓存模块的实例。每次导入都会重新执行模块代码。

总结

• CommonJS 适用于服务器端和应用程序，支持同步加载，但是在模块互依赖方面可能会有些复杂。
• ES Module 是现代 JavaScript 开发的标准，支持异步加载，更适合前端开发和模块间的静态分析。

Vue2 和 Vue3 有哪些区别

Vue 2 和 Vue 3 是流行的前端 JavaScript 框架 Vue.js 的两个主要版本。Vue 3，作为最新版本，带来了许多重要的更新和改进。以下是 Vue 2 和 Vue 3 之间的一些主要区别：

1. 性能改进

• Vue 3 提供了比 Vue 2 更好的性能。根据官方文档，Vue 3 在挂载、更新和内存使用方面都有显著的性能提升。例如，Vue 3 的渲染速度比 Vue 2 快 1.3-2 倍，内存减少了 54%。

2. 组合式 API

• Vue 3 引入了一个新的组合式 API（Composition API），这是一个可选的 API，允许开发者更灵活地组织组件逻辑。使用 setup 函数，开发者可以更好地组织相关功能代码，而不是将它们分散在不同的选项（如 data, methods, computed）中。
• Vue 2 主要使用选项式 API（Options API），这种方式将组件的不同方面（数据、方法、生命周期钩子等）分别定义在组件选项中。

3. 虚拟 DOM 重写

• Vue 3 完全重写了虚拟 DOM，提高了渲染效率和组件更新性能。

4. 响应式系统

• Vue 3 使用了基于 Proxy 的响应式系统，替换了 Vue 2 中基于 Object.defineProperty 的实现。新的响应式系统更高效，支持更多类型的数据结构，如 Maps, Sets, weakMaps, 和 weakSets。

5. TypeScript 支持

• Vue 3 提供了更好的 TypeScript 支持。由于 Vue 3 从头开始就用 TypeScript 编写，因此它提供了更好的类型推断和更高质量的 TypeScript 集成。
• Vue 2 对 TypeScript 的支持较弱，需要额外的类型声明和某些配置。

6. 新组件和工具

• Vue 3 引入了一些新组件和工具，如 Teleport 和 Suspense。
  • Teleport 允许开发者将子组件的模板部分移动到 DOM 的其他位置。
  • Suspense 支持异步组件的加载状态处理。

7. 全局 API 和应用配置的变化

• Vue 3 改变了全局 API 的使用方式。全局 API 和配置现在通过创建应用实例 (createApp) 来使用，而不是在 Vue 构造函数上直接使用，这在构建大型应用时提供了更好的模块化。

8. Fragment、Portals 和 Suspense

• Vue 3 支持 Fragment（多个根节点的组件），而 Vue 2 要求每个组件只能有一个根节点。

9. 更小的体积

• Vue 3 的体积比 Vue 2 更小，尽管引入了更多的功能。

总结

Vue 3 带来了显著的性能提升、更灵活的代码组织方式（通过组合式 API）、更好的 TypeScript 支持和全新的内部实现。这些改进使 Vue 3 成为构建现代 Web 应用的更强大、更高效的工具。同时，Vue 2 仍然是一个非常流行和稳定的选择，特别是对于现有项目和那些已经熟悉 Vue 2 的开发人员。

为什么 ES Module 需要把 import 放在顶部，CommonJS 不需要

由于 ES Module 的静态结构和编译时加载的特点，import 语句必须位于模块的顶部。这样做允许 JavaScript 引擎在执行代码之前分析整个模块的结构，优化依赖加载和解析。

相比之下，CommonJS 的动态和运行时加载特性使得模块可以在代码的任何位置被加载和解析，因此没有必要将 require() 放在顶部。

这些差异反映了两种模块系统设计理念的不同，以及它们在不同应用场景下的适用性。ES Module 的设计更适合前端开发和静态分析工具，而 CommonJS 更适合 Node.js 服务器端编程的需要。

如何优化一个网站的性能

在一个页面对下一个页面进行优化是提升网页应用性能和用户体验的重要策略。这涉及预加载下一个页面的资源、预取数据、以及利用浏览器缓存等技术。以下是一些常用的方法：

1. 资源预加载（Preloading）：

   • 使用 <link rel="preload"> 在当前页面预加载下一个页面中将要使用的关键资源，如字体、CSS、JavaScript 文件。这可以确保当用户访问下一个页面时，所需资源已被加载并可立即使用。

2. 数据预取（Prefetching）：

   • 使用 <link rel="prefetch"> 预取下一个页面可能需要的数据。这对于提前加载用户可能接下来访问的页面特别有用。

3. 利用浏览器缓存：

   • 合理配置 HTTP 缓存头（如 Cache-Control），可以确保共用的资源（如样式表、脚本、图像等）在用户的第一次请求后被缓存。

4. 服务端渲染（SSR）或静态生成（SSG）：

   • 对于动态网站，使用服务端渲染可以提前生成页面内容，减少客户端渲染的负担。静态生成适用于不经常变更的内容，可以提供快速的加载体验。

5. 客户端路由优化：

   • 在单页应用（SPA）中，使用客户端路由（如 Vue Router 或 React Router）可以在不重新加载整个页面的情况下切换视图，减少加载时间。

6. 懒加载（Lazy Loading）：

   • 对于不是立即需要的资源（如下滑页面时才出现的图片），可以使用懒加载，仅当用户滚动到这些资源时才开始加载。

7. 使用 CDN 加速资源传输：

   • 将资源放置在内容分发网络（CDN）上，可以减少资源加载时间，特别是对于地理位置分散的用户。

8. 优化关键渲染路径：

   • 分析和优化关键渲染路径，确保在渲染页面时按正确的顺序加载资源。

9. 保持轻量的页面：

   • 减少不必要的资源和代码，保持页面体积轻量，以加快加载速度。

10. 连接复用：

    • 利用 HTTP/2 的连接复用特性，可以在多个请求之间共享同一连接，减少连接建立的开销。

通过这些策略，可以显著提升从一个页面跳转到另一个页面时的性能，减少加载时间，从而改善用户体验。

TypeScript 中 interface 和 type 的区别

示例 1: 合并 vs 不可合并

Interface（可合并）:

interface User {
    name: string;
}

interface User {
    age: number;
}

// 合并后的 User 接口
const user: User = {
    name: "Alice",
    age: 30
};

Type（不可合并）:

type User = {
    name: string;
};

// 以下尝试将会引发错误，因为 Type 不可以被合并
type User = {
    age: number;
};

示例 2: 扩展方式

Interface（使用 extends）:

interface User {
    name: string;
}

interface Employee extends User {
    employeeId: number;
}

const employee: Employee = {
    name: "Bob",
    employeeId: 1234
};

Type（使用交叉类型 &）:

type User = {
    name: string;
};

type Employee = User & {
    employeeId: number;
};

const employee: Employee = {
    name: "Bob",
    employeeId: 1234
};

示例 3: 表示联合类型

Interface（不支持直接表示联合类型）:

// 接口不能直接表示联合类型

Type（支持联合类型）:

type Status = "active" | "inactive";

const status: Status = "active";

示例 4: 映射类型（Mapped Types）

Interface（不能用于映射类型）:

// 接口不能直接用于映射类型

Type（支持映射类型）:

type User = {
    name: string;
    age: number;
};

type ReadOnlyUser = {
    readonly [K in keyof User]: User[K];
};

const readonlyUser: ReadOnlyUser = {
    name: "Charlie",
    age: 25
};

css会阻塞dom的解析和渲染吗

1. 外部 CSS 阻塞渲染：当浏览器遇到一个外部的 CSS 文件（通过 <link rel="stylesheet" href="..."> 引入），它会先下载并解析这个 CSS 文件。在这个过程中，浏览器不会渲染任何已解析的文档内容，因为 CSS 规则可能会影响这些内容的布局和外观。因此，外部 CSS 文件是渲染阻塞资源。

2. 内部 CSS 和内联样式：对于在 <style> 标签内部定义的 CSS 或者直接在 HTML 元素上使用的内联样式，浏览器可以立即解析并应用这些样式，所以它们不会造成同样的渲染阻塞问题。

3. DOM 的构建：尽管 CSS 可以阻塞页面的渲染，但它不会阻塞 DOM 的构建。浏览器会继续解析 HTML，并构建 DOM，即使 CSS 文件尚未加载和解析完成。

为了减少这种阻塞，可以采取如下策略：

• 使用媒体查询来仅在必要时加载某些样式表。
• 优化 CSS 文件的大小。
• 异步加载非关键的 CSS。
• 将关键 CSS 内联在 HTML 中。

总的来说，CSS 确实可以阻塞页面的渲染，但不会阻塞 DOM 的构建过程。这意味着浏览器在下载和解析 CSS 时，不会渲染页面内容，但会继续处理 HTML。

总结

这些示例展示了 interface 和 type 在不同场景下的使用差异。interface 是面向对象风格的代码和合并声明的不错选择，而 type 提供了更多的灵活性，适用于复杂类型组合、联合类型和映射类型等场景。在 TypeScript 中，根据具体的使用场景和需求选择使用 interface 或 type 是很重要的。

未完待续。。。