前端性能优化篇（简称常识）懒 QAQ

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

删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显着减轻用户的下载时间。
大多数框架都有插件来促进网页的缩小。你可以使用一组可以自动完成工作的NPM模块。
HTML minifier | Minify Code
Experimenting with HTML minifier — Perfection Kills


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

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

大多数情况下，可以使用HTML minify插件删除注释。
emove-html-comments - npm
删除不必要的属性： 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="index.js"></script>
<link rel="stylesheet" href="index.css"/>

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

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

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

css 同样原理

合并不必要的css文件

<!-- 不推荐 -->
<script src="foo.css"></script>
<script src="ajax.css"></script>

<!-- 推荐 -->
<script src="combined.css"></script>

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类(class)的长度: low class的长度会对HTML和CSS文件产生（轻微）影响。
*为即使是性能影响也是有争议的，对项目的命名策略做出决定会对样式表的可维护性产生重大影响。如果使用BEM，在某些情况下可能会遇到比所需字符多的类。明智地选择名字和命名空间总是很重要的。
删除未使用的CSS选择器可以减小文件的大小，加快资源的加载速度。
⚠️ 检查要使用的CSS框架是否已包含重置/规范化代码。有时可能不需要用到重置/规范化文件中的内容。
分析样式表的复杂性： high 分析样式表有助于标记问题、冗余和重复的CSS选择器。
有时在CSS中会出现冗余或验证错误，分析CSS文件并删除这些复杂性的代码可以加速CSS文件的读取和加载（因为您的浏览器会更快地读取它们）

关于字体

Webfont格式： medium 使用WOFF2格式字体。

使用preconnect可以更快地加载字体： medium

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

2 . 当你浏览网站时，设备需要获取网站所在的位置以及需要连接的服务器。浏览器必须连接DNS服务器并等待查找完成后再获取资源（字体，CSS文件…），prefetche和preconnect允许浏览器在空闲时进行上面的操作，在真实请求时就不需要再花时间去做一系列动作。
3 . 在预取您的网络字体之前，请使用网页测试来检测网站. 查找蓝绿色DNS查找并记下正在请求的主机（Look for teal colored DNS lookups and note the host that are being requested.）在中添加预取的webfonts，添加上一步查找到的主机名。

关于JavaScript

JS 压缩: high 所有JavaScript文件都要被缩小，注释、空格和空行将从生产文件中删除（在HTTP/2仍然有效果）。
不内嵌JavaScript: medium (仅对网站有效) 避免在body中间嵌入多个JavaScript代码，将JavaScript代码重新集中到外部文件中，放在或页面末尾（之前）

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

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

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

JavaScript复杂性可能会降低运行时性能。识别这些可能的问题对提供流畅的用户体验来说至关重要。

怎么做：

使用Chrome开发者工具中的时间轴工具来评估脚本事件，并找到可能需要花费太多时间的事件。

其他的懒的写了。。。有需要联系博主