1.react的原理？
包括这几方面 diff算法，数据驱动，合成事件，组件更新机制
diff算法：
- 是虚拟dom的必然产物，通过新旧虚拟dom作对比（即diff），将变化的地方更新到真实的dom上面，另外也需要 diff高效的执行对比过程，从而降低时间复杂度O（n）。
- vue2.x中为了降低watcher粒度，每个组件只有一个watcher 与之对应，只有引入diff才能精确找到发生变化的地方。
- vue中diff执行的时刻 是组件实例 执行其更新函数时，它会对比上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch。
- diff过程整体遵循深度优先，同层比较的策略，俩个节点之间比较会根据他们是否拥有子节点或文本节点做不同的操作，比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点，才按照通用方式 遍历查找，查找结束再按情况处理剩下节点，借助key通常可以非常精确查找找到相同节点，因此整个patch过程非常高效。
数据驱动：：this.setState()会将变化的数据首先映射到虚拟的dom中，最后一并进行挂载使页面数据更新
合成事件：
- react把事件委托到document对象上。
- 当真实dom元素触发事件，先处理原生事件，然后冒泡到document对象后，再处理react事件。
- react事件绑定的时刻是调和阶段，会在原生事件的绑定前执行。
- 目的和优势：进行浏览器兼容，react采用的是顶层事件代理机制，能够保证冒泡的一致性。事件对象可能被频繁创建和回收，因此react引入事件池，在事件池中获取和释放事件对象。（react17被抛弃）
react 16.x版本中，react 事件委托到document上
react 17.x版本中，react 事件委托到root上
stopPropagation();
阻止向上冒泡，但是本元素剩下的监听函数还是会执行，
stopImmediatePropagation();
阻止向上冒泡，但是本元素剩下的监听函数不执行，
组件更新机制
2.前端性能优化？
一.更快的网络通信
1.让服务器和用户更近用cdn：
- 1）全局负载均衡
- 2）缓存系统
2.服务器通信层面
- 1）资源合并 雪碧图
- 2）域名分片 多域名 （一个域名可以发6-8个请求）
3.数据传输层面 – 缓存
- 1）强缓存
- 2）协商缓存
4.数据传输层面 – 压缩
- 1）数据压缩 gzip 新的br
- 2）代码文件压缩 html/css/js 注释、 空格、长变量名 等等
- 3）静态资源 字体图标 去除元数据 缩小尺寸及分辨率，使用jpg或者webp格式
5.头与报文
- 1）http1.1中减少不必要的头
- 2）减少cookie数据量
6.通信协议层面
1）http2头部压缩
臃肿的请求头 平均460字节的首部
专门的HPACK压缩算法
- 索引表
- 霍夫曼编码
2）二进制帧
3）链路复用
二.更高效的数据处理
工具测试 ab
三.代码上优化
1.html语义化标签加强dom解析
2.能用html/css实现的效果 就不要用js
3.多使用伪元素，减少js多dom的查找遍历
4.逻辑和展示解耦，避免不必要的js引擎启动
5.减少作用域查找和闭包，避免== 使用块级作用域
四.服务端渲染 ssr
解决方案：next.js nuxt.js
概念： 使用户觉得页面加载快！
思路：分析一个页面从输入 URL 到页面加载显示完成的所有步骤，采用分治法逐步优化。
1.优化DNS查询
减少域名：尽量把所有的资源放在一个域名下。一个域名同时可以发4（IE8）或8个请求
（Chrome）。请求文件少，用1个域名，文件多用多个域名。与3权衡。
2.优化TCP协议
1）TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。第一次请求不断
开，第二次请求复用。
2）使用http 2.0版本：多路复用，连接复用率会更高
3.优化发送HTTP请求
1）合并JS或CSS文件
2）inline image：使用data:url scheme来内连图片
3）减小cookie体积，每个请求都会附带cookie，所以不要滥用cookie。
4）合理使用CasheControl代替发送HTTP请求
5）同时发送多个请求（浏览器自带）IE8可以同时请求下载4个的css文件，Chrome可以同时
请求下载8个 。
4.优化接受响应
1）设置Etags：浏览器重复与请求服务器一样的文件，ETag响应304。
2）Gzip压缩大文件 使用macos gzip，npm server gzip gzip 文件名
其响应头为Content-Encodinging：gzip，先压缩接收到再解压缩。缺点：耗费浏览器CPU，权衡
5.优化DOCTYPE
不能不写，不能写错
6.优化CSS、JS请求
1）使用CDN：用CDN请求静态资源同时可以增大同时下载数量，内容分发网络（CDN）可以使请
求总时间降低，也可以减少cookie
2）CSS放在head里：使其尽早下载，因为chrome需要下载完所有的css后才渲染页面
3）JS放在body里的最后：尽早显示整个页面，获取节点。
7.使用懒加载
1）组件懒加载
const xxx =()=>import('./components/xxx.vue')
2）路由懒加载
8.优化用户体验
1）用户看到哪些内容就请求哪些内容
2）加一个loading动画用户会感觉时间变快
9.减少监听器，使用事件委托
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let liList = document.querySelectorAll('li')
// liList[0].onclick = ()=>console.log(1)
// liList[1].onclick = ()=>console.log(2)
// liList[2].onclick = ()=>console.log(3)
// liList[3].onclick = ()=>console.log(4)
//法一：监听太多
let ul = document.querySelector('ul')
ul.onclick = (e) => {
if (e.target.tagName === 'LI') {
console.log(e.target.innerText)
}
}//法二：减少监听，采用事件委托
</script>
</body>
10.优化图片大小
图片压缩网站
11.减少或合并DOM操作或使用虚拟DOM
// 不好的方式
var elem = $('#elem');
for (var i = 0; i < 100; i++) {
elem.append('<li>element '+i+'</li>');
}
// 好的方式
var elem = $('#elem' ),
arr = [];
for (var i = 0; i < 100; i++) {
arr.push('<li>element ' +i+'</li>' );
}
elem.append(arr. join(''));
12.对大量数据计算使用缓存
// data.length === 100000
for(var i = 0;i < data.length;i++){
// do something...
}
//上面的代码没有下面的好
for(var i = 0,len = data.length;i < len;i++){
// do something...
}
13.使用setTimeout降低调用接口频率
复制代码1.hash模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
2.history 模式
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。history 模式需要后台配置支持
3.WebSocket
- http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。
- WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术，是一种在单个TCP连接上进行全双工通讯协议
特点：
（1）握手阶段采用HTTP协议，默认端口是80和443
（2）建立在TCP协议基础之上，和http协议同属于应用层
（3）可以发送文本，也可以发送二进制数据。
（4）没有同源限制，客户端可以与任意服务器通信。
（5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
