前端首页优化技巧是面试中经常会问到的问题，今天这篇文章就来总结下怎么进行首页加载速度的优化：

资源加载优化

使用 CDN 分发静态资源

• 示例代码：

<!-- 引入 CDN 上的 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入 CDN 上的 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
 通过将静态资源部署到 CDN，可以利用 CDN 的全球节点加速资源的加载速度，减少首屏加载时间。

压缩资源文件

• 示例代码（使用 Webpack 压缩 JavaScript 文件）：

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
 使用 Webpack 的 TerserPlugin 插件对 JavaScript 文件进行压缩，去除不必要的空格、注释等，减小文件大小。

图片优化

• 示例代码（使用 WebP 格式）：
• 
  

<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="示例图片">
</picture>
 使用 WebP 格式的图片，通常比 JPEG 和 PNG 格式更小，可以加快图片的加载速度。

资源内联

• 示例代码（内联小的 CSS 文件）：

<style>
/* 小的 CSS 文件内容 */
.header {
background-color: #f8f8f8;
padding: 20px;
}
</style>

 对于小的 CSS 文件，可以直接内联到 HTML 中，减少 HTTP 请求，加快首屏加载速度。

按需加载

• 示例代码（懒加载图片）：

// 图片懒加载
const images = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});

images.forEach((img) => {
observer.observe(img);
});
 使用 IntersectionObserver API 实现图片的懒加载，当图片进入可视区域时才加载，减少首屏加载的数据量。

页面渲染优化

服务端渲染（SSR）

• 示例代码（使用 Next.js 实现 SSR）：

// pages/index.js
export default function Home() {
return <div>Hello, SSR!</div>;
}
 使用 Next.js 框架实现服务端渲染，服务器会预先渲染页面的 HTML 内容，然后发送给客户端，减少首屏加载时间。

代码分割

• 示例代码（Webpack 代码分割）：

// 使用动态导入（import()）实现代码分割
const button = document.querySelector('button');
button.addEventListener('click', () => {
import('./module.js').then((module) => {
module.default();
});
});
 使用 Webpack 的代码分割功能，将代码拆分成多个块，按需加载，减少首屏加载的 JavaScript 文件大小。

减少重绘和回流

• 示例代码（批量操作 DOM）：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);
 使用文档片段（DocumentFragment）批量操作 DOM，减少重绘和回流的次数，提高页面渲染性能。

使用虚拟 DOM

• 示例代码（使用 React 的虚拟 DOM）：

// App.js
import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is a React app using virtual DOM.</p>
</div>
);
}

export default App;
 使用 React 的虚拟 DOM，可以提高 DOM 操作的效率，减少不必要的 DOM 更新，加快页面渲染速度。

优化 CSS 选择器

• 示例代码（使用高效的 CSS 选择器）：

/* 使用类选择器 */
.header {
background-color: #f8f8f8;
padding: 20px;
}

/* 避免使用过于复杂的选择器 */
/* 不推荐 */
body .container .content .header {
/* ... */
}
 使用高效的 CSS 选择器，避免使用过于复杂的选择器，可以提高样式的渲染速度。

使用缓存

• 示例代码（设置 HTTP 缓存头）：

// 在 Node.js 服务器中设置缓存头
app.get('/static/*', function(req, res, next) {
res.set('Cache-Control', 'public, max-age=31536000');
next();
});
 通过设置 HTTP 缓存头（如 Cache-Control），使浏览器缓存静态资源，减少重复请求，加快页面加载速度。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。