缓存是加快网站速度的一种快速方法。它减少了访问者的页面加载时间。我们可以告诉浏览器在特定时间缓存文件。如果对后台有一定了解，配置缓存端也不难。

我们可以使用以下 API 进行缓存：

6.内联关键 CSS

CSS 是渲染阻塞，这意味着浏览器必须先下载并处理所有 CSS 文件，然后才能绘制像素。通过内联关键 CSS 可以大大加快这个过程。我们可以通过以下步骤来做到这一点：

识别关键 CSS

如果您不知道您的关键 CSS 是什么，您可以使用 , 或 .所有这些库都从给定视口可见的 HTML 文件中提取 CSS。

示例如下：

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
        }
      });
    }
  });
});

内联关键 CSS

HTML 解析器遇到样式标签并立即处理关键的 CSS。

滞后的非关键 CSS

非关键 CSS 不需要立即处理。浏览器可以在事件发生后加载它，因此用户不必等待。

7.异步/延迟加载/延迟加载

HTML也是渲染阻塞的，浏览器必须等待JS执行完毕，才能完成对HTML的解析。但是我们可以告诉浏览器等待执行。

异步加载

使用 async 属性，可以告诉浏览器异步加载脚本。

延迟

defer 属性告诉浏览器在 HTML 解析器解析文档之后网站优化，但在事件发生之前运行脚本。

内联脚本的重复排序

内联脚本立即执行，浏览器解析它。所以你可以把它们放在 HTML 的末尾，就在 body 标记之前。

8.使用资源提示优化性能

HTML5的资源提示（Hints）可以简单理解为预加载，浏览器根据开发者提供的后续资源的提示进行选择性的加载和优化。 “选择性”是必须的，也是极其重要的，也是早期备选方案的重点，因为在很多情况下，预加载会受到分配的计算资源和带宽资源的限制，而浏览器有权放弃那些昂贵的附加组件。

资源提示帮助开发人员告诉浏览器以后可以加载哪些页面。规范定义了四个原语

另外，对于资源提示，我们使用链接属性的关键字。

预链接，使用如下：

当我们访问一个站点时，简而言之，我们会经历以下步骤：

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

使用后，浏览器会提前为特定域名初始化链接（执行以上三个步骤），为我们节省了访问第三方资源的时间。需要注意的是，一定要保证网站是网页所必需的，否则会浪费浏览器和网络资源。

DNS

DNS预解析，这个大部分人都知道，用法也很简单：

DNS解析，简单来说就是将域名转换为IP地址。当我们使用域名请求网页中的其他资源时，会先转换成IP地址，然后再发起链接。 dns-使转换提前工作，缩短请求资源所需的时间。

什么时候应该使用它？当我们的页面使用其他域名的资源时，比如我们的静态资源放在CDN上，那么我们可以预解析CDN域名。浏览器支持也不错。

预拉，用法如下：

中的as参数

链接标签可以有以下值：

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