this:
1.默认绑定：this指向全局变量window
2.隐式绑定：函数是某个对象的属性时，this指向这个对象
3.显式绑定：call,apply,bind
4.new绑定：new通过构造函数创建实例对象，this指向这个对象
5.箭头函数：没有this，this指向上层作用域的this
flex布局
1.容器属性：flex-direction,flex-wrap => flex-flow
justify-content,align-items,align-content
2.元素：order
flex-grow,flex-shrink,flex-basis => flex
align-self
强制缓存和协商缓存
强制缓存：expires,cache-control(高优先级)
协商缓存：last-modified/if-modified-since，etag/if-none-match(高优先级)
http:
https:
相对于http优点：
1.数据加密（TLS,SSL）
2.客户端和服务端身份验证（CA证书）
3.数据完整性（hash值生成数字签名）
HTTP2:
1.二进制分帧层
2.多路复用，解决HTTP1.1的线头堵塞问题，实现一个TCP连接上并发请求
3.头部压缩，用HPACK算法压缩头部
4.服务器主动推送
http3:
传输协议将TCP改为UDP,基于QUIC
webSocket:
实时通信，服务端主动推送消息
webWorker:
多线程实现
http状态码：
101 switching protocols
200 OK
301 永久重定向
302 临时重定向
304 not modified
400 bad request
401 unAuthorized
403 forbidden
404 not found
500 internal server error
502 bad gateway
react setState，useState
1.setState异步，批量更新。
如果更新依赖旧值和props，可以通过接收一个函数：
this.setState((state, props) => {
return {
counter: state.counter + props.increment
}
})
2.useState返回的setXXX方法异步，批量更新。
如果需要连续更新，可以通过接收一个函数：
const [num, setNum] = useState(0)
// 如何连续加1
setNum(n => n + 1);
setNum(n => n + 1);
setNum(n => n + 1);
qiankun微前端：
js隔离：
1.快照沙箱snapshot sandbox
激活：active(),在snapshot中记录window所有属性，将沙箱失活时的状态记录恢复
失活：inactive(),diff比较rawwindow所有属性和沙箱激活时window记录的属性，将激活状态中所有修改的属性记录，并将window恢复为记录的snapshot
缺点：1.会改变全局window属性，只支持单个微应用。2.需要变量window所有属性，耗费性能
优点：支持低版本的浏览器
2.proxy代理沙箱单应用版（Legacy sandbox）
active():把上次新增/更新的属性覆盖到window
inactive():删除新增/更新的属性，恢复window
通过三个对象记录沙箱中属性变化：
addedMap:记录新增属性
originMap:记录沙箱修改window属性时，旧的key-value
updatedMap:记录沙箱中修改的属性
缺点：1.会改变window，只支持单应用。2.proxy部分低版本浏览器不支持
优点：1.比快照沙箱性能更好，子应用卸载恢复window时不需要做diff比较操作
3.proxy代理沙箱多应用版（Proxy sandbox）
创建一个fakeWindow对象，将window的一些原生属性复制到fakeWindow，并用proxy代理
1）微应用修改全局变量时，直接修改fakeWindow
2）微应用获取全局变量时：1.如果是原生属性，从window拿。2.如果不是原生属性，优先从fakeWindow拿。
缺点：1.部分低版本浏览器不支持proxy。
优点：1.支持多应用。2.不需要做恢复环境操作，性能更好
样式隔离：
1.strictStyleIsolation(shadow dom)
const hostNode = document.getElementById('hostNode'); // Shadow DOM 附加到的常规 DOM 节点
const shadow = hostNode.attachShadow({ mode: 'open' });
hostNode.shadowRoot // 影子树根节点,可以访问影子dom的内部
shadow.appendChild(spanNode) // 影子dom添加节点
可能的问题：使用弹窗时，弹窗跑到了主应用丢失样式，因为弹窗一般添加到document.body中。
2.experimentalStyleIsolation
为所有样式添加选择器div[data-qiankun='appName']
3.工程化方法
css module，编译生成带hash值的选择器名。
缺点：构建时生效，依赖预处理器和打包工具。
4.css-in-js
css和js编码在一起，最终生成不冲突的选择器
缺点：运行时开销较大
应用通信：
1.基于Url
2.发布订阅模式，比如window的CustomEvent
3.props，将onGlobalStateChange,setGlobalState,state传给子应用，就可以基于props的主应用和子应用通信
4.监听localStorage
// 这样可以监听其他页签修改LocalStorage（触发StorageEvent事件）
// 但是当前页面修改LocalStorage无法监听到
window.addEventListener('storage', event => {
if (event.key === 'myKey') {
// 执行操作
}
})
// 当前页面修改LocalStorage时主动触发StorageEvent事件
localStorage.setItem('myKey', value) // 修改myKey
const storageEvent = new StorageEvent('storage', {
key: 'myKey',
url: window.location.href
})
window.dispatchEvent(storageEvent) // 手动分发本页面的storage事件
qiankun 和iframe区别：
iframe缺点：
1.url不同步，浏览器刷新后iframe的url状态丢失，后退前进按钮无法使用
2.UI不同步，DOM结构不共享
3.全局上下文全隔离，内存变量不共享
4.加载资源慢
git rebase和git merge区别：
merge:
合并代码，适合多人合作，避免历史冲突
rebase:
担任开发清理历史，保持提交历史整洁
在dev分支输入命令git rebase main，开发分支的commit会重新生成，并放到Main分支的commit之后。
注意要在dev分支推送到远程前rebase，否则会和远程冲突
合并commit:
git rebase -i HEAD~n // 合并n个最近的commit
git rebase -i commit0 // 合并commit0后的所有commit（从commit1开始）
进入vim界面后将要合并的commit前的pick改为squash（必须保留第一个分支）
前端性能监控指标
可通过web-vitals包来获取监控数据
FP: first paint
FCP: first contentful paint
LCP: largest contentful paint
CLS: cumulative layout shift
TTFB: time to first byte (从浏览器发出请求到收到服务器第一个字节所花时间)
TTI: time to interactive
FID: first input delay
INP: interaction to next paint (页面多次交互的最差延迟)
路由hash模式和history模式区别
hash模式:
监听浏览器地址中的hash值（#后的值）变化，通过hashChange事件切换页面
更改hash值： window.location.hash
history模式：
history.pushState,history.replaceState方法改变url地址但不刷新页面
通过back,forward,go方法或点击浏览器前进,后退按钮，触发popState方法从而更新页面
a标签和pushState/replaceState不会触发popState
缺点：history模式需要浏览器支持HTML5的history对象
react fiber
链表结构的virtual dom，可以随时终端的循环遍历，优化了卡顿问题
树状结构的virtual dom需要递归变量，不可终端，diff事件过长会导致页面卡顿甚至无响应
