前端面试题汇总大全 -- 持续更新!(四)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 前端面试题汇总大全 -- 持续更新!

三、javaScript 系列 ⭐⭐⭐⭐⭐


1、闭包?


闭包就是能够读取其他函数内部变量的函数,闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域


闭包的特性:


  • 函数内再嵌套函数
  • 内部函数可以引用外层的参数和变量
  • 参数和变量不会被垃圾回收机制回收


说说你对闭包的理解:


  • 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念
  • 闭包 的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中
  • 闭包的另一个用处,是封装对象的私有属性和私有方法


好处:能够实现封装和缓存等;


坏处:就是消耗内存、不正当使用会造成内存溢出的问题


使用闭包的注意点:


由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露

解决方法是,在退出函数之前,将不使用的局部变量全部删除


比如常见的防抖节流


// 防抖
function debounce(fn, delay = 300) {
  let timer; //闭包引用的外界变量
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}


使用闭包可以在 JavaScript 中模拟块级作用域


function outputNumbers(count) {
  (function () {
    for (var i = 0; i < count; i++) {
      alert(i);
    }
  })();
  alert(i); //导致一个错误!
}


闭包可以用于在对象中创建私有变量


var aaa = (function () {
  var a = 1;
  function bbb() {
    a++;
    console.log(a);
  }
  function ccc() {
    a++;
    console.log(a);
  }
  return {
    b: bbb, //json结构
    c: ccc,
  };
})();
console.log(aaa.a); //undefined
aaa.b(); //2
aaa.c(); //3


2、说说你对作用域链的理解?


  • 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的
  • 简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期


3、?


4、?


5、?


四、vue 系列 ⭐⭐⭐


1、?


2、?


3、?


4、?


5、?


五、react 系列 ⭐⭐⭐


1、React 事件机制?


<div onClick={this.handleClick.bind(this)}>点我</div>


React并不是将dlick事件绑定到了div的真实DOM上,而是在document外监听了所有的事件,当事件发生并目冒泡到document外的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。


除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件(SyntheticEvent)。因此如果不想要是事件冒泡的话应该调用event,preventDefault0方法,而不是调用event.stopProppagation0方法


2、?


3、?


4、?


5、?


六、webpack 系列 ⭐⭐⭐


1、webpack的构建流程以及属性?


Webpack是一个流行的前端打包工具,用于将多个JavaScript文件和其他资源合并成一个或多个生产环境中使用的bundle.js文件。下面是Webpack的构建流程以及常见的属性:


1.构建流程:

Webpack主要分为以下几个步骤:


  • 解析配置文件:Webpack会读取用户提供的配置文件,根据配置信息进行后续操作。
  • 解析模块依赖:Webpack会解析所有模块之间的依赖关系,并生成依赖关系图。
  • 加载模块:Webpack会根据依赖关系图,加载各个模块。
  • 转换代码:Webpack可以通过loader来对各个模块进行转换,比如将ES6代码转换为ES5代码。
  • 生成代码块:Webpack会根据代码之间的依赖关系,生成一些代码块,每个代码块包含一个或多个模块的代码。
  • 输出文件:Webpack会将所有生成的代码块合并成一个或多个输出文件。


2.属性:

Webpack的一些常见属性如下:


  • entry:入口文件的路径,Webpack会从这个文件开始解析所有的依赖关系。
  • output:打包生成文件的配置,其中包含文件名、输出路径等信息。
  • module:配置各类模块的处理规则,通常使用不同类型的loader实现文件转换。
  • resolve:配置Webpack在查找module时的优先级和缺省文件后缀名等信息。
  • plugins:配置Webpack使用的插件,插件可以用于完成各种自动化工作,比如压缩文件、合并代码块等。


2、?


3、?


4、?


5、?


七、uniapp 系列 ⭐⭐


1、?


2、?


3、?


4、?


5、?


七、jquery 系列 ⭐⭐


1、jquery中 .get()提交和 .get()提交和.post()提交有区别吗?


相同点:


都是异步请求的方式来获取服务端的数据;


异同点:


  1. 请求方式不同: 使.get()方法使用GET方法来进行异步请求的。 .get() 方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。
  2. 参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
  3. 数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多
  4. 安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。


2、$(document).ready()方法和window.onload有什么区别?


  1. window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
  2. $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。


3、?


4、?


5、?


八、微信小程序 系列 ⭐⭐


1、简单描述下微信小程序的相关文件类型?


微信小程序项目结构主要有四个文件类型,如下:

  1. WXML可以构建出页面的结构
  2. WXSS 是一套样式语言,用于描述 WXML 的组件样式
  3. js逻辑处理,网络请求
  4. json小程序配置文件
  5. app.json作为配置文件入口,整个小程序的全局配置。
  6. app.js必须要有这个文件,没有会报错
  7. app.wxss全局页面样式设置,在app.wxss中设置的样式可以在小程序的所有页面生效


2、⼩程序怎么跟随事件传值?


在⻚⾯标签上绑定data-key = value, 然后绑定事件通过e.Target.dataset.key 来获取标签上绑定的值(他盖特)


3、⼩程序WXSS与CSS 的区别?


  1. wxss 背景图⽚只能引⼊外链,不能使⽤本地图⽚.
  2. ⼩程序可以使⽤ @import 引⼊ 外联样式⽂件,地址为相对路径.
  3. 尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应


4、⼩程序的双向绑定和Vue哪⾥不⼀样?


⼩程序直接使⽤this.data.key = value 是不能更新到视图当中的

必须使⽤ this.setData({ key :value }) 来更新值


5、请谈谈小程序的生命周期函数?


  • onLoad(昂搂德):页面加载时触发
  • onShow():页面显示/切入前台时触发
  • onHide():页面隐藏/切入后台时触发
  • onReady(昂芮滴):页面初次渲染完成时触发
  • onUnload(昂 昂楼的):页面卸载时触发
  • onPullDownRefresh(昂谱当 芮 fi屎):下拉刷新的钩子函数
  • onReachBottom(昂瑞驰波特闷):上翻到底的钩子函数


6、⼩程序怎么实现下拉刷新?


⽅案 ⼀ :


在 app.json 中 将 enablePullDownRefresh【嗯a波 蒲当 芮 fi屎】设为true, 开启全局下拉刷新。

或者在 组件 json中 enablePullDownRefresh设为true, 开启单组件下拉刷新。


⽅案⼆:


scroll-view :使⽤该滚动组件 ⾃定义刷新,通过 bindscrolltoupper(版的死课肉吐破) 属性, 当滚动到顶部左边,会触发 scrolltoupper【死课肉吐破】事件,利⽤这个属性来实现下拉刷新功能。


7、bindtap和catchtap区别?


相同点:


都是小程序中的点击事件。


不同点:


bindtap 【办的泰普】不会阻⽌冒泡, catchtap 可以阻⽌冒泡。(开吃特泰普)。


8、⼩程序有哪些传递数据的⽅法?


方案一:使用全局变量


在 app.js 中的 this.globalData(阁楼博 怼特)中放⼊要存储的数据。在组件.js 头部中引⼊ const app(康搜爱普) = getApp(); 获取全局变量,然后使⽤ app.globalData.key 来进⾏获取和赋值。


方案二:使用路由


wx.navigateTo 和 wx.redirectTo(瑞迪 芮可图) 时,可以通过在 url 后拼接参数变量, 然后在⽬标⻚⾯的onLoad生命周期中,通过参数来获取传递过来的值。


方案三:使用本地存储


9、微信小程序中的路由及其区别?


wx.navigateTo(奶为 给特吐 ):保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面


wx.redirectTo( 蕊德 瑞可特 吐):关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面


wx.switchTab(死维持 泰普):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面


wx.navigateBack()关闭当前页面,返回上一级页面或多级页面。wx.reLaunch():关闭所有页面,打开应用内的某个页面 (芮老吃)


10、简述一下wx:if和hidden的区别?


  1. wx:if 动态创建或销毁对应的UI结构
  2. wx:if 条件为 false,什么也不做;为true时,才开始局部渲染
  3. hidden 简单控制组件的显示与隐藏
  4. wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。频繁切换的情况下,用 hidden 更好,运行时条件不大可能改变则 wx:if较好


11、app.json全局配置⽂件描述


pages : ⽤于存放当前⼩程序的所有⻚⾯路径

window : ⼩程序所有⻚⾯的顶部背景颜⾊,⽂字颜⾊配置

tabBar : ⼩程序底部的 Tab ,最多5个,最少2个


12、如何封装⼩程序请求


封装 wx.request 请求传递需要的参数,封装常⽤⽅法 POST , GET , 最后导出这些⽅法然后新建⼀个 api.js ⽂件,导⼊封装好的⽅法,然后调取相应的⽅法,传递数据。


总结:


在src目录中新建一个utils (噢 套死)目录,在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法,定义get和post等请求的方法,然后在get或者post请求的方法中设置wx.showToast(头斯特),然后通过wx.request来实现get或者post请求,在success(森克 赛斯)中,关闭loading (楼顶),然后通过回调的形式来返回获取的数据


最后调用的时候使用require来引入


13、简述微信小程序的运行机制?


热启动 :

假如⽤户已经打开了某个⼩程序,在⼀定时间内再次打开⼩程序的话,这个时候我们就不再需要重新启动了,这需要把我们的后台打开的⼩程序切换到前台来使⽤。


冷启动:

⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况,此时⼩程序需要重新加载启动。


14、⼩程序什么时候会主动销毁?


⼩程序在进⼊后台之后,客户端会帮我们在⼀定时间内维持我们的⼀个状态,超过五分钟会被微信主动销毁.官⽅没有明确说明什么时候销毁,不同机型表现也不⼀样,


2019年开发时:官⽅⽂档没有说明,但是经过询问⼀般指5分钟内2020年开发时:官⽅⽂档没有说明,测试安卓没有固定时间,内存⾜够的情况下,有时候⼀天了还在,有时候⼏分钟就没了


九、网络相关系列 ⭐


1、tcp为什么三次握手和四次挥手?


TCP作为一种可靠的传输协议,需要在建立连接和断开连接的过程中进行一些状态的确认和控制。因此,在TCP连接的建立和断开过程中,需要进行三次握手和四次挥手。


三次握手:


  1. 第一次握手:客户端向服务器端发送一个连接请求报文段(SYN)。
  2. 第二次握手:服务器收到请求后,向客户端回送一个收到确认报文段(ACK),并发送一个连接请求报文段(SYN)。
  3. 第三次握手:客户端接收到收到确认报文段后,向服务器端回送一个收到确认报文段(ACK)。


这样,双方完成了三次握手,


TCP连接建立成功。三次握手的目的是确保双方都能收到对方的消息,并且能够正确建立连接。


四次挥手:


  1. 第一次挥手:客户端向服务器端发送一个关闭连接的请求报文段(FIN)。
  2. 第二次挥手:服务器收到请求后,向客户端回送一个确认报文段(ACK)。
  3. 第三次挥手:服务器向客户端发送一个关闭连接的请求报文段(FIN)。
  4. 第四次挥手:客户端收到请求后,向服务器端回送一个确认报文段(ACK)。


完成四次挥手之后,TCP连接断开。


四次挥手的目的是确保双方都知道连接已经断开,并且释放所有的连接资源。

可以看出,TCP连接的建立和断开都需要进行一些状态的确认和控制,因此需要进行三次握手和四次挥手。这样可以保证连接的可靠性和正确性。


2、GET和POST的区别?


GET和POST是HTTP协议中常用的两种请求方法,它们有以下几点区别:


1.参数位置:

GET请求的参数是在URL中拼接,而POST请求的参数则是在请求体(body)中传递。


2.请求方式:


GET请求是通过URL向服务器请求数据,在URL中通过问号“?”传参。而POST请求是把数据放在HTTP请求体内提交给服务器。


3.请求长度:


GET请求没有请求体,因此请求长度有限制,目前大部分浏览器限制在2048个字符以内;而POST请求没有限制,但是实际情况一般由于服务器的限制而做出调整。


4.安全性:


GET请求会把参数暴露在URL上,容易受到劫持和攻击;而POST请求因为请求体的存在,相对于GET来说更加安全。


5.缓存:


GET请求可以被浏览器缓存,当下次请求相同的URL时,浏览器直接从缓存中取出数据;而POST请求不会被缓存,每次请求都需要重新传输数据。


3、?


4、?


5、?


九、其他 ⭐⭐


1、?


2、?


3、?


4、?


5、?


相关实践学习
通过Ingress进行灰度发布
本场景您将运行一个简单的应用,部署一个新的应用用于新的发布,并通过Ingress能力实现灰度发布。
容器应用与集群管理
欢迎来到《容器应用与集群管理》课程,本课程是“云原生容器Clouder认证“系列中的第二阶段。课程将向您介绍与容器集群相关的概念和技术,这些概念和技术可以帮助您了解阿里云容器服务ACK/ACK Serverless的使用。同时,本课程也会向您介绍可以采取的工具、方法和可操作步骤,以帮助您了解如何基于容器服务ACK Serverless构建和管理企业级应用。 学习完本课程后,您将能够: 掌握容器集群、容器编排的基本概念 掌握Kubernetes的基础概念及核心思想 掌握阿里云容器服务ACK/ACK Serverless概念及使用方法 基于容器服务ACK Serverless搭建和管理企业级网站应用
目录
相关文章
|
1月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
1月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
27 2
|
1月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
21 0
|
1月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
1月前
|
存储 JavaScript 前端开发
|
1月前
|
Web App开发 存储 缓存
|
1月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
2月前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
65 1
|
2月前
|
移动开发 前端开发 JavaScript
前端常见的面试题都有那些?
【7月更文挑战第10天】 前端面试涵盖HTML5新特性、CSS盒模型、JS事件传播、Vue的双向绑定、React生命周期、性能优化策略、浏览器解析流程及安全知识等。例如,HTML5新增video/audio元素、CSS选择器优先级计算、闭包功能、async/await处理异步、Vue通过Object.defineProperty实现数据绑定、React组件生命周期的关键阶段、前端优化如CDN和资源压缩,以及浏览器如何构建渲染树。面试还可能涉及XSS/CSRF防护和框架选择考量。准备面试需全面理解基础概念并结合实践经验。
36 0