“开窍”的本质就是积累，积累到一定程度，突然就有了新理解，打开了新世界的大门，然后在“超大积累”的基础上又来了一个大爆发，直接把其他人彻底甩开了。

大家好，我是柒八九。

前言

在讲正文之前,看到了一篇九边大佬写的<笨功夫是普通人最后的依靠>文章. 其中有一些文字很打动我. 然后,秉承着独乐乐不如众乐乐的想法,给大家分享出来. 以下是我认为最好的一段文字,如果想看全文,可以搜索文章名字进行查阅.

“开窍”的本质就是积累，积累到一定程度，突然就有了新理解，打开了新世界的大门，然后在“超大积累”的基础上又来了一个大爆发，直接把其他人彻底甩开了。

“超大积累”这事是个负担，也是个门槛，更是个壁垒。你想过这个门槛是很难的，别人一样难，过不去都白费，想过去只有一个办法就是死磕，什么“认知”什么“思维高度”都没用，就是得老老实实下硬功夫。

就得硬磕，克服前期的焦虑，克服中间的痛苦，克服后期的迷茫，不断投时间，直到有一天，发现自己投入的时间原来已经这么多，这时候，你发现不再像以前那么迷茫了，也不再像以前那样痛苦了，你已经跨过了那个门槛，进入了一个壁垒，别人很难追上了。

同样的，编程这事也是这个道理，几年前一个读者跟我说，他想学编程，是应该先看数据结构，还是先看操作系统原理？我说你先写出来一万行可运行的代码再说，从最简单的开始，一点一点写，最早的程序可能只有三四行，到后来可能有几百上千行。一万行代码是个“入门门槛”，跨不过去，这辈子都别想入门，别误会，这里说的“入门”相当于学英语刚学完前一千词汇。在这之前，看那些乱七八糟的书都是浪费时间。

好了,言归正传.在前面介绍浏览器性能指标时,发现很多优化方案都是针对CSS的.

根据最新的HTTP档案报告，网络仍然是一个臃肿的混乱，平均网站需要2,400KB的数据，分布在70个HTTP请求中。

诚然，CSS不是造成网络臃肿的主要原因。尽管如此，仍然有优化的空间，以及可以改变我们使用CSS的方式来提升网站性能的方法。

从图中我们可以看到, 一个网站整体资源大小为2400KB,而CSS加上Front的总体资源为70+120, 也就是说和样式相关的资源占整体网站10%左右. 如果我们通过一些合理的方式进行优化处理,那势必对网站整体性能有一个好的提高.

你能所学到的知识点

1. 前置知识点
2. 学会使用工具
3. 针对终点资源的处理
4. 用 CSS 效果替换图片
5. 删除不必要的字体
6. 避免使用 @import
7. 合并CSS
8. 使用现代布局技术
9. 为CSS瘦身
10. 坚持使用层叠特性
11. 简化选择器
12. 警惕耗时的属性
13. 采用 CSS 动画
14. 避免为耗时的属性制作动画
15. 指明哪些元素将成为动画
16. 采用 SVG 图像
17. 用 CSS 制作 SVG 样式
18. 避免使用 Base64 位图图像
19. 考虑关键 CSS
20. 考虑渐进式渲染

好了，天不早了，干点正事哇。

1. 前置知识点

前置知识点，只是做一个概念的介绍，不会做深度解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。如果大家对这些概念熟悉，可以直接忽略

浏览器支持的图片类型简览

前端项目使用字体

在前端项目中使用字体通常涉及以下步骤：

1. 选择适合的字体：首先，我们需要选择适合我们项目的字体。我们可以从字体库（如Google Fonts、Adobe Fonts等）中选择，也可以购买商业字体。确保选择的字体与项目的风格和需求相匹配。
   
2. 获取字体文件：一旦选择了字体，我们需要获取字体文件。字体文件通常以TTF（TrueType Font）、OTF（OpenType Font）或WOFF（Web Open Font Format）格式提供。我们可以在字体库的网站上下载这些文件，或者从商业字体提供商那里获取。
   
3. 嵌入字体：将字体文件嵌入到我们的项目中。最常见的方法是使用CSS的@font-face规则。这将允许我们在网页中引用并加载字体文件。
   
4. 定义字体样式：在CSS中，使用font-family属性定义使用的字体。我们可以为不同的元素、类或ID应用不同的字体。

/* 引用自定义字体 */
@font-face {
  font-family: 'CustomFont';
  src: url('path-to-font/custom-font.woff') format('woff');
}
/* 应用字体样式 */
body {
  font-family: 'CustomFont', sans-serif;
}

1. 应用到文本：在HTML中，将适当的字体样式应用于文本元素。

<p class="custom-font">这是一段使用自定义字体的文本。</p>

CSS 常见命名方式简览

BEM

BEM（Block Element Modifier）是一种流行的CSS命名方法，用于在开发中创建可维护、可重用的样式。它的核心思想是将样式的命名规范化，使得开发者可以更清晰地理解代码结构和样式关系。

BEM主要由三个部分组成：

1. 块（Block）
2. 元素（Element）
3. 修饰符（Modifier）

以下是BEM命名方法的简单介绍

1. 块（Block）：块是一个独立的、可重用的组件或模块，它有一个具有描述性的名称。块的名称应该简明扼要，使用连字符分隔单词。

<div class="header">
  <!-- 块：header -->
</div>

2. 元素（Element）：元素是块的组成部分，它们只在特定块的上下文中有意义。元素的名称是由块名和元素名组成，中间用双下划线 __ 分隔。

<div class="header">
  <div class="header__logo">
    <!-- 块：header, 元素：logo -->
  </div>
</div>

3. 修饰符（Modifier）：修饰符用于改变块或元素的外观或状态。修饰符的名称是由块名（或元素名）、双连字符 -- 和修饰符名组成。

<div class="button">
  <!-- 块：button -->
</div>
<div class="button button--primary">
  <!-- 块：button, 修饰符：primary -->
</div>

Atomic CSS

Atomic CSS将样式分解为小的、原子性的类，每个类仅实现一个样式属性。开发者可以通过组合这些类来构建样式。Atomic CSS强调复用小的、独立的样式规则，以实现更高的灵活性。

像最近在CSS界引起轩然大波的 Tailwind 就是Atomic CSS的代表作. 我们后期也会有对应的文章来介绍它.

CSS Modules

CSS Modules是一种通过将CSS作为模块导入的方式来实现局部作用域的CSS。每个模块的类名是局部的，不会与其他模块中的类名冲突。这有助于避免全局命名冲突和样式泄露。

/* 使用 CSS Modules 的 React 组件 */
import styles from './Button.module.css';
const Button = () => {
  return (
    <button className={styles.button}>
      {/* 按钮内容 */}
    </button>
  );
};

Styled Components

Styled Components是一种在React应用中使用的CSS-in-JS解决方案，它允许将样式直接嵌入组件中。样式会根据组件的上下文进行管理，实现了组件级别的样式隔离。

/* 使用 Styled Components 的 React 组件 */
import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
`;

其实针对命名规范还有很多:例如

• OOCSS（Object Oriented CSS）：

• OOCSS强调将样式抽象为可重用的对象，以实现更好的代码复用性。

• SMACSS（Scalable and Modular Architecture for CSS）：

• SMACSS强调模块化和可扩展的CSS架构。它将样式分为基础、布局、模块、状态和主题等不同类型，以实现更清晰的组织和命名。

2. 学会使用工具

人类最重要的进化，是学会使用工具. 就像我们,在接触一个新的领域时,学会用工具来辅助我们,总比我们埋头苦干,闭门造车的强.

除非你知道故障出在哪里，否则无法解决性能问题。浏览器DevTools是开始的最佳位置：从菜单启动或按下F12，Ctrl + Shift + I，或对于macOS上的Safari/Chrome，按下Cmd + Alt + I。

网络选项卡

网络选项卡显示了资源下载时的瀑布图。为了获得最佳效果，禁用缓存并考虑将网络速度限制为较低的速度。寻找下载速度慢或阻塞其他资源的文件。通常情况下，浏览器在下载和解析CSS和JavaScript文件时会阻止浏览器渲染。

如果想了解更多关于网络选项卡的使用和介绍,可以查看Chrome Developer关于NetWork的介绍

性能选项卡

1. 在DevTools中，点击Performance选项卡。
   
2. 确保Screenshots复选框已启用。
   
3. 点击“捕获设置”。DevTools会显示与捕获性能指标相关的设置。
   
4. 对于CPU，选择4倍减速。DevTools会将我们的CPU减速到正常速度的4倍。
   
5. 在DevTools中，点击“录制”按钮。DevTools会在页面运行时捕获性能指标。
   
6. 页面性能分析

7. 等待几秒钟。
   
8. 点击“停止”按钮。DevTools停止录制，处理数据，然后在性能面板上显示结果。

性能选项卡分析浏览器进程。开始记录，运行诸如页面重新加载之类的活动，然后停止记录以查看结果。寻找：

• 过多的布局/回流操作，浏览器被迫重新计算页面元素的位置和大小。
• 耗时的绘制操作，像素发生了变化。
• 合成操作，将页面的绘制部分组合在一起以在屏幕上显示。这通常是处理器最不密集的操作。

如果想了解更多关于网络选项卡的使用和介绍,可以查看Chrome Developer关于Performance的介绍

Lighthouse选项卡

Lighthouse是一个开源的自动化工具，用于提高网页的质量。我们可以对任何网页运行它，无论是公开页面还是需要身份验证的页面。它提供了性能、可访问性、渐进式Web应用、SEO等方面的审查。

具体使用方式,我们之前的文章有介绍过,这里就不再介绍了.

在线分析工具

另外还可以使用在线分析工具，这些工具不受我们的设备和网络速度的影响。

• WebPageTest
• GTmetrix
• Google PageSpeed Insights

这些工具的使用方式,我们在浏览器性能指标中有过介绍,这里也不过多介绍.