前端面试题

Rᴜɴɪɴᴛᴏ

已于 2023-06-25 18:26:38 修改

阅读量987

点赞数 3

文章标签：前端 javascript vue.js Powered by 金山文档

于 2023-03-30 09:03:34 首次发布

本文链接：https://blog.csdn.net/m0_68652823/article/details/129578209

版权

1. 列举常用的字符串方法

str.concat() 用于将一个或多个字符串拼接起来

str.slice() 用于提取一个字符串，并返回一个新的字符串

charAt() 从一个字符串中返回指定的字符。

substring(开始索引,结束索引) 用于提取一个字符串；如果第二个参数比第一个参数大，执行效果就像两个参数调换位置了一样

str.trim() 用于删除一个字符串两端的空白字符，并且返回删除后的字符串

str.replace() 将原来的字符串的某一部分，替换成新的值，会返回替换后的新字符串

str.split() 使用一个指定的分隔符来将字符串拆分成数组，返回一个数组

str.indexof() 从前向后判断字符串中是否包含自定字符，如果包含则返回该元素所在的索引，如果不包含则返回-1

str.lastindexof() 从后向前判断字符串中是否包含自定字符，如果包含则返回该元素所在的索引，如果不包含则返回-1

str.search();使用正则表达式查找指定字符串，如果找到则返回首次找到的元素的索引，如果未找到就返回-1

2. 列举常用的数组方法

一，原数组不受影响

join(原数组不受影响)：该方法可以将数组里的元素，通过指定的分隔符，以字符串的形式拼接起来，返回一个新的字符串

splice（原数组不受影响）

该方法是用指定的分隔符，将字符串分割成数组。返回一个新的数组

concat 该方法可以把两个数组里的元素拼接成一个新的数组返回拼接后的新数组

slice 截取出来该方法可以从数组截取指定的字段，返回截取出来的字段，放到新的数组中

二，原数组受影响

push 该方法可以在数组的最后添加一个或多个元素。

pop 该方法可以在数组的最后删除一个元素，返回的是删除的元素

unshift 该方法可以在数组的最前面添加一个或者多个元素

shift 该方法可以在数组的最前面删除一个元素返回刚才删除的元素

reverse 翻转数组

sort 该方法可以对数组进行排序

3. 什么是rem,em,px,rpx

px 像素单位1像素等于1px；

rem 相对于根元素的倍数，

em 相对于父元素的倍数，基于字号的大小具有继承特性；

rpx是小程序的单位

4. 什么是原型链

当查找自身有无某属性时，依次向他的上一级查找，直至查找到object，返回为null为止

5. new一个实例化对象的四个阶段

创建一个新的实例化对象

改变this指向，将这个this指向这个实例化对象

调用这个实例化对象，将方法和属性存入

返回实例化对象

6.从输入url到浏览器显示页面发生了什么

URL解析：地址栏输入地址，浏览器对输入内容进行解析，判断URL的合法性和是否有无缓存

DNS解析：域名解析系统查找响应的IP地址

建立TCP连接：浏览器向服务器发送连接，与浏览器建立TCP连接

HTTP请求：浏览器将HTTP请求数据发送到服务端

HTTP响应：服务器处理收到的请求，并返回响应结果给浏览器

关闭TCP连接（四次握手）：数据传递结束，还要经过四次握手终止连接

页面渲染：浏览器解析相应结果，进行页面渲染

7. 什么是回流和重绘

重绘，简单来说就是重新绘画，当元素改变颜色或者背景时，页面进行重新渲染就是重绘；

回流：当元素的宽高等发生改变的时候，需要重新操作DOM树，就会进行回流。

有重绘不一定有回流，有回流一定会有重绘

8. 常见HTTP状态码的含义

200：请求成功；

300：重定向

400：语义有误，无法被浏览器理解

404：请求失败

500：服务器错误

9. 说一下promise

promise是解决回调地狱的，promise本身是同步的，then的调用是异步的。

promise是一种解决异步的解决方案，本质上是一个对象，用来获取一些异步的信息。

promise有三种状态：pedding等待状态，fulfiled成功状态，reject失败状态

10. 说一个async await

async用来声明一个函数，await是等待一个异步方法完成后执行；

async函数返回的是一个promise对象,可以用.then方法添加回调函数，

在函数执行的中，一旦遇到await就会先返回,等到这个异步操作完成之后，它再进行函数体内后面的这个语句

11. promise.all 和 promise.race 的用法和区别

promise.all();可以将多个实例组成一个新实例，成功的时候返回一个成功的实例，失败的时候返回最先失败的值；

promise.race();数组中的任务,谁执行的最快就先返回谁，不论成功还是失败

12. 什么是防抖和节流，描述防抖的原理和节流的原理

防抖：高频事件触发n秒内执行一次；，如果再次触发事件，时间会重新计算；

防抖是触发相同的事件；应用场景：触底加载。

节流：高频事件触发n秒内只执行一次

节流触发的是不相同的应用场景：直播间发送信息或者人数的显示

13. 什么是事件流，解决事件冒泡

当一个事件产生时，这个事件产生的过程就是事件流。

事件流有三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。

解决事件冒泡：

1、 event.stopPropagation()

在会发生冒泡的事件中，在 event 事件上绑定 stopPropagation

2.绑定 stop 事件修饰符

14. 什么是事件委托，应用场景，优缺点

通过它你可以把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函数。

优点：

减少事件注册，节省内存。

在table上代理所有td的click事件。

在ul上代理所有li的click事件。

简化了dom节点更新时，相应事件的更新

不用在新添加的li上绑定click事件

当删除某个li时，不用移解绑上面的click事件

缺点：

事件委托基于冒泡，对于不冒泡的事件不支持

层级过多，冒泡过程中，可能会被某层阻止掉。

把所有事件都用代理就可能会出现事件误判

理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托

15. js的数据类型

1.基本数据类型：

数值（数字）：number

字符串：string

命名未赋值：undefined

布尔类型：Boolean

空类型：null

2.复杂数据类型（引用数据类型）：

复杂数据类型：object，Array

16. 什么是事件循环

js是单线程的，当多个任务堆积在一次就形成了任务队列；

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这个机制就叫做事件轮询机制

17. 如何实现前端性能优化

优先加载css，

减少DOM的操作

减少重回回流

压缩

使用iconfont图标

18. 三种本地存储的区别

存储格式：localstorage，Sessionstorage 的存储格式是对象，cookie的存储格式是字符串

存储时间：localstorage 的存储时间是永久的，如果不主动删除，就会一直存在；sessionstorage是会话存储，当前页面或浏览器关闭，数据自动销毁；cookie可以设置过期时间，时间一到就失效

存储位置：localstorage，Sessionstorage本地存储，不与服务端交互；cookie客户端和服务端都存储，与服务端来回交互

存储大小：localstorage，Sessionstorage 大小5MB以以上，cookie大小是4kb左右

19. ES6新特性

let const

解构赋值

Sysbol

Map与set

proxy

promise

async awiat

字符模板

数组新方法：keys,values,from,entries

keys()是对键名的遍历

values()是对键值的遍历

entries()是对键值对的遍历

20. DOM常见的操作及API

创建： createelement

增加： appendchild

删：removechild

改：replacechild

查：getelementById;queryselector;queryselectorall;

21. get请求和post请求的区别

post请求更安全，不会作为url的一部分，get请求会作为url的一部分展现在地址栏中

post请求数据更大，get请求有url长度的限制

post请求格式是req.body get请求是cookie，地址栏

22. 说说最近最流行的一些东西吧？常去哪些网站？

23. 列举10条移动端兼容性问题

安卓浏览器看背景图片，有些设备会模糊

图片加载

防止手机中页面的放大与缩小

24. 从输入url到页面呈现经历了什么

与答案六一样。

25. 什么是闭包，闭包的优缺点

闭包就是能够读取其他函数内部变量的函数；

优点：

可以将一个变量长期存储到内存中，用于缓存

避免全局变量的污染

加强封装性

缺点：

增加内存的消耗，影响网页性能

过度使用闭包，会导致内存泄漏

26.简述js的垃圾回收机制

垃圾回收机制简称GC，当我们创建一个变量时，js引擎会自动给它分配相应的内存地址，当我们的代码执行完毕后，js引擎会自动将程序所占用的内存清理掉

27.什么是内存泄露

内存泄漏就是，已经不在使用的内存无法被程序所释放时，就会导致内存泄漏

造成内存泄漏的情况：

全局变量：

未声明的变量缓存大量的数据，会导致内存泄漏；

使用过多的闭包会导致内存泄漏；

重复监听同一个事件，但是忘记移除，会导致内存泄漏；

28.js如何实现深拷贝

使用“=”赋值的方法能够实现的是浅拷贝；

一维数组使用 for循环实现深拷贝；

二维及多位数组可以使用递归或者JSON.parse(JSON.stringify())实现

29.数组冒泡排序的原理

重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元素的工作是重复地进行，直到没有相邻元素需要交换，也就是说该元素列已经排序完成。

30.数组排序的方法

31.谈谈你对this的理解

this通常指向我们正在执行的函数本身。

全局--->window

事件中的this-->事件本身

对象中的this-->对象本身

32.let、const、var的区别

let,var声明变量；const声明常量

var可以变量提升，let,canst不可以

let,const有块级作用域的概念，var没有

let,const不能重复声明，var可以；

const不能重复赋值

33.call、apply、bind的区别

call和apply，同步代码，bind异步代码

call和apply只临时改变一次this指向，bind永久改变，但是他是返回一个修改后的新函数；

call和apply是自动调用，bind手动调用

call和bind传参是逐一传参，不能使用剩余参数，apply传参方式是数组，可以使用剩余参数；

34.前端常用的几种加密方法

md5: 一般用于密码或敏感信息的加密 (账号密码)

base64 : 一般用于文件和图片的加密(前端打包配置)

url: 用于网络请求信息中的汉字加密(百度 AI 的图片识别会用到)

JSON: 用于网络响应数据的解析(服务器返回的数据一般是 json格式)

35.前端常见的攻击手段及防御方法

Xss攻击：跨站脚本攻击防御：1.使用CSP；2.对一些敏感信息进行保护，使得脚本无法获取。

CSRF攻击：跨站请求伪造防御：1.使用双重cookie验证;2.使用CSRF Token进行验证

36. 用类的方式编写一个b继承a的方法，描述代码实现流程

使用class关键字创建父类

创建构造函数

使用extends创建子类

使用super()关键字调用父类中的属性。

37. 了解Node么? Node的使用场景都有哪些？

node是Chrome V8引擎的一种运行环境.用于搭建服务器环境，处理表单数据等；

38. 对于前端自动化构建工具有了解吗，简单介绍下

npm node.js的默认包管理器

Yarn 一种前端包装管理器

Grunt 前端任务运行程序

webpack 一个高级模板绑定器

Vite web开发构建工具能够显著提升前端开发体验

39. js的typeof返回哪些数据类型

Number

Undefind

Object

Boolean

String

Function

40. 介绍一下css的盒子模型

css盒模型组成：内容，内边距，边框，外边距

css盒模型分为：标准盒模型和怪异盒模型

标准盒模型：不计算宽，宽高是内容的宽高

怪异盒模型：width已经包括padding和border

41.vue中有哪些指令

v-on:事件绑定，

v-bind 绑定动态属性

v-model 双向数据绑定，只用在form元素中

v-for 循环

v-if判断

.......

42.v-for和v-if为什么不能用在同一元素

因为v-for的优先级比v-if要高

43.实现数组更新检测的方法

vue可以使用$set

还可以使用 push,pop,unshift,shift等方法

44. key值的作用

key作为唯一标识，防止就地复用；优化渲染效率。

45.事件绑定中的事件修饰符有哪些

@click.stop 阻止时间冒泡；

@click.prevent阻止默认事件

@click.once 事件只触发一次

@keyup.enter 按键修饰符

......

46.vue中的虚拟dom的理解

vue中的一种算法，跟真实dom进行对比，在内存中拿着第一次生成的虚拟dom，如果有新增，就进行对比。然后只会渲染不同的内容。相同的内容运用就地复用算法渲染

47.methods、computed和watch的区别，并列举应用场景

methods只有主动调用时才发生改变；

computed ，watch在数据变化时改变；

watch 无缓存；

computed有缓存

48.vue中的组件传值都哪些方式，如何传值

49.vue如何获取原生dom

使用类名和id获取；使用refs获取

50.vue中this.$nextTick()的用法

他会等同事件的所有数据变化完成之后，在统一进行渲染

捕获上一次的dom更新，

51.说一下你对vue生命周期钩子的理解

52.vue中如何自定义组件

53.解释一下keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

优点：在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

54.组件中的data为什么是一个有返回值的函数

是为了防止多次调用改组件时出现数据污染的情况；

55.什么是SPA(单页面应用)

56.介绍一下vue的全家桶

57.动态路由如何定义，如何传参，如何接收参数

58.$route和$router的区别

$route 用来获取路由信息

$router 用来操作路由

59.声明式导航和编程式导航的区别

1.声明式导航是直接渲染到页面的，比如a链接

2.编程式导航则是用在js处理逻辑后需要页面跳转，比如点击button按钮跳转

60.描述一下Token的工作流程

61. vue路由有哪些模式，区别是什么

hash模式

history模式

区别：

hash模式：它的url路径中会出现一个“#”字符，而且hash值不包含在http请求中，它是交由前端处理的，所以它不会重新刷新页面，也不会向服务端发送请求。

hash底层原理：路径改变后触发一个事件，window.onhashchange，触发后，拿到hash值，hash值中有个路由值，拿到值后进行渲染。

history模式：整个地址都会重新加载，可以保存历史记录，方便前进后退；使用history模式时，前端的url和后端发送请求的url需要保持一直，否则会报错

history底层原理：存储在历史记录，访问时触发事件取出记录，进行前进后退；

为什么会出现404页面；

配置了history的路由模式，放到服务器后，服务器有默认行为，顺着路径找目录，服务器找对应的文件夹，找不到后会返回404；解决：服务器配置。不管找没找到统一返回同一个页面。

62. vue中如何实现嵌套路由

嵌套路由的使用场景：

在一级路由中某个部分，需要进行内容的切换，而且切换的版块排版上有很大的不同

新建一个二级路由组件

在路由文件中引入这个组件

在index.js路由中使用chirden嵌套路由

然后在一级路由下使用<router-view>实现

63. 列举所有的导航守卫

全局导航守卫(beforeEach)，全局解析守卫(beforeResolve)，全局后置守卫(afterEach)，

路由独享守卫:(beforeEnter)

组件中的：beforeRouteEnter,beforeRouteUpdata,beforeRouteLeave

64. 完整的导航守卫解析流程

路由A到路由B：

先触发组建中的beforeRouteLeave

触发全局前置守卫，

触发路由独享守卫

调用beforeRouterEnter

调用全局的beforeResolve（全局解析守卫）

调用全局afterEach（全局后置守卫）

路由A到路由A（动态路由）

触发全局解析守卫

触发beforeRouteUpdata

触发全局解析守卫

触发全局后置守卫

完成的导航解析流程：

导航被触发

在失活的组件里调用beforeRouteLeave守卫

调用全局前置守卫（beforeRouterEnter）

在重用的组件里调用beforeRouteUpdata守卫

在路由配置里调用beforeEnter

解析异步路由组件

在被激活的组件里面调用beforeRouteEnter

调用全局的beforeResolve守卫

导航被确认

调用全局的afterEach钩子

触发DOM更新

12.调用beforeRouteEnter守卫传给next的回调函数，创建好的组件实例会作为参数传入

65. 路由中的滚动行为设置

66. vuex是什么，描述一下vuex的五个核心概念

vuex是专为vue.js应用程序开发的状态管理模式，采用集中管理模式，以相应的规则保持状态，以一种可预测的方式进行改变；

五个核心：

state,actions,mutations,getters,module

67. vuex在什么时候会使用，描述一下vuex的工作流程

不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果应用够简单，您最好不要使用 Vuex。

工作流程：

同步时：直接使用this.$store.commit调用mutations，在mutitoins中直接修改值

异步时：使用dispatch调用actions方法，在actions中调用mutitons方法，然后再mutitons中修改值

68. vuex的辅助函数有哪些，怎么使用

mapstate

mapactions

mapgetter

mapmutions

有两个是写computed里面------mapGetters .mapState

还有两个是写methods里面的----mapActions mapMutations

...mapState(['xxx'])，-----这个xxx里面写的是你要用的数据---数组包着

...mapState({'新名字': 'xxx'}) -----这里面的新名字是你要重新定义名字---对象包着

69. vue中插槽有哪些类型

作用：让父组件可以向子组件指定位置插入html结构，适用于父组件===>子组件，在要接收数据的组件页面通过<slot>标签来表示，简单来说，就是通过此标签来起到占位的作用，而要插入的内容也会对应到标签所在的位置。

70.style中scoped的作用

实现组件的私有化，不会对全局造成样式污染，表示当前style属性只属于当前模块（组件）

71. HTML5为什么只需要写!DOCTYPE HTML?

html5不基于SGML（标准通用置标语言）,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的HTML规范。

72.Doctype作用？标准模式与兼容模式各有什么区别？

作用：声明位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档

标准模式：标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。

兼容模式：在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

73. css隐藏元素的几种方法（至少说出三种）

display:none;//不占位

opcity:0,

transfrom:translate;

visibility:hidden; //占位

position:absolute,

74. CSS清除浮动的几种方法（至少两种）

方法一：使用带clear属性的空元素

方法二：使用CSS的overflow属性

方法三：使用CSS的::after伪元素

75. CSS居中（包括水平居中和垂直居中）

水平居中:

1. 行内元素水平居中:

行内元素水平居中：text-align：center

2. 块级元素水平居中:

2.1 使用margin: 0 auto

2.2 使用position:/* 如果元素没有设置宽度，不能使用margin-left，可以使用transform: translateX(-50%); 效果相同*/

2.3 使用flex： justify-content: center;

垂直居中：

1.1 单行行内元素垂直居中：

单行行内元素垂直居中：行高等于盒子高度 line-height:

1.2 多行行内元素垂直居中：

display:table-cell、vertical-align: middle

2. 块级元素

2.1 使用position： /* 如果元素没有设置高度，不能使用margin-top，可以使用transform: translateY(-50%); 效果相同*/

2.2 使用flex

align-items: center

76. 列举你所了解的flex布局的属性

flex-direction设置主轴的方向

justify-content设置主轴的子元素排列方式

align-items设置侧轴上的子元素排列方式（单行）

flex-wrap设置子元素是否换行

align-contnet设置侧轴上的子元素的排列方式（多行）

77. 接项目怎么做移动端大小适配

px + viewport适配

rem布局
。CSS3媒体查询适配
。基于设计图的rem布局
。基于屏幕百分比的rem布局
。小程序的rpx布局

78. vue中this.$相关的api可以说多少种

79. 瀑布流怎么实现

1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果

2:js position定位，思路：js记录左右两列的所有元素并计算总高度，决定下一个元素的放置位置（注意：元素与元素之间不能用margin,因为这样会影响定位）

80 . ES6中symbol有什么作用，如何使用

ES6 引入的一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

81. 使用箭头函数应注意什么？

1、箭头函数没有自己的this对象

this指向的是调用该函数的对象（this的指向是静态的）

2、箭头函数不可以当作构造函数，即不可以对箭头函数使用new命令，否则会抛出一个错误

3、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用reset参数代替

82. setTimeout、Promise、Async/Await 的区别

setTimeout属性宏任务，Promise里面的then方法属于微任务，Async/Await中await语法后面紧跟的表达式是同步的，但接下来的代码是异步的，属于微任务。

83. forEach、for in、for of三者区别

1 forEach

forEach专门用来循环数组，可以直接取到元素，同时也可以取到index值,不可以遍历对象

缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，

方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数

优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率_

定义：用于调用数组的每个元素，并将元素传递给回调函数

2 for in

定义：用于循环遍历数组或对象属性，fot in循环里面的index是string类型的，代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。一般循环遍历的都是对象的属性，遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性，key会变成字符串类型

缺点：某些情况下，会出现随机顺序的遍历，因为里面的值是string类型，所以增加了转换过程，因此开销较大

优点：可以遍历数组的键名，遍历对象简洁方便

3 for of

for of是ES6新引入的特性。修复了ES5中for in的不足

允许遍历 Arrays（数组）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的数据结构

for of 支持return, 只能遍历数组不能遍历对象（遍历对象需要通过和Object.keys()搭配使用）

一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。

哪些数据结构部署了 Symbol.iteratoer属性了呢?

数组 Array

Map

Set

String

arguments对象

Nodelist对象, 就是获取的dom列表集合

84. ES5新增的数组方法有哪些

foreach()方法：用于遍历数组，调用数组的每个元素，并将元素传递给回调函数进行处理

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组

some() 方法用于检测数组中的元素是否满足指定条件. 通俗点查找数组中是否有满足条件的元素

map() 方法返回一个原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

every()方法用于检测数组中的所有元素是否都满足指定条件

85.以下代码输出的结果是什么，想要输出结果为01234该怎么修改

for(var i=0;i<5;i++){

setTimeout(function(){

console.log(i);

},1000)

}

输出为5个5

for(var i=0;i<5;i++){

(function(i){

setTimeout(function(){

console.log(i);

},1000)

})(i)

}

86.从哪些方面，对网页进行seo优化

dtk优化，img图片，css中对代码进行合并去除多余空格；

87.解释一下javascript的同源策略

所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源

88.如何判断一个数据时NaN

true为NaN,false不是

89.说一下link和@import的区别

本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。

兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。

DOM可控性：可以通过js操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

link引入的样式权重大于@import引入的样式（在link标签引入的css文件中使用@import时，相同样式将被该css文件本身的样式层叠）

90.说一下什么是MVC，什么是MVVM

双向数据绑定的原理：双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter，如果数据有变动，就发布消息给订阅者触发监听。

91.去掉一组整型数组重复的值

比如输入: [1,13,24,11,11,14,1,2] 
输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

这道问题出现在诸多的前端面试题中，主要考察个人对Object的使用，利用key来进行筛选。

/**
* unique an array 
**/
let unique = function(arr) {  
  let hashTable = {};
  let data = [];
  for(let i=0,l=arr.length;i<l;i++) {
    if(!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      data.push(arr[i]);
    }
  }
  return data

}
console.log(unique(arr))

92.统计一个字符串出现最多的字母

给出一段英文连续的英文字符窜，找出重复出现次数最多的字母

例：

输入 ： afjghdfraaaasdenas 

输出 ： a

前面出现过去重的算法，这里需要是统计重复次数。

function findMaxDuplicateChar(str) {  
  if(str.length == 1) {
    return str;
  }
  let charObj = {};
  for(let i=0;i<str.length;i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    }else{
      charObj[str.charAt(i)] += 1;
    }
  }
  let maxChar = '',
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar;
}
console.log(findMaxDuplicateChar(str))

93.不借助临时变量，进行两个整数的交换

输入 a = 2, b = 4 输出 a = 4, b =2

这种问题非常巧妙，需要大家跳出惯有的思维，利用 a , b进行置换。

主要是利用 + - 去进行运算，类似 a = a + ( b - a) 实际上等同于最后的 a = b;

function swap(a , b) {  
  b = b - a;
  a = a + b;
  b = a - b;
  return [a,b];
}
console.log(swap(1,2))

94.随机生成指定长度的字符串

实现一个算法，随机生成指制定长度的字符窜。

//比如给定 长度 8  输出 4ldkfg9j
function randomString(n) {  
  let str = 'abcdefghijklmnopqrstuvwxyz9876543210';
  let tmp = '',
      i = 0,
      l = str.length;
  for (i = 0; i < n; i++) {
    tmp += str.charAt(Math.floor(Math.random() * l));
  }
  return tmp;
}

console.log(randomString(n))

95.什么是尾递归

尾递归是指，在函数返回的时候，调用自身；并且，return语句不能包含表达式。

96.JS数字精度丢失

将浮点数转为数字

将浮点数的后一位或者两位保留。

97.src和href的区别

请求资源类型不同

href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。

src，将其所指向的资源下载并应用到当前页面，常见的有script、img。

作用结果不同

href，用于文档与资源之间确立联系。

src，请求到的资源替换当前内容。

浏览器的解析不同

href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。

src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。这也是为什么把js文件放在底部而不是头部发热原因。

98.浏览器的内核分别是什么?

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

99.怎样添加,移除,移动,复制,创建和查找节点?

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

100.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA的英文是single-page application ，也就是说整个项目中只有一个页面。

单页面应用的实现思路：就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态操作DOM。

优点：

第一点：局部刷新。用户体验好、快，内容的改变不需要重新加载整个页面。

第二点：服务器的压力小。基于上面一点，SPA 对服务器的压力小；

第三点：前后端职责分离。架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

第一点：初次加载耗时多。为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

第二点：前进后退路由管理问题。由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理（这是vue-router做的）；

第三点：SEO 难度较大。由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

101.你有对 Vue 项目进行哪些优化？

1）代码层面的优化

v-if 和 v-show 区分使用场景

computed 和 watch 区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

图片资源懒加载

路由懒加载

2）Webpack 层面的优化

1.生成打包报告（看优化文件大小）

102.什么是同步，什么是异步

同步需要等待，异步不需要等待。

同步：按照代码的执行流程从上到下，从左向右依次执行；

异步：先放到任务队列中，等待同步执行完成之后再从任务队列中读取，再执行。

定时器:宏任务

promise微任务

先执行微任务再执行宏任务

vue2和vue3的区别

底层原理：vue2：object.definpropty; vue3：proxy原理

生命周期：

vue2里面有一套

vue3中有两套：选项式API（vue2相同）,组合式API

vue3支持了组合式API，setup语法糖的写法；setup不用考虑this指向的问题

按照以下方面进行分回答：

响应式原理，生命周期，API（this的指向问题）:选项式和组合式

为什么使用多组件通讯：

解决多组件之间通讯问题。

为什么使用vuex：

降低代码耦合性，单独拿出一块区域来进行数据管理，

避免组件之间数据的相互污染，实现多组件通讯。

axios和ajax的区别

//axios把ajax的方法封装了一起，

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有。

get和post传参形式是不一样的。 get请求新增一个params。

什么情况下封装：频繁处理相同业务时。

vue实现跨域：1.前端使用配置proxy代理，2.前后端配置cors

怎么注册自定义指令：

Vue.directive 全局；

directives 局部

指令有没有生命周期：

绑定的是对象，对象后设置的都是这个指令的生命周期；

函数的话，都是这个指令生效的状态（代替了所有的生命周期）

作用：

用于操作一些DOM元素。

v-for和v-if的优化:

在v-for外层嵌套一个template;

如果判断必须在内层的话。可以在for里嵌套if;还可以使用，computed，过滤掉不需要的东西。

vue开发中spa首屏加载慢的解决方案：

文件压缩：图片，css,html的压缩

js优化：进行懒加载，按需加载

vue3有过滤器吗？

v3不支持过滤；

怎么在v3中使用过滤器呢？

使用数组的原生方法：filter;

Rᴜɴɪɴᴛᴏ

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

前端面试题
复制链接

扫一扫