4.9号总结

一、react与vue2、vue3对比区别和共同点：

1、语法风格：
    react语法少、难度大一点；
    vue语法多，难度小；
    使用vue是在操作vue，使用react是在操作js
2、视图风格
    vue采用template字符串模板，更贴近html，欠缺灵活；使用render函数也可以写jsx语法；
    react采用jsx语法，更类似js，限制多。
3、组件风格
    vue2 选项是API，vue3组合式api
    react 16.8后提供函数组件写法
4、状态管理风格：
    4.1、vue 采用vuex或pinia （vuex store或者pinia store直接管理数据）
    4.2、react采用redux（单向数据流）或mobx（响应式数据）
    4.3、异步处理的不同：在 Redux 中，异步处理通常需要使用中间件来处理异步操作。而在 Vuex 和 Pinia 中，异步操作可以通过 actions 处理。而在 Mobx 中，则可以使用 async/await 或 reaction 函数来处理异步操作。
    4.4、开销和复杂性的不同：Redux 和 Mobx 都需要在应用程序中进行额外的设置和配置，并且在处理大量数据时可能会导致性能问题。而 Vuex 和 Pinia 的设置和配置相对简单，并且在大多数情况下可以处理大量数据。

共同点：
虚拟dom，diff动态数据比对，数据驱动，生命周期，

二、SEO

框架：

ssr：服务器端渲染

vue   nuxt.js

react  next.js

TDK （title，description，key）

框架外：

预渲染

语义化标签的使用

h1标签里不嵌套其他标签

sitemap 网站地图 xml格式或者txt格式

微数据结构化

三、http1、http2、http3

http1

http1.1缺陷

高延迟-队头阻塞：当顺序发送的一个请求因为某种原因被阻塞，后面的请求一并被阻塞；（解决方案：将同一页面的资源分散到不同域名下，减少请求数量，内联一些资源，合并小文件减少资源数）

无状态性：协议对于链接状态没有记忆，纯净的http没有cookie。

明文传输：（没有加密，中途可能被篡改和劫持，不安全）

不支持服务端推送

SPDY协议：google基于http1.1的改进版

特性：

多路复用 - 解决队头阻塞（允许在一个连接上无限制并发流，请求在一个通道上，TCP效率更高。更少的网络连接，发出更密集的包）

头部压缩 - 解决巨大的http头部（专门的Hpack算法，每次请求和响应只发送差异头部，一般可达到50%-90%的高压缩率）

请求优先级 - 先获取重要数据（因带宽原因，网络通道被非关键资源堵塞时，高优先级的请求会被优先处理）

服务端推送 - 填补空白（serverPush，可以让服务端主动把资源推送给客户端，客户端有权利选择是否接收）

提高安全性：使用https进行加密传输

http2

http2基于spdy，专注于性能，最大的一个目标是在用户和网站之间只用一个连接；

新增特性：

二进制分帧 - 二进制性能增强的核心。（http2没有改变http1的语义，只是在应用层使用二进制分帧方式传输。因此，也引入了新的额通信单位：帧、消息、流）；

分帧的好处：服务器单位时间内接收的请求数变多，可以提高并发数。最重要的是为多路复用提供了底层支持。

多路复用 - 解决串行文件的文件传输和连接数过多。（一个域名对应一个链接，一个流代表了一个完整的请求-响应过程。帧是最小的数据单位，每个帧都会标识出属于哪个流，流也就是多个帧组成的数据流，多路复用，就是在一个tcp连接中可以存在多个流）

http2缺陷：

1. TCP以及TCP+TLS建立连接的延时 
2. TCP的队头阻塞并没有彻底解决；
3. 多路复用导致服务器压力上升；
4. 多路复用容易timeout

http3

google在推出SPDY的时候就意识到了这些问题，于是搞了UDP协议的QUIC协议。这个就是HTTP3； 

主要特点：

改进拥塞控制，可靠传输；

快速握手

集成TLS1.3加密

多路复用：一个tcp连接存在多个流（每个流又分为很多帧）

连接迁移：涉及到负载均衡

四、TCP和UDP区别

1、连接

TCP是面向连接的传输层协议，传输数据前要先建立连接；

UDP不需要连接，即可传输协议；

2、服务对象：

TCP是一对一的两点服务，即一条连接只有两个端点；

UDP支持一对一、一对多、多对多的交互通信；

3、可靠性：

TCP是可靠交付数据的，数据可以无差错、不丢失、不重复、按需到达；

UDP是尽最大努力交付，不保证可靠交付数据；

4、拥塞控制、流量控制

TCP有拥塞控制和流量控制机制，保证数据传输的安全性；

UDP则没有，即使网络非常拥堵了，也不会影响UDP的发送速率；

5、首部开销

TCP首部长度较长，会有一定的开销，首部在没有使用选项字段时是20个字节，如果使用了选项则会变长；

UDP首部只有8个字节，并且是固定不变的，开销较小；

6、传输方式

TCP是流式传输，没有边界，但保证顺序和可靠；

UDP是一个包一个包的发送，是有边界的，但是可能会丢包和乱序；

7、分片不同

TCP的数据大小如果大于MSS大小，则会在传输层进行分片，目标主机收到后，也同样在传输层组装TCP数据包，如果中途丢失一个分片，只需要传输丢失的这个分片；

UDP的数据大小如果大于MTU大小，则会在IP层进行分片，目标主机收到后，在IP层组装完数据，接着再传给传输层；

TCP和UDP应用场景

1. 由于TCP是面向连接，能保证数据的可靠性交付，因此经常用于
   1. FTP文件传输
   2. HTTP/HTTPS
2. 由于UDP面向无连接，它可以随时发送数据，再加上UDP本身的处理既简单又高效，因此经常用于：
   1. 包总量较少的通信，如DNS、SNMP等；
   2. 视频、音频等多媒体通信
   3. 广播通信

五、babel 和 polifill

　　Babel:Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。注意：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API。有的同学可能分不清哪些是ES6句法，哪些是API，这个暂时先放一放，后面会讲。

　　Polyfill:Polyfill的准确意思为，用于实现浏览器并不支持的原生API的代码。

六、白屏时间和首屏时间

performance.timer对像的时间

• 重定向耗时：redirectEnd - redirectStart
• DNS查询耗时：domainLookupEnd - domainLookupStart
• TCP链接耗时：connectEnd - connectStart
• HTTP请求耗时：responseEnd - responseStart
• 解析dom树耗时：domComplete - domInteractive
• 白屏时间：responseStart - navigationStart
• DOM ready时间：domContentLoadedEventEnd - navigationStart
• onload时间：loadEventEnd - navigationStart

白屏时间FP：performance

首屏时间FCP：使用 MutationObserver

const observer = new MutationObserver(callback);
observer.observe(document, {
  childList: true, // 监测子节点的变化（元素的添加或删除）
  subtree: true // 监测子树的变化（深层元素的修改）
});

function callback(mutationsList) {
  console.log(mutationsList)
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 只关注DOM元素的添加和属性变化
    if ((mutation.type === 'attributes' && mutation.attributeName === 'style') || mutation.type === 'childList') {
      // 检查DOM元素的变化
      // 你可以在这里根据项目需要查找首屏元素的特定条件，比如特定的CSS类或ID
      if (!document.querySelector('.loading').style.display) {
        // 页面首屏渲染完毕，首屏元素被找到，记录首屏时间
        firstScreenTime = performance.now();
        // 停止观察，避免重复计算首屏时间
        observer.disconnect();
      }
    }
  });

  if (firstScreenTime > 0) {
    console.log(`首屏时间：${firstScreenTime}ms`);
    // 可以在这里执行首屏渲染完毕后的操作
  }
}

七、大数据上传与下载

上传：切片

下载：用到请求头的range属性

八、前端错误监控

第三方：sentry

自定义错误监控

采集 ：

window.onerror劫持：收集代码在runtime时发生的错误

监听 unhandledrejection事件：搜集promise错误（promise错误没有catch的话，window.onerror监听不到）

vue、react框架错误捕获

边界错误捕获（冒泡、捕获等）

上报：

source-map

sendBeacon

上报维度

入库、分析：

展示

九、前端规范

husky原理？

husky怎么捕获git提交

.git

hooks:pre-commit

十、二叉树种类、遍历

十一、部署

开发

测试

预生产

jenkins

待学习：
react Context API的使用
taro 跨框架跨平台解决方案