前端性能优化检查清单

发表于 | 更新于 | 阅读次数：
本文字数： 13k | 阅读时长 ≈ 12 分钟

本文翻译自thedaviddias总结的Front-End-Performance-Checklist

HTML

  • 删除不需要的注释: 确保注释从页面中移除。

    原因：

    注释对用户并没有用，应该从生产文件中删除。一种需要保留注释的情景是你引用别人库的原始文件。

    做法：

    大多数时候，注释会被HTML压缩插件移除。

  • 删除不需要的属性: 类型属性比如type="text/javascript"或者type="text/css"不再是必须的，应当被移除。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- Before HTML5 -->
    <script type="text/javascript">
        // JavaScript code
    </script>

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

    原因：

    因为HTML5中将text/css和text/javascript作为默认的属性值，所以不再需要写类型属性。

    做法：

    ⁃ 确保你的<link>和<script>标签没有任何的type属性。

  • 总是将CSS标签放在JavaScript前面: 确保CSS总是在JavaScript代码前加载。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- Not recommended -->
    <script src="jquery.js"></script>
    <script src="foo.js"></script>
    <link rel="stylesheet" href="foo.css"/>

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

    原因：

    在JavaScript前引用CSS可以实现更好的并行下载，从而加快浏览器呈现时间

    做法：

    ⁃ 确保<head>中的<link>和<style>总是在<script>前。

  • 减少iframes的数量: 只有在任何其他技术实现不了的情况下才使用iframes。尽可能避免使用iframes。

CSS

  • 合并文件: 将CSS文件写在一个文件中（并不总对HTTP/2有效）。

    1
    2
    3
    4
    5
    6
    <!-- Not recommended -->
    <link rel="stylesheet" href="foo.css"/>
    <link rel="stylesheet" href="bar.css"/>

    <!-- Recommended -->
    <link rel="stylesheet" href="foobar.css"/>

    原因：

    如果你仍在使用HTTP/1，你可能还需要合并文件。如果你的服务器使用HTTP/2 (还在进行测试)，情况就不太一样了。

    做法：

    ⁃ 在构建或部署之前或期间，使用在线工具或任何插件将CSS合并起来。
    ⁃ 当然，确保合并不会破坏你的项目。

  • CSS类名长度: 类名的长度可能会对HTML和CSS文件产生(轻微)影响。

    原因：

    对于你的项目采用何种命名策略将会对样式表的可维护性产生重大影响，甚至性能影响。不过它也是有争议的。如果你使用的是BEM命名方式，在某些情况下可能会遇到命名的长度字符多余实际所需的类名。因此，明智的选择CSS类名和命名空间是很重要的。

    做法：

    对一些人来说，设定最大的类长度可能很有趣，但是需要确保分解成组件的网站可以减少类（和声明）的数量和长度。

  • 没有用到的CSS: 移除没有用到的CSS选择器。

    原因：

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

    做法：

    ⁃ 始终检查你使用的CSS框架是否已经包含了重置/normalize的代码。有时你可能不需要重置/normalize文件中的所有内容。

  • 嵌入或行内CSS: 避免在body中使用嵌入或者行内CSS。（http/2可以忽略）

    原因：

    将内容与样式分开是一个很好的做法，它使得代码更易于维护，并且保持站点的可访问性，这是原因之一。但是对于性能而言，它减少了HTML页面的文件大小和加载时间，这是第二个原因。

    做法：

    总是使用外部样式表或者将CSS内嵌在<head>中（并遵循其他的CSS性能优化规则）

Fonts

Image

  • 使用矢量图像VS光栅/位图: 优选使用矢量图像而不是位图图像(如果可能的情况下)。

    原因：

    矢量图像(SVG)往往比较小，并且SVG的响应和缩放非常完美。CSS可以对这些图像进行动画制作和修改。

  • 图像尺寸: 如果最终渲染的图像大小是已知的，在<img>上设置width和height。

    原因：

    如果设置了高度和宽度，则加载页面时会保留图像所需的空间。但是，如果没有这些属性，浏览器不知道图像的大小，也不能为其保留适当的空间。其效果是页面布局会在加载过程中发生变化(当图像加载时)。

  • 响应式图片: 确保提供接近你显示尺寸的图片。

    原因：

    小型设备不需要比其视口更大的图片。建议使用同一图片不同尺寸的版本。

    做法：

    ⁃ 为目标设备创建不同的图片尺寸。
    ⁃ 使用srcset和picture属性设置每个图片的多种形式。

JavaScript

  • 不要有内联的JavaScript: (仅适用于网站)避免在body中嵌入多个JavaScript代码。将JavaScript代码重组到外部文件中，或者重组到<head>里或末尾(</body>之前)。

    原因：

    将JavaScript嵌入代码直接放在<body>中会减慢你的页面速度，因为它是在DOM构建时加载的。最好的选择是为外部文件使用async或defer属性来避免阻塞DOM。另一个选择是在你的<head>放置脚本。在DOM开始渲染之前需要加载好大多数的时间分析代码或小脚本。

    做法：

    确保使用异步或延迟加载所有文件，并且明智地决选择要注入到<head>中的代码。

  • 非阻塞JavaScript: JavaScript文件使用async异步加载或使用defer延迟加载。

    1
    2
    3
    4
    5
    <!-- Defer Attribute -->
    <script defer src="foo.js"></script>

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

    原因：

    JavaScript会阻塞HTML的正常解析，因此当解析器到达<script>标签时(特别是在<head>里)，它会停止解析并运行。如果脚本放在页面顶部，强烈建议添加async或defer属性，但是如果脚本就在</body>之前，则没有太大价值。但是，最佳实践是使用这些属性来避免任何性能问题。

    做法：

    ⁃ 在script标签里添加async（如果脚本不依赖其他脚本）或者defer（如果脚本依赖异步脚本或被异步脚本依赖）属性。
    ⁃ 如果你有小的脚本，可以以内联的形式卸写在async脚本之前。

  • 优化并更新JS库: 项目中使用JavaScript库是有必要的（对于简单的功能，可以使用普通的JavaScript函数），更新它们到最新版本。

    原因：

    大多数情况下，新版本都附带优化和安全修复。你应该使用最优的代码来加速你的项目，并确保未过时插件不会减慢你的网站或应用程序的速度。

    做法：

    如果你的项目使用NPM包，npm-check是一个非常有趣的插件来升级/更新你的库。Greenkeeper可以自动查找你的依赖项，并在新版本发布时建议更新。

Server

  • 页面大小小于1500KB（理想情况小于500KB）: 尽可能缩小页面+资源的大小。

    原因：

    理想情况下，你应该尝试将页面大小设定在<500KB，但是当下web状态显示页面字节的中位数约为1500KB (甚至在移动设备上)。根据你的目标用户、网络连接、设备，尽可能减少页面字节数以获得最佳用户体验。

    做法：

    前端性能清单中的所有规则将帮助您尽可能减少资源和代码。

  • 文件来自同一协议: 避免让你的网站文件在开启HTTPS的网站上使用HTTP协议。如果你的网站使用HTTPS，外部文件应该使用同一协议。

JS-Frameworks

Angular

React

Vue

CMS-Frameworks

WordPress

文章

插件推荐