快速优化 Web 性能的10 个手段( 二 ) _优化

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 } }); } });});内联关键 CSSHTML解析器遇到样式标签，并立即处理关键的CSS 。
<head> <style> body {...} /* ... rest of the critical CSS */ </style></head>滞后非关键CSS非关键的CSS不需要立即进行处理。浏览器可以在onload事件之后加载它，因此用户不必等待。
<link rel="preload" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"/assets/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">7. JAVAScript 异步/延迟加载/延迟加载HTML 也是阻塞渲染,浏览器必须等待 JS 执行后才能完成对HTML的解析。但是我们可以告诉浏览器等待JavaScript执行。
异步加载JavaScript使用属性async，可以告诉浏览器异步加载脚本。
<script src=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"app.js" async>延迟JavaScript【快速优化 Web 性能的10 个手段】defer属性告诉浏览器在 HTML 解析器解析完文档之后运行脚本，但在事件发生之前，DOMContentLoaded会被触发。
<script src=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"app.js" defer>重复排序内联的脚本内联脚本立即执行，浏览器对其进行解析。因此，您可以将它们放在HTML的末尾，紧接在body标记之前。
8.使用资源提示优化性能HTML5的资源提示(Resource Hints)可以简单地理解为预加载，浏览器根据开发者提供的后续资源的提示进行有选择性的加载和优化。“有选择性”这一项是必须的且极其重要的，也是有别早先替代方案的重点，因为很多情况下，预加载会受到所分配到的计算资源以及带宽资源的限制，浏览器有权放弃那些成本较高的加载项。
资源提示帮助开发人员告诉浏览器稍后可能加载的页面。该规范定义了四种原语

preconnect
DNS-prefetch
prefetch
prerender

此外，对于资源提示，我们使用了链接属性的preload关键字。
preconnect预链接, 使用方法如下：
<link rel="preconnect" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"https://example.com">我们访问一个站点时，简单来说，都会经过以下的步骤：

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

使用preconnect后，浏览器会针对特定的域名，提前初始化链接(执行上述三个步骤)，节省了我们访问第三方资源的耗时。需要注意的是，我们一定要确保preconnect的站点是网页必需的，否则会浪费浏览器、网络资源。
DNS PrefetchDNS 预解析, 这个大多数人都知道，用法也很简单：
<link rel="dns-prefetch" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"http://example.com">DN S解析，简单来说就是把域名转化为ip地址。我们在网页里使用域名请求其他资源的时候，都会先被转化为ip地址，再发起链接。dns-prefeth使得转化工作提前进行了，缩短了请求资源的耗时。