首页 前端知识 前端 Web 性能清单

前端 Web 性能清单

2024-02-09 20:02:22 前端知识 前端哥 385 699 我要收藏
  • 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
  • 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】
  • 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】

提高 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=preconnectlink 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的设计与实践》

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1574.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!