前端面试知识点总结

HTML 篇#

1. 设备的 DPR 是否可变#

DPR（Device Pixel Ratio，设备像素比） 在某些情况下是可变的，具体取决于以下几个因素：

固定的情况#

物理设备本身：对于单一设备来说，其物理屏幕的像素密度是固定的。比如 iPhone 14 Pro 的 DPR 固定为 3。

可变的情况#

浏览器缩放
- 用户使用浏览器缩放功能（Ctrl/Cmd + +/-）时，window.devicePixelRatio 会动态变化
- 缩放到 110% 时，DPR 会相应增加
外接显示器
- 笔记本电脑连接不同显示器时，DPR 会根据当前显示器改变
- 从 Retina 屏幕（DPR=2）拖动窗口到普通显示器（DPR=1）
操作系统缩放设置
- Windows 的显示缩放（125%、150% 等）
- macOS 的缩放显示选项
- 这些设置会影响浏览器报告的 DPR 值
响应式测试工具
- Chrome DevTools 的设备模拟器可以模拟不同 DPR
- 开发时可以动态切换测试不同的像素密度

监听 DPR 变化#

1
// 监听 DPR 变化
2
window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
3
  .addEventListener('change', () => {
4
    console.log('DPR changed to:', window.devicePixelRatio);
5
  });

因此，虽然设备的物理像素密度是固定的，但浏览器环境中的 DPR 值确实可以动态变化，开发时需要考虑这些场景以确保界面正确显示。

2. 前端如何选择图片格式#

前端选择图片格式需要根据具体场景和需求来决定。以下是各种格式的特点和选择策略：

常见图片格式对比#

JPEG/JPG#

特点：

有损压缩，文件小
支持数百万种颜色
不支持透明度
不支持动画

适用场景：

适合：照片、复杂色彩的图像
不适合：图标、文字、线条图

PNG#

特点：

无损压缩，质量高
支持透明度（PNG-24 支持半透明）
文件体积较大
不支持动画

适用场景：

PNG-8：简单图形、图标、logo
PNG-24：需要透明背景的复杂图像

WebP#

特点：

Google 开发，体积比 JPEG 小 25-35%
支持有损和无损压缩
支持透明度和动画
兼容性需要考虑（Safari 14+ 才支持）

适用场景：

现代浏览器的最佳选择
可替代 JPEG 和 PNG

AVIF#

特点：

最新格式，压缩率最高
比 WebP 还小 20%
支持 HDR
兼容性较差

适用场景：

追求极致性能的场景
需要做好降级处理

SVG#

特点：

矢量图，无限缩放不失真
文件小（简单图形）
可编程、可动画
不适合照片

适用场景：

图标、logo、简单插画
需要缩放的图形

选择决策流程#

1
function chooseImageFormat(imageType) {
2
  // 1. 是否需要动画？
3
  if (需要动画) {
4
    return 'GIF' || 'WebP' || 'APNG';
5
  }
6

7
  // 2. 是否是矢量图形？
8
  if (简单图形 || 图标 || Logo) {
9
    return 'SVG';
10
  }
11

12
  // 3. 是否需要透明度？
13
  if (需要透明背景) {
14
    return 'PNG' || 'WebP';
15
  }
16

17
  // 4. 是否是照片？
18
  if (照片 || 复杂图像) {
19
    return 'JPEG' || 'WebP' || 'AVIF';
20
  }
21
}

实践建议#

1. 响应式图片策略#

1
<!-- 使用 picture 元素提供多种格式 -->
2
<picture>
3
  <source srcset="image.avif" type="image/avif">
4
  <source srcset="image.webp" type="image/webp">
5
  <img src="image.jpg" alt="描述">
6
</picture>
7

8
<!-- 使用 srcset 提供不同分辨率 -->
9
<img
10
  src="image-400.jpg"
11
  srcset="image-400.jpg 400w,
12
          image-800.jpg 800w,
13
          image-1200.jpg 1200w"
14
  sizes="(max-width: 768px) 100vw, 50vw"
15
  alt="响应式图片"
16
>

2. 懒加载优化#

1
// 原生懒加载
2
<img src="image.jpg" loading="lazy" alt="懒加载图片">
3

4
// Intersection Observer 实现
5
const lazyImages = document.querySelectorAll('img[data-src]');
6
const imageObserver = new IntersectionObserver((entries) => {
7
  entries.forEach(entry => {
8
    if (entry.isIntersecting) {
9
      const img = entry.target;
10
      img.src = img.dataset.src;
11
      imageObserver.unobserve(img);
12
    }
13
  });
14
});
15

16
lazyImages.forEach(img => imageObserver.observe(img));

3. 图片优化工具配置#

1
// webpack 配置示例
2
module.exports = {
3
  module: {
4
    rules: [
5
      {
6
        test: /\.(png|jpg|gif|webp|avif)$/,
7
        use: [
8
          {
9
            loader: 'image-webpack-loader',
10
            options: {
11
              mozjpeg: {
12
                progressive: true,
13
                quality: 65
14
              },
15
              optipng: {
16
                enabled: false,
17
              },
18
              pngquant: {
19
                quality: [0.65, 0.90],
20
                speed: 4
21
              },
22
              webp: {
23
                quality: 75
24
              }
25
            }
26
          }
27
        ]
28
      }
29
    ]
30
  }
31
};

4. CDN 图片处理#

1
// 使用 CDN 的图片处理功能
2
function getOptimizedImageUrl(url, options = {}) {
3
  const { width, format = 'auto', quality = 85 } = options;
4

5
  // 阿里云 OSS 示例
6
  return `${url}?x-oss-process=image/format,${format}/quality,q_${quality}${
7
    width ? `/resize,w_${width}` : ''
8
  }`;
9
}
10

11
// 使用
12
const imageUrl = getOptimizedImageUrl('image.jpg', {
13
  width: 800,
14
  format: 'webp',
15
  quality: 80
16
});

5. 性能监控#

1
// 监控图片加载性能
2
const observer = new PerformanceObserver((list) => {
3
  for (const entry of list.getEntries()) {
4
    if (entry.initiatorType === 'img') {
5
      console.log(`图片加载：${entry.name}`);
6
      console.log(`耗时：${entry.duration}ms`);
7
      console.log(`大小：${entry.transferSize} bytes`);
8
    }
9
  }
10
});
11

12
observer.observe({ entryTypes: ['resource'] });

最佳实践总结#

渐进式增强：优先使用新格式，提供降级方案
适量压缩：平衡质量和体积（JPEG 85% 质量通常足够）
按需加载：使用懒加载减少初始加载
响应式图片：根据设备提供合适尺寸
CDN 加速：使用 CDN 的图片处理和缓存功能
预加载关键图片：

1
<link rel="preload" as="image" href="hero.webp" type="image/webp">

选择图片格式时，要综合考虑图片类型、浏览器兼容性、加载性能和用户体验，通过渐进式增强策略提供最佳方案。

CSS 篇#

1. CSS 单位详解：rem/em/px/rpx 的区别#

px（像素）#

类型：绝对单位
特点：固定大小，1px 就是屏幕上 1 个物理像素点
应用：不会随着父元素或根元素变化而变化
使用场景：边框、精确控制的小元素

1
.border {
2
  border: 1px solid #ccc;
3
}

em#

类型：相对单位
特点：相对于父元素的字体大小
计算：如果父元素 font-size: 16px，那么 1em = 16px
注意：会叠加计算，嵌套时会累积

1
.parent {
2
  font-size: 16px;
3
}
4
.child {
5
  font-size: 1.5em; /* 24px */
6
  padding: 2em;     /* 48px (基于自身的 24px) */
7
}

rem（root em）#

类型：相对单位
特点：相对于根元素（html）的字体大小
计算：如果根元素 font-size: 16px，那么 1rem = 16px
优势：不会叠加计算，只参考根元素

1
html {
2
  font-size: 16px;
3
}
4
.element {
5
  width: 20rem;    /* 320px */
6
  font-size: 1rem; /* 16px */
7
}

rpx（responsive pixel）#

类型：响应式单位
使用：主要用于小程序开发（如微信小程序）
特点：自动适配不同屏幕宽度
规则：规定屏幕宽度为 750rpx，在 iPhone6 上 1rpx = 0.5px

1
/* 小程序中的使用 */
2
.container {
3
  width: 750rpx;  /* 占满整个屏幕宽度 */
4
  height: 100rpx; /* 高度自动适配 */
5
}

单位选择建议#

1
// 单位选择策略
2
const chooseCSSUnit = (scenario) => {
3
  switch(scenario) {
4
    case '边框':
5
      return 'px'; // 边框通常使用 px
6
    case '响应式布局':
7
      return 'rem'; // 整体布局使用 rem
8
    case '组件内部间距':
9
      return 'em'; // 组件内部可以使用 em
10
    case '小程序开发':
11
      return 'rpx'; // 小程序使用 rpx
12
    case '视口相关':
13
      return 'vw/vh'; // 基于视口的布局
14
    default:
15
      return 'rem';
16
  }
17
};

浏览器篇#

1. 浏览器缓存机制：强缓存与协商缓存#

强缓存#

强缓存不会向服务器发送请求，而是直接从缓存中读取资源。

工作原理#

1
浏览器请求 → 检查缓存是否过期 →
2
  ├─ 未过期 → 直接使用缓存（状态码 200 from cache）
3
  └─ 已过期 → 发起新请求

协商缓存#

协商缓存会向服务器发送请求，验证缓存是否是最新的。

工作流程#

1
浏览器请求（带验证头） → 服务器验证 →
2
  ├─ 资源未修改 → 返回 304 Not Modified（使用缓存）
3
  └─ 资源已修改 → 返回 200 OK + 新资源

缓存策略实践#

1
// Express 服务器设置缓存示例
2
app.use((req, res, next) => {
3
  const url = req.url;
4

5
  if (url.match(/\.(js|css|jpg|png|gif)$/)) {
6
    const oneDay = 86400;
7
    const oneYear = oneDay * 365;
8

9
    // 静态资源强缓存一年
10
    if (url.includes('static')) {
11
      res.setHeader('Cache-Control', `public, max-age=${oneYear}`);
12
    }
13
    // HTML 文件不缓存
14
    else if (url.endsWith('.html')) {
15
      res.setHeader('Cache-Control', 'no-cache');
16
    }
17
    // 其他资源缓存一天
18
    else {
19
      res.setHeader('Cache-Control', `public, max-age=${oneDay}`);
20
    }
21
  }
22

23
  next();
24
});
25

26
// 前端缓存控制
27
const fetchWithCache = async (url, options = {}) => {
28
  const defaultOptions = {
29
    cache: 'default', // default | no-store | reload | no-cache | force-cache
30
    ...options
31
  };
32

33
  try {
34
    const response = await fetch(url, defaultOptions);
35
    return response;
36
  } catch (error) {
37
    console.error('Fetch error:', error);
38
    throw error;
39
  }
40
};

缓存优化建议#

HTML 文件：使用协商缓存或不缓存
CSS/JS 文件：使用强缓存 + 文件指纹（hash）
图片资源：长期强缓存
API 请求：根据业务需求设置

1
// Webpack 配置文件指纹
2
module.exports = {
3
  output: {
4
    filename: '[name].[contenthash:8].js',
5
    chunkFilename: '[name].[contenthash:8].chunk.js'
6
  },
7
  optimization: {
8
    moduleIds: 'deterministic',
9
    runtimeChunk: 'single',
10
    splitChunks: {
11
      cacheGroups: {
12
        vendor: {
13
          test: /[\\/]node_modules[\\/]/,
14
          name: 'vendors',
15
          priority: -10,
16
          reuseExistingChunk: true
17
        }
18
      }
19
    }
20
  }
21
};

总结#

前端面试涉及的知识点广泛，从基础的 HTML/CSS 到复杂的浏览器机制都需要深入理解。掌握这些知识点不仅有助于面试，更重要的是能在实际开发中做出正确的技术决策，优化用户体验。建议在学习时结合实践，通过实际项目加深理解。

HTML 篇#

1. 设备的 DPR 是否可变#

固定的情况#

可变的情况#

监听 DPR 变化#

2. 前端如何选择图片格式#

常见图片格式对比#

JPEG/JPG#

PNG#

WebP#

AVIF#

SVG#

选择决策流程#

实践建议#

1. 响应式图片策略#

2. 懒加载优化#

3. 图片优化工具配置#

4. CDN 图片处理#

5. 性能监控#

最佳实践总结#

CSS 篇#

1. CSS 单位详解：rem/em/px/rpx 的区别#

px（像素）#

em#

rem（root em）#

rpx（responsive pixel）#

单位选择建议#

浏览器篇#

1. 浏览器缓存机制：强缓存与协商缓存#

强缓存#

相关 HTTP 头部#

工作原理#

协商缓存#

相关 HTTP 头部#

工作流程#

缓存策略实践#

缓存优化建议#

总结#