Skip to content
On this page

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 ❎(答出知识点和原理,没答出具体方式)
js
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执行
js
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;
	}
}

MIT Licensed | Copyright © 2021 - 2022