From cd8001f25ee1e4104479324dcb69ad1757b18157 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Thu, 14 Jan 2021 17:05:23 +0800
Subject: [PATCH] =?UTF-8?q?add:=20CSS=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../前端性能优化（一）：静态资源优化.md       | 115 +++++++++++++++++-
 1 file changed, 111 insertions(+), 4 deletions(-)

diff --git a/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md b/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md
index 2690284..1853fbe 100644
--- a/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md
+++ b/13-前端面试/02-性能优化/前端性能优化（一）：静态资源优化.md
@@ -219,13 +219,12 @@ console.log(result.final_svg);
 
 - 使用 Data URI 代替图片。base64就是属于 Data URI的方式。
 
-## 在服务器端进行图片自动优化
+### 7、在服务器端进行图片自动优化
 
-### 概念
 
 图片服务器自动化优化是可以在图片 URL 链接上增加不同特殊参数，服务器自动化生成。通过这些参数，可以设置图片的不同格式、大小、质量。
 
-### 常见处理方式
+**常见处理方式**：
 
 - 图片裁剪：按长边、短边、填充、拉伸等缩放。
 
@@ -235,7 +234,9 @@ console.log(result.final_svg);
 
 - AI 能力：鉴黄、涉政、智能抠图、智能排版、智能配色、智能合成等 AI 功能。
 
-### 图片举例
+**图片举例**：
+
+比如JD公司的图片链接，就会在服务器端做优化处理。通过修改图片链接中的参数，就能自动达到相应的优化效果。
 
 原始图片链接：
 
@@ -261,3 +262,109 @@ https://img12.360buyimg.com/img/s200x200_jfs/t1/149913/14/18648/719436/5fd8b9b5E
 https://img12.360buyimg.com/img/s3866x3866_jfs/t1/149913/14/18648/719436/5fd8b9b5Eb697b825/7c23f3028aff8e2b.jpg.q10
 ```
 
+
+## HTML优化
+
+### 1、精简 HTML 代码
+
+- 减少 HTML 的嵌套。
+
+- 减少 DOM 节点数。
+
+- 减少无语义代码（比如: <div class=“clear”></div> 消除浮动，其实可以用css来处理）。
+
+- 删除 http 或者 https：如果URL的协议头和当前页面的协议头一致的，或者此 URL 在多个协议头都是可用的，则可以考虑删除协议头。
+
+- 删除多余的空格、换行符、缩进和不必要的注释。
+
+- 省略冗余标签和属性。
+
+- 使用相对路径的 URL。
+
+### 2、文件放在合适位置
+
+- CSS 样式文件链接尽量放在页面头部。
+
+CSS 加载不会阻塞 DOM tree 解析，但是会阻塞 DOM Tree 渲染，也会阻塞后面 JS 执行。
+
+任何 body 元素之前，可以确保在文档部分中解析了所有 CSS 样式（内联和外联），从而减少了浏览器必须重排文档的次数。
+
+如果放置页面底部，就要等待最后一个 CSS 文件下载完成，此时会出现"白屏"，影响用户体验。
+
+- JS 引用放在 HTML 底部
+
+防止 JS 在加载、解析、执行时，阻塞了页面后续元素的正常渲染。
+
+### 4、增强用户体验
+
+- 设置 favicon.ico
+
+网站如果不设置 favicon.ico，控制台会报错。另外页面加载过程中如果没有图标，则会出现 loading 过程，也不利于记忆网站品牌，建议统一添加。
+
+- 增加首屏必要的 CSS 和 JS
+
+页面如果需要等待所的依赖的 JS 和 CSS 加载完成才显示，则在渲染过程中页面会一直显示空白，影响用户体验，建议在首屏增加必要的 CSS 和 JS，比如页面框架背景图片或者loading 图标，内联在 HTML 页面中。这样做，首屏能快速显示出来，缓解用户焦虑。现在很多网页在初始化的时候，流行做**骨架屏**，小伙伴们也可以研究下。
+
+## CSS优化
+### 1、提升 CSS 渲染性能
+
+- 谨慎使用 expensive 属性，这类属性比较耗浏览器的性能。比如：`nth-child` 伪类；`position: fixed` 定位。
+
+- 尽量减少样式的层级数。
+
+比如：`div ul li span i {color: blue;}`这样的层级就太深了。建议给 i 标签设置 class属性，然后通过class直接设置样式属性，可以提升浏览器的查询效率。
+
+- 尽量避免使用占用过多 CPU 和内存的属性。比如：`text-indnt:-99999px`。
+
+- 尽量少使用耗电量大的属性。比如：CSS3 3D transforms、CSS3 transitions、Opacity 这样的属性会消耗GPU。
+
+### 2、合适使用 CSS 选择器
+
+- 尽量避免使用 CSS 表达式。
+
+比如 `background-color: expression( (new Date()).getHours()%2 ? "#FFF" : "#000" );`这个属性的意思是，每间隔两小时，改变白景色。
+
+- 尽量避免使用通配选择器。
+
+比如 `body > a {font-weight:blod;}`这样的属性，可能会把 body 里所有的标签遍历一遍，才找到 a 标签，比较耗时。
+
+- 尽量避免类正则的属性选择器：`*=， |=， ^=， $=`
+
+### 3、提升 CSS 文件加载性能
+
+- 使用外链的 CSS。
+
+我们知道，内联的 css 是在html 内部写的。相比之下，外链的 CSS文件是放在CDN上的，可以缓存，既能减少 html 页面的体积大小，也能利用缓存减少资源的请求。
+
+- 尽量避免使用 @import 方法
+
+整个CSS加载完成后，浏览器会把 import 中所有依赖的文件全部加载完成后，浏览器才会接着往下渲染。这个过程会阻塞CSS文件的加载过程。
+
+### 4、精简 CSS 代码
+
+- 使用缩写语句
+
+- 删除不必要的零。比如 0.2 可以写成 .2
+
+- 删除不必要的单位，比如 0px 可以写成 0
+
+- 删除过多的空格；注释言简意赅
+
+- 尽量减少样式表的大小
+
+当然，很多地方可以在编译时，通过压缩工具来处理；但是我们在写代码时，也应该有良好的编码习惯。
+### 5、合理使用 Web Fonts
+
+- 将字体文件部署在 CDN 上。
+
+- 或者将字体以 base64 形式保存在 CSS 中并通过 localStorage 进行缓存
+
+- Google 字体库因为某些不可抗拒原因，应该使用国内托管服务
+
+### 6、CSS 动画优化 
+
+- 尽量避免同时出现过多动画。
+
+- 延迟动画初始化：让其他的重要的CSS样式优先渲染。
+
+- 结合 SVG。