前端面试题2023 掘金（前端面试题）

目录

1 
    
    
    
、HTTP缓存机制

2
     


     


     


   、echarts 在 vue 中怎么引用？

1-1 




 




 




 

、全局引用：

1-2 

   

   

   

、局部使用：

3
     

     

     

  、Vue 组件如何进行传值的?

1-1  




  




  




  
、父组件向子组件传递数据

1-2 


  


  


  


、子组件向父组件传递数据

1-3
     
     
     
 、非父子组件之间传递数据

4   




   




   




   、Vuex 的 5 个核心属性是什么?

1-1 



 



 



 



、state

1-2               、getter

1-3
    




    




    




    、mutation

1-4


















、action

1-5                、module

5
     



     



     



    、Vue-Router 是干什么的    
    
    
   ，原理是什么？

6

















、ES5的继承和ES6的继承有什么区别？

7 
    
    
    
、定时器的执行顺序或机制？

8
     


     


     


   、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

9 




 




 




 

、fetch发送2次请求的原因？

10 

   

   

   

、http和https的区别？

11
     

     

     

  、Cookie  




  




  




  
、sessionStorage 


  


  


  


、localStorage的区别？

12
     
     
     
 、Cookie如何防范XSS攻击？

13   




   




   




   、你了解的浏览器的重绘和回流导致的性能问题？

14 



 



 



 



、DOM               、BOM对象分别是什么

15
    




    




    




    、闭包是什么？

16


















、原型                、原型链是什么

17
     



     



     



    、computed与watch有什么区别

18

















、new操作符具体干了什么呢?

1 
    
    
    
、HTTP缓存机制

浏览器缓存也包含很多内容：

HTTP 缓存
     


     


     


   、indexDB 




 




 




 

、cookie 

   

   

   

、localstorage 等等 
    
    
    
。这里我们只讨论 HTTP 缓存相关内容
     


     


     


   。

浏览器缓存分为强缓存和协商缓存

强缓存是利用 http 的返回头中的 Expires 或者 Cache-Control 两个字段来控制的  


     


     


     

，用来表示资源的缓存时间 




 




 




 

。

2
     

     

     

  、echarts 在 vue 中怎么引用？

首先我们初始化一个 vue 项目


 




 




 




，执行 vue create echart

接着我们进入初始化的项目下 

   

   

   

。安装 npm install echarts -S 或 cnpm install echarts -S

安装完成之后   

   

   

  ，我们就可以开始引入我们需要的 echarts 了   

     

     

     
，接下来介绍几种使用 echarts 的方式
     

     

     

  。

1-1  




  




  




  
、全局引用：

首先在 main.js 中引入 echarts



  




  




  




，将其绑定到 vue 原型上：

import echarts from echarts

Vue.prototype.$echarts = echarts;

接着  


  


  


 ，我们就可以在任何一个组件中使用 echarts 了  




  




  




  
。

1-2 


  


  


  


、局部使用：

当然    
     
     
     ，很多时候没必要在全局引入 ecahrts




   




   




   




，那么我们只在单个组件内使用即可 



 



 



，代码更加简单：

import echarts from echarts

可以看到                    ，我们直接在组件内引入 echarts




    




    




    



，接下来跟全局引入的使用一样 


  


  


  


。区别在于















，这种方式如果你想在其他组件内用 echarts                   ，则必须重新引入了
     
     
     
 。

3
     
     
     
 、Vue 组件如何进行传值的?

1-1   




   




   




   、父组件向子组件传递数据

父组件内设置要传的数据 



     



     



     


，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上
















，在子组件添加参数 props 接收即可

1-2 



 



 



 



、子组件向父组件传递数据

子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数    
    
    
   ，父组件监听使用@（v-on）进行监听  


     


     


     

，然后进行方法处理

1-3               、非父子组件之间传递数据

1
    




    




    




    、引入第三方 new Vue 定义为 eventBus

2


















、在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods中的方法名)

3                、在另一个兄弟组件中的 methods 中写函数


 




 




 




，在函数中发布 eventBus 订阅的方法 eventBus.$emit("自定义事件名    
    
    
   ”)

4
     



     



     



    、在组件的 template 中绑定事件(比如 click)

4

















、Vuex 的 5 个核心属性是什么?

分别是 State 
    
    
    
、 Getter
     


     


     


   、Mutation  




 




 




 

、Action 

   

   

   

、 Module

1-1
     

     

     

  、state

state 为单一状态树   

   

   

  ，在 state 中需要定义我们所需要管理的数组  




  




  




  
、对象 


  


  


  


、字符串等等   

     

     

     
，只有在这里定义了



  




  




  




，在 Vue.js 的组件中才能获取你定义的这个对象的状态   




   




   




   。

1-2
     
     
     
 、getter

getter 有点类似 Vue.js 的计算属性  


  


  


 ，当我们需要从 store 的 state中派生出一些状态    
     
     
     ，那么我们就需要使用 getter




   




   




   




，getter 会接收 state 作为第一个参数 



 



 



，而且 getter 的返回值会根据它的依赖被缓存起来                    ，只有 getter 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算 



 



 



 



。

1-3   




   




   




   、mutation

更改 store 中 state 状态的唯一方法就是提交 mutation




    




    




    



，就很类似事件               。每个 mutation 都有一个字符串类型的事件类型和一个回调函数















，我们需要改变 state 的值就要在回调函数中改变
    




    




    




    。我们要执行这个回调函数                   ，那么我们需要执行一个相应的调用方法：store.commit


















。

1-4 



 



 



 



、action

action 可以提交 mutation 



     



     



     


，在 action 中可以执行 store.commit
















，而且 action 中可以有任何的异步操作                。在页面中如果我们要嗲用这个 action    
    
    
   ，则需要执行 store.dispatch

1-5               、module

module 其实只是解决了当 state 中很复杂臃肿的时候  


     


     


     

，module 可以将 store 分割成模块


 




 




 




，每个模块中拥有自己的 state
    




    




    




    、mutation


















、action和 getter

5                、Vue-Router 是干什么的   

   

   

  ，原理是什么？

Vue-Router 是 Vue.js 官方的路由插件   

     

     

     
，它和 Vue.js 是深度集成的



  




  




  




，适合用于构建单页面应用
     



     



     



    。Vue 的单页面应用是基于路由和组件的  


  


  


 ，路由用于设定访问路径    
     
     
     ，并将路径和组件映射起来

















。传统的页面应用




   




   




   




，是用一些超链接来实现页面切换和跳转的 
    
    
    
。在 Vue-Router 单页面应用中 



 



 



，则是路径之间的切换                    ，也就是组件的切换
     


     


     


   。路由模块的本质 就是建立起 url 和页面之间的映射关系 




 




 




 

。

“更新视图但不重新请求页面  


     


     


     

”是前端路由原理的核心之一




    




    




    



，目前在浏览器环境中这一功能的实现主要有两种方式：

利用 URL 中的 hash（“#


 




 




 




”）

利用 History interface 在 HTML5 中新增的方法

6
     



     



     



    、ES5的继承和ES6的继承有什么区别？

ES5的继承时通过prototype或构造函数机制来实现 

   

   

   

。ES5的继承实质上是先创建子类的实例对象















，然后再将父类的方法添加到this上（Parent.apply(this)）
     

     

     

  。

ES6的继承机制完全不同                   ，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法） 



     



     



     


，然后再用子类的构造函数修改this  




  




  




  
。

具体的：ES6通过class关键字定义类
















，里面有构造方法    
    
    
   ，类之间通过extends关键字实现继承 


  


  


  


。子类必须在constructor方法中调用super方法  


     


     


     

，否则新建实例报错
     
     
     
 。因为子类没有自己的this对象


 




 




 




，而是继承了父类的this对象   

   

   

  ，然后对其进行加工   




   




   




   。如果不调用super方法   

     

     

     
，子类得不到this对象 



 



 



 



。

7

















、定时器的执行顺序或机制？

因为js是单线程的



  




  




  




，浏览器遇到setTimeout或者setInterval会先执行完当前的代码块  


  


  


 ，在此之前会把定时器推入浏览器的待执行事件队列里面    
     
     
     ，等到浏览器执行完当前代码之后会看一下事件队列里面有没有任务




   




   




   




，有的话才执行定时器的代码               。

8 
    
    
    
、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面 



 



 



，告诉浏览器以何种方式来渲染页面                    ，这里有两种模式




    




    




    



，严格模式和混杂模式
    




    




    




    。

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


















。混杂模式















，向后兼容                   ，模拟老式浏览器 



     



     



     


，防止浏览器无法兼容页面                。

9
     


     


     


   、fetch发送2次请求的原因？

fetch发送post请求的时候
















，总是发送2次    
    
    
   ，第一次状态码是204  


     


     


     

，第二次才成功？

原因很简单


 




 




 




，因为你用fetch的post请求的时候   

   

   

  ，导致fetch 第一次发送了一个Options请求   

     

     

     
，询问服务器是否支持修改的请求头



  




  




  




，如果服务器支持  


  


  


 ，则在第二次中发送真正的请求
     



     



     



    。

10 




 




 




 

、http和https的区别？

http传输的数据都是未加密的    
     
     
     ，也就是明文的




   




   




   




，网景公司设置了SSL协议来对http协议传输的数据进行加密处理 



 



 



，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议                    ，比http协议的安全性更高

















。主要的区别如下：

Https协议需要ca证书




    




    




    



，费用较高 
    
    
    
。http是超文本传输协议















，信息是明文传输                   ，https则是具有安全性的ssl加密传输协议
     


     


     


   。使用不同的链接方式 



     



     



     


，端口也不同
















，一般而言    
    
    
   ，http协议的端口为80  


     


     


     

，https的端口为443http的连接很简单


 




 




 




，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输 

   

   

   

、身份认证的网络协议   

   

   

  ，比http协议安全 




 




 




 

。

11
     

     

     

  、Cookie  




  




  




  
、sessionStorage 


  


  


  


、localStorage的区别？

共同点：都是保存在浏览器端   

     

     

     
，并且是同源的

Cookie：cookie数据始终在同源的http请求中携带（即使不需要）



  




  




  




，即cookie在浏览器和服务器间来回传递 

   

   

   

。而sessionStorage和localStorage不会自动把数据发给服务器  


  


  


 ，仅在本地保存
     

     

     

  。cookie数据还有路径（path）的概念    
     
     
     ，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右  




  




  




  
。（key：可以在浏览器和服务器端来回传递




   




   




   




，存储容量小 



 



 



，只有大约4K左右）sessionStorage：仅在当前浏览器窗口关闭前有效                    ，自然也就不可能持久保持




    




    




    



，localStorage：始终有效















，窗口或浏览器关闭也一直保存                   ，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效 



     



     



     


，即使窗口或浏览器关闭 


  


  


  


。（key：本身就是一个回话过程
















，关闭浏览器后消失    
    
    
   ，session为一个回话  


     


     


     

，当页面不同即使是同一页面打开两次


 




 




 




，也被视为同一次回话）localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
     
     
     
 。（key：同源窗口都会共享   

   

   

  ，并且不会失效   

     

     

     
，不管窗口或者浏览器关闭与否都会始终生效）

12
     
     
     
 、Cookie如何防范XSS攻击？

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本



  




  




  




，为了减轻这些攻击  


  


  


 ，需要在HTTP头部配上    
     
     
     ，set-cookie：

httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie   




   




   




   。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie 



 



 



 



。

13   




   




   




   、你了解的浏览器的重绘和回流导致的性能问题？

重绘（Repaint）和回流（Reflow）

重绘和回流是渲染步骤中的一小节




   




   




   




，但是这两个步骤对于性能影响很大               。

重绘是当节点需要更改外观而不会影响布局的 



 



 



，比如改变 color就叫称为重绘回流是布局或者几何属性需要改变就称为回流
    




    




    




    。回流必定会发生重绘                    ，重绘不一定会引发回流


















。回流所需的成本比重绘高的多




    




    




    



，改变深层次的节点很可能导致父节点的一系列回流                。

所以以下几个动作可能会导致性能问题：

改变 window 大小改变字体添加或删除样式文字改变定位或者浮动盒模型很多人不知道的是















，重绘和回流其实和 Event loop 有关
     



     



     



    。

当 Event loop 执行完 Microtasks 后                   ，会判断 document 是否需要更新

















。因为浏览器是 60Hz 的刷新率 



     



     



     


，每 16ms 才会更新一次 
    
    
    
。然后判断是否有 resize或者 scroll
















，有的话会去触发事件    
    
    
   ，所以 resize和 scroll事件也是至少 16ms 才会触发一次  


     


     


     

，并且自带节流功能
     


     


     


   。判断是否触发了 media query更新动画并且发送事件判断是否有全屏操作事件执行 requestAnimationFrame回调执行 IntersectionObserver回调


 




 




 




，该方法用于判断元素是否可见   

   

   

  ，可以用于懒加载上   

     

     

     
，但是兼容性不好更新界面以上就是一帧中可能会做的事情 




 




 




 

。如果在一帧中有空闲时间



  




  




  




，就会去执行 requestIdleCallback回调 

   

   

   

。

14 



 



 



 



、DOM               、BOM对象分别是什么

BOM（Browser Object Model）是指浏览器对象模型  


  


  


 ，可以对浏览器窗口进行访问和操作
     

     

     

  。使用 BOM    
     
     
     ，开发者可以移动窗口
    




    




    




    、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作  




  




  




  
。 使 JavaScript 有能力与浏览器"对话" 


  


  


  


。

DOM （Document Object Model）是指文档对象模型




   




   




   




，通过它 



 



 



，可以访问HTML文档的所有元素
     
     
     
 。 DOM 是 W3C（万维网联盟）的标准   




   




   




   。DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型（DOM）是中立于平台和语言的接口                    ，它允许程序和脚本动态地访问和更新文档的内容


















、结构和样式 



 



 



 



。

15                、闭包是什么？

闭包是指有权访问另一个函数作用域中的变量的函数

当函数可以记住并访问所在的词法作用域时




    




    




    



，就产生了闭包















，

闭包用途：能够访问函数定义时所在的词法作用域(阻止其被回收)

私有化变量

模拟块级作用域

创建模块

闭包缺点：会导致函数的变量一直保存在内存中                   ，过多的闭包可能会导致内存泄漏

16
     



     



     



    、原型

















、原型链是什么

原型: 对象中固有的__proto__属性 



     



     



     


，该属性指向对象的prototype原型属性               。

原型链: 当我们访问一个对象的属性时
















，如果这个对象内部不存在这个属性    
    
    
   ，那么它就会去它的原型对象里找这个属性  


     


     


     

，这个原型对象又会有自己的原型


 




 




 




，于是就这样一直找下去   

   

   

  ，也就是原型链的概念
    




    




    




    。原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因


















。

特点: JavaScript对象是通过引用来传递的   

     

     

     
，我们创建的每个新对象实体中并没有一份属于自己的原型副本                。当我们修改原型时



  




  




  




，与之相关的对象也会继承这一改变
     



     



     



    。

17 
    
    
    
、computed与watch有什么区别

watch 属性监听 是一个对象  


  


  


 ，键是需要观察的属性    
     
     
     ，值是对应回调函数




   




   




   




，主要用来监听某些特定数据的变化 



 



 



，从而进行某些具体的业务逻辑操作,监听属性的变化                    ，需要在数据变化时执行异步或开销较大的操作时使用

computed 计算属性 属性的结果会被缓存




    




    




    



，当computed中的函数所依赖的属性没有发生改变的时候















，那么调用当前函数的时候结果会从缓存中读取

















。除非依赖的响应式属性变化时才会重新计算                   ，主要当做属性来使用computed中的函数必须用return返回最终的结果 computed更高效 



     



     



     


，优先使用

使用场景 computed：当一个属性受多个属性影响的时候使用
















，例：购物车商品结算功能 watch：当一条数据影响多条数据的时候使用    
    
    
   ，例：搜索数据

18
     


     


     


   、new操作符具体干了什么呢?

1 




 




 




 

、创建一个空对象  


     


     


     

，并且 this 变量引用该对象


 




 




 




，同时还继承了该函数的原型 
    
    
    
。

2 

   

   

   

、属性和方法被加入到 this 引用的对象中
     


     


     


   。

3
     

     

     

  、新创建的对象由 this 所引用   

   

   

  ，并且最后隐式的返回 this  




 




 




 

。