前端面试题手册

Next.js 中主要有两种类型的预渲染：静态生成（Static Generation, SSG）和服务器端渲染（Server-side Rendering, SSR）。静态生成（SSG）：此方法在构建时生成HTML，所有请求都共享同一HTML。可以通过 getStaticProps 来获取页面所需的数据，并在构建时将其传递到组件。还可以使用 getStaticPaths 来动态生成具有动态路由的页面的路径。服务器端渲染（SSR）：此方法在每个请求时生成HTML。通过使用 getServerSideProps，可以为每个请求实时获取数据，并将数据作为props传递给组件，从而在服务器上渲染页面。这两种预渲染方式都有助于提高性能和SEO效果，选择哪一种取决于应用的需求和页面的特性。

在 Next.js 13 中，可以通过使用新的 Middleware 功能和 Edge Runtime 来从中间件传递数据到组件。具体步骤如下：创建或修改中间件：在 Next.js 应用的 middleware.ts 文件中，你可以处理请求并使用 NextResponse 对象进行响应。在这个阶段，你可以设置需要传递给组件的数据。设置响应头或Cookies：在中间件中，可以通过设置响应头或Cookies来传递数据。例如，你可以将计算或获取的数据序列化为一个JSON字符串，并将这个字符串作为一个响应头或Cookie添加到NextResponse对象中。 import { NextResponse } from 'next/server'; export function middleware(request) { const data = { user: 'John Doe', age: 30 }; const response = NextResponse.next(); response.headers.set('X-Custom-Data', JSON.stringify(data)); return response; }在组件中获取数据：在 Next.js 的页面或组件中，你可以通过 getServerSideProps 或 getStaticProps（取决于页面的数据获取方式）来读取设置在步骤2中的响应头或Cookies。 export async function getServerSideProps({ req }) { const data = req.headers['x-custom-data']; const parsedData = JSON.parse(data); return { props: { userData: parsedData } }; }在上述示例中，getServerSideProps 从请求的头部中获取名为X-Custom-Data的头部信息，解析该数据，然后将其作为属性传递给Next.js的React组件。通过这种方式，你可以安全且有效地从中间件传递数据到你的React组件，利用 Next.js 的全新架构和功能。

在Next.js中，router.pathname 和 router.route 是与路由相关的两个属性，但它们指向的内容有细微的差别：router.pathname 表示显示在浏览器地址栏中的路径，它是用户看到的当前页面的路径。例如，如果你在浏览器中访问 /about, pathname 将会是 /about。router.route 也代表当前页面的路径，但它指向的是实际的页面文件或页面模板的路径。例如，如果你使用了动态路由，比如 /blog/[slug]，即使浏览器地址显示为 /blog/hello-world，router.route 仍然会是 /blog/[slug]。这意味着 router.route 显示的是路由模式或文件结构，而不是实际的URL路径。总结来说，router.pathname 更关注于实际的URL路径，而 router.route 关注于页面文件或模板的路径，特别是在使用动态路由时差别更为明显。

在Next.js中，静态渲染（Static Rendering）和动态渲染（Dynamic Rendering）主要的区别在于页面内容的生成时机和方式：静态渲染（又称为静态站点生成SSG）：页面内容在构建时（build time）就已经生成，并保存为静态的HTML文件。每个请求都会收到同样的HTML文件，这使得页面加载非常快速。主要适用于内容不经常变更的页面，如博客文章、营销页面等。使用Next.js中的getStaticProps（用于预获取页面数据）和getStaticPaths（用于动态路径的静态生成）方法来实现静态渲染。动态渲染（或称为服务器端渲染SSR）：页面内容在每次请求时动态生成，通常在服务器上进行。可以根据请求的不同返回不同的页面内容，适用于内容高度动态的页面。页面响应可能比静态渲染稍慢，因为服务器需要实时处理页面生成。使用Next.js的getServerSideProps方法来实现动态渲染，此方法会在每次页面请求时执行，以获取最新数据。总的来说，选择哪种渲染方式取决于页面内容的动态性以及对页面响应速度的要求。静态渲染适用于内容稳定的页面，而动态渲染则更适合内容实时更新频繁的场景。

在优化Next.js应用的性能时，可以采取以下几种策略：静态生成 (Static Generation) 和服务器端渲染 (Server-Side Rendering): 对于SEO友好型页面，使用getStaticProps或getServerSideProps来预渲染页面。静态生成的页面可以通过CDN缓存，从而减少服务器负载并加快页面加载速度。对于需要实时数据的页面，可以使用服务器端渲染来确保数据的实时性，同时通过合理的缓存策略减少服务器的渲染压力。图片优化:使用Next.js的Image组件来自动优化图像加载。该组件支持懒加载、图像压缩和现代格式（如WebP），这些都可以显著提高页面加载速度和性能。代码拆分和动态导入:利用Next.js的自动代码拆分功能，确保用户只加载其当前路由所需的最少量代码。对于不是立即需要的功能和组件，可以使用动态导入（dynamic import()）来进一步减少初始负载时间。利用缓存:使用强缓存策略，如HTTP缓存头、SWR（用于数据获取）或任何客户端缓存库，来缓存不经常改变的内容，减少对服务器的请求。API路由优化:优化API路由的响应时间，例如通过减少数据库查询的复杂度或使用更快的查询方法。此外，使用中间件或服务如Redis来缓存常见的API请求结果。使用CDN:部署静态资源（如JS、CSS文件）到CDN上，使用户能够从最近的地理位置加载资源，从而减少延迟。性能监控和分析:利用Next.js内置的性能监控工具或集成如Google's Lighthouse、Web Vitals等第三方性能分析工具来监控应用性能，并根据报告优化瓶颈问题。通过这些策略的综合使用，可以显著提高Next.js应用的性能，提升用户体验，并减少服务器资源的消耗。

CSS 转换属性 (transform) 主要用于在不改变文档流的基础上对元素进行移动、旋转、缩放和倾斜等操作。这可以增强视觉效果和用户界面的交互性。用途举例移动 (Translate)使用 translate 函数可以移动元素的位置。比如，将一个按钮向右移动50像素，向下移动30像素： .button { transform: translate(50px, 30px); }旋转 (Rotate)通过 rotate 函数可以使元素按照给定的角度进行旋转。例如，将一个图标旋转45度： .icon { transform: rotate(45deg); }缩放 (Scale)scale 函数用于改变元素的大小。例如，将一个图片放大1.5倍： .image { transform: scale(1.5); }倾斜 (Skew)通过 skew 函数，可以将元素沿X轴或Y轴倾斜。例如，将一个文本元素沿X轴倾斜30度： .text { transform: skewX(30deg); }这些转换可以单独使用也可以组合使用，为网页添加动态效果和创新的视觉布局。

渐进式Web应用程序（PWA）是一种通过使用现代网页技术构建的应用程序，它具有传统原生应用的体验和性能。它意在将网页和移动应用的优势结合起来，提供一个快速、可靠且更加吸引人的用户体验。PWA的关键特性包括：渐进式 - 适用于所有用户，无论用户使用的设备和浏览器如何，都能提供基本功能，因为它是以渐进增强作为核心理念构建的。响应式 - 能够适配任何形式的设备：桌面、手机、平板或未来的设备。离线工作 - 通过Service Workers可以管理网络请求，缓存应用的资料，从而使应用能够在离线或网络质量不佳的情况下运行。类似应用的交互体验 - PWA可以通过像Manifest和Service Workers这样的技术，提供全屏体验、推送通知等原生应用特性。安全 - 通过HTTPS提供，确保应用层面的数据传输安全。可发现性 - 由于是基于Web的，因此PWA可以通过搜索引擎发现，这比传统的原生应用更具有优势。例如，Twitter的PWA—Twitter Lite，就是一个非常成功的案例。Twitter Lite通过PWA技术，使得用户即使在网络不稳定的地区也能快速加载并使用Twitter。这不仅提升了用户体验，还显著增加了用户的参与度和页面浏览次数。

Rust 支持多种平台，包括但不限于以下几种：Windows: Rust 可以在 Windows 7, 8, 8.1 和 10 上运行。macOS: Rust 支持 macOS，通常兼容当前主流及过去几个版本的系统。Linux: Rust 支持各种 Linux 发行版，如 Ubuntu, Fedora, Debian 等。BSD: 支持如 FreeBSD 和 OpenBSD 等 BSD 系统。其他 Unix-like 系统: 比如 Solaris 和 DragonFly BSD。嵌入式系统: 比如 ARM Cortex-M 系列微控制器。此外，Rust 还可以通过 WebAssembly 运行在网页浏览器中。Rust 通过其官方平台支持页提供对以上各平台的支持细节和稳定性信息。

Rust 通过提供了一些语言级的特性来支持多线程和并发，主要包括所有权、借用检查和类型系统。这些特性在编译时就能帮助开发者避免数据竞争和其他并发时常见的问题。所有权（Ownership）和借用（Borrowing）： Rust 的所有权系统确保在任何时刻，数据只有一个可变引用或任意数量的不可变引用。这个规则帮助避免数据竞争，因为数据竞争通常发生在两个或更多线程同时访问同一数据，并且至少有一个线程在写入数据。线程（Threads）： Rust 标准库提供了 std::thread 模块，可以用来创建新的线程。Rust 的线程是通过操作系统线程实现的（1:1 模型）。使用 thread::spawn 函数可以启动一个新线程，这个函数接受一个闭包，在新的线程中执行。消息传递（Message Passing）： Rust 鼓励使用消息传递来处理线程间的通信，而不是共享内存。这可以通过使用 std::sync::mpsc（multi-producer, single-consumer）库实现，该库提供了创建通道的功能。线程可以通过发送和接收消息来通信，而不直接访问共享状态。同步原语（Synchronization Primitives）： Rust 标准库还包括了各种同步原语，如互斥锁（Mutexes）、条件变量（Condition Variables）和信号量（Semaphores），这些都在 std::sync 模块中。使用互斥锁可以保护共享数据，确保一次只有一个线程可以访问数据。屏障（Barriers）： 在处理多线程时，屏障也是一种常用的同步方式，可以用来确保多个线程在继续执行前达到某个同步点。原子操作（Atomic Operations）： Rust 通过 std::sync::atomic 模块提供原子操作支持，这些操作是构建无锁数据结构时的关键。通过这些特性和工具，Rust 为开发高效且安全的多线程应用程序提供了强大的支持。

TypeScript 支持以下访问修饰符：public - 公共修饰符，可以在任何地方访问该成员。private - 私有修饰符，只能在类内部访问该成员。protected - 受保护的修饰符，可以在类及其子类中访问该成员。