1.文件引用规范
- CSS 文件或样式在 head 标签中引用，尽量早的让 CSS 文件加载出来。
- JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在尾部可以加快首屏显示的速度。
- 使用压缩后的文件，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，这样可以减少文件的体积。
- 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求。
2.属性顺序的规范
- 位置属性 (position, top, right, z-index, display, float等)
- 大小 (width, height, padding, margin)
- 文字系列 (font, line-height, letter-spacing, color- text-align等)
- 背景 (background, border等)
- 其他 (animation, transition等)
3.减少消耗
- 使用 3D 属性代替一般属性， transform、scale 等代替原始的 width、height、margin 等，因为这些 CSS3 的属性可以调用 GPU 进行渲染，会减少资源的消耗并提高动画的流畅度。transform操作也不会引起重绘，而是会进行GPU加速。
4.文件头注释
头部注释记录文件的创建者、创建时间、最后更改者和更改时间。
/*
- @Author: xxx
- @Date: 2024-05-07
- @Last Modified by: xxx
- @Last Modified time: 2024-05-12
*/
普通注释
/* 导航 */
5.页面的加载和渲染
浏览器里输入一个 URL ，HTML下载完成以后进行解析。
HTML在解析的过程中，当遇到 JS 文件的时候，HTML 的解析会停下来，等 JS 文件下载结束并且执行完，HTML 继续解析。
把解析完的HTML转化成DOM 对象，构建 DOM 树。
CSS 下载完，开始对 CSS 进行解析，构建出一棵 CSSOM 树。
DOM 树和 CSSOM 树都构建完成以后，构建出一棵渲染树。
渲染树构建完成以后，所有元素的位置关系和需要应用的样式就确定了。
布局计算完成，渲染引擎的处理后整个页面就显示在屏幕上。
6.css优先级关系
同一个 DOM 节点可能会匹配到多个 CSSOM 节点，最终的表现由样式优先级高的 CSS 来确定。
内联样式的权重是 1000。
ID 选择器里样式的权重是 100。
类选择器、属性选择器和伪类选择器里样式的权重是 10。
标签选择器里样式的权重是 1。
通用选择器。
权重值的计算不能越级
id选择器大于类选择器，所以11个类选择器，权重值是 110。两个选择器的样式作用在同一个 DOM 节点上，还是id选择器会生效.
标签类的选择器会很多且没有索引，会造成查找效率低下。
渲染树的构建过程中，会遍历 DOM 树中的可见节点，然后在 CSSOM 树中查找每个节点匹配的样式，最后组合这些可见节点以及和它们相匹配的样式建出一棵渲染树。
SSOM 树的叶子节点开始查找，对应在 CSS 选择器上也就是从选择器的最右侧向左查找。会最先在 CSSOM 的所有叶子节点里查找标签。
兄弟选择器只能向后，不能向前。生成渲染树的时候会遍历 DOM 节点来生成渲染树的节点，当遇到兄弟选择器的时候，它前面的兄弟元素在渲染树上的节点已经生成完毕，而它后面的兄弟节点还没有生成。
