前端性能优化的点：
网络层面
构建层面
浏览器渲染层面
服务端层面
涉及的功能：
资源的合并与压缩
图片编解码原理和类型选择
浏览器渲染机制
懒加载预加载
浏览器存储
缓存机制
PWA
Vue-SSR
React-SSR
性能调优工具
performance
layers
1、dns是否可以通过缓存减少dns查询时间？
2、网络请求的过程走最近的网络环境？
3、相同的静态资源是否可以缓存？
4、能否减少请求http请求大小？
5、减少http请求？
6、服务端渲染？
一、资源合并与压缩
BS架构
深入理解http请求是前端优化的核心，web前端是动态增量加载静态资源的过程。
1.资源的合并与压缩
html压缩---->包括空格---->使用在线网站进行压缩
css压缩----->无效代码的删除
js压缩与混乱---->无效字符的删除，缩减和优化--->代码保护，使用uglifyjs对js进行压缩
文件合并------>合并成一个js文件--->几个js文件增加了n-1个网络延迟
经过代理服务器
首屏渲染问题 ===》公共库合并，不同页面的合并，见机行事，随机应变
缓存失效问题 ===》
开启gzip
2.图片相关的优化
一张jpg图片的解析过程
png8-->256色+支持透明
png24--->2^24色 + 不支持透明
png32--->2^24色 + 支持透明
jpg不透明的
png支持透明，浏览器支持好
webp压缩程度好(有兼容性问题)
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
jpg-->不需要透明的时候用
png-->透明图片
webp-->安卓支持的好（如果支持webp就用这个格式）
svg矢量图-->图片样式相对简单的业务场景
优化点：
进行图片压缩
css雪碧图：多张图合成一张图
image inline==>base64内嵌到html中，减少网站的http请求数量
转成webp
3.css和js的装载与执行
html ,css,js加载过程
HTML--->DOM -->
====>renderTree-->Layout--->paint
CSS--->CSSOM-->
HTML渲染过程：
顺序执行，并发加载 ：词法分析，并发加载，并发上限
是否阻塞
依赖关系
引入方式
CSS阻塞：
CSS head中阻塞页面的渲染
CSS阻塞 js 的执行
CSS不阻塞外部脚本的加载
JS阻塞： 直接引入的js阻塞页面的渲染（通过async,defer）
js不阻塞资源的加载
js顺序执行，阻塞后续js逻辑的执行
4.懒加载与预加载
懒加载：图片进入可视区域之后请求图片资源
电商图片很多，页面很长的业务场景适用
减少无效的资源的加载
并发加载的资源过多会阻塞js 的加载，影响网站的正常使用
方法：<img src="preview.png" data-url="" /> 监听scroll,进入可视区域
需要明确img的height占位区域
zepto.lazyload.js
预加载：图片等静态资源在使用之前提出请求
资源使用到时能从缓存中加载，提升用户体验
页面展示的依赖关系维护
方法：1.<img src="" style="display:none" />
2.var image = new Image() ,使用image对象
image.src="*****"
3.XmlHttpRequest
4.preload.js库
5.重绘与回流
（1） .用translate替代top改变
（2）.用opacity替代visibility
（3）.不要一条一条的修改DOM的样式，预先定义好class,然后修改DOM的className
（4）.把DOM离线后修改，比如先把DOM给display:none(有一次Reflow),然后你修改100次，然后再把它显示出来
（5）.不要把DOM节点的属性放在一个循环里面，当成循环的变量
（6）.不要使用table布局，可能很小的一个小改动会造成整个table的重新布局
（7）.动画实现的速度的选择
（8）.对于动画新建图层 transform:translateZ(0)
（9）.启用GPU硬件加速 transform:translate3d(0,0,0)
6.理解localstorage,cookie,sessionstorage,indexdb
cookies:
localstorage:
sessionstorage:
理解pwa和service worker