前端性能优化：如何减少首屏加载时间本篇博客透彻地探讨了前端高频面试知识点，为你的面试提供了全面的准备。愿你能在面试中顺利

在这个注意力稀缺的时代，用户对网页加载速度的要求越来越高。如果你的网站加载时间超过3秒，恭喜你，你已经成功把一半的用户赶跑了。所以，作为一名前端开发者，如何优化首屏加载时间成为了我们必须面对的问题。今天，让我们一起来探讨一下如何让你的网站加载速度快到用户还没反应过来就已经加载完毕。

1. 减少HTTP请求

首先，让我们从最基本的开始：减少HTTP请求。每一个HTTP请求都会增加网页的加载时间。想象一下，如果你的网页像是一个购物清单，而浏览器就是负责采购的人。你给他一个长长的清单，他就得跑很多趟；给他一个简短的清单，他就能很快完成任务。

合并文件

一个简单的方法是合并你的CSS和JavaScript文件。不要让你的HTML看起来像是一个圣诞树，挂满了各种小文件。

<!-- 优化前 -->
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="footer.css">

<!-- 优化后 -->
<link rel="stylesheet" href="all.min.css">

使用CSS Sprites

对于图标和小图片，可以使用CSS Sprites技术。这就像是把所有的小图片拼成一张大图，然后通过CSS的background-position来显示需要的部分。

.icon {
  background-image: url('sprite.png');
  width: 16px;
  height: 16px;
}

.icon-home {
  background-position: 0 0;
}

.icon-user {
  background-position: -16px 0;
}

2. 压缩资源

既然我们已经减少了HTTP请求，下一步就是减小每个请求的大小。就像你在打包行李时会把衣服卷起来以节省空间一样，我们也需要压缩我们的代码。

压缩代码

使用工具如UglifyJS来压缩JavaScript，使用CSS压缩工具来压缩CSS。这些工具会移除不必要的空格、注释，甚至可以重命名变量来减小文件大小。

// 压缩前
function addNumbers(a, b) {
  return a + b;
}

// 压缩后
function a(b,c){return b+c}

启用GZIP压缩

在服务器端启用GZIP压缩可以显著减少传输的数据量。大多数现代浏览器都支持GZIP，所以这是一个相对简单但效果显著的优化方式。

# Nginx配置示例
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

3. 利用浏览器缓存

让我们面对现实吧，用户可能不会每天都来访问你的网站（除非你是Facebook或Google）。所以，为什么不让浏览器帮我们存储一些文件呢？

设置适当的缓存头

通过设置适当的HTTP缓存头，可以让浏览器知道哪些文件可以缓存，缓存多长时间。

# Nginx配置示例
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
}

使用版本号

但是，如果你更新了文件怎么办？这就是为什么我们需要在文件名中加入版本号或哈希值。

<script src="app.js?v=1.2.3"></script>

4. 优化图片

图片通常是网页中最大的资源。优化图片可以大大减少加载时间。

选择正确的格式

对于照片，使用JPEG
对于需要透明度的图片，使用PNG
对于简单的图标，考虑使用SVG

压缩图片

使用工具如ImageOptim来压缩图片，可以在不明显降低质量的情况下减小文件大小。

使用响应式图片

针对不同的屏幕大小提供不同尺寸的图片。

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="描述">
</picture>

5. 延迟加载

不是所有的内容都需要立即加载。我们可以先加载首屏内容，其他内容等到需要时再加载。

延迟加载图片

只有当图片进入视口时才加载。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

代码分割

使用Webpack等工具进行代码分割，只加载当前页面需要的JavaScript。

// 使用动态import
button.addEventListener('click', e => {
  import('./dialogBox.js')
    .then(dialogBox => {
      dialogBox.open();
    })
    .catch(error => {
      /* Error handling */
    })
});

结语

优化首屏加载时间是一个持续的过程，需要不断测试和改进。记住，每一毫秒都很重要！通过以上这些技巧，你的网站加载速度应该能快到让用户感叹："哇，这网站是不是读懂了我的心思，在我想打开之前就已经加载完了？"

当然，如果你的网站依然加载缓慢，那可能不是技术问题，而是你的创意太过沉重，以至于连服务器都承受不住。在这种情况下，我建议你先优化一下你的创意，然后再来考虑技术优化。毕竟，再快的加载速度也拯救不了一个无聊的网站，不是吗？

现在，去优化你的网站吧，让它像闪电一样快，像火箭一样稳！

海码面试小程序

包含最新面试经验分享，面试真题解析，全栈2000+题目库，前后端面试技术手册详解；无论您是校招还是社招面试还是想提升编程能力，都能从容面对~

前端性能优化：如何减少首屏加载时间