基于最近面试,一点点常问前端问题汇总

发布于 2021-03-09  23 次阅读


常问的一些问题,可能比较简单,没有深入到底层或者原理等。


正文

  1. 箭头函数和普通函数区别

    箭头函数一般是匿名函数,箭头函数不能使用new关键字也不具备this等构造函数方法

  2. 对flex布局的了解

    传统的css布局都是基于盒子模型,flex弹性盒子模型是弹性布局,用来为盒子模型提供最大的灵活性

    使用flex时,float等样式会自动失效

     

  3. es6提供了哪些新的语法

    • 提供了新的数据类型 symbol 用来表示独一无二的,我们可以使用它实现私有变量

    • 提供了异步语法,从原本的回调地狱中脱离出来,可以使用Promise链式调用,也可以使用await每一句单独一行

    • 提供了Proxy函数,允许我们修改默认行为,而vue3对数组和对象的监听就是使用proxy

    • 提供了let和const关键字,解决了原本var的变量提升和作用域问题

    • 提供了新的数据结构set和map

      • set不允许添加重复的值
      • map提供了”值对值“的对应,是一种更完善的hash结构,相对于obejct更适合于”键值对“的数据结构
    • 提供了变量的解构赋值

  4. vue父子组件通信、兄弟组件通信

    • 父组件到子组件 通过prop 传输属性 可以通过ref获取对象直接调用子组件方法
    • 子组件到父组件 发布订阅模式 父组件发布$on发布事件 子组件使用$emit调用
    • 兄弟组件通信 通过父组件做中间层
  5. webpack有哪些配置项

  6. 前端有哪些储存方式,他们有什么区别

    • cookie 最大存储数据一般10kb以内,一般自定义失效时间
    • localStorage 最大存储数据一般在2.5MB-10MB, 用户数据一般一直存在
    • sessionStorage 存储数据量同上, 在用户关闭浏览器后数据失效
    • websql 在新的标准中已废弃
    • indexdb 浏览器提供的本地数据库,用于大量数据存储,没有使用过
  7. v-model的实现原理

     

  8. 移动端一般如何适配

    用vw和rem

     

  9. 怎么画一个三角形

    div宽度和高度为0时,border设置宽度和颜色,其中留一边为固定颜色,其他为透明

  10. js文件怎么异步加载或者延迟加载

    • script标签的 defer属性和async属性

    • async并不会按照脚本的顺序执行,而是谁先加载完谁先执行

    • 在js的onload时向DOM追加script标签

       

  11. nextTick()

    用于接受vue页面渲染回调

     

  12. Object.defineProperty

    可以用于拦截对object的属性修改做监听,vue的双向绑定就是基于对data的Object.defineProperty的循环

     

  13. vue为什么使用异步渲染策略 vue采用的是组件级更新,如果不异步更新组件页面的任何更改都会触发整个页面的重新渲染,导致性能问题

     

  14. 前端攻击有哪几种方式

    • sql注入 后端依赖前端返回的参数直接做sql查询,导致sql不正常拼接造成安全问题

    • xss跨站脚本攻击 通过表单提交等方式向代码中注入JS脚本,因为这些代码拥有与正常代码的等同权限,所以比较危险,解决方法是对提交内容语义化转换

    • CSRF 跨站请求伪造

    • 网站嵌套攻击

    • 中间人攻击

       

  15. css文字两端对齐

    • text-align: justify
    • text-align-last: justify

     

  16. 重绘和重排(回流)

    • 网页的优化就是要减少重绘和回流
    • 回流必定引起重绘,重绘不一定会引起回流
    • 回流导致渲染树重新计算,开销比重绘大,所以我们应该尽量避免回流的产生

     

  17. vue中key的原理

    便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom,需要注意的是,key要唯一,不然会出现很隐蔽性的更新问题。

     

  18. vue双向绑定的原理是什么?

    双向数据绑定是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值,获取触发get方法取值,并通过数据劫持发布信息。

  19. vue中是如何检测数组变化的?

    vue2.0中使用Object.defineProperty()重新定义数组中的每一项,对常用数组方法进行重写
    vue3.0中使用proxy

     

  20. vue优化手段

    1. 图片资源使用cdn

    2. 图片太多应该使用懒加载

    3. 路由应该使用懒加载

    4. 采用ssr服务端渲染

    5. 开启gzip

       

  21. mvvm

    MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。

    在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

    ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

  22. MVVM和MVC的区别

    mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。

  23. vue路由守卫

    • 全局守卫

      • 前置守卫 beforeEach
      • 后置守卫 afterEach
    • 组件内守卫

      • 进入组件 beforeRouteEnter
      • 离开组件 beforeRouteLeave
    • 路由独享守卫

      beforeEnter 与全局守卫一致,写在该路由对象下

     

  24. watch和computed区别

    • watch支持异步,computed不支持异步操作
    • watch不支持缓存,数据变化会直接触发操作 computed支持缓存,只有依赖数据改变才会计算,主要当作属性使用
    • watch回调中会有新旧值,computed一般是简单计算
  25. vue的生命周期

    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
  26. 小程序Page的生命周期

    • onload 页面加载完成
    • onshow 页面每次显示,如从别的页面返回回来也会触发
    • onready 页面初次渲染完成
    • onhide 页面隐藏
    • onunload 页面注销
  27. 小程序中bindtap和catchtap的区别

    他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的


一个爱搞事情的前端,一个爱玩技术的程序员