本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
面试官问你首屏优化没有？
什么是
首屏优化是指在网页加载过程中，尽快展示给用户可见的内容，以提高用户体验和页面加载速度。
常用方法
1、压缩和合并资源
通过压缩 CSS、JavaScript 和 HTML 等静态资源文件，并将它们合并为较少的文件，可以减少网络请求次数和文件大小，加快页面加载速度。
压缩
以下是一个示例 Webpack 配置文件，展示如何使用css-minimizer-webpack-plugin、mini-css-extract-plugin压缩 CSS 文件和terser-webpack-plugin压缩 JavaScript 文件。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');const TerserPlugin = require('terser-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { // 入口文件 entry: './src/index.js', // 输出文件 output: { filename: 'bundle.min.js', path: __dirname + '/dist', }, // 模块加载器 module: { rules: [ // 处理CSS文件 { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, // 处理JavaScript文件 { test: /\.js$/i, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, ], }, // 插件 plugins: [ new MiniCssExtractPlugin({ filename: 'styles.min.css', }), ], // 优化配置 optimization: { minimizer: [ // 压缩CSS文件 new CssMinimizerPlugin(), // 压缩JavaScript文件 new TerserPlugin(), ], },};合并静态资源
在index.html文件中，我们将引入压缩和合并后的静态资源文件。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>React App</title> <link rel="stylesheet" href="styles.min.css"></head><body> <div id="root"></div> <script src="bundle.min.js"></script></body></html>通过上述代码，我们将压缩和合并后的 CSS 文件和 JavaScript 文件引入到了index.html中。这样做可以减少网络请求次数和文件大小，提高页面加载速度。
2、图片优化
使用适当的图片格式（如 JPEG、PNG、WebP）和压缩算法，对图片进行优化，减小图片文件大小，提高加载速度。同时，可以使用懒加载技术，延迟加载非首屏可见区域的图片，减少首屏的加载时间。
举例一个懒加载示例
<!DOCTYPE html><html><head> <style> .image-container { height: 200px; width: 200px; overflow: hidden; background-color: #eee; } img { display: block; height: auto; width: 100%; } </style></head><body> <div class="image-container"> <img data-src="image.jpg" alt="Image" /> </div></body><script> document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]")); if ("IntersectionObserver" in window) { var lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { var lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.removeAttribute("data-src"); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // Fallback for browsers that don't support IntersectionObserver var lazyLoad = function() { lazyImages.forEach(function(lazyImage) { if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImage).display !== "none") { lazyImage.src = lazyImage.dataset.src; lazyImage.removeAttribute("data-src"); lazyImages = lazyImages.filter(function(image) { return image !== lazyImage; }); if (lazyImages.length === 0) { document.removeEventListener("scroll", lazyLoad); window.removeEventListener("resize", lazyLoad); window.removeEventListener("orientationchange", lazyLoad); } } }); }; document.addEventListener("scroll", lazyLoad); window.addEventListener("resize", lazyLoad); window.addEventListener("orientationchange", lazyLoad); }});</script></html>示例代码使用 IntersectionObserver API 实现图片懒加载，如果浏览器不支持该 API，则会回退到基于滚动事件的实现方式。
具体来说，该示例首先获取所有带有 data-src 属性的图片元素，并将它们保存在一个数组中。然后，如果浏览器支持 IntersectionObserver API，则创建一个 IntersectionObserver 对象，并为每个图片元素添加观察器。当图片元素进入视口时，观察器会将其 data-src 属性值设置为 src 属性值，并移除 data-src 属性。最后，观察器会取消对该图片元素的观察。
如果浏览器不支持 IntersectionObserver API，则会使用一个 lazyLoad 函数，该函数会在滚动、窗口大小调整或设备方向变化时被触发。在该函数中，会遍历所有带有 data-src 属性的图片元素，并检查它们是否在视口中可见。如果是，则将其 data-src 属性值设置为 src 属性值，并移除 data-src 属性。最后，会从数组中删除已经加载的图片元素，并检查数组是否为空。如果为空，则取消事件监听。
3、异步加载
将不影响首屏展示的资源（如统计代码、广告等）使用异步加载方式引入，避免阻塞首屏内容的加载。
可以使用 JavaScript 的动态脚本加载技术。通过动态创建<script>标签，并将其插入到文档中，可以实现异步加载资源而不阻塞首屏内容的加载。
举个示例：
function loadExternalScript(url) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.async = true; script.onload = () => { resolve(); }; script.onerror = () => { reject(new Error(`Failed to load script ${url}`)); }; document.head.appendChild(script); });}// 异步加载统计代码loadExternalScript('https://example.com/analytics.js') .then(() => { // 统计代码加载完成后执行的逻辑 console.log('Analytics script loaded'); }) .catch((error) => { console.error(error); });// 异步加载广告代码loadExternalScript('https://example.com/advertisement.js') .then(() => { // 广告代码加载完成后执行的逻辑 console.log('Advertisement script loaded'); }) .catch((error) => { console.error(error); });在上面的代码中，loadExternalScript()函数用于动态加载外部脚本。通过将async属性设置为true，确保脚本以异步方式加载，不会阻塞其他资源的加载。然后，我们可以在then()方法中执行相应的逻辑，以响应脚本加载完成的事件。
4、预加载关键资源
通过预加载关键资源（如字体文件、重要的 CSS 和 JavaScript 文件等），可以在首屏展示之前提前加载这些资源，加快后续页面加载的速度。
要实现预加载关键资源，可以使用 HTML 中的link和script标签的rel属性来指定资源的加载方式。
举个示例，演示如何预加载字体文件、CSS 和 JavaScript 文件：
<!DOCTYPE html><html><head> <title>预加载关键资源示例</title> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="styles.css" as="style" crossorigin> <link rel="preload" href="script.js" as="script" crossorigin> <style> /* 首屏样式 */ body { font-family: 'FontName', sans-serif; } </style> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script></head><body> <!-- 页面内容 --></body></html>在上述示例中，我们使用了link标签来预加载字体文件、CSS 和script标签来预加载 JavaScript 文件。具体解释如下：
link标签用于预加载字体文件。href属性指定字体文件的 URL，as属性设置为 "font"，表示该资源是字体文件，type属性指定资源的 MIME 类型，crossorigin属性用于处理跨域请求。同样地，我们使用
link标签预加载 CSS 文件。as属性设置为 "style"，表示该资源是样式表。最后，我们使用
script标签预加载 JavaScript 文件。as属性设置为 "script"，表示该资源是脚本文件，defer属性用于延迟脚本的执行。
通过以上代码，浏览器在解析 HTML 时会提前加载这些关键资源，以加快后续页面加载的速度。
5、CSS 优化
避免使用过多的 CSS 文件和行内样式，尽量减少 CSS 文件的大小。另外，可以将 CSS 放在页面头部，以便尽早渲染页面。
<!DOCTYPE html><html> <head> <title>示例页面</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>欢迎来到示例页面</h1> <p>这是一个简单的示例页面。</p> </body></html>这样，浏览器在加载页面时会先加载 CSS 文件，并根据 CSS 规则渲染页面，从而提高页面的加载速度和性能。
另外，还可以避免使用行内样式，因为它会增加 HTML 文件的大小，使得页面加载更慢。如果必须使用行内样式，也应该尽量减少其数量和大小，以便提高页面性能。
6、JavaScript 优化
将 JavaScript 代码放在页面底部，以减少对页面渲染的阻塞。另外，可以通过代码压缩、去除不必要的注释和空格等方式来减小 JavaScript 文件的大小。
<!DOCTYPE html><html><head> <title>JavaScript代码放在页面底部示例</title></head><body> <!-- 页面内容 --> <script src="script.js"></script></body></html>示例中，将script标签放在了body标签的最后。这样做可以让浏览器在加载完页面主要内容后再加载 JavaScript 文件，从而减少对页面渲染的阻塞。
7、缓存策略
合理设置缓存策略，利用浏览器缓存来减少重复加载相同资源的次数，提高页面加载速度。
// 假设我们有一个名为 "api.js" 的模块，用于发送网络请求// 缓存对象，用于存储已经请求过的数据和过期时间const cache = {};// 发送网络请求的函数async function fetchData(url) { // 检查缓存中是否存在数据 if (cache[url] && cache[url].expires > Date.now()) { console.log('从缓存中获取数据:', cache[url].data); return cache[url].data; } // 发送网络请求 const response = await fetch(url); const data = await response.json(); // 设置缓存有效期为1小时 const expires = Date.now() + 3600000; // 将数据和过期时间存入缓存 cache[url] = { data, expires }; console.log('从服务器获取数据:', data); return data;}// 在页面中使用 fetchData 函数来获取数据async function getData() { const url = 'https://api.example.com/data'; try { const data = await fetchData(url); // 处理数据 console.log('处理数据:', data); } catch (error) { console.error('请求失败:', error); }}// 调用获取数据的函数getData();示例中，定义了一个 fetchData 函数来发送网络请求，并使用一个名为 cache 的对象用于存储已经请求过的数据和过期时间。
当调用 fetchData 函数时，它首先检查缓存中是否已经存在对应 URL 的数据和过期时间。如果存在且有效，则直接从缓存中获取数据，并返回。否则，则发送网络请求获取数据，并将数据与有效期时间戳存入缓存中。
在调用 getData 函数时，它会调用 fetchData 函数来获取数据，并对返回的数据进行处理。
通过这样的缓存策略，当多次调用 getData 函数时，如果 URL 相同，那么后续的请求会直接从缓存中获取数据，而不需要再次发送网络请求。这样可以减少重复加载相同数据的次数，提高页面加载速度和用户体验。
8、服务端渲染（SSR）
缘由
SSR（服务器端渲染）能够提高首屏渲染的原因有以下几点：
减少客户端渲染时间：在传统的客户端渲染中，浏览器需要下载 HTML 文件，然后执行 JavaScript 代码来生成并填充页面内容。而在 SSR 中，服务器会在响应请求时直接生成完整的 HTML 页面，并包含所需的数据。这样，浏览器只需要下载已经渲染好的 HTML，减少了客户端渲染的时间。
提前获取数据：在客户端渲染中，通常需要通过异步请求获取数据，然后再进行页面渲染。而在 SSR 中，服务器会在渲染过程中获取所需的数据，并将数据直接注入到 HTML 中。这样可以避免客户端请求数据的延迟，加快了首屏渲染的速度。
更好的 SEO：由于搜索引擎爬虫更容易解析和索引静态 HTML 页面，使用 SSR 可以提供更好的 SEO 效果。因为在 SSR 中，服务器返回的是已经渲染好的 HTML 页面，而不是由 JavaScript 生成的动态内容。这使得搜索引擎可以更好地理解和索引网页内容，提高了网站在搜索结果中的可见性。
更好的用户体验：由于 SSR 能够更快地呈现出首屏内容，用户可以更快地看到页面的基本结构和内容，减少了等待时间，提升了用户体验。
可选用框架
前端可以使用一些框架或库来实现服务器端渲染（SSR），下面是几个常用的前端框架：
Next.js：Next.js 是一个基于 React 的 SSR 框架。它提供了简单的 API 和约定，使得构建 SSR 应用变得更加容易。Next.js 支持自动代码分割、预取和缓存，以提高性能。它还提供了静态导出功能，可以将应用程序预渲染为静态 HTML 文件。Nuxt.js：Nuxt.js 是一个基于 Vue.js 的 SSR 框架。它提供了类似于 Next.js 的功能，可以帮助开发者快速构建 Vue.js 应用的 SSR 版本。Nuxt.js 支持自动路由、代码分割和服务端数据获取等特性。Angular Universal：Angular Universal 是 Angular 官方提供的 SSR 解决方案。它允许在服务器上预渲染 Angular 应用，以提供更好的性能和 SEO 效果。Angular Universal 可以与 Angular CLI 集成，方便开发者进行构建和部署。
9、CDN 加速
使用内容分发网络（CDN）来加速静态资源的传输，将资源缓存在离用户较近的服务器上，减少网络延迟。
下面以一个网站为例，说明 CDN 如何工作：
假设有一个名为 www.example.com 的网站，该网站拥有许多静态资源，如图像、CSS 文件和 JavaScript 文件等。这些资源可能存储在网站的主机上，但是由于主机的位置和用户之间的距离不同，因此用户在访问这些资源时可能会遇到网络延迟。
为了解决这个问题，网站所有者可以使用 CDN 服务。CDN 服务通常由多个服务器组成，这些服务器分布在全球各地，每个服务器都缓存了网站的静态资源。当用户请求这些资源时，CDN 会将请求路由到最近的服务器，从而减少网络延迟并提高资源加载速度。
例如，当用户从中国访问 www.example.com 时，CDN 会将用户请求路由到位于中国的服务器。如果该服务器上已经缓存了所需的静态资源，那么用户将立即获得资源。否则，CDN 将从主机上获取资源，并将其缓存到服务器上，以便以后的请求可以更快地获取资源。
总之，使用 CDN 可以提高网站性能，减少网络延迟，提高用户体验。
一般直接在模板中使用script标签src属性引用。 也可以在项目中配置基础路径
const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 其他配置项... output: { // 设置输出路径和文件名 path: path.resolve(__dirname, 'dist'), filename: '[name].[contenthash].js', publicPath: 'https://cdn.example.com/' // 设置CDN路径 }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 在HTML模板中使用CDN路径 cdnPath: 'https://cdn.example.com/' }), // 其他插件... ], // 其他配置项...};10、延迟加载非关键资源
将非关键资源（如广告、推荐内容等）的加载延迟到首屏渲染完成之后，以提高首屏展示速度。
<!DOCTYPE html><html><head> <title>延迟加载示例</title></head><body> <h1>首屏内容</h1> <!-- 非关键资源 --> <div id="ad-container"></div> <script src="ad.js" defer></script> <script> // 首屏渲染完成后执行 window.addEventListener('load', function() { // 加载广告 var adContainer = document.getElementById('ad-container'); var adScript = document.createElement('script'); adScript.src = 'ad.js'; adContainer.appendChild(adScript); }); </script></body></html>最后
你快回答他，说"我知道！！是...这样！"
点击关注公众号，“技术干货__” 及时达！
==============================================