web网站性能优化整理

Posted 2021-01-19 BetiaStar

 

async 和 defer 的区别

• <script src="a.js" async></script>
• <script src="a.js" defer></script>

上面 async 和 defer 都是异步加载脚本，虽然两者都是页面解析过程中在后台下载，但是 async 在下载完并且页面还未解析完时将会阻止页面解析，直接执行，这可能导致页面解析时间加长，而 defer 是在页面文档解析后并其下载完成后再加载执行

js 优化：

• 1、缩小JS代码。
• 2、使用async和defer 编写脚本。
• 3、拆分代码以尽可能少地加载 - 并从依赖项中删除未使用的代码。

css 优化：

• 1、缩小CSS代码。
• 2、提取关键CSS 并首先获取它

• // 第一步提取出关键 css（critical.css）和非关键 css（other.css）
• critical.css + other.css
• // 第二步将关键 css（critical.css）用内联方式嵌入页面
• <style>...</style>
• // 第三步利用预处理在后台加载非关键 css（other.css）
• <link rel="preload" href="other.css" as="style">
• // 第四步当 other.css 被缓存完后将 rel 属性的 preload 改成 stylesheet。这使浏览器获取缓存的 CSS 文件并将其应用于文档
• <link rel="preload" href="other.css" as="style" onload="this.rel = ‘stylesheet‘">

html 优化：

• 通过网络传输较少数据的第一种方法是缩小。缩小您发送给客户端的HTML文档（以及CSS和JS，如前所述）。
• 使用 Gzip压缩文本(css,js)，图片，字体，视频。和其他二进制文件通常已经被压缩，因此gzipping它们只会使响应时间更长。SVG图像是唯一的例外，因为它们是文本。
• Gzip有另一种选择 - 一种名为Brotli的压缩算法。
• Brotli的优势：在相同的CPU负载下，它比Gzip压缩20-30％。这是免费下载的字节数减少30％！
• Brotli的劣势：它相对较新，并且支持比Gzip更糟糕。因此，您不能轻易地将Gzip替换为Brotli - 您必须同时使用两者来进行压缩才能在不同的浏览器中工作。

注意：使用这些说明启用Gzip将导致服务器动态压缩资源。这会使响应时间略大。在大多数情况下，您不需要关心这一点，但如果您希望获得一流的响应时间，请在构建期间预先压缩资源。

注意：不要将Brotli的压缩级别设置为最大值，因为它会比Gzip慢得多。Brotli的压缩级别4 比Gzip的默认级别更快并且压缩得更好。

什么是CDN？

• 想象一下，您构建了一个应用程序并将其托管在位于美国的服务器上。如果应用程序的用户在华沙，他们的请求必须一直前往美国并返回波兰。这将花费大量时间，因为： - 请求必须行进很长的距离（其速度受光速限制）; - 它还必须通过许多路由器和类似设备（并且每个设备都会增加处理延迟）。
• 如果请求是检索应用程序数据，并且只有美国的一个服务器知道如何正确地形成它，则可以证明这是合理的。但是，如果用户试图下载图像或视频，这绝对没有必要 - 因为这只是一个可以由任何服务器提供服务的常规静态内容。

预加载资源

• 指示浏览器提前对服务器的IP地址发出DNS请求。这对于CDN，Google字体以及所有其他情况非常有用，当您知道在短时间内需要资源时，知道它所托管的域，但不知道其确切路径。在这种情况下，提前解析服务器的IP地址可以节省50到300毫秒。

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

• 指示浏览器提前执行与服务器的连接。在有用的情况下，它在相同的情况下dns-prefetch很有用，但可以建立完整的连接并节省更多时间。这里的缺点是打开新连接是非常耗费资源的，因此您不希望过度使用此优化。

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

• 以低优先级预加载和缓存后台资源。这对于为应用程序的下一页预加载JS包非常有用。

• <link rel="prefetch" href="/style.css" as="style">

• 在后台预加载具有高优先级的资源。这对于在几秒钟内预加载您需要的资源非常有用 - 例如，非关键的CSS文件。

• <link rel="preload" href="/style.css" as="style">

• 在后台预加载指定的页面并将其呈现在不可见的选项卡中。稍后，当访问者点击指向预渲染页面的链接时，页面会立即显示。这是Google用来预加载其第一个搜索结果的内容。

• <link rel="prerender" href="https://example.com/about">

注意：不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上非常糟糕。因此，添加10个额外的预加载可能会使您的应用程序更快一些，但您的访问者将为此付出真正的金钱。每页2-4个预加载可能没问题。

图片介绍及应用--图片在线压缩

• svg 最适合矢量图像，如图标或徽标。
• jpg 最适用于照片，因为它可以压缩图像，但人眼无法看到轻微的质量损失。
• png 最适合您想要显示而没有任何质量损失的光栅图形 - 例如光栅图标或像素艺术。
• 不幸的是，webp在Chrome浏览器只支持。但是，您仍然可以使用标记加载或回退webp图像
• webp适用于照片和光栅图形，因为它支持有损和无损压缩。它也比jpg压缩至少20-30％。
• <picture>
•   <source srset="img.webp" type="image/webp">
•   <img src="img.jpg" type="image/jpeg">
• </picture>
• gif（并不推荐使用，推荐用视频替代 gif ）- 使用视频替换动画GIF

svg压缩

• 缩小。由于SVG图像是文本，因此可以通过删除注释和空格来缩小它们。
• 简化路径。如果从图形编辑器自动生成或导出SVG文件，则其中的路径可能过于复杂。如果出现这种情况，请删除不会直观影响任何内容的路径点
• 简化文件结构。如果通常从图形编辑器导出SVG文件，它还包括额外的元元素。删除那些以使SVG更小。

jpg压缩

• 压缩级别为70-80的JPG图像与压缩级别为100的JPG图像，质量损失并不明显
• 要压缩JPG图像，请使用Photoshop或Gimp等图形编辑器，webpack加载器（例如）或其他工具。 image-webpack-loader

imageoptim 图片压缩

如何在 webpack 中优化图像

注意：不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上非常糟糕。因此，添加10个额外的预加载可能会使您的应用程序更快一些，但您的访问者将为此付出真正的金钱。每页2-4个预加载可能没问题。

字体优化

• 字体要在 font-family 后面设置指定备用字体，后备字体可能是一种流行的内置字体（如Georgia）; 它可能是一个通用的字体系列（如 serif 或者 sans-serif）
• 使用 font-display CSS 属性作为自定义字体

• -  font-display: fallback ，浏览器将立即使用可用字体呈现文本：自定义字体（如果已缓存）或后备字体。如果未缓存自定义字体，浏览器将下载它。如果自定义字体下载得足够快（通常在3秒内），浏览器会将后备字体与自定义字体交换。

  -  font-display: optional。这与后备行为一样，只有浏览器可以根据用户的连接速度决定不使用自定义字体（如果你的3G或更慢的3G，下载自定义字体然后交换将需要永远太晚了，太烦人了）

字体兼容查询

windows 和 mac 常用字体

使用工具优化网站性能

• 第一个工具是Google PageSpeed Insights。

• -  PageSpeed Insights 会对您提供的网址进行大量审核。他们分析页面资源，查找优化建议并计算您的绩效分数。如果您只是从网络性能开始，这个工具将最适合您。旨在使 PageSpeed 得分为80或更高。

  -  如果您只是从网络性能开始，这个工具将最适合您。旨在使 PageSpeed 得分为80或更高。

• 第二个工具是Lighthouse

• -  Lighthouse 是 PageSpeed 对类固醇的见解。它有几个审计（包括性能，搜索引擎优化和可访问性）。它计算多个指标并输出更多性能建议。

  -  与 PageSpeed Insights（作为独立站点运行）不同，Lighthouse 内置于 Chrome DevTools 中。这意味着即使是非公开访问的应用程序，您也可以使用它！

• 第三个工具是WebPageTest

• -  WebPageTest 是一种高级审计工具。它分析网站性能并输出大量数据，如指标，加载瀑布，内容细分等。它在进行复杂优化时很有用。

• 第四个工具是webpack-bundle-analyzer

• -  webpack-bundle-analyzer 是一个 webpack 实用程序，可以显示您的包内容。了解捆绑包中的大小以及可以优化的内容非常有用。

文章内容来自https://3perf.com/talks/web-perf-101/