2023前端面试题 (持续更新)

1.对于模块化你的理解是什么?

降低软件的复杂性,使其可控,可维护,可拓展。

一个功能就是一个模块,多个模块可以组成完整的应用,抽离一个模板不会影响应用其他功能的运行


2.Node是什么?

Node是一个基于ChromeV8引擎的JavaScript代码运行环境;

浏览器能运行JavaScript代码,浏览器就是JavaScript代码的运行环境;

Node能够运行JavaScript代码,Node就是JavaScript代码的运行环境。


3.谈谈对Vue组件化的理解?

Vue组件系统提供了一种抽象,让我们可以使用独立可复用的组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率,方便重复使用,简化调试步骤,提升项目可维护性,便于多个协同开发。


4.单页面是什么及其原理?单页面与多页面比较的优缺点又是什么?

SPA单页面应用,指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。

原理:

用js监听url中hash值的变化,onhashchange事件在当前URL的锚部分发生改变时触发。哈希值的变换并不会引发页面的刷新和跳转,当监听到hash变化,就可以动态的切换组件,就可以实现无刷新切换页面技术。

MPA多页面应用,指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源,多页应用跳转,需要整页资源刷新。

名称

优点

缺点

SPA单页面

  1. 页面切换快

   页面每次切换跳转时,并不需要做html文件的请求,这样就节约了很多http发送时延,所以在切换页面的时候速度就很快

  1. 用户体验好

   页面片段间的切换快,在网络环境差或者一般的时候,因为组件已经预先加载好了,并不需要发送网络请求,所以用户体验好

  1. 首屏加载比较慢

因为要请求一次html同时还要发送一次js请求,两次请求回来了首屏才会显示

  1. 不利于SEO

    seo效果差 因为搜索引擎只识别html里面的内容,并不识别js里的内容,因为单页面就是js渲染出来的,影响网站的排名

MPA多页面

  1. 首屏加载速度快

   当我们访问页面的时候,服务器只返回了一个html,页面就展示出来了,只发了一次http请求

  1. SEO效果好

   搜索引擎网站排名,是根据网页的内容排名的,搜索引擎只可以识别html中的内容,而多页面就是把内容放在html中。

  

每跳转一个页面就要发送一个http请求,如果网络情况不好的情况下,页面之间来回跳转就会发生明显的卡顿,有的时候半天还加载不出来,影响用户体验


5.谈谈函数防抖与节流?

防抖:在n秒内只执行一次该事件,如果在这过程中又触发了该事件,则重新计算时间

节流:在n秒内只执行一次该时间,如果在时间内又触发了该事件,只有一次生效


6.声明式导航与编程式导航的区别?

声明式导航:声明式导航是直接渲染到页面的,比如a链接

编程式导航:是用js处理逻辑后需要页面跳转,比如点击button按钮跳转


7.你是怎么样解决跨域问题的?

跨域:浏览器为了安全作出的限制策略;浏览器必须遵循同源策略,即同域名、同端口、同协议。

解决方法: CORS跨域

JSONP:利用<script>标签不受同源策略的限制,可以用来作为请求,后端接受请求后返回一个回调函数callback,调用前端已经定义好的函数,从而实现跨域请求。

Nginx反向代理接口跨域:服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也不存在跨域问题


8.说一说块级作用域

任何一对花括号中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,这就是块级作用域


9.说一说箭头函数

  • 箭头函数比普通函数更加简洁

               没有参数,就直接写一个空括号

                有一个参数,可以省略参数的括号

                有多个参数,用逗号分割

                函数体的返回值只有一句,可以省略大括号

  • 箭头函数没有自己的this
  • 箭头函数只会继承自己作用域的上一层继承的this。所以箭头函数中this的指向 在它定义的时候就已经确定了,之后不会改变
  • 箭头函数继承来的this指向永远不会改变
  • Call() apply() bind()等方法不能改变箭头函数中this的指向
  • 箭头函数不能作为构造函数使用
  • 箭头函数没有自己的arguments
  • 箭头函数没有prototype
  • 不能用作Gennerator函数,不能使用yield关键字
  • 箭头函数没有super

10.说一说Vuex

Vuex是一个状态管理工具,所谓状态就是数据,采用集中式存储管理所有组件的状态,是为了大型项目一个数据共享的问题。Vuex可以将数据保存到本地,数据是响应式的,能够保持数据页面的共享,提高开发效率

好处:能够在vuex中集中管理共享的数据,易于开发和后期的维护可以做状态管理、采用localstorage保存信息、数据一直存储在用户的客户端中 存储在vuex中的数据是响应式的,能够实时保持数据与页面的同步,能够高效的实现组件之间的数据共享,提高开发效率

Vuex核心:

State:vuex的基本数据,数据源存放地,用于定义共享的数据

Getter:从基本数据派生的数据,相当于state的计算属性

Mutation:提交更新数据的方法,唯一一个可以操作state中数据的方法,必须是同步的,第一个参数是state,第二个参数是commit传过来的数据

Action:action是用来做异步操作的,一般用来发送请求,在action中写入函数,然后页面中用dispatch调用,然后在action中通过commit去调用 mutation通过mutation去操作state

Modules:模块化vuex,可以让每一个模块拥有自己的state、getter、mutation、action、使得结构非常清晰,方便管理

Vuex的运行机制:

Vuex提供数据(state),来驱动视图,视图通过dispatch派发action,在action中可以进行做一些异步操作,然后通过commit提交给mutation,由mutation去最终更改state。为什么要经过mutation?这是因为我们要在vue调试工具中记录数据的变化,这样可以通过插件去进行进一步的调试。所以说mutation中只能是纯同步的操作,如果是有异步操作,那么就需要在action中进行处理。如果没有异步操作,那么可以直接由组件进行commit操作mutation


11.Vue组件间通信的方法有那些


12.什么是npm?Npm的使用场景

Npm是随同Nodejs一起安装的包管理工具,能解决Nodejs代码部署上的很多问题。

使用场景:

a:允许用户从npm服务器下载别人编写的第三方包到本地使用。

b:允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用

c:允许用户将自己编写的包或者命令行程序上传到npm服务器供别人使用


13.使用基于token的登录流程

  1. 客户端使用用户名跟密码请求登录
  2. 服务端收到请求,去验证用户名与密码
  3. 验证成功后,服务端会签发一个token,再把这个token发送给客户端
  4. 客户端收到token以后可以把他存储起来,比如存储再cookie和Local storage里
  5. 客户端每次向服务端请求资源的时候需要带着服务端签发的token
  6. 服务端收到请求,然后去验证客户端请求里面的token,如果验证成功,就向客户端返回请求的数据

14  computed和watch的区别

Computed:是计算属性,依赖于其他属性,computed能缓存,当其依赖的属性发生改变,下一次计算computed的值时会重新计算computed的值

Watch:更多的是观察作用,相当于数据的监听回调,当监听的数据发生改变时,会执行回调并进行后续的操作


15. v-if和v-show区别

v-show无论是true/false都会被渲染,由display:none来控制显示

v-if true时显示,fasle时隐藏

v-show适合使用在切换频繁显示/隐藏的元素上(因为他的初始化渲染高)

v-if适合使用在切换不频繁、内容多,渲染一次消耗高的元素上(它的切换频率高)

v-show通过判断条件来动态的显示何隐藏元素、

v-if通过判断条件来动态的增删DOM元素

v-show 的性能比v-if更高

16.css中的四种定位

静态定位、相对定位、绝对定位、固定定位

静态定位:static是position属性的默认值,表示没有定位,使用静态定位的元素会按照元素正常的位置显示,并不会受到top、bottom等属性的影响

相对定位:元素相对于自己默认的位置进行位置上的调整,可以通过top、bottom、left、right四个属性的组合来设置元素相对于默认位置不同方向的偏移量

绝对定位:元素相对于第一个非静态定位的父级元素进行定位,如果找不到符合条件的父级元素则会与浏览器窗口来进行定位

固定定位:将元素相对于浏览器窗口进行定位,使用固定定位的元素不会因为浏览器窗口的滚动而滚动,就像固定在了页面上一样

粘性定位:他像是相对定位和固定定位的结合体,当滚动页面的时它的效果与相对定位相同,当元素滚动到一定程度时它又会呈现出固定定位的效果


17.js中的变量提升

变量提升是指JS的变量和函数声明会在代码编译器,提升至代码的最前面

变量提升成立的前提是使用var关键字进行声明的变量,并且变量提升的时候只有声明被提升,赋值并没有被提升,同时函数的提升比变量的提升优先

变量提升的结果,可以在变量初始化之前访问该变量,返回的值是undefined,在函数声明前可以调用该函数


18.什么是BFC:

块级格式上下文  是一个独立的渲染区域,只有(Block-level box)块级盒子参与,BFC规定了内部盒子如何布局,以及盒子之间的关系和作用

BFC触发条件:

  【1】根元素,即HTML元素

  【2】float的值不为none

  【3】overflow的值不为visible

  【4】display的值为inline-block、table-cell、table-caption

  【5】position的值为absolute或fixed 

BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置(不设置浮动,设置浮动那肯定是 左右一行排列了)。

2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(正常的不设置浮动,两个块元素margin重叠,仅仅是垂直方向,左右不是这个样子的)

3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。(不设置浮动,不设置左边距,块级子元素,一律靠左竖直向下排列,内联子元素一律从左向右排列,想想,正常写代码,都是这样,设置左浮动的靠近父元素的左边,设置右浮动,靠近父元素的右边。)

4.BFC的区域不会与float box重叠。BFC区域的子元素不受外面的影响,外面的也不受BFC区域里面的影响(这个挺重要的,设置的浮动的元素,脱离了文档流,正常的相邻的元素会跑到它下面(靠左)。设置成BFC,自己独成一块,不会跑到它下面,而是保持洁身自好,自己依然占一块。)

6.计算BFC的高度时,浮动元素也参与计算(就是子元素设置浮动,脱离文档流,父元素高度塌陷,给父元素设置BFC,那么父元素高度就不会忽略浮动的子元素,从而高度就不会塌陷,这样理解,好像是BFC又把脱离文档流的元素,又拉回来了,但保持了浮动的特点。)


19.说一说变量提升

变量提升是指JS的变量和函数声明会在代码编译期,提升到代码的最前面

变量提升的前提是使用var关键字进行声明的变量并且变量提升的时候只有声明被提升,赋值并不会被提升,同时函数的声明提升比变量提升优先

变量提升的结果,可以在变量初始化之前访问,该变量的值为undefined,在函数声明前可以条用该函数。


20.原型链与作用域链的区别

原型链

当访问一个对象的属性时,会在这个对象的属性上去找,如果没有找到就会在这个对象的__proto__上去找,即构造函数的prototype上找,如果没有会一直在__proto__上找,知道最顶层,找不到即为undefined。这样一层一层地向上,就仿佛一条链串起来,所以就叫原型链

作用域链

变量取值会到创建这个变量的函数的作用域中取值,如果找不到,就会向上级作用域去查,直到查到全局作用域,这么一直查找的过程形成的链条叫作用域链

区别:

作用域链是相对于变量而言,原型时相对于属性而言

作用域最顶层时window,原型链最顶层时Object


21.New操作符做了那些事情

·首先创建一个新的空对象

·设置原型,将对象的原型设置为函数的prototype对象

·将新创建的对象作为this的上下文

·判断函数的返回值类型,如果是值类型,返回创建的对象,如果是引用类型,就返回这个引用类型的对象(如果该函数没有返回的对象,则返回this)


22.重绘和重排的区别

重排:当DOM的变化影响了元素的几何信息,浏览器需要重新计算元素的几何属性,将其安放在队列中的正确位置,这个过程叫做重排。表现为重新生成布局,重新排列元素

重绘:当一个元素的外观发生改变,但没有发生布局改变,重新把元素的外观绘制出来的过程叫做重绘。表现为某些元素的外观没有发生改变

重绘和重排的代价是高昂的,他们会破坏用户的体验,使UI展示非常的缓慢,二者相比之下,重排的性能影响更大,在两种无法避免的情况下,我们可以选择代价更小的重绘

重绘不一定出现重排,但重排一定会出现重绘


23.简单说一下三次握手、和四次挥手

  1. 三次握手
    • 客户端向服务器端发送一个SYN同步标志数据包,表示请求建立连接
    • 服务器端收到客户端的请求,并发送一个SYN/ACK同步确认标志数据包,表示同意建立连接
    • 客户端收到服务端的回复,并发送一哥ACK确认标志数据包,表示确认建立连接
  2. 四次挥手
    • 客户端向服务器发送一个FIN结束标志数据包,表示请求断开连接
    • 服务端收到客户端的请求,发送一个ACK标志数据包,表示收到断开连接请求
    • 服务端向客户端发送一个FIN标志数据包,表示同意断开连接
    • 客户端向服务端发送一个ACK确认数据包,表示收到服务端断开连接确认

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值