关于前端:仅需-5-分钟快速优化-Web-性能的10-个手段

作者：Marc
译者：前端小智
起源：dev

自己曾经过原作者制受权翻译。

104 程序狂欢节，前端开发工程师必读书籍有哪些值得举荐？

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

在这篇文章中，次要介绍 10 种疾速进步网站性能的办法，你只需 5 分钟内就能够将它利用到你的网站上，废话不多说，让咱们进入正题吧 ????。

文件压缩，能够缩小网络传输的字节数。有几种压缩算法。Gzip 是最风行的，然而对于 Brotli，你能够应用一种更新的、甚至更好的压缩算法。如果想查看您的服务器是否反对Brotli，能够应用 Brotli.pro。

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

Nginx on Linux
Apache
NodeJs – Express

未压缩的图像是一个微小的潜在性能瓶颈。如果在将图像提供给用户之前没有压缩它们，那么就会传输不必要的字节。有几个有用的工具能够用于疾速压缩图像且不损失可见品质。我次要应用 Imagemin。它反对许多图像格式，您 w 你以将其用作命令行界面或 npm 模块。

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

你还能够将 npm 引入到我的项目里，应用imagemin-mozjpeg，能够将 JPEG 图像压缩到原有的60%：

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:

应用古代图像格式能够真正进步性能。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);
})();

咱们再次看一下文件大小：

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

提早加载图像是一种稍后而不是提前加载屏幕外图像的技术。当解析器遇到正确加载的图像时，会减慢初始页面加载速度。通过提早加载，能够放慢这个过程并在当前加载图像。应用 lazysize 很容易做到这一点。应用 lazysize 脚本和浏览器对 loading 属性的反对，你能够这样优化：

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

改成：

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

该库会解决其余的工作，你能够应用浏览器验证这一点。关上你的网站，找到你的图像标签。如果类从 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);
          // save this to a file for step 2
        }
      });
    }
  });
});

HTML 解析器遇到款式标签，并立刻解决要害的 CSS。

<head>
  <style>
  body {...}
  /* ... rest of the critical 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>

HTML 也是阻塞渲染, 浏览器必须期待 JS 执行后能力实现对 HTML 的解析。然而咱们能够通知浏览器期待 JavaScript 执行。

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

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

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

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

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

HTML5 的资源提醒 (Resource Hints) 能够简略地了解为预加载，浏览器依据开发者提供的后续资源的提醒进行有选择性的加载和优化。“有选择性”这一项是必须的且极其重要的，也是有别新近代替计划的重点，因为很多状况下，预加载会受到所调配到的计算资源以及带宽资源的限度，浏览器有权放弃那些老本较高的加载项。

资源提醒帮忙开发人员通知浏览器稍后可能加载的页面。该标准定义了四种原语

preconnect
dns-prefetch
prefetch
prerender

此外，对于资源提醒，咱们应用了链接属性的 preload 关键字。

预链接, 应用办法如下：

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

咱们拜访一个站点时，简略来说，都会通过以下的步骤：

DNS 解析
TCP 握手
如果为 Https 站点，会进行 TLS 握手

应用 preconnect 后，浏览器会针对特定的域名，提前初始化链接 (执行上述三个步骤)，节俭了咱们拜访第三方资源的耗时。须要留神的是，咱们肯定要确保preconnect 的站点是网页必须的，否则会节约浏览器、网络资源。

DNS 预解析, 这个大多数人都晓得，用法也很简略：

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

DN S 解析，简略来说就是把域名转化为 ip 地址。咱们在网页里应用域名申请其余资源的时候，都会先被转化为 ip 地址，再发动链接。dns-prefeth使得转化工作提前进行了，缩短了申请资源的耗时。

什么时候应用呢？当咱们页面中应用了其余域名的资源时，比方咱们的动态资源都放在 cdn 上，那么咱们能够对 cdn 的域名进行预解析。浏览器的反对状况也不错。

预拉取, 应用办法如下：

<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标签里 的 as参数能够有以下取值：

audio: 音频文件
video: 视频文件  
Track: 网络视频文本轨道 
script: javascript 文件
style: css 款式文件
font: 字体文件   
image: 图片   
fetch: XHR、Fetch 申请
worker: Web workers
embed: 多媒体 <embed> 申请 
object:  多媒体 <object> 申请
document: 网页

预拉取用于标识从以后网站跳转到下一个网站可能须要的资源，以及本网站应该获取的资源。这样能够在未来浏览器申请资源时提供更快的响应。

如果正确应用了预拉取，那么用户在从以后页面返回下一个页面时，能够很快失去响应。然而如果谬误地应用了预拉取，那么浏览器就会下载额定不须要的资源，影响页面性能，并且造成网络资源节约。

这里须要留神的是，应用了prefetch，资源仅仅被提前下载，下载后不会有任何操作，比方解析资源。

预渲染，应用办法如下:

<link rel="prerender" href="//example.com/next-page.html">

prerender 比 prefetch 更进一步。不仅仅会下载对应的资源，还会对资源进行解析。解析过程中，如果须要其余的资源，可能会间接下载这些资源。这样，用户在从以后页面跳转到指标页面时，浏览器能够更快的响应。

<link rel="preload" href="..." as="...">
<link rel="prefetch" href="...">

留神 preload 须要写上正确的 as 属性，能力失常工作喔(prefetch 不须要)。然而它们有什么区别呢？

preload 是用于预加载当前页的资源，浏览器会优先加载它们
prefetch 是用于预加载后续导航应用的资源，浏览器也会加载它们，但优先级不高

Google 字体很棒，它们提供优质的服务，并被宽泛应用。如果你不想本人托管字体，那么 Google 字体是一个不错的抉择。你须要的是学习如何援用它们，哈里·罗伯茨（Harry Roberts）写了一篇无关《The Fastest Google Fonts》的杰出深度文章。强烈建议你浏览它。

如果你疾速取用，那么能够应用上面集成片段的谷歌字体：

<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 种疾速的网络性能，你能够在 5 分钟内利用到你的网站，以进步你的网站速度。

感激大家的观看与反对，咱们下期再见，不要忘了三连哦。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dev.to/marcradziwill/…

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

关于前端:仅需-5-分钟快速优化-Web-性能的10-个手段

1. 文件压缩

2. 图像压缩

3. 图像格式

4. 图像提早加载

5. 缓存 http 头

6. 内联要害的 CSS

辨认要害的 CSS

内联要害 CSS

滞后非关键 CSS

7. JavaScript 异步 / 提早加载 / 提早加载

异步加载 JavaScript

提早 JavaScript

反复排序内联的脚本

8. 应用资源提醒优化性能

preconnect

DNS Prefetch

prefetch

prerender

preload

9. 固定好你的谷歌字体

10. 应用 service worker 缓存资源

总结

交换

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

关于前端:仅需-5-分钟快速优化-Web-性能的10-个手段

1. 文件压缩

2. 图像压缩

3. 图像格式

4. 图像提早加载

5. 缓存 http 头

6. 内联要害的 CSS

辨认要害的 CSS

内联要害 CSS

滞后非关键 CSS

7. JavaScript 异步 / 提早加载 / 提早加载

异步加载 JavaScript

提早 JavaScript

反复排序内联的脚本

8. 应用资源提醒优化性能

preconnect

DNS Prefetch

prefetch

prerender

preload

9. 固定好你的谷歌字体

10. 应用 service worker 缓存资源

总结

交换

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

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