提高网站性能：
减少传输数据【这样会减少站点在设备上加载的时间】
1、压缩网站资源【css、JavaScript和HTML】，优化网站图像，压缩服务器文本资源
缩小或者压缩，就是删除文本中的空白和非必要字符串【可读性很差，但是在服务器上就不需要考虑代码的可读性了】
安装文本压缩包：npm install -g minifier html-minify
压缩css：minify -o styles.min.css styles.css
压缩JavaScript，方法一样
在服务器安装compression模块
网站评估工具：
1、Google PageSpeed Insights
2、使用Google Analytics进行批量报告
网页渲染流程：解析HTML创建DOM、解析css创建cssOM、布局元素、绘制页面
1、服务器在下载HTML的时候，浏览器会对HTML进行解析构建成DOM【文档对象模型，也就是HTML文档结构的表示】；
2、DOM构建完成以后，浏览器解析css并创建CSSOM【css对象模型】，表示css规则将应用于文档的方式；
3、DOM和CSSOM组合创建渲染树，渲染树执行元素布局，过程中应用到CSS规则，创建UI；
4、绘制页面，页面的外观将使用css和页面的媒体内容。绘制完成之后，输出转化为像素呈现在屏幕上。
谷歌浏览器调试工具的Performance，不同颜色表示不同的事件：
❏ 加载中（蓝色）—网络相关事件，如HTTP请求。它还包括诸如HTML解析、CSS解析、图像解码等活动。
❏ 执行脚本（黄色）—与JavaScript相关的事件，包括特定于DOM的活动、垃圾收集、特定于网站的JavaScript、其他活动，等等。
❏ 渲染（紫色）—与页面渲染相关的所有事件，包括将CSS应用于网页HTML等活动，以及会导致重新渲染的活动，例如由JavaScript触发的对页面HTML的更改。
❏ 绘制（绿色）—与将布局绘制到屏幕上相关的事件，例如层合成和光栅化。
性能优化的目标就是最小化浏览器加载和页面渲染的时间，这个过程最大的阻碍就是jank【页面交互和动画效果卡顿】
JavaScript断点代码执行时间：time、timeEnd
console.time();
console.timeEnd();
文章评论