2022.5.9字节飞书二面（一小时）

以往项目中遇到的难点，怎么解决
- 图表可视化项目
  - 外部类是全量导入还是动态导入？全量导入，完善Typescript类型
  - 这个项目支持了哪些类型的图表？
对vue单向数据绑定的理解 ❎ (讲出来但没讲太清晰)
- v-model双向绑定，是单向数据流，子组件把修改权限交还给父组件
- 如果直接修改，会导致数据流混乱，当有多个子组件时，不清楚是数据是被哪个组件修改
vue中数据修改触发更新的流程
- 基于响应式框架，每个响应式数据都会有它自己的依赖
- 而初始化函数是被包裹在effect函数中的，也会作为响应式数据的一个依赖
- 当响应式数据发生改变时，会重新执行渲染函数，得到新的结点
- 再通过对比新旧结点，获得并执行最小量的更新
vue中key的作用 ❎ (没答很清楚)
- 优化patch性能，更高效的更新虚拟DOM
- 判断唯一节点的必要条件
- 在更新过程中记录与index的对应关系，避免二次查找
- 使用index作为key
  - 例子:[1,2,3,4,5] => [1,2,4,5]，删除第3个结点。
  - 更新时会认为一直认为是同一节点，会出现以下两种情况
    - 子组件使用了数组的数据或index，这种情况下，会认为是同一节点但节点内容发生变化，所以会更新3->4，4->5，删除5;（这种情况下不会发生异常但会造成额外的渲染）
    - 如果没有使用数组的数据或index，会认为是同一节点且节点的内容也没有发生改变，此时不会删除第3个结点，而是直接最后一个结点删除。
a = 1; console.log(a) // 2 ❎（答出知识点和原理，没答出具体方式）

Object.defineProperty(window, 'a', { get() { return 2; } })

常见状态码
- 204 206
- 301 302 304
- 401 403
- 301和302的区别，分别什么场景下使用
强缓存和协商缓存
- 相关字段
- etag和last-modified的区别
- 强缓存返回的状态码？
  - 200，from disk
CSS class 添加顺序不影响结果

html

.a.b{
	color:yellow;
}
.b.a{
	color:green;
}

<div class="a b">文本< /div>
<div class="b a">文本< /div>

XSS、CSRF、CSP
- CSP:内容安全策略,主要以白名单的形式配置可信任的内容来源，在网页中，能够使白名单中的内容正常执行（JS，CSS，image等），而非白名单的内容无法正常执行，从而减少跨站脚本攻击（XSS），当然也能够减少运营商劫持的内容注入攻击。
transition、transform、translate的对比 ❎（后两个说错）
- transition:可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
- transform:允许旋转，缩放，倾斜或平移给定元素
- translate:允许你单独声明平移变换，并独立于 transform 属性
HTTPS建立连接流程
CSS文本省略号 ❎（是会的，但是太紧张没答出后两个属性名，好可惜）
- text-overflow: ellipsis
- white-space：nowrap
- -webkit-line-clamp: 2
链式调用（卡的有点久，最后写出来，这题太久没练生疏了）
- 要求
  - 链式调用
  - 考虑异步的情况
  - work的时候才全部执行
- 思路
  - 每个执行一个函数，返回this
  - 用一个队列存储任务
  - Promise解决异步，结合async、await执行

const chain = new Chain();
chain.eat().sleep(5).eat().work()

class Chain{
	constructor(){
		this.queue = [];
	}
	addTask(fn){
		if(typeof fn !== 'function') return;
		this.queue.push(fn);
		return this;
	}
	eat(){
		return this.addTask(()=>{
			console.log('eat');
		})
	}
	sleep(num){
		return this.addTask(()=>{
			return new Promise((resolve,reject)=>{
				setTimeout(()=>{
					console.log(`sleep ${num}s`);
					resolve();
				}, num * 1000);
			})
		})
	}
	async work(){
		const len = this.queue.length;
		for(let i = 0; i < len; i++){
			await this.queue.shift()();
		}
		console.log('work!');
		return this;
	}
}

2022.5.9字节飞书二面（一小时） #

2022.5.9字节飞书二面（一小时）