关于前端:快速优化-Web-性能的10-个手段

30次阅读

共计 5600 个字符，预计需要花费 14 分钟才能阅读完成。

作者：Marc

翻译：疯狂的技术宅

https://dev.to/marcradziwill/…

未经容许严禁转载

优化网站的性能须要破费大量的工夫，并且如果要依据本人的需要进行优化则破费的工夫可能更多。

在本文中，我将向你展现 10 个疾速优化 Web 性能的伎俩，能在 5 分钟内用于你本人的网站。这些捷径对你的代码库或服务器配置简直没有什么影响。它们简略且容易实现，无需具体理解它们的原理，并且可能对你的性能产生重大影响。

应用文本压缩，能够最大水平地缩小通过网络传输的字节数。有几种压缩算法。gzip 是最受欢迎的，但 Brotli 是一种更新甚至更好的压缩算法。如果要查看服务器是否反对 Brotli，则能够应用 Brotli.pro 工具。

如果你的服务器不反对 Brotli，则能够依照以下简略指南进行装置：

Nginx on Linux
Apache
NodeJs – Express

这是你可能收费失去的第一个优化伎俩，大多数托管平台或 CDN 默认都会提供压缩。

未压缩的图像是潜在的微小性能瓶颈。如果不对图像进行压缩，将会耗费很大的带宽。有几种有用的工具可用于疾速压缩图像，而不会损失可见品质。我通常应用 Imagemin。它反对多种图像格式，你能够在命令行界面下应用或应用 npm 模块。

imagemin img/* --out-dir=dist/images

你能够将 npm 模块用到 webpack、gulp 或 grunt 等打包程序中。

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [imageminMozjpeg({quality: 60}),
        ]
      }
  );
  console.log(files);
})();

个别状况下可将 4MB 大小的文件减小到 100kB。能够在 Github 中查看演示代码。

单位	文件大小，无压缩	压缩文件大小	文件大小缩小百分比
Bytes	4156855 Bytes	103273 Bytes	-97%
MB/kB	4MB	103 kB	-97%

应用古代图像格式能够真正进步性能。WebP 图像比 JPEG 和 PNG 都小，通常小 25%～35%。WebP 失去了浏览器的广泛支持。

咱们应用 imagemin npm 包并为其增加 WebP 插件。以下代码可将图像的 WebP 版本输入到 dist 文件夹中。

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async() => {
  const files = await imagemin(['img/*.jpg'],
      {
        destination: 'dist/img',
        plugins: [imageminWebp({quality: 50})
        ]
      }
  );
  console.log(files);
})();

再看一下文件大小：

单位	文件大小，无压缩	压缩文件大小	文件大小缩小百分比
Bytes	4156855 Bytes	58940 Bytes	-98%
MB/kB	4MB	59 kB	-98%

结果表明，与原始图像相比，文件大小缩小了 98%，并且与压缩的 JPG 文件相比，WebP 更加显著的压缩了图像。WebP 版本比压缩的 JPEG 版本小 43%。

图像惰性加载是一种在当前加载临时不显示在屏幕上的图像的技术。当解析器遇到图像时立刻加载的话会减慢初始页面的加载速度。应用惰性加载，能够减速页面加载过程并稍后加载图像。应用 lazysizes 能够轻松实现此操作。你能够把上面这样的代码：

<img src="image.jpg" alt="">

改为：

<img data-src="image.jpg" class="lazyload" alt="">

lazysizes 库会解决其余的工作，能够应用浏览器进行验证。关上你的站点并找到图像标签。如果该 class 从 lazyload 变成了 lazyloaded，则意味着它能够失常工作。

缓存是一种能够疾速进步网站速度的办法。它缩小了老用户的页面加载工夫。如果你有权限拜访服务器缓存，则用起来非常简单。

你能够应用以下 API 进行缓存：

Cache-Control
ETag
Last-Modified

CSS 是渲染阻止的。这意味着浏览器必须先下载并解决所有 CSS 文件，而后能力绘制像素。通过内联要害的 CSS，能够大大放慢此过程。

你能够依照以下步骤进行操作：

如果你不晓得你的要害 CSS 是什么，则能够通过 Critcal、CriticalCSS 或 Penthouse 来帮忙。这些库都用来从给定视口中可见的 HTML 文件中提取 CSS。

上面是应用 criticalCSS 的例子。

var criticalcss = require("criticalcss");

var request = require('request');
var path = require('path');
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();

var cssUrl = 'https://web.dev/app.css';
var cssPath = path.join(tmpDir, 'app.css');
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {criticalcss.getRules(cssPath, function(err, output) {if (err) {throw new Error(err);
    } else {criticalcss.findCritical("https://web.dev/", { rules: JSON.parse(output) }, function(err, output) {if (err) {throw new Error(err);
        } else {console.log(output);
          // 将其保留到文件以进行第 2 步
        }
      });
    }
  });
});

当 HTML 解析器遇到 style 标签时会立刻解决要害的 CSS。

<head>
  <style>
  body {...}
  /* ... 其余的要害 CSS */
  </style>
</head>

非关键的 CSS 不须要立刻进行解决。浏览器能够在 onload 事件之后再加载它，使用户不用期待。

<link rel="preload" href="/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/styles.css"></noscript>

JavaScript 是 HTML 解析器阻止的。浏览器必须期待 JavaScript 执行能力实现对 HTML 的解析。然而你能够通知浏览器期待 JavaScript 执行。

通过 async 属性，你能够通知浏览器异步加载脚本。

<script src="app.js" async></script>

defer 属性通知浏览器在 HTML 解析器实现文档解析之后再运行脚本，但在事件产生之前，将会触发 DOMContentLoaded。

<script src="app.js" defer></script>

内联脚本会立刻执行，浏览器对其进行解析。因而，你能够将它们放在 HTML 的开端，紧接在 body 标记之前。

资源提醒可能诉浏览器当前可能加载什么页面。该标准定义了四个原语：

preconnect（预连贯）
dns-prefetch（DNS 预取）
prefetch（预取）
prerender（预渲染）

另外，对于资源提醒，咱们将 preload 关键字用于 link 属性。

上面的代码通知浏览器你要建设与另一个域的连贯。浏览器将为此连贯做筹备。应用预连贯链接标签能够将加载工夫缩短 100–500 ms。那么什么时候应该用它呢？直白的说：当你晓得在哪里拿货色但不晓得该怎么拿。比方哈希款式文件（styles.2f2k1kd.css）这类的货色。

 <link rel="preconnect" href="https://example.com">

如果你想通知浏览器将要建设与非要害域的连贯，则能够用 dns-prefetch 进行预连贯。这大概可能为你节俭 20–120 毫秒。

 <link rel="dns-prefetch" href="http://example.com">

应用预取，你能够通知浏览器下载链接标记中所指的整个网站。你能够预取页面或资源。预取在放慢网站速度方面十分有用，然而要留神有可能升高网站速度的状况。

低端设施或网速较慢的状况下可能会遇到问题，因为浏览器会始终忙于预取。你能够思考将预取与自适应加载联合应用，也能够将智能预取与 quicklink 和 Guess.js 联合应用：

<link rel="prefetch" href="index.html" as="document">
<link rel="prefetch" href="main.js" as="script">
<link rel="prefetch" href="main.css" as="style">
<link rel="prefetch" href="font.woff" as="font">
<link rel="prefetch" href="image.webp" as="image">

<link rel="prerender" href="https://example.com/content/to/prerender">

应用预渲染时，将会先加载内容，而后在后盾渲染。当用户导航到预渲染的内容时，内容会立刻显示。

借助预加载性能，浏览器会失去援用的资源很重要的提醒，应尽快获取。古代浏览器很擅长于对资源进行优先级排序，所以应该只对要害资源应用预加载。可思考用预连贯和预取代替，或者尝试应用 instant.page。

<link rel="preload" as="script" href="critical.js">

Google Fonts 很不错。他们提供了优质的服务，并且利用宽泛。如果你不想本人托管字体，那么 Google 字体是一个很不错的抉择。然而你应该留神如何实现它们。Harry Roberts 写了一篇十分杰出的文章，内容波及怎么用 Google Fonts 来为网站减速。强烈建议浏览。

如果你只想晓得怎么用，能够通过上面的代码段进行 Google 字体集成，但功绩归功于 Harry。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=...&display=swap"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap" media="print" onload="this.media='all'"/>
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=...&display=swap"/></noscript>

service worker 是浏览器在后盾运行的脚本。缓存是最罕用的性能之一，也是你最应该应用的性能。我认为这不是抉择问题。通过 service worker 施行缓存，能够使用户与你的站点之间的交互速度更快，而且即便用户断网也能够拜访你的网站。

在本文中，我向你介绍 10 个疾速优化 Web 性能的伎俩，能在 5 分钟内用于你本人的网站。你能够在 GitHub 中找到相干资源。

深刻了解 Shadow DOM v1
一步步教你用 WebVR 实现虚拟现实游戏
13 个帮你进步开发效率的古代 CSS 框架
疾速上手 BootstrapVue
JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
WebSocket 实战：在 Node 和 React 之间进行实时通信
对于 Git 的 20 个面试题
深刻解析 Node.js 的 console.log
Node.js 到底是什么？
30 分钟用 Node.js 构建一个 API 服务器
Javascript 的对象拷贝
程序员 30 岁前月薪达不到 30K，该何去何从
14 个最好的 JavaScript 数据可视化库
8 个给前端的顶级 VS Code 扩大插件
Node.js 多线程齐全指南
把 HTML 转成 PDF 的 4 个计划及实现

更多文章 …

正文完

前端

发表至：前端

2020-09-11

0

关于前端:Pinia与Vuex的对比Pinia是Vuex的良好替代品吗

怎么利用ApiPost接口管理工具校验测试接口返回结果是否符合预期

关于前端:vite环境变量配置

审核警告datacustom太新无法在此检查的页面上运行

关于spring:SpringBoot-WebFlux-系列-header-参数解析

关于前端:快速优化-Web-性能的10-个手段

1. 应用文本压缩

2. 图像压缩

3. 图片格式

4. 图像惰性加载

5. 缓存你的资源：HTTP 缓存头

6. 内联要害 CSS：推延非关键 CSS

辨认要害的 CSS

内联要害 CSS

提早不重要的 CSS

7. JavaScript 异步及提早加载

异步加载 JavaScript

Defer JavaScript

调整内联脚本的地位

8. 应用资源提醒放慢交付速度。

preconnect

dns-prefetch

prefetch

prerender

preload

9. 应用 Google Fonts

10. 用 service worker 来缓存你的资源

总结

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

Just My Socks（注册教程内含优惠码）

关于前端:快速优化-Web-性能的10-个手段

1. 应用文本压缩

2. 图像压缩

3. 图片格式

4. 图像惰性加载

5. 缓存你的资源：HTTP 缓存头

6. 内联要害 CSS：推延非关键 CSS

辨认要害的 CSS

内联要害 CSS

提早不重要的 CSS

7. JavaScript 异步及提早加载

异步加载 JavaScript

Defer JavaScript

调整内联脚本的地位

8. 应用资源提醒放慢交付速度。

preconnect

dns-prefetch

prefetch

prerender

preload

9. 应用 Google Fonts

10. 用 service worker 来缓存你的资源

总结

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）