爱奇艺前端实习生一面

最新推荐文章于 2024-07-25 14:59:29 发布

原创最新推荐文章于 2024-07-25 14:59:29 发布 · 463 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#面试 #js #html #react #vue

面试总结专栏收录该内容

2 篇文章

订阅专栏

本文记录了一次爱奇艺前端开发面试的过程，涉及CSS的BFC、居中布局、伪类选择器、CSS3新属性、Vue生命周期、React Hooks、JS事件循环、移动端响应式布局及跨域解决方案等核心知识点。面试官给出了友好且具有建设性的反馈，强调基础知识的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

爱奇艺前端开发一面：

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)
    }
}