前端基础

16 10月

网站性能优化的实战指南

2021-10-16 前端基础

网站性能优化的实战指南

性能优化是应用程序开发必须的工作之一，其目的之一为用户提供极致的速度体验，本文总结 WEB 应用或者网站可以快速实操的经验。

应用本身

应用或者网站本身的优化，不包括逻辑和代码的优化。其中包括大家熟悉的资源最小化、图片懒加载、减少HTTP请求、延迟加载、预加载。

资源最小化

资源（静态资源）压缩是指从 HTML、CSS 和 JavaScript 中删除不需要加载的不必要的冗余数据的过程，包括删除代码注释和格式、空白字符、未使用的代码、换行符等。现在的前端技术，这些工作都有现成的工具可以完成。

缩小 HTML、CSS 和 JavaScript 将加快前端加载时间，因为它减少了需要从服务器请求的代码量。

生成 HTML、CSS 和 JavaScript 代码的优化版本可以借助工具，如下：

延迟加载

延迟加载有助于进一步缩短前端加载时间，使用延迟加载，首先确保主要的内容先加载，如页面框架、文本内容、首屏内容等。在实际应用中可以对 JavaScript 进行延迟加载，HTML 中可以有两个相关属性 async 和 defer ， 这个两个属性使得 script 都不会阻塞DOM 的渲染。：

  • defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
  • async：会使得 script 脚本异步的加载并在允许的情况下执行，并且不会按着 script 在页面中的顺序来执行，而是谁先加载完谁执行。
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-157283337-2"></script>
<script defer src="https://www.googletagmanager.com/gtag/js?id=UA-157283337-2"></script>

图片懒加载

图片懒加载又称图片延时加载、惰性加载，即在用户需要看到图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度。

通常将页面中的 img 标签属性 src 指向一张小尺寸图片或者为空，然后定义 data-src 属性指向真实的图片。当载入页面时，先把可视区域内的 img 标签的 data-src 属性值赋值给 src ，然后增加页面滚动事件，把用户即将看到的图片加载。

如果不想自己写代码，可以使用第三方脚本库，如 lazyload 。

现代浏览器也实现了懒加载的功能，即为需要实现懒加载的标签增加属性 loading="lazy"，如：

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

预加载

预加载就是通过设置相应的资源属性告诉浏览器是否需要预取，包括 CSS文件、JavaScript文件、DNS接下，主要是在HTML页面的 <head></head> 间加入 <meta />：

<link rel="dns-prefetch" href="//www.devpoint.cn" />
<link rel="preload" as="style" href="/devpoint/public/css/site.css"/>
<link as="script"  rel="preload" href="/devpoint/public/scripts/site_min.js" />

减少HTTP请求

减少HTTP请求，常见的原则页面尽量只有一个 CSS 文件和一个 JavaScript 文件，CSS小图片使用 CSS Sprites （使用图像集合拼接成一个图像文件，然后通过使用 CSS 中的 background-image 和 background-position 属性来显示所需的图像区域。这样做可以减少了所需的服务器请求数量）。

服务器侧

服务器侧这里简单介绍部署环境的优化，常见的方式是为静态资源增加缓存、压缩文件。

缓存

为静态资源增加缓存是常见的处理方式，通常在项目开发中建议采用动静分离，即所谓的静态资源与应用本身分离，方便对静态资源进行优化，增加缓存或者增加CDN都可以方便的实现。下面是以Nginx的配置为例，为静态资源增加缓存：

 location ~* \.(gif|webp|txt|jpg|jpeg|png|swf|flv|ico|mp4|js|css|eot|ttf|woff|woff2|svg|bmp|doc|zip|docx|rar)$ {
    proxy_cache cache_one;
    proxy_cache_valid 200 302 24h;
    proxy_cache_valid 301 30d;
    proxy_cache_valid any 5m;
    expires 90d;
}

压缩文件

对于WEB项目，可以使用合适的方法压缩文件，可以轻松地对前端的加载时间产生重大影响。以下是可以遵循的两个不错的文件压缩选项：

Gzip ：最流行的数据压缩和解压缩方法，所有现代浏览器都支持，Gzip 在将站点的 HTML、CSS 和 JavaScript 包发送到浏览器之前先在服务器端对其进行压缩，然后在客户端解压缩文件并传送内容。
Brotli ：与当前可用的压缩方法相比，它提供了最佳的压缩率，根据 CertSimple 的研究，Brotli 压缩 JavaScript 文件比 Gzip 小14%，而 HTML 和 CSS 压缩率比 Gzip 好 21% 和 17%。

gzip on;
gzip_vary on;
gzip_proxied off;
gzip_comp_level 3;
gzip_buffers 32 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

总结

性能黄金法则：80-90% 的最终用户响应时间用于下载前端组件，例如图像、样式表、脚本等。

因此，优化前端数据加载对于降低跳出率和增加用户在网站上的停留时间至关重要。

lazyloadnginx性能优化缓存