前端常见面试题集合

web前端面试题 大厂小厂均适用

1. 盒模型

盒模型的组成 , 有里向外 content , padding , border , margin

2. 清除浮动的方式

使用 position : absolute / fixed
使用 display : inline-block / table
使用 float 元素
使用 overflow !== visible

3. css常用布局方式

常见的有 div布局 css布局 flex布局 table布局 流式布局 响应式布局

4. html5的新特性

①语义特性 html5赋予了网页更好的意义和结构
②本地存储 html5开发的网页app拥有更短的启动时间 更快的联网访问速度 都是用看cach以及本地存储功能
③多媒体特性 html5支持了更多的网页端的视频 , 音频 ,等多媒体功能
④ 更好的支持 3D功能,图像和动画效果
⑤更好的支持表单特性

5. 什么是ajax

ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术 , 通过在后台与服务器进行少量的数据交换 , ajax可以使网页实现异步更新 , 意味着可以在不重新加载这个网页的情况下 , 进行部分更新

6. 如何中断ajax请求

一种是设置超时时间让ajax自动断开,一种是手动停止ajax请求 ajax.abort方法

6. js的数据类型

字符串String 数值Number 布尔boolean null undefined 对象 数组

7. 闭包

闭包的实质是因为函数嵌套而形成的作用域链 , 它是一个能够访问到函数内边变量的函数 , 即函数A内部有一个函数B , 函数B可以访问到函数A中的变量 , 那么函数B就是闭包

8. Null 和 Undefined

Null表示一个值被定义了 但这个值是空值
Undefined 变量声明了但未赋值

9. es6的新特性

①let和const关键字
②变量的结构赋值
③字符串和数值的扩展
④数组和对象的扩展
⑤函数的扩展
⑥箭头函数

9. 箭头函数

箭头函数最大的一个优点是解决了this指向的问题 , 箭头函数的this固定不变 , 一直指向的是定义函数的环境

10. let和const

let关键字类似于var 不同的是避免了变量提升 只在块级作用域中起作用
const就是常量的意思 , 不可更改 先定义在使用 必须赋值 不可重复

10. 虚拟dom

虚拟dom本质是 JavaScript 对象 , 是真实DOM的抽象
当状态发生改变时 , 记录新树和旧树的差异
最后把差异更新到真正的dom中
优势 更好的提示性能优化 提高开发效率 更好的跨平台性

10. diff算法

凡是涉及到虚拟dom的地方都会用到diff算法 , 所以说diff算法是虚拟dom的必然 , 通过新旧虚拟dom做对比 , 将差异的地方更新在真实的dom树上

11. vue

vue是一套搭建用户界面的渐进式框架,他只关注视图层,采用的是自底向上增量开发的设计,vue的核心思想是数据驱动 (视图内容随着数据的改变而改变)和组件化

12. vuex

vuex是一个专门为vue开发的状态管理器 , 通过创建一个集中的数据存储,方便程序中的所有组件进行访问 , 简单来说vuex就是vue的状态管理工具

13. vue和react的区别

vue和react都是非常优秀的框架 , 根据需求来决定用谁 , 如下区别
① 数据流不同 vue中默认支持双向绑定 , 组件与DOM中通过v-model实现双向数据绑定 , 而react一直提倡单向数据流 , 他称之为 onChange/setState()模式 , 但是这两者都有自己的状态管理 , 所以我们感受不到这一点
②模板渲染方式不同 vue依然保留了经典 , 采用 html + css + js的方式 , 是经典的web应用结构 , 在对数据上的处理做到了极致的监听 , react采用的是独特的jsx语法 , 通过原生js实现模板中的常见语法,这点很优秀 ,但最终还是会转化成js编译
相同的是两个框架都是使用diff算法操作虚拟dom,从而提升性能, 两者都有对应的状态集管理工具

13. 网站性能优化

对于网站性能优化真的是老生常谈的话题了, 常见的方式有 ,
① 减少http请求 , 减少数量
② 压缩资源 , 提取公共资源
③ 使用雪碧图 , 使用字体图标 .
④ 使用CDN,抛开无用的cookie
⑤ 减少重绘重排 , js css独立

14. js性能优化的方式

垃圾回收
闭包中的对象清楚
防抖和节流
分批加载
事件委托
少用with
CDN

15. vue的优化方式

v-if 和 v-for 不能连用
图片懒加载
路由懒加载
采用虚拟dom

16. vue双向绑定的原理

mvvm双向绑定 , 采用的是数据劫持结合发布者-订阅模式的方式 , 通过object.definedProperty()来劫持属性,在数据发生变动时发消息给订阅者,触发相应的监听回调 , 在 vue3.0 中使用 proxy 替换了 object.definedProperty

15. vue的生命周期

创建前后 载入前后 修改前后 销毁前后

16. 异步请求应该放在哪个生命周期中

使用放在mounted挂载后中 , 或者created创建后也可以

17. vue组件的通讯方式

props $emit $on provied inject parent
children ref vuex $attrs $listeners
当项目比较大时更好的选择vuex来做状态集中管理器

18. vue中key值的作用

vue中的key可以更高效的更新虚拟dom ,让diff操作更准确,更快速, 如果以inde为key值 , 当数组的长度发生变化时 , index都会随着变化而变化 , 不利于性能的提升

19. proxy和object.defineProperty的优势对比

① proxy可以监听对象而非属性,可以监听数组变化,有多种数据拦截的方式,它返回的是一个新的对象, 我们只需操作新对象 , 而 object.defineProperty 只能遍历对象属性来修改
②object.defineProperty的优势是兼容性更好,支持ie9

20. vue中scss scoped穿透符>>> 无效

使用 /dee/ 解决

21. vue-router路由有几种模式？说说它们的区别？

① hash 模式
② history 模式

22. vue中路由跳转方式

vue中路由跳转有两种 分别是声明式和编程式
① 声明式 : 使用router-link的跳转
② 编程式 : 使用js方式的跳转

23. vue怎么实现路由懒加载

① vue 中的 异步组件
② es6 中的 import

24. vue如何获取动态路由传过来的参数

动态路由有query和prrams两种方式传参

25. vue如何响应路由参数变化

① 使用watch
② 在父组件的router-view上加个key

26. vue的两个核心

① 数据驱动 viewModel 保证视图和数据的统一性
② 组件系统 应用类UI可以看做全部是组件数构成

27. vue中v-if和v-show的区别

① v-show 是基于css的display属性来做渲染
② v-if 是条件渲染 , 根据条件动态操作dom树

28. vue中的常用指令

v-model v-if v-else v-show v-for v-on v-bind v-text v-html

29. vue中computed和watch有什么区别

① computed 是计算属性 更多用在计算值上,具有缓存性 , 适用于计算消耗性能的计算场景
② watch 更多用来观察 , 类似于数据的监听回调

30. vue组件中写name选项有什么作用

① 项目有使用 keep-alive 时 , 搭配组件那么进行缓存过滤
② DOM做递归时需要调用自身的name
③ vue-devtools调试工具里显示组件名称是有vue中组件name决定的

31. slot的理解有多少？slot使用场景有哪些

solt插槽 , 相当于占位符 , 它在组件中给你的 html 模板占了一个位置 , 让你可以自定义来加入一些东西 , 有匿名插槽 , 具名插槽 , 作用域插槽

32. vue如何优化首页的加载速度

打包优化 路由懒加载 代码压缩 第三方插件按需加载

33. nextTick的原理

用法 : 在下次 dom 更新循环结束之后执行延迟回调 , 在修改数据之后立即使用这个方法获取到最新的数据

34. vue3.0的了解

① 提出了新api setup() 函数
② 对于 typescript 的支持
③ 使用 proxy 替换了 object.defineProperty

35. mvc模式

mvc是著名的设计模式 基本思想是将软件结构分解为Model(模型) , view(视图) ,和Controller(控制器)三部分组成 , Model主要负责数据处理和运算 , controller主要负责接收输入的数据并控制选择使用那个view显示,View主要负责显示数据和用户交互

36. mvvm模式

MVVM设计模式是由Model(模型) , View(视图)和ViewModel(视图模型)三部分组成,是MVC设计模式的进化版 , 即Controller转变为viewModel , 这种模式可以使view的变化自动化更新到viewModel , 而ViewModel的变化也会自动同步到view上显示

37. 状态码

2 开头表示成功 比如200
3 开头表示重定向
301永久重定向 302临时重定向 304可以在缓存中取数据
4 开头表示客服端错误
403跨域 404请求资源不存在
5开头表示服务器端错误 500

38. localStorage SessionStorage cookie session 之前的区别

① localStorage : 关闭浏览器后数据依然保留 除非手动清除 否则一直在
②sessionStorage : 关闭浏览器或者标签后即失效
③cookie : 保存在客服端的 一般由后端设置值 , 可以设置过期时间
④session : 保存在服务器端的 , 一般用来跟踪用户的状态 , 安全性更高

39. 防抖和节流

防抖 : n秒后在执行改数据 , 若在n秒内被重复触发 , 则重新计时
节流 : n秒内只运行一次 , 若在n秒内重复触发 , 只有一次生效

40. js常见的设计模式

①单例模式 : 不管创建多少个对象只有一个实例
②工厂模式 : 代替new创建一个对象 批量制作属性相同的实例对象
③构造函数模式
④发布订阅者模式
⑤代理模式
⑥迭代器模式