Skip to content

Latest commit

 

History

History
729 lines (499 loc) · 42.5 KB

README.md

File metadata and controls

729 lines (499 loc) · 42.5 KB
Raw


Front-End Performance Checklist

  前端性能清单  

🎮 前端性能清单，让你的网站跑的更快

单一原则: "在设计和编写时考虑到性能"

      PRs Welcome         Spectrum           Licence MIT  

  How To Use • Contributing • Product Hunt

其他清单：
🗂 Front-End Checklist • 💎 Front-End Design Checklist

目录

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (梳理中)
  7. JS Frameworks (梳理中)

概述

性能是一个很大的主题，但它并不总是一个“后端”或“管理（admin）”所要考虑的主题：它也是一个前端需要考虑的。作为前端开发人员，前端性能清单是你在项目中应该检查或者至少需要注意的性能要点的详尽列表。

如何使用?

对于每个规则，将有一个段落解释为什么此规则很重要以及如何解决它。有关更深入的信息，可相应找到可指向的🛠工具，📖文章或📹媒体的链接，以便梳理。

前端性能清单中的所有项目都是获得最高性能得分的基本要素，但是你可以找到一些指标来帮助你最终确定一些规则的优先顺序。以下有3个级别的优先级：

  • Low 表示该项目的优先级较低，对项目有影响。
  • Medium 表示该项目具有中等优先级并对项目产生影响，开发时需要处理这些项目。
  • High 表示该项目具有高优先级并对项目产生影响，开发时必须要处理这些项目，不然性能将大打折扣。

性能测试工具

以下是一些您可以用来测试或监控您的网站或应用程序的工具：

参考

HTML

html

  • 压缩 HTML: medium HTML代码压缩，将注释、空格和新行从生产文件中删除。

    为什么：

    删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显著减少用户的下载时间。

    怎么做：

    大多数框架都有插件用来压缩网页的体积。你可以使用一组可以自动完成工作的NPM模块。

  • 删除不必要的注释： low 确保从您的网页中删除注释。

    为什么：

    注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。

    怎么做：

    大多数情况下，可以使用HTML minify插件删除注释。

  • 删除不必要的属性： low 像 type="text/javascript" or type="text/css" 这样的属性应该被移除。

    <!-- Before HTML5 -->
<script type="text/javascript">
    // Javascript code
</script>

<!-- Today -->
<script>
    // Javascript code
</script>

    为什么

    类型属性不是必需的，因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。

    怎么做：

    ⁃ 确保所有和<script>标记都没有任何type属性。

  • 在JavaScript引用之前引用CSS标记： high 确保在使用JavaScript代码之前加载CSS。

    <!-- 不推荐 -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- 推荐 -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    为什么：

    在引用JavaScript之前引用CSS可以实现更好地并行下载，从而加快浏览器的渲染速度。

    怎么做：

    确保中的和<style>始终位于<script>之前。

  • 最小化iframe的数量： high 仅在没有任何其他技术可行性时才使用iframe。尽量避免使用iframe。

  • DNS预取： high 一次 DNS 查询时间大概在60-120ms之间或者更长，提前解析网页中可能的网络连接域名

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

⬆ 返回顶部

CSS

css

  • 压缩: high 所有CSS文件都需要被压缩，从生产文件中删除注释，空格和空行。

    为什么：

    缩小CSS文件后，内容加载速度更快，并且将更少的数据发送到客户端，所以在生产中缩小CSS文件是非常重要，这对用户是有益的，就像任何企业想要降低带宽成本和降低资源。

    怎么做：

    使用工具在构建或部署之前自动压缩文件。

  • Concatenation: medium CSS文件合并（对于HTTP/2效果不是很大）。

    <!-- 不推荐 -->
<link rel="stylesheet" src="foo.css"/>
<link rel="stylesheet" src="ajax.css"/>

<!-- 推荐 -->
<link rel="stylesheet" src="combined.css"/>

    为什么：

    如果你还在使用HTTP/1，那么你就需要合并你的文件。不过在使用HTTP/2的情况下不用这样（效果待测试）。

    怎么做：

    在构建或部署之前使用在线工具或者其他插件来合并文件。 当然，要确保合并文件后项目可以正常运行。

  • 非阻塞： high CSS文件需要非阻塞引入，以防止DOM花费更多时间才能渲染完成。

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    为什么：

    CSS文件可以阻止页面加载并延迟页面呈现。使用preload实际上可以在浏览器开始显示页面内容之前加载CSS文件。

    怎么做：

    需要添加rel属性并赋值preload，并在<link>元素上添加as=“style”。

  • CSS类(class)的长度: low class的长度会对HTML和CSS文件产生（轻微）影响。

    为什么：

    甚至性能影响也是有争议的，项目的命名策略会对样式表的可维护性有重大影响。如果使用BEM，在某些情况下可能会写出比所需要的类名更长的字符。重要的是要明智的选择名字和命名空间。

    怎么做：

    可能有些人更关注类名的长度，但是网站按组件进行划分的话可以帮助减少类名的数量和长度。

  • 不用的CSS: medium 删除未使用的CSS选择器。

    为什么：

    删除未使用的CSS选择器可以减小文件的大小，提高资源的加载速度。

    怎么做：

    ⚠️ 检查要使用的CSS框架是否已包含reset/normalize代码，可能不需要用到reset/normalize文件中的内容。

  • 嵌入或内联CSS： high 避免在中使用嵌入或内联CSS*（对HTTP/2无效）*

    为什么：

    因为将内容与设计分开是一种很好的做法。它还可以提高代码的可维护性并使站点可访问性更强。对于性能来说，它只是减少了HTML页面的文件大小和加载时间。

    怎么做：

    始终使用外部样式表或在中嵌入CSS（并遵循其他CSS性能规则）。

  • 分析样式表的复杂性： high 分析样式表有助于发现有问题的、冗余和重复的CSS选择器。

    为什么：

    有时在CSS中会出现冗余或验证错误，分析CSS文件并删除这些复杂性的代码可以加速CSS文件的读取和加载（因为您的浏览器会更快地读取它们）

    怎么做：

    CSS需要有编写规范，再通过CSS预处理器处理。下面列出的一些在线工具也可以帮助你分析和更正你的代码。

⬆ 返回顶部

字体

fonts

⬆ 返回顶部

图片

images

  • 使用矢量图像 VS 栅格/位图： medium 可以的话，推荐使用矢量图像而不是位图图像。

    为什么：

    矢量图像（SVG）往往比图像小，具有响应性和完美缩放功能。而且这些图像可以通过CSS进行动画和修改操作。

⬆ 返回顶部

JavaScript

javascript

  • 不内嵌JavaScript: medium (仅对网站有效) 避免在body中间嵌入多个JavaScript代码，将JavaScript代码重新集中到外部文件中，放在或页面末尾（之前）。

    为什么：

    将JavaScript嵌入代码直接放在中可能会降低页面速度，因为它在构建DOM时会加载。最好的选择是使用async 或 defer的外部文件来避免阻塞DOM渲染。另一种选择是在中放置一些脚本。大多数时候是需要在DOM进入主处理之前加载的分析代码或小脚本。

    怎么做：

    确保使用async或defer加载所有script文件，并准确地在中加载代码。

  • 非阻塞JavaScript： high 使用defer属性或使用async来异步加载JavaScript文件。

    <!-- Defer Attribute -->
<script defer src="foo.js">

<!-- Async Attribute -->
<script async src="foo.js">

    为什么：

    JavaScript阻止HTML文档的正常解析，因此当解析器到达<script>标记时（特别是在内），它会停止解析并且执行脚本。如果您的脚本位于页面顶部，则强烈建议添加async和defer，但如果在标记之前加载，没有太大影响。但是，使用这些属性来避免性能问题是一种很好的做法。

    怎么做：

    添加async（如果脚本不依赖于其他脚本）或defer（如果脚本依赖或依赖于异步脚本）作为script脚本标记的属性。 如果有小脚本，可以在异步脚本上方使用内联脚本。

  • 优化和更新的JS库： medium 项目中使用的所有JavaScript库都是有用到的 (推荐使用原生JS的简单功能)并更新到最新版本

    为什么：

    大多数情况下，新版本都带有优化和安全性修复，所以应该使用最优化的代码来优化项目。确保不存在过时插件。

    怎么做：

    如果项目使用NPM管理依赖包，npm-check是一个非常有用的库来升级/更新你的库。

⬆ 返回顶部

Server

server-side

  • 最小化HTTP请求： high 始终确保所请求的每个文件对网站或应用程序至关重要，尽可能减少http请求。
  • 使用CDN提供静态文件： medium 使用CDN可以更快地在全球范围内获取到你的静态文件。

  • 提供来自相同协议的文件： high 避免网站使用HTTPS同时使用HTTP来提供相同源地址的文件。

  • 提供可访问的文件： high 避免请求无法访问的文件（404）。

  • 正确设置HTTP缓存标头： high 合理设置HTTP缓存标头来减少http请求次数。

  • 启用GZIP压缩 high使用压缩方法（如Gzip或Brotli）来减小JavaScript文件的大小。使用较小尺寸的文件，用户可以更快地下载资源，从而提高性能。

  • 分域存放资源： medium 由于浏览器同一域名并行下载数有限，利用多域名主机存放静态资源，增加并行下载数，缩短资源加载时间

  • 减少页面重定向 high

⬆ 返回顶部

性能与前端框架

Angular

React

Vue

WordPress

文章

插件推荐

Translations

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

Contributing

Open an issue or a pull request to suggest changes or additions.

Support

如果有什么问题和疑问，请通过以下途径联系:

Author

Build with ❤️ by David Dias at @influitive 🇨🇦

Contributors

感谢各位参与本项目的人员所作出的贡献。 [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT

All icons are provided by Icons8

⬆ 返回顶部