web性能优化笔记

提高网站性能：

减少传输数据【这样会减少站点在设备上加载的时间】

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();