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)
,当然也能够减少运营商劫持的内容注入攻击
。
- CSP:内容安全策略,主要以白名单的形式配置可信任的内容来源,在网页中,能够使白名单中的内容正常执行(JS,CSS,image等),而非白名单的内容无法正常执行,从而
- 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;
}
}