--- theme: devui-blue highlight: a11y-dark --- # 前言面试官问你首屏优化没有？ # 什么是首屏优化是指在网页加载过程中，尽快展示给用户可见的内容，以提高用户体验和页面加载速度。 # 常用方法 ## 1、压缩和合并资源通过压缩CSS、JavaScript和HTML等静态资源文件，并将它们合并为较少的文件，可以减少网络请求次数和文件大小，加快页面加载速度。 ### 压缩以下是一个示例Webpack配置文件，展示如何使用`css-minimizer-webpack-plugin`、`mini-css-extract-plugin`压缩CSS文件和`terser-webpack-plugin`压缩JavaScript文件。 ```js 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`文件中，我们将引入压缩和合并后的静态资源文件。 ```html React App

``` 通过上述代码，我们将压缩和合并后的CSS文件和JavaScript文件引入到了`index.html`中。这样做可以减少网络请求次数和文件大小，提高页面加载速度。 ## 2、图片优化使用适当的图片格式（如JPEG、PNG、WebP）和压缩算法，对图片进行优化，减小图片文件大小，提高加载速度。同时，可以使用懒加载技术，延迟加载非首屏可见区域的图片，减少首屏的加载时间。举例一个懒加载示例 ```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的动态脚本加载技术。通过动态创建` ``` 在上述示例中，我们使用了`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放在页面头部，以便尽早渲染页面。 ```html 示例页面

欢迎来到示例页面

这是一个简单的示例页面。

``` 这样，浏览器在加载页面时会先加载CSS文件，并根据CSS规则渲染页面，从而提高页面的加载速度和性能。另外，还可以避免使用行内样式，因为它会增加HTML文件的大小，使得页面加载更慢。如果必须使用行内样式，也应该尽量减少其数量和大小，以便提高页面性能。 ## 6、JavaScript优化将JavaScript代码放在页面底部，以减少对页面渲染的阻塞。另外，可以通过代码压缩、去除不必要的注释和空格等方式来减小JavaScript文件的大小。 ```html JavaScript代码放在页面底部示例 ``` 示例中，将`script`标签放在了`body`标签的最后。这样做可以让浏览器在加载完页面主要内容后再加载JavaScript文件，从而减少对页面渲染的阻塞。 ## 7、缓存策略合理设置缓存策略，利用浏览器缓存来减少重复加载相同资源的次数，提高页面加载速度。 ```js // 假设我们有一个名为 "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（服务器端渲染）能够提高首屏渲染的原因有以下几点： 1. 减少客户端渲染时间：在传统的客户端渲染中，浏览器需要下载HTML文件，然后执行JavaScript代码来生成并填充页面内容。而在SSR中，服务器会在响应请求时直接生成完整的HTML页面，并包含所需的数据。这样，浏览器只需要下载已经渲染好的HTML，减少了客户端渲染的时间。 1. 提前获取数据：在客户端渲染中，通常需要通过异步请求获取数据，然后再进行页面渲染。而在SSR中，服务器会在渲染过程中获取所需的数据，并将数据直接注入到HTML中。这样可以避免客户端请求数据的延迟，加快了首屏渲染的速度。 1. 更好的SEO：由于搜索引擎爬虫更容易解析和索引静态HTML页面，使用SSR可以提供更好的SEO效果。因为在SSR中，服务器返回的是已经渲染好的HTML页面，而不是由JavaScript生成的动态内容。这使得搜索引擎可以更好地理解和索引网页内容，提高了网站在搜索结果中的可见性。 1. 更好的用户体验：由于SSR能够更快地呈现出首屏内容，用户可以更快地看到页面的基本结构和内容，减少了等待时间，提升了用户体验。 ### 可选用框架前端可以使用一些框架或库来实现服务器端渲染（SSR），下面是几个常用的前端框架： 1. `Next.js`：Next.js是一个基于React的SSR框架。它提供了简单的API和约定，使得构建SSR应用变得更加容易。Next.js支持自动代码分割、预取和缓存，以提高性能。它还提供了静态导出功能，可以将应用程序预渲染为静态HTML文件。 1. `Nuxt.js`：Nuxt.js是一个基于Vue.js的SSR框架。它提供了类似于Next.js的功能，可以帮助开发者快速构建Vue.js应用的SSR版本。Nuxt.js支持自动路由、代码分割和服务端数据获取等特性。 1. `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`属性引用。也可以在项目中配置基础路径 ```js 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、延迟加载非关键资源将非关键资源（如广告、推荐内容等）的加载延迟到首屏渲染完成之后，以提高首屏展示速度。 ```html 延迟加载示例

首屏内容

``` # 最后你快回答他，说`"我知道！！是...这样！"`