八股文
- 自我介绍
- 对前端的理解
- 项目里面遇到什么难题，如何解决
- 加载图片如何优化
- 懒加载是怎么实现的
- 对Vue框架的理解
- Vue双向数据绑定是怎么实现的
- 能否直接给一个对象添加属性，该怎么添加
- 对React框架的理解
- visibility:hidden和display:none有什么区别，visibility:hidden可继承吗
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| 是否占有空间 | × | √ | √ |
| 是否可以进行DOM事件监听 | × | × | √ |
| 是否可以点击 | × | × | √ |
| 是否可以被子元素继承 | × | √ | √ |
| 子元素能否通过改变属性值来改变继承自父亲的隐藏状态 | × | √ | × |
- 浏览器从输入url到页面展示内容发生了什么
- 具体说一下页面解析的过程
- css文件会阻塞js文件加载吗
- 重绘和重排的区别，什么会导致重绘，什么会导致重排
- 减少重排的办法
浅谈CSS重绘和回流（重排）—— 如何减少重绘和回流（重排）_css设置统一类名 避免回流-CSDN博客
- 一个最上面的节点，用什么操作能够移动该节点同时不影响下面元素
- diff算法
手撕题
3 + '5' + 3
结果为'353'
- + 号两边只要有一个是字符串，都会把另外一个转成字符串
- + 号只有一边时，会把该变量变为数字
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
promise和setTimeout的输出顺序
实现react里面的count每一秒加1
这里考察的是setCount的异步更新以及参数可以传递函数
function App() {
const [count, setCount] = useState(0)
useEffect(()=>{
setInterval(()=>{
setCount((count) => count + 1); //这里是重点
}, 1000)
}
)
return (
<div>
count is: {count}
</div>
)
}
爬楼梯
动态规划
考虑优化
Promise手写题
实现 一个结构，register方法传入一个字符串进行注册，wait传入一个字符串数组，返回一个promise对象，只有当数组里面的所有字符串都被注册后才调用then方法
思路：wait方法返回一个promise对象，应该是promise.all方法返回的对象。等待所有字符串被注册，因此应该有一个挂起的状态，也就是把resolve方法保存起来。
难点：可能先调用wait方法，也可能先调用register方法，因此两个方法里都要有逻辑的判断。
let p1 = new myObject()
let obj = p1.wait(['A','B']).then(()=>{
console.log('A','B','done')
})
p1.register('A')
P1.register('B')
class myObject {
constructor(){
this.map = new Map() //存储需要注册的key及其对应的resolve方法
this.doneMap = new Map() // 存储已经注册了的key
this.proArr = [] //存储需要注册的key的promise
}
wait(arr){
for(let key of arr){
let p = new Promise((resolve, reject)=>{
if(this.doneMap.has(key)){
resolve()
}else{
this.map.set(key, resolve)
}
})
this.proArr.push(p)
}
return Promise.all([...proArr])
}
register(key){
let p = new Promise((resolve, reject)=>{
if(this.map.has(key)){
let resolve1 = this.map.get(key)
resolve1()
}
resolve()
this.doneMap().set(key, resolve)
})
}
}
