近期的前端面试题整理

314 阅读3分钟

第一家公司 (未更新完)

一面 (技术同事面)

1、css3新增的特性

  1. 媒体查询(Media Queries):使得网页能够根据设备的尺寸、分辨率等属性来自适应调整,可以实现响应式设计。
  2. 弹性盒子布局(Flexbox):是一种新的布局方式,可以更加灵活地实现元素的对齐、分布和排序。
  3. 网格布局(Grid Layout):也是一种新的布局方式,可以将网页划分成行和列,使得元素可以更加自由地排列和对齐。
  4. 过渡(Transitions)和动画(Animations):可以实现元素在状态改变时的平滑过渡和动态效果。
  5. 渐变(Gradients):可以实现元素背景的平滑过渡效果。
  6. 圆角(Border-radius):可以实现元素边框的圆角效果。
  7. 阴影(Box-shadow):可以实现元素的阴影效果。
  8. 文本效果(Text Effects):可以实现文本的渐变、阴影、描边等效果。

2、flex = 1 是哪几个属性的缩写

  1. flex-grow 定义项目的放大比例,默认为0 flex = 1时 为1
  2. flex-shrink 定义项目的缩小比例 默认为1 空间不总,该项目会缩小 flex = 1时 为1
  3. flex-basis 根据这个属性可以判断主轴是否还有多余空间 默认值是auto 即项目本来的大小 ,如果有设置宽高就由宽高来决定,没有设置则由内容决定 flex = 1时 为0 根据内容来撑开

3、css实现一个三角形

这个就是根据设置边框来实现

div {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 40px 40px;
        border-color: transparent transparent #96ceb4;
      }

4、css哪些属性可以继承,如何禁用继承

关于字体相关的属性,都可以被继承 font-size font-family font-weight color 等 禁用继承 可以使用initial属性值 或者 重新写值进行覆盖

5、简单说下定位有哪些

6、说一下js的作用域

7、js的继承

8、js的执行上下文(this)

9、call apply bind的实现原理

10、js的事件循环机制

11、clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop这几个属性简单说一下

12、如何判断一个元素在可视范围内

13、es6+ 新特性

14、new操作符的实现原理

15、用reduce实现一个数组去重

16、如何用setTimeout实现setInterval的功能

17、一个人爬楼梯,只可以一步走一层或一步走两层,共多少种走法?写一个函数接收楼层,返回有多少种方法

18、vue3和vue2的区别

19、vue2的自定义指令,什么时候需要写自定义指令

20、vue组件通讯的方式有哪些

21、vue的diff算法 和 react的diff算法有什么不同

22、react的生命周期钩子函数

23、react常用的几个hooks 函数

24、useCallback 和 useMemo的区别

二面 (部门领导面)

1、h5新增了哪些特性

2、css3新增了哪些特性(上面有写)

3、说下animation几个属性

4、es6+新增了哪些数据结构

5、async await 的实现原理

6、扩展运算符的实现原理

7、ts 的type 和 interface 有什么区别

8、说一下ts的泛型

9、说一下vue的vuex

10、react的hooks函数的原理

接下来就是hr面了