前端性能评估（前端 Web 性能清单）
提高 Web 应用程序的性能是很重要的 。我们希望页面加载得更快 、更流畅 ，并且没有太多的布局变化 。在这篇文章中 ，我想将关于这些的所有知识一一列出来 。
预加载密钥请求/预连接到所需的源
在你的 HTML 中声明预加载链接 ，以指示浏览器尽快下载关键资源 。
<head> <link rel="preload" href="critical.css" as="style"> <link rel="preload" href="critical.js" as="script"> </head>考虑添加 preconnect 或 dns-prefetch 资源提示以建立与重要第三方来源的早期连接 。
<link rel="preconnect" href="https://example.com"> <link rel="dns-prefetch" href="https://example.com">.dns-prefetch 的工作方式与 preconnect 完全相同 ，但具有更广泛的浏览器支持 。
减少第三方使用
第三方代码会显着影响加载性能 。但是 ，你可以通过以下方式修改你使用此第三方库的方式：
使用 async 或 defer 属性加载脚本以避免阻塞文档解析 。 如果第三方服务器速度慢 ，则自行托管脚本 。 如果脚本没有为你的站点增加明确的价值 ，请将其删除 。 使用 link rel=preconnect 或 link rel=dns-prefetch 对托管第三方脚本的域执行 DNS 查找 。消除渲染阻塞资源
资源阻止了页面的第一次绘制 。考虑内联交付关键的 JS/CSS 并推迟所有非关键的 JS/样式 。你可以通过仅提供所需的代码和样式来减小页面的大小 。
确定关键代码后 ，将该代码从呈现阻止 URL 移动到 HTML 页面中的内联脚本标记 。
在 HTML 页面头部的样式块中内嵌第一次绘制所需的关键样式 ，并使用预加载链接异步加载其余样式 。
缩小/删除不必要的 CSS 和 JS
当你构建一个大型应用程序时 ，你将到达一个地方 ，你的项目可能有更多它实际需要和使用的代码 。
使用CSS Minification或Terser JS Plugin等工具 。
要消除未使用的 css ，可以使用PurgeCSS之类的工具 。
要消除不必要的 JavaScript ，你可以使用前面提到的 Terser 或利用Tree Shaking来消除死代码 。你还可以使用代码拆分 ，它将代码拆分为可以按需加载的包 。
扫描模块以查找重复项
从包中删除大型重复的 JavaScript 模块以减少最终包的大小 。
使用Webpack 捆绑分析器
减少执行时间
代码拆分 、缩小和压缩 、删除未使用代码和缓存技术的结合将大大缩短执行时间 。
考虑减少解析 、编译和执行 JS 所花费的时间 。你可能会发现交付较小的 JS 有效负载有助于此 。
这个想法是优化我们的 JS 和 CSS 代码 ，最小化它并删除未使用的代码 ，以及我们正在使用的第三方库 。保持主文档的服务器响应时间较短 ，因为所有其他请求都依赖于它 。
图像处理
适当大小的图像
提供适当大小的图像以保存蜂窝数据并缩短加载时间 。
<img src="cat-large.jpg" srcset="cat-small.jpg 480w, cat-large.jpg 1080w" sizes="50vw">高效编码图像
优化的图像加载速度更快 ，消耗的蜂窝数据更少 。
使用你的图像 CDN 服务或图像压缩应该就足够了 。以下一代格式提供图像
WebP 或 Avif 等图像格式通常提供比 PNG 或 JPEG 更好的压缩 ，这意味着下载速度更快 ，数据消耗更少 。
图像元素具有明确的宽度和高度
在图像元素上设置明确的宽度和高度 ，以减少布局偏移并改善 CLS 。
预加载最大内容绘画 (LCP)
预加载 LCP 元素使用的图像以缩短 LCP 时间 。
<link rel="preload" href="/path/to/image.jpg" as="image"> head() { return { link: [ { rel: preload, as: image, href: path/to/lcp/image, }, ], } }字体
在 webfont 加载期间所有文本仍然可见
利用字体显示 CSS 功能确保文本在加载网络字体时用户可见 。 @font-face { font-family: Arial; font-display: swap; }font-display API 指定字体的显示方式 。swap 告诉浏览器使用该字体的文本应该立即使用系统字体显示 。自定义字体准备就绪后 ，它将替换系统字体 。
例如 ，对于 Google 字体 ，只需将 &display=swap 参数添加到 Google 字体 URL 的末尾即可：
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&**display=swap**" rel="stylesheet">要避免什么？
大的布局变化
Cumulative Layout Shift (CLS) 是一项 Core Web Vitals 指标 ，通过对不是由用户交互引起的所有布局偏移求和来计算 。
避免过大的 DOM 大小
大型 DOM 会增加内存使用量 ，导致更长的样式计算 ，并产生代价高昂的布局回流 。
多个页面重定向
重定向在页面加载之前引入了额外的延迟 。
为现代浏览器提供遗留 JavaScript
Polyfill 和转换使旧版浏览器能够使用新的 JavaScript 功能 。但是 ，对于现代浏览器来说 ，很多都不是必需的 。
巨大的网络有效载荷
大型网络有效载荷使用户付出了真金白银 ，并且与较长的加载时间高度相关 。
推迟请求直到需要它们 。 将请求优化到尽可能小 ，最小化和压缩 ，尽可能使用 WebP 处理图像 。图片 CDN 将始终保持我们的性能！ 缓存请求 ，这样页面就不会在重复访问时重新下载资源 。document.write()
对于连接速度较慢的用户 ，通过 document.write() 动态注入的外部脚本会使页面加载延迟数十秒 。
非合成动画
未合成的动画可能很重并会增加 CLS 。请改用translate和scaleCSS 属性 。
概括
你现在对提高 Web 性能有了更多的了解 。请记住 ，提高性能不是你可以坐下来解决的问题 。这是一个持续的过程 ，应该定期解决性能问题 ，这样你网站的新功能（肯定需要）不会破坏性能 。
好书推荐
《前端工程化：基于Vue.js 3.0的设计与实践》
本书以Vue.js的3.0版本为核心技术栈 ，围绕“前端工程化 ”和TypeScript的知识点展开讲解 ，根据笔者多年的前端开发和一线团队管理经验 ，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章 ，一步一步帮助读者进行前端工程化和Vue 3的开发 。从前端工程化开始到TypeScript语言的学习 ，再到使用TypeScript开发Vue 3项目 ，通过循序渐进的学习过程提升读者在前端工程化领域的实战能力 。
📚 京东自营购买链接：《前端工程化：基于Vue.js 3.0的设计与实践》
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！