前端性能优化（全面）这是一种性能优化的思想，即：了解在关键节点上会发生的一些事情，然后针对这些步骤进行优化。下面将针对各

CRP(Critical rendering path) 关键渲染路径

这是一种性能优化的思想，即：了解在关键节点上会发生的一些事情，然后针对这些步骤进行优化。下面将针对各个关键节点进行对应的优化策略介绍。

关键流程：一次页面请求所发生的事情

图中1-7个点为一次页面请求的关键点，那么性能优化就可以针对这些关键的节点，进行针对性的操作：

服务端部分的内容，我们就不多做介绍了，下面是各个前端涉及到的步骤的优化策略：

1.url解析

这个阶段可以做的事情比较少

2.DNS解析

DNS预解析，DNS解析式需要时间的

<link rel="dns-prefetch" href="url">

3.发送请求

使用合适的缓存策略：不需要缓存的资料：Catche-control:no-store; 频繁变动的资源：catch-control：no-catch，结合协商缓存在进行，Etags 不需要经常变动的代码文件，可以catch-control:max-age=315000,一个固定的时间段，结合文件的指纹处理，一旦文件发生变化就进行下载
使用HTTP2.0 实现了多路复用，使得多个请求可以使用同一个tcp链接

4.浏览器解析和渲染

过程：生成DOM树——CSSOM树——RanderTree

DOM树:

标签语义化（更加有利于浏览器的词法分析，节约时间）
避免多级嵌套，避免在解析的时候进行多次递归

CSSOM树:
减少选择器层级(从右往左渲染)

div a{
}//先找到所有的a 
a{
}//这个更快

CSS预编译器（less/sass），使用层级嵌套功能的时候需要慎重

Render树阶段
计算设备视口的关键位置和大小（回流/布局/重排）
根据页面的几何信息，得到节点的绝对像素（绘制/栅格化）

JS文件的加载:
因为Js引擎线程和浏览器渲染线程是互斥的，并且，如果在JS中进行了改变样式的操作，会同时影响到CSSOM和DOM,在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM（可采取措施）
```
  	CSS 放在head中
  	js 放在底部或者async defer
```

预渲染和预加载

预渲染：下载好页面在后台进行预先的渲染，但是最好是保证用户一定会打开网页，不然就是浪费资源预加载：就是预先夹杂一些后期会使用的文件资源，图片之类的

<link rel="preload" href="url" />	
<linkrel="prerender" href="url" />

渲染过程中的优化（重排重绘）

懒执行、懒加载：

懒执行：就是将一些现在不需要，比较但是耗时的逻辑，预先设置需要用的时候再进行加载（触发时间或者定时）
懒加载：先加载自己需要的内容，一般是可视区域的内容，例如：图片懒加载策略，先在src里放置占位符，真实图片资源放入到自定的属性里面，后期进入可视区域之后，将真实资源替换给src

文件优化：

图片优化：
	减小图片：减少像素点，以及减少每个像素点能够显示的颜色
	优化策略：
		1.能不用图片就不用图片，一些小图可以用css代替就代替；
			能用webP格式的就用webP格式
		2.大图用jpeg
		3.小图就用base64\png\svg
		4.雪碧图
其他文件：
		CSS 放在head中
		js 放在底部或者async defer
		webworker
		服务端开启文件压缩功能
使用CDN加载
	静态资源尽量使用 CDN 加载，
	由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。
	对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie

Webpack 优化项目

打包的时候使用production，会启用代码压缩
开启ES6模块来开启tree shaking可以移除没有使用的代码
优化图片，对于小图可以使用 base64 的方式写入文件中
按照路由拆分代码，实现按需加载
给打包出来的文件名添加哈希，实现浏览器缓存文件

前端性能优化（全面）