页面性能优化 -- 持续更新中

[arlyxiao]

性能检测工具

• https://developers.google.com/speed/pagespeed/insights
• https://developers.google.com/web/tools/lighthouse

页面结构检查工具

• https://search.google.com/structured-data/testing-tool/

组件库替代品

• 可以使用 https://www.flaticon.com 替代 fontawesome

link 参数主要有以下几种

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />

• 如果需要及时资源，并且在下载后缓存在浏览器，适合使用 preload， 但不适合过度使用，这有可能破坏浏览器对资源的安排。

• 如果对资源需求没那么及时，比如资源是在另一个页面被使用，那么可以在当前页面使用 prefetch，资源会被提前下载并缓存，但不会被执行。

• 如果对请次资源的具体路径不确定，可以提前建立 domain 连接，这种情况可以使用 preconnect。

• dns-prefetch 跟 preconnect 功能有点接近，但是 dns-prefetch 只是提前建立 dns 查询，还没有进行握手等 tcp 连接。

Defer, Async 区别

• async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行
• defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成
• 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
• async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics
• async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行

浏览器执行顺序

• https://developers.google.com/web/fundamentals/performance/rendering/
• https://stackoverflow.com/questions/53513872/react-hooks-what-is-the-difference-between-usemutationeffect-and-uselayoutef