爱奇艺前端开发一面:
1.了解css中的bfc吗?请详细说说
1,就答了bfc叫块级格式化上下文,是指触发bfc模式的盒子区域内部的布局不会影响到和盒子外的布局
2,答触发bfc的方式,display设置为table-cell等,定位使用绝对定位,float不为none,overflow设置为hidden等
3.应用场景:外边距合并,清除浮动,还有一个自适应两栏布局没有答上
2,css居中布局有哪些方法
1,float 。top:50%,left:50%,然后translatex:-50%,ranslatey:-50%,
2.position:absolute,假设父元素无定位,相对于body标签,top:50%,left:50%,然后translatex:-50%,ranslatey:-50%,
3.margin:auto,然后translatex:-50%,ranslatey:-50%,
4.flex布局,可以设置3个盒子,主轴排列为space-between,侧轴设置center
3,谈谈css中的伪类选择器
比较简单,说了:link,:active,:visited,:hover以及意义
然后就是:before和:after
还说了下:nth-child(n),:nth-of-type(n)
4,你知道哪些css3新属性,说说看
transition 过渡属性
animation 动画属性,关键帧和按步动画,举例18年百度官网奔跑的小熊动画
transform 2d转换,3d转换(包括translate,rotate,scale)
还说了高斯模糊filter和opcity透明度,现在才想起来不是,然后没打出来css3 boreder和背景
5,说说vue父子组件嵌套时的生命周期
答出了父组件的生命周期,然后说子组件是在父组件updated后调用的子组件的beforeupdate,这里应该不对,下来查了下在更新过程,应该是
更新过程: 父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
6,说说vue响应式布局中object.definepropoty缺点和为什么用proxy
先说了下object.definepropoty的工作过程,在页面中展示某个数据时,调用get为这个调用addsu()添加一个watcher,然后改变值时,调用set(),set对比前后数据,如果发生变化,触发watcher,收集页面的所有变化,一次性render重新渲染
缺点:数据层级较深时一次性递归很麻烦,针对对象属性,无法监听数组和对象的新增和删除(这里简单说了下vue对数组方法的重写)
proxy:针对为对象本身,实现监听数组和对象的新增和删除,然后还说了一点就是proxy和object.definepropoty不同,只有在需要时才会读取对象下一层,性能更优
7,谈谈react的生命周期吧
先说了react15,组件挂载时:
constructor()
componentWillMount()
componentDidMount(),
componentWillUnmount ()
组件更新时
componentWillReceiveProps (nextProps)
shouldComponentUpdate(nextProps,nextState)
如果这里是forceupdate跳过shouldComponentUpdate
componentWillUpdate (nextProps,nextState)
render()
componentDidUpdate(prevProps,prevState)
然后说了下react16把will类的生命周期加上unsafe,新增两个生命周期
getDerivedStateFromProps(nextProps, prevState)
getSnapshotBeforeUpdate(prevProps, prevState)
最后说了下react16 为什么要这样做,强调时间切片概念,fiber树在进行update时,updatequene中任务会有优先级,所以有的任务会中断甚至重新执行,这样will类的生命周期会重复执行,而新增的生命周期是在commit阶段执行的,之执行一次
8,谈谈你都知道那些react hook
先说了为什么有hook,为了让函数式组件也能够使用class组件的一些特性
挑了几个重要的说 usestate,说了基本使用,然后说了下如果下次的state依赖于上次的state怎么办,引出了usereducer,简单做了对比
————————————————————————————
说了下useeffect,基本使用方法,三个参数意义,以及和生命周期相比的有点,然后说了说了下它会在调用一个新的 effect 之前对前一个 effect 进行清理,在渲染后执行,如果想同步在回流前执行,用uselayouteffect
————————————————————————————
然后简单说了下usecontrext和useref
9,谈谈js事件循环
从html的渲染说起,说到了栈和堆,说到整个页面的渲染可以认为是一个宏任务,然后说了任务队列,宏任务,微任务,已经所含的一些事件分类,说了执行顺序宏任务----宏任务下的微任务----下一个宏任务。最后补充在一个微任务执行后会看页面是否有resize或scroll,执行 requestAnimationFrame 回调,执行 IntersectionObserver 回调,更新界面
10,用过哪些es6新特性
剩余参数,数组解构,set数据结构,foreach,filter,map,some,every,async/await,promise
没说出来的:箭头函数,let/const,string的新方法,obj的新方法,arrayfrom。。。。
11,用过let和const吗
对比了let,const,var的含义,值是否能修改,作用区间,还有变量提升和暂存性死区
12,说说对箭头函数的理解
说了this指向,我说的是指向组函数的this,正确表达的是上下文里对象this指向,一个意思,后者更官方
说了箭头函数的简写形式和条件
说了箭头函数this一旦确定,就没法修改,即使使用显式绑定
说了为什么有箭头函数,解决闭包中this的隐式丢失
13.说说移动端响应式布局
谈了谈rem,em
谈了谈媒体查询
谈了谈 vh和vw还有calc把长和宽链接
谈了谈flex
谈了谈微信小程序中的rpx
忘了说那个物理像素比那块了
14.如何解决跨域
先说了为什么要有跨域,安全问题,防止csrf攻击
解决方案:postmessage ,domain
jsonp以及jsonp的原理
cors跨域策略,大概说了下简单请求和复杂请求的实现
proxy代理,在框架里用过,大概说了下实现
ngix反向代理,只是提了下,说属于后端,不是很理解
最后说了下跨域时候服务器是否能收到请求
15.实现这样一个函数add(1)(2)(3)()
当时没写出来
function add(n) {
let num=(m)=>{
if(m){
n=m+n
return num
}else{
console.log(n);
}
}
return num
}
16.实现斐波那契数列
function fiber(n) {
if(n==1){
return 1
}
if(n==2){
return 2
}
if(n>2){
return fiber(n-1)+fiber(n-2)
}
}
总结:整体来说面试题目不是很难,而且面试官全程给人的感觉很好,基本问题都答出来了,面试的氛围还是比较轻松的,不会很压抑,很多都是基础的知识,所以基础真的很重要,问面试官对我有什么建议,面试官一笑,说:‘那就多练多学’,那就多练多学吧
全部评论
(1) 回帖