一、简单页面

1、CSS选择器样式优先级
2、CSS实现三列布局（左右固定宽度，中间自适应）
（1）CSS浮动
第一个float:left，第二个float:right，第三个设置margin-left和margin-right
（2）绝对定位法
第一个定位到left，第二个定位到right，第三个设置margin-left和margin-right
（3）flex布局

.left{width:200px;或者flex:0 0 200px;
}
.right{width:200px;或者flex:0 0 200px;
}
.center{flex:1;
}

3、如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性
不要使用@import

二、js

1、防抖和节流，应用场景
防抖和节流都是防止某一时间频繁触发，但是原理却不一样。
防抖是将多次执行变为只执行一次，节流是将多次执行变为每隔一段时间执行。
防抖(debounce)：
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)：
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
2、什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
3、继承有哪些方法
原型链继承
借用构造函数继承（伪造对象、经典继承）
实例继承（原型式继承）
组合式继承
寄生组合继承
es6继承 extends
4、什么是深/浅拷贝，有哪些实现方式
基本数据类型：string、number、boolean、undefined、null
引用数据类型：object、array、function
JS数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用类型保存的是引用地址(this指针)。浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。
Object.assign：对象的合并 （第一级属性深拷贝，第一级以下的级别属性浅拷贝。）
ES6中的 Object.assign()，第一个参数必须是个空对象。
Object.assign()方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

let obj1 = {a: { b: 1},c: 2
}
let obj2 = Object.assign({},obj1)
obj2.a.b = 3;  //第二层，obj1变了，是浅拷贝
obj2.c = 3;  //第一层，obj1不变，是深拷贝
console.log(obj1);
console.log(obj2);

5、数组有哪些常用方法，引出下一个问题,slice和splice区别：

1.splice改变原数组，slice不改变原数组。2.splice除了可以删除之外，还可以插入。3.splice可传入3个参数，slice接受2个参数。

6、Promise.all和Promise.race的区别，应用场景

Promise.all()可以将多个实例组装个成一个新实例，成功的时候返回一个成功的数组；失败的时候则返回最先被reject失败状态的值。
适用场景：比如当一个页面需要在很多个模块的数据都返回回来时才正常显示，否则loading。
promise.all中的子任务是并发执行的，适用于前后没有依赖关系的。Promise.race()意为赛跑的意思，也就是数组中的任务哪个获取的块，就返回哪个，不管结果本身是成功还是失败。一般用于和定时器绑定，比如将一个请求和三秒的定时器包装成Promise实例，加入到Promise队列中，请求三秒中还没有回应时，给用户一些提示或相应的操作。

7、微任务和宏任务的区别

1.宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。
2.微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。
3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

1、Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？

props/$emit适用父子组件通信
ref与parent/children适用父子组件通信
attrs/listeners,provide/inject 适用于隔代组件通信
vuex,EventBus(事件总线)适用于父子、隔代、兄弟组件通信
slot插槽方式

2、v-show 和 v-if指令的共同点和不同点？

v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if

3、为什么使用key？

做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

4、简述computed和watch的使用场景

computed:
不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听的是这个属性自身的变化，且不会操作缓存
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch:
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行
watch是一个观察的动作
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　例子：搜索数据

5、params和query的区别（怎么定义 vue-router 的动态路由? 怎么获取传过来的值？）

6、$route 和 $router 的区别



8、vue-router 有哪几种导航钩子?

1.全局导航钩子：router.beforeEach(to,from,next)作用：跳转前进行判断拦截、组件内的钩子、单独路由独享组件
2、路由独享钩子可以在路由配置上直接定义 beforeEnter
3、组件内的导航钩子有三种：
beforeRouteEnter 在进入当前组件对应的路由前调用
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
beforeRouteLeave 在离开当前组件对应的路由前调用=

9、Vue实例的生命周期讲一下, mounted阶段真实DOM存在了嘛?

Vue实例从创建到销毁的过程，就是生命周期。
也就是：开始创建->初始化数据->编译模板->挂载dom->数据更新重新渲染虚拟 dom->最后销毁。这一系列的过程就是vue的生命周期。所以在mounted阶段真实的DOM就已经存在了。
beforeCreate：vue实例的挂载元素el和数据对象data都还没有进行初始化，还是一个 undefined状态
created: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法， el还没有，也没有挂载dom
beforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点
mounted: vue实例已经挂在到真实的dom上，可以通过对 dom操作来获取dom节点
beforeUpdate: 响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的 dom，比如手动移除已添加的事件监听器
updated: 虚拟dom重新渲染和打补丁之后调用，组成新的 dom已经更新，避免在这个钩子函数中操作数据，防止死循环。
beforeDestroy: vue实例在销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。
destroyed：vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

11、vuex有哪几种属性，怎么使用？哪种功能场景使用它？

vuex是一个专门为vue.js开发的状态管理模式，每一个vuex应用核心就是store(仓库)。store基本上就是一个容器，它包含着你的应用中大部分的state(状态)
vuex的状态存储是响应式的，当 vue组件中store中读取状态时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变store中的状态的唯一途径就是显示 commit(提交)mutation，这样使得我们可以方便地跟踪每一个状态的变化。
State: 定义了应用状态的数据结构，可以在这里设置默认的初始状态
Getter: 允许组件从Stroe中获取数据， mapGetters辅助函数仅仅是将store中的getter映射到计算属性。
Mutation: 唯一更改store中状态的方法，且必须是同步函数。
Action: 用于提交muatation, 而不是直接变更状态，可以包含任意异步操作。
Module: modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。

12、vuex中state存储的数据如果页面刷新此时数据还会有吗?（刷新之后销毁了）

13、v-bind和v-model的区别， v-model原理知道吗？

//语法糖写法
<input type="text" v-model="name" >//还原为以下实例
<input type="text" v-bind:value="name" v-on:input="name=$event.target.value">

v-bind用来绑定数据和属性以及表达式
v-model使用在表单中，实现双向数据绑定的。

14、Vue中的常见指令有那些？

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot…

15.改变this指向call、apply与bind区别：

前两个可以自动执行，bind不会自动执行，需要手动调用
call、bind与apply区别：前两个都有无数个参数，apply只有两个参数，而且第二个参数为数组

16,vue路由的两种模式

1.hash模式
特点:在url地址上有#号
实现的原理:原生的hasChange事件来实现,来监听hash值的变化
window.onhaschange=function(){}
刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式
特点:在url地址上没有#号,比较与hash模式看起来好看一些
实现的原理:利用的是history的api 来实现的 popState() 来实现的
刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决

17，vue的响应式原理：

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 数据劫持，来劫持各个属性的setter，getter，在数据更新时发布消息给订阅者，触发相应监听回调。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），

最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

18.Flex容器属性

1.flex-direction主轴方向（row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。）
2.flex-wrap（nowrap（默认值）：不换行。
wrap：换行。
wrap-reverse：换行，第一行在下方。 ）
3.flex-flow（12简写形式）
4.justify-content项目在主轴上的对齐方式。（flex-start（默认值）：左对齐（即上面页面展示效果）
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）
5.align-items项目在交叉轴上如何对齐。（lex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。）
6.align-content

19.标准盒模型和怪异盒模型的区别：

怪异盒模型的宽度变小
标准盒大小计算公式：width(content) + padding + border + margin
怪异盒大小的计算公式：width(content + padding + border) + margin

20.vue的插槽（slot）主要分三种：

默认插槽，具名插槽，作用域插槽
vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；
用标签表示，父组件可以在这个占位符中填充任何模板代码，比如HTML、组件等，填充的内容会替换掉子组件的标签（替换占位符）。

21.vue数据的双向绑定

“vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;”

22.常用的git命令

git config
用法：git config –global user.name “[name]”
用法：git config –global user.email “[email address]”
git init
用法：git init [repository name]
该命令可用于创建一个新的代码库
git clone
用法：git clone [url]
该命令可用于通过指定的URL获取一个代码库。
git add 添加文件到仓库
git status 查看仓库当前的状态，显示有变更的文件。
git diff 比较文件的不同，即暂存区和工作区的差异。
git commit 提交暂存区到本地仓库。
git reset 回退版本。
git push
用法：git push [variable name] master
该命令可以将主分支上提交的变更发送到远程代码库。

23.数组和字符串的相互转换

使用字符串的 split() 方法可以根据指定的分隔符把字符串切分为数组。
如果使用数组的 join() 方法，可以把数组元素连接为字符串。

24.js 判断数据类型的几种方法

typeof str     // "string" 字符串
typeof num     // "number" 数值
typeof array   // "object" 对象（可以和函数区别开）
// 												


											

2023高频前端面试题（含答案）相关推荐
	

    
						
  1. 2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
		
    近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k-15k的常见面试题 个人录制的最新Vue项目学习视频:B站 小胖梅-的个人空间_哔哩哔哩_Bilibili 红色为常见面试题 ====== ...
    
		
    2. 
						
  2. 2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载
		
    版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢 转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...
    
		
    3. 
						
  3. jquery级试题_腾讯2020前端面试题含答案解析
		
    程序猿的生活:打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)​zhuanlan.zhihu.com 1 在jquery 中想要找到所有元素的同辈元素,下面哪 ...
    
		
    4. 
								
  4. 2023高频前端面试题（持续更新 含答案）
		
    1,es6有哪些新特性? ES6是2015年推出的一个新的版本.这个版本相对于ES5的语法做了很多的优化 let和const具有块级作用域,不存在变量提升的问题.新增了箭头函数,简化了定义函数的写法, ...
    
		
    5. 
						
  5. 2023高频前端面试题总结（附答案）
		
    html与css 1.<img>的title与alt有什么区别 -title是提示文本,鼠标放在图片上提示的文字 -alt 是图片显示不出来时的文字替代,能显示出来就不用替换 2.labe ...
    
		
    6. 
						
  6. php笔试题及答案网易,2020网易前端面试题含答案解析
		
    需要更多的面试题点击下面链接查看,有很多: 另外这是小编做的视频希望可以帮助到你: 『HTML+CSS』漂亮小姐姐教你制作暗黑破坏神网页开发:BV1C54y1X7ro 前端发展简史,功能以及未来趋势! ...
    
		
    7. 
						
  7. 2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---Vue篇
		
    ★★★ 如何使用原生 Node.js 操做 cookie? ★★ 什么是 Node.js?我们在哪里使用它? ★★ 为什么要使用 Node.js? ★★★ Node.js 有哪些特点? ★★★ set ...
    
		
    8. 
						
  8. 史上最全前端面试题(含答案)-B篇
		
    面试有几点需要注意 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知识型题,算法题,开放性题,案例题. 进行追问: 可以确保问到你开 ...
    
		
    9. 
						
  9. 应届生web前端面试题_史上最全前端面试题(含答案)
		
    2015-10-30 06:30:03 阅读( 385 ) HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本. ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. POJ 2586 Y2K Accounting Bug（贪心）
		
    2. 
						
  2. 用 Opencv 和 Python 模糊检测
		
    3. 
						
  3. javafx应用启动自动执行函数_一张图，理顺 Spring Boot应用在启动阶段执行代码的几种方式...
		
    4. 
						
  4. c#(服务器)与java(客户端)通过socket传递对象_C#(服务器)与Java(客户端)通过Socket传递对象...
		
    5. 
						
  5. v-on指令修饰符大全
		
    6. 
						
  6. VMware vsphere平台中部署 Oracle RAC(二、NTP配置和SSH信任)
		
    7. 
						
  7. SAP UI configuration determination的优先级
		
    8. 
						
  8. 苹果笔记本怎么找文件夹_如何在苹果笔记本中找出 “~/Library/Preferences/” 文件夹?...
		
    9. 
						
  9. 基于Spring开发的DUBBO服务接口测试
		
    10. 
						
  10. 【2018.3.31】模拟赛之四-ssl2408 句子【dp,字符串】
		
    11. 
						
  11. 汇编中bss,data,text,rodata,heap,stack段的作用
		
    12. 
						
  12. Nginx(6)-配置基于域名的虚拟主机
		
    13. 
						
  13. HDOJ水题集合4：杂题
		
    14. 
						
  14. 解构蓝牙地址以及蓝牙MAC地址查询
		
    15. 
						
  15. java专业考独立本科_复旦大学-计算机网络（独立本科B080709）（停考过渡）
		
    16. 
						
  16. JAVA WEB毕业设计
		
    17. 
						
  17. 迅雷9屏蔽所有游览器和网站相应
		
    18. 
						
  18. C++Primer 第8章IO流
		
    19. 
						
  19. 消息认证之SHA散列算法族
		
    20. 
						
  20. 数学建模中四大模型总结
		
    21. 
		

	


热门文章
	

    
									
  1. Reporting Services
			
    2. 
						
  2. 怎么提高滚珠螺杆的效率？
			
    3. 
						
  3. 为什么你应该使用员工自我评估？
			
    4. 
						
  4. Attention U-Net: Learning Where to Look for the Pancreas
			
    5. 
						
  5. @Transient----------------springMVC
			
    6. 
						
  6. 【大数据存储技术】在线测试：第四章 HBase基础
			
    7. 
						
  7. 新云asp转php,新云CMS 4.0 转换 PHPcom 1.3.0 工具下载_新云CMS 4.0 转换 PHPcom 1.3.0 工具官方下载-太平洋下载中心...
			
    8. 
						
  8. 新云CMS软件下载地址含符号转义成amp;解决方案
			
    9. 
						
  9. 倍增收入，大学生兼职经验分享
			
    10. 
						
  10. 自建防火墙日志分析系统V1
			
    11.