如何优化网站加载速度

中考完了之后，闲的没事的我拿 LightHouse 测了一下自己的网站，发现分数有点低。为了拿到四个圆圈圈~~以满足我的虚荣心~~，我决定花些力气来优化网站性能。

废话不多说，先把图放上来。

优化前：

优化后：

为什么优化网站加载速度很重要

像我这种有点耐心（还不是被某堵墙和我这老爷机逼的）的人，逛加载速度慢网站通常会一边忍着一边想带妈的词语。而一些没耐心的人进了这种网站，肯定会想这™什么破网站，然后立马点叉。对于用户很多的电商平台来说，网站加载时间每多 100ms，用户越没有耐心看下去，然后电商平台就要少赚好几沓钞票。

少说废话，进入正题

多用 `getElement(s)ByXxx`，少用 `querySelector(All)`

用一段代码比较 getElement(s)ByXxx 和 querySelector(All) 的性能

由图可知，二者的速度差距挺大的。虽然 querySelector(All) 用起来又舒服又方便，但它是真的慢。平时写代码的时候，我们应该权衡方便和性能，最好只在 getElement(s)ByXxx 满足不了要求时才用 querySelector(All)。

善用预加载

如果你的网页有可能会晚些加载的资源（比如动态加载脚本、CSS 里的背景图片），可以在<head> 里添加 <link rel="preload"/> 或 <link rel="dns-prefetch">，声明稍后可能会加载的资源，举个栗子：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- ... -->

        <link rel="dns-prefetch" href="https://api.github.com" />
        <link rel="dns-prefetch" href="https://www.googletagmanager.com" />

        <link rel="preload" href="/js/ncm.js" as="script" crossorigin="anonymous" />
        <link rel="preload" href="/json/icon.json" as="fetch" crossorigin="anonymous" />
        <link rel="preload" href="/json/theme.json" as="fetch" crossorigin="anonymous" />
    </head>
    <!-- ... -->
</html>

具体用法可以看看这篇 MDN 文档（英语）。

为 `<script>` 标签添加 `async` 或 `defer` 属性

如果脚本不需要尽快执行，添加这两个属性可以让浏览器尽快渲染网页，而不必等待脚本执行完毕。

需要注意的是，添加 async 属性后，DOMContentLoaded 事件可能无法触发。

推荐订阅源

博客 | dsy4567 的小站