李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

前端性能优化: 如何让网站加载更快，提高用户体验 ​

一、简介 ​

  • 介绍网站性能优化的重要性，如：降低网站跳出率，提高搜索引擎排名，提高用户体验等
  • 介绍性能优化的目标，如：减少页面加载时间，减少页面体积，优化页面渲染速度等

介绍网站性能优化的重要性 ​

降低网站跳出率 ​

  • 网站跳出率是指用户在访问网站后很快就离开了网站，这是网站经营者不愿意看到的。
  • 网站性能优化能够减少页面加载时间，提高页面响应速度，使得用户更愿意在网站上停留，从而降低网站跳出率。

提高搜索引擎排名 ​

搜索引擎会根据网站性能来评估网站排名，网站性能越优秀，排名越靠前。网站性能优化能够使得网站加载更快，页面体积更小，更容易被搜索引擎抓取，从而提高搜索引擎排名。

提高用户体验 ​

网站性能优化能够提高用户体验，使得页面加载更快，操作更流畅，降低等待时间。

好的用户体验能够使用户更愿意在网站上购物或使用网站的服务，提高网站的转化率。

介绍性能优化的目标 ​

减少页面加载时间 ​

页面加载时间是指从用户点击链接到页面完全加载完成的时间。

减少页面加载时间能够提高用户体验，降低网站跳出率。

减少页面体积 ​

页面体积是指页面所需下载的文件体积。

减少页面体积能够提高页面加载速度，提高搜索引擎排名。

优化页面渲染速度 ​

页面渲染速度是指浏览器将页面元素渲染到屏幕上的时间。

优化页面渲染速度能够提高用户体验，提高页面响应速度。

减少资源请求数量 ​

  • 资源请求数量是指页面加载过程中浏览器向服务器发送请求的数量。

  • 减少资源请求数量能够提高页面加载速度，节省带宽和服务器资源，使得网站在高流量时也能保持稳定的性能。

具体来说，可以通过以下方式来减少资源请求数量：

  • 使用 CSS sprites 来合并多张图片为一张
  • 使用 data URI 来嵌入小图片
  • 使用 icon font 来代替多张 icon 图片
  • 使用 Content Delivery Network (CDN) 来加速静态资源的加载
  • 使用浏览器缓存来减少重复请求

这些方法都可以帮助你减少资源请求数量，提高网站性能。

二、网络优化 ​

  • 详细解释如何减少 HTTP 请求，如使用 CSS Sprites, 使用内联图像，使用 data URI 等
  • 详细解释如何使用 CDN，如：CDN 加速的原理，如何配置 CDN, 常见 CDN 服务商等
  • 详细解释如何压缩文件，如：使用 gzip 和 brotli 压缩，使用 minify 工具压缩代码等
  • 详细解释如何使用缓存，如：使用 HTTP 缓存, 使用 service worker 缓存，使用 localstorage 缓存等

详细解释如何减少 HTTP 请求 ​

使用 CSS Sprites: ​

通过将多张小图片合并成一张大图，减少图片请求数。

它是通过在 CSS 中定位来控制图片显示，从而达到减少请求的目的

使用内联图像: ​

将图片转换成 base64 编码，嵌入在 HTML 或 CSS 中，减少图片请求数。

这种方式最适用于小图片，因为 base64 编码会增加图片体积

使用 Data URI: ​

与内联图像类似，也是将图片转换为 base64 编码，然后嵌入在 CSS 或 HTML 中，减少图片请求数，

但是和内联图像不同的是，data URI 是以 data: 开头的 URI scheme

下面是一个具体的例子来说明内联图像和 Data URI 的区别：

内联图像示例:

html
<img src="data:image/png;base64,iVBORw0KGgA... " alt="example" />

Data URI 示例:

html
<a href="data:application/pdf;base64,JVBERi0xLjMKJcfs...">Download Resume</a>

这里举的例子是一张图片使用内联图像和一个下载的 pdf 文件使用 Data URI。

内联图像主要用于减少图片请求数，而 Data URI 则可以用于嵌入其他类型的数据，如文件。

在实际操作中，需要根据网站的具体情况进行选择和组合使用。

使用图片 CDN : ​

利用 CDN 的缓存机制，将图片放在 CDN 上，减少图片请求数。

使用浏览器缓存 : ​

通过在 HTTP 头中设置缓存控制（Expires 或 Cache-Control），让浏览器缓存资源，减少重复请求。

使用浏览器缓存是一种常用的性能优化技巧，它可以通过在 HTTP 头中设置缓存控制（Expires 或 Cache-Control）来让浏览器缓存资源。

Expires 头是 HTTP/1.0 版本中的缓存控制方法，它可以设置资源的过期时间。Expires 头的值是一个 HTTP-date，表示资源在该时间之后会失效。

Cache-Control 头是 HTTP/1.1 版本中的缓存控制方法，它提供了更灵活的缓存控制选项。Cache-Control 头的值可以是一个指令，如 no-cache、no-store、public 等，也可以是一个 max-age 值，表示资源在该时间之后会失效。

通过设置这些缓存控制头，浏览器会将资源缓存在本地，当用户再次访问该资源时，浏览器会直接使用本地缓存，而不是发送 HTTP 请求，从而减少重复请求和网络传输时间。

但是需要注意的是，浏览器缓存并不能永久有效，资源的过期时间会根据缓存控制头来决定。当资源过期时，浏览器会发送一个验证请求（如 If-Modified-Since 或 If-None-Match）来确定资源是否被更新。如果资源没有更新，则服务器会返回一个 304 Not Modified 的响应码，表示浏览器可以继续使用本地缓存；如果资源已经更新，则服务器会返回新的资源。

通过缓存控制头和浏览器缓存能够有效地减少重复请求，提高网页加载速度，提高用户体验。

cache-Control 头的值

  • public: 表示该响应可以被任何对象缓存。
  • max-age: 表示缓存的对象在多少秒之后过期。
  • no-cache: 表示缓存的对象在过期之后，必须再次与服务器验证缓存的有效性。
  • no-store: 表示缓存的对象不能被缓存。

需要注意的是，不同的缓存控制值会有不同的影响，因此在使用时需要根据实际需要进行选择。

例如，如果你的项目中有些资源需要经常更新，那么就可以使用 no-cache 或 must-revalidate 来控制缓存；如果你的项目中有些资源不需要经常更新，那么就可以使用 max-age 来控制缓存。

请注意，在某些情况下，使用缓存控制值不能够解决所有问题，还需要使用其他方法来优化性能，如使用 CDN 加速网络请求，进行代码压缩和合并，使用浏览器预加载等。

在使用缓存控制值时，还需要注意一些问题，如：

  • 浏览器缓存是基于浏览器的，因此不能保证所有用户都能够使用缓存。
  • 缓存控制值只对静态资源有效，对于动态资源不能使用。
  • 缓存控制值不能控制客户端缓存的大小，因此如果缓存过多的资源可能会导致性能问题。

所以,在使用缓存控制值之前, 需要先考虑项目的需求,再根据需求来选择缓存控制值,并需要多结合其他优化手段来提高网站性能。

合并文件 : ​

将多个 CSS 或 JavaScript 文件合并成一个，减少文件请求数。

这些方法都可以帮助你减少 HTTP 请求，提高网站性能。

在实际操作时，需要根据网站的具体情况进行选择和组合使用。

三、前端构建工具优化 ​

  • 使用预处理器和模块打包器
  • 介绍预处理器和模块打包器的作用，如：使用预处理器简化 CSS 代码，使用模块打包器管理 JavaScript 代码
  • 介绍常用的预处理器和模块打包器，如：Sass, Less, Stylus 作为 CSS 预处理器，Webpack, Rollup, Parcel 作为模块打包器
  • 介绍如何在项目中使用预处理器和模块打包器，如：如何配置预处理器和模块打包器，如何使用预处理器和模块打包器构建项目
  • 使用 tree shaking 和 code splitting
  • 介绍 tree shaking 和 code splitting 的作用，如：减少代码体积，提高页面加载速度
  • 介绍如何在项目中使用 tree shaking 和 code splitting，如：如何配置 tree shaking 和 code splitting，如何使用 tree shaking 和 code splitting 优化项目性能

四、JavaScript 优化 ​

  • 详细解释如何使用解释器优化，如：使用 V8 引擎的优化技巧，使用 Chrome DevTools 来调试 JavaScript 性能等
  • 详细解释如何减少重绘和重排，如：使用 requestAnimationFrame 优化动画性能，使用 will-change 优化渲染性能等
  • 详细解释如何避免阻塞主线程，如：使用 web workers, 使用 requestIdleCallback 等
  • 详细解释如何使用 requestAnimationFrame，如：使用 requestAnimationFrame 代替 setTimeout 和 setInterval

五、CSS 优化 ​

  • 详细解释如何使用 CSS 预处理器，如：使用 sass, less, stylus 优化 CSS 代码
  • 详细解释如何使用 CSS 压缩工具，如：使用 clean-css, csso 等工具来压缩 CSS 代码
  • 详细解释如何避免使用 CSS 表达式，因为它们会导致频繁重排和重绘
  • 详细解释如何使用精确的选择器，如：使用 class 选择器而不是 tag 选择器

六、图像优化 ​

  • 详细解释如何使用 CSS3 代替图像，如：使用 CSS3 的 background-image 属性来代替 标签，使用 CSS3 的 border-image 属性来代替边框图像
  • 详细解释如何使用 WebP 格式，如： WebP 的优势，如何在不支持 WebP 的浏览器中显示其他格式的图像

七、实践建议 ​

  • 介绍常用的前端性能优化工具链，如：WebPageTest，Lighthouse，PageSpeed Insights 等
  • 介绍如何使用调试和监控工具来监控网站性能，如：使用 Chrome DevTools 来调试网站性能，使用 New Relic 等工具来监控网站性能
  • 提供一些参考文献，如前端性能优化的经典书籍，常用的前端性能优化博客和网站等。