2022前端面试题附答案.

1、HTML5的新特性?

  • 1、语义化标签,比如header、footer、nav、aside、article、section
  • 2、音视频,比如audio、video
  • 3、画布canvas、矢量图svg
  • 3、画布,canvas的api有getContext、fillStyle、fillRect等
  • 4、本地存储localStorage、sessionStorage
  • 5、web worker

2、语义化的好处?

  • 1、代码分块清晰,便于维护
  • 2、页面结构清晰,便于浏览器。搜索引擎解析
  • 3、利于搜索引擎的爬取,利于SEO

3、canvas的常用api有哪些?

  • getContext:返回一个指定canvas的绘画环境对象
  • beginPath:开始绘制
  • moveTo:移动画笔位置
  • lineTo:用来画线段
  • stroke:用来实施绘制的操作
  • lineStyle:设置线段的样式
  • closePath:结束绘制

4、web worker有什么作用?应用场景有哪些?

开启一个子线程,且子线程的操作不受线程的影响

  • 大数据处理
  • 耗费时间较长的操作

5、浏览器本地缓存localStorage与sessionStorage的区别?

  • 生命周期不同:前者一直存在浏览器,除非用户手动清除,后者生命周期结束于浏览器或者tab页的关闭

CSS3

1、有哪些新特性呢?

flex、animation、transform、border-radius、box-shadow、opacity

2、背景毛玻璃的效果如何实现呢?

filter:blur()

3、position有哪几种呢?

  • static:默认
  • relative:相对于自身
  • absolute:相对于最近的一个非static的祖先级元素进行定位
  • fixed:相对于屏幕窗口进行定位
  • sticky:用来实现吸顶效果

4、如何自己实现跟position:sticky的效果?

使用getBoundingClientRect或者IntersectionObserver计算指定元素位置,到达一定距离更改指定元素定位为fixed,从而实现sticky的效果

5、重绘回流是什么呢?

文章链接

6、怎么降低重绘回流的次数呢?

文章链接

7、flex布局如何更改主轴方向?

设置flex-direction样式属性

8、flex布局如何允许换行呢?

设置flex-wrap样式属性

9、flex布局实现水平垂直据居中?

设置justify-content和align-items都为center

10、flex:1的原理是什么呢?

flex-grow 、flex-shrink 、flex-basis这三个样式的合集,全写状态为flex:0 1 auto,简写为flex: 1

11、rem与em的区别是什么呢?

  • rem:相对于标签的font-size去决定大小,例如html标签font-size为14px,则2rem === 28px
  • em:相对于自身的font-size去决定大小,自身没有font-size则继承祖先级元素的font-size

JavaScript

1、原型链是什么呢?有什么作用吗

  • 原型链:原型链是一条对象隐式原型不断往上指向的一条指向链,尽头是Object的隐式原型,也就是null
  • 作用:构造函数原型上的东西可以让实例们共享,从而节省了空间

2、闭包是什么?有什么优缺点

闭包是一个能让函数外部访问到函数内部的一个函数

  • 优点是:延长函数内部变量的寿命,使函数外部能访问到函数内部
  • 缺点是:滥用闭包导致内存溢出,页面卡顿

3、JavaScript总共有几种数据类型?

字符串、布尔值、数值、undefined、null、object、symbol、bigInt

4、JavaScript判断类型的方式是什么?

  • typeof:只能判断 字符串、布尔值、数值、undefined、function、object、symbol、bigInt,不能区分判断 数组、null、对象
  • A instanceof B:判断A是否为B的实例对象,从而判断A是否为B类型
  • Object.prototype.toString.call():可以判断所有的数据类型

6、JavaScript不同类型的存储方式有何区别?

普遍认为

  • 基础数据类型存于栈内存
  • 引用数据类型存于堆内存 我认为
  • 所有数据都存于堆内存,栈内存只存指针

7、你说字符串存储在栈内存,那如果字符串很长。超过了栈内存最大容量呢?

所以说我觉得所有数据都存于堆内存,毕竟栈内存容量有限。

8、call、apply、bind的区别?

  • call于apply的区别在于传参,前者直接传参,后者传一个数组
  • bind传参后不立即执行,而是会返回一个函数,这个函数可以继续传参,且执行(bind函数可以分两次传参)

9、bind返回的函数能作为构造函数吗?

不能哦,会报错的

10、赋值、深拷贝与浅拷贝有什么不同?

  • 赋值:赋值指针指向,还是用的同一个内存空间
  • 浅拷贝:只拷贝第一层
  • 深拷贝:所有层都会进行拷贝

11、怎么判断一个对象有环引用呢?

定义一个空数组,且对于目标对象进行递归,每次都判断递归项是否为对象,是的话放进数组,且每次判断属性值是否在数组里,在的话说明环引用了

function cycleDetector(obj) {
    const arr = [obj]
    let flag = false

    function cycle(o) {
        const keys = Object.keys(o)
        for (const key of keys) {
            const temp = o[key]
            if (typeof temp === 'object' && temp !== null) {
                if (arr.indexOf(temp) >= 0) {
                    flag = true
                    return
                }
                arr.push(temp)
                cycle(temp)
            }
        }
    }

    cycle(obj)

    return flag
}

ES6

1、let、const的暂时性死区问题?

在一个作用域里如果存在let、const定义的一个变量之前使用该变量,则报错“cannot access xx before initialization”

2、Promise的then为什么可以链式调用?

Promise的then方法返回一个新的Promise对象,保证了then方法可以进行链式调用

3、async/await的用法?

  • async/await的作用是:以同步的方式执行异步操作,实现排队效果
  • async:async函数执行返回一个Promise
  • await:await后接Promise则会等待Promise返回结果,接普通函数执行则会接收返回结果
  • await只能在async中使用,但是浏览器调试中await可单独使用

4、Class的静态属性、继承?

  • 静态属性:static关键字定义的变量属性,只能通过Class构造函数的属性的方式去访问
  • 继承:使用 Child extends Father {},且配合super对象,完成继承

Vue

1、Vue与React的区别在哪?

比较的是Vue2 相同点:

  • 1.都使用了虚拟dom
  • 2.组件化开发
  • 3.都是单向数据流(父子组件之间,不建议子修改父传下来的数据)
  • 4.都支持服务端渲染 不同点:
  • 1.React的JSX,Vue的template
  • 2.数据变化,React手动(setState),Vue自动(初始化已响应式处理,Object.defineProperty,Proxy)
  • 3.React单向绑定,Vue双向绑定
  • 4.React的Redux、mobx,Vue的Vuex、pinia

2、computed与watch的区别?

  • computed:多对一,多个值的变化决定一个目标值的变化
  • watch:一对多,一个值的变化,引起多个目标值的变化

3、Vue的生命周期介绍一下?

4、Vue的实例加载完成在哪个生命周期呢?

beforeCreated

5、Vue的真实dom挂载完成在哪个生命周期呢?

mounted

6、数据更改如何获取最新DOM

nextTick

7、路由有几种模式,有何区别?

  • hash模式:监听url中hash的变化来实现不同页面的展示,链接带#
  • history模式:url中不带#,利用HTML5的history.pushState方法进行不刷新跳转页面,但需要后端配合404时的重定向
  • abstract:使用在非浏览器的环境,例如node环境

8、路由有哪些钩子函数?

全局钩子

  • beforeEach:跳转路由前
    • to:将要跳转进入的路由对象
    • from:将要离开的路由对象
    • next:一个方法,执行则完成跳转
  • afterEach:跳转路由后
    • to:将要跳转进入的路由对象

路由独享钩子

routes: [
  {
    path: '/xxx',
    component: xxx,
    beforeEnter: (to, from, next) => {
      
    }
  }
]

组件内路由钩子

  • beforeRouteEnter(to, from, next):跳转路由渲染组件时触发
  • beforeRouteUpdate(to, from, next):跳转路由且组件被复用时触发
  • beforeRouteLeave(to, from, next):跳转路由且离开组件时出触发

如果对你有帮助请给小编一个点赞加评论

你可能感兴趣的:(前端,css,css3)