【前端面试】挖掘做过的nextJS项目（下）

https://blog.csdn.net/weixin_43342290/article/details/141170360?spm=1001.2014.3001.5501文章浏览阅读105次。需求:快速搭建宣传官网1.适应pc、移动端2.基本的路由跳转3.页面渲染优化4.宣传的图片、视频资源的加载优化5.seo优化全栈react web应用、tailwind css原子工具的支持，方便书写响应式uiapp router(React 服务器组件)支持服务器渲染优化、code-spilit优化服务端渲染对seo友好。https://blog.csdn.net/weixin_43342290/article/details/141170360?spm=1001.2014.3001.5501

图片优化

图片占典型网站 页面重量 的很大一部分，并且可以对网站的 LCP 性能 产生相当大的影响。

Next.js 图片组件扩展了 HTML <img> 元素，具有自动图片优化功能：

• 尺寸优化：使用 WebP 和 AVIF 等现代图片格式自动为每个设备提供正确尺寸的图片。

• 视觉稳定性：加载图片时自动阻止 布局转变。

• 更快的页面加载：仅当图片使用原生浏览器延迟加载进入视口时才会加载图片，并带有可选的模糊占位符。

• 资源灵活性：按需调整图片大小，即使是存储在远程服务器上的图片

🎥 监视：了解有关如何使用 next/image → YouTube（9 分钟） 的更多信息。

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/responsive-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/fill-container.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/background-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

window.devicePixelRatio

`window.devicePixelRatio` 是一个 Web API 属性，它返回一个数值，表示屏幕的物理像素和 CSS 像素之间的比例。这个属性对于处理视网膜（Retina）显示屏和其他高 DPI（Dots Per Inch）设备非常有用，因为它可以帮助开发者了解物理像素与 CSS 像素的实际映射关系。

以下是 `window.devicePixelRatio` 的一些关键点：

1. **定义**：`devicePixelRatio` 是 `window` 对象的一个只读属性，返回一个无符号的浮点数。

2. **用途**：主要用于响应式设计和高性能图形渲染，确保在高分辨率屏幕上提供清晰的图像和布局。

3. **默认值**：在标准显示屏上，`devicePixelRatio` 的值通常是 1。这意味着每个 CSS 像素对应一个物理像素。

4. **高分辨率屏幕**：在高分辨率屏幕上，比如苹果的视网膜显示屏，`devicePixelRatio` 的值可能是 2 或更高，这意味着每个 CSS 像素可能对应多个物理像素。

5. **使用示例**：
   ```javascript
   var ratio = window.devicePixelRatio;
   console.log("设备像素比: " + ratio);
   ```

6. **应用场景**：
   - 根据 `devicePixelRatio` 动态调整图像大小，确保在高分辨率屏幕上图像不会模糊。
   - 调整 canvas 元素的大小，以利用额外的像素提高图形的清晰度。
   - 为不同的设备像素比提供不同的 CSS 样式或媒体查询。

7. **兼容性**：大多数现代浏览器都支持 `window.devicePixelRatio` 属性。

8. **注意事项**：虽然 `devicePixelRatio` 提供了设备像素比的信息，但它并不总是等于屏幕的 DPI。有些设备可能有其他方式来表示或处理像素比，因此在使用时需要考虑不同设备的特定行为。

通过使用 `window.devicePixelRatio`，开发者可以创建更加灵活和适应不同设备显示特性的 Web 应用。

    const dpr = window.devicePixelRatio || 1;
    let dprAdjustedWidth: number | undefined = undefined;
    if (width) {
      dprAdjustedWidth = Math.round(width * dpr * 100000) / 100000;
    }
    let dprAdjustedHeight: number | undefined = undefined;
    if (height) {
      dprAdjustedHeight = Math.round(height * dpr * 100000) / 100000;
    }

视频优化

要继续了解有关视频优化和最佳实践的更多信息，请参阅以下资源：

• 了解视频格式和编解码器：根据你的视频需求选择正确的格式和编解码器，例如用于兼容性的 MP4 或用于网络优化的 WebM。详细信息请参见 Mozilla 的视频编解码器指南。

• 视频压缩：使用 FFmpeg 等工具有效压缩视频，平衡质量与文件大小。在 FFmpeg 的官方网站 了解压缩技术。

• 解析和码率调整：根据观看平台调整 解析和比特率，移动设备设置较低。

• 内容交付网络 (CDN)：利用 CDN 提高视频传输速度并管理高流量。使用某些存储解决方案（例如 Vercel Blob）时，系统会自动为你处理 CDN 功能。了解更多 关于 CDN 及其优势。