1.web性能的重点是网站加载速度更快（从用户请求网站到网站出现在用户屏幕上所经历的时间）
提高网站性能，目标在于：减少传输数据量；
缩小资源 --> 基于文本资源 去除 所有空白和非必要字符
* 使用服务器压缩 服务器请求头中 有一个Accept-Encoding头部信息代表使用的压缩格式
Content-Encoding字段中描述压缩方法和压缩内容
** Node HTTP 引入 `compression` 依赖包 use
** Apache web 服务 开启gzip压缩(确保加载了 mod_deflate 模块)
** Nginx 开启 gzip 压缩
最小化浏览器加载和渲染页面的时间，解决 jank ( 指交互和动画效果卡顿或未能顺利渲染 )
* 当单一帧占用了太多的CPU时间（帧 ： 浏览器在每秒显示时间内做的工作量）
2.性能测试
Google PageSpeed Insights - 网页载入速度检测工具
Google 控制台中 Performance 面板 - 记录页面的加载、脚本执行、渲染和绘制活动
加载中 - 网络接收/发送事件，以及HTML图像和CSS解析活动
执行脚本 - javascript相关的事件（特定的DOM活动、垃圾回收等）
渲染 - 布局和页面回流活动，包括CSS、HTML变化，以及JavaScript对CSS的修改
绘制 - 将Web页面绘制和光栅化到屏幕上（光栅化是将一个图元转变为一个二维图像的过程。
二维图像上每个点都包含了颜色、深度和纹理数据。将该点和相关信息叫做一个片元）
3. CSS优化
* DRY(Don't repeat yourself 不要重复自己)
* 简写 CSS (如：margin: 0 0 0 0; => margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;)
** 覆盖原有属性时应保持与之一致，改写需要变的参数
* 尽量使用css浅选择器 - 过于具体的选择器层次很深，对解析性能不友好
* 预编译器的可读性会带来很深的层级嵌套这种便利是以性能为代价的
* 分割css文件与特定页面对应
从 npm 上下载 uncss 使用去除未使用 css 代码
如安装SASS可以使用 gen install csscss
csscss 用于检查代码冗余
