前端常规问题

3.针对性问答
3-1.你们为什么要选择vue.js呢,它给你们解决了什么问题?

3-1. 我们选择Vue.js是因为它具有许多优秀的特性,如组件化开发、响应式数据绑定和虚拟DOM等。Vue.js可以提高开发效率,使得代码更易于维护,并且提供了良好的用户体验。


3-2.谈谈对vue生命周期的理解?

3-2. Vue生命周期是指组件从创建、更新到销毁的整个过程中所经历的一系列钩子函数的调用。它包括了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数。通过这些钩子函数,我们可以在组件的不同阶段执行相应的逻辑和操作。


3-3.v-if 和 v-show有什么区别?

3-3. v-if是条件渲染指令,根据条件动态地渲染或销毁元素,并重新生成/移除DOM节点。而v-show是基于CSS的显示/隐藏指令,通过控制display属性来切换元素的可见性。v-if在切换时有较高的初始渲染成本,但在切换频繁时性能较好,而v-show则在初始渲染时有较高的计算成本,但在切换频繁时性能更加稳定。


3-4.vue.js中组件之间是如何通信的?

3-4. Vue.js中组件之间的通信可以通过props属性和事件来实现。父组件通过props向子组件传递数据,子组件可以接收并使用这些数据。而子组件可以通过触发事件($emit)并携带参数向父组件传递数据。


3-5.vue中数据双向绑定原理了解吗?

3-5. Vue中的数据双向绑定是通过v-model指令实现的。它会自动将表单元素的value与Vue实例中的数据进行双向绑定,当表单元素的值发生变化时,相关的数据也会相应更新,反之亦然。


3-6.如果让你实现一个基本的双向数据绑定,那你是什么思路呢?

3-5. Vue中的数据双向绑定是通过v-model指令实现的。它会自动将表单元素的value与Vue实例中的数据进行双向绑定,当表单元素的值发生变化时,相关的数据也会相应更新,反之亦然。


3-7.MVVM和MVC有什么区别?

3-7. MVVM和MVC都是常见的前端架构模式,MVVM是Model-View-ViewModel的缩写,而MVC是Model-View-Controller的缩写。与MVC不同,MVVM将View和ViewModel直接关联起来,使得数据的改变可以立即反馈到View上,同时ViewModel也可以响应View的交互操作。MVVM模式更加关注处理View和ViewModel之间的数据绑定和交互,降低了代码的耦合度,提高了开发效率。


3-8.有没有用过其他的JS框架?

3-8. 是的,我还使用过React框架进行前端开发。React是一个被广泛应用的JavaScript库,它以组件化开发为核心,通过构建可复用和自包含的组件来构建用户界面。


3-9.对前端代码的自动化测试有没有了解?有没有使用过前端代码自动测试框架呢?

3-9. 我对前端代码的自动化测试有一定了解,我使用过Jest和Mocha等前端自动化测试框架进行单元测试和集成测试。这些测试框架可以帮助我们编写可靠的测试用例,并确保代码规范和质量。

第四部分_JS基础


4-1.说说JS中的数据类型

4-1. 在JavaScript中,数据类型可以分为两类:基本数据类型和引用数据类型。基本数据类型包括字符串、数字、布尔值、null和undefined。引用数据类型包括对象、数组和函数。


4-2.JS中的 ==和===有什么区别?

4-2. 在JavaScript中,==是相等运算符,它会进行类型转换后比较两个值是否相等。而===是严格相等运算符,它不会进行类型转换,只有在值的类型和值都相等的情况下才返回true。例如,1 == ‘1’会返回true,但1 === ‘1’会返回false。


4-3.JS中的深拷贝和浅拷贝有什么区别?

4-3. 深拷贝和浅拷贝是指对于对象或数组的复制操作时的不同方式。浅拷贝只复制对象或数组的引用,而不复制其内容。深拷贝则会递归复制对象或数组的所有内容。当原对象或数组发生改变时,浅拷贝会受到影响,而深拷贝不会受到影响。


4-4.如果让你实现一个深拷贝,有什么思路?

4-4. 实现深拷贝的思路可以通过递归遍历对象或数组,并创建一个新的对象或数组来存储复制后的内容。需要判断每个属性的类型,如果为对象或数组,则继续递归调用深拷贝方法。


4-5.简述一下对原型,构造函数以及实例的理解

4-5. 原型是JavaScript中的一个对象,在创建对象实例时被用作模板。构造函数是用来创建对象实例的函数,通常以大写字母开头。实例是通过构造函数创建的一个具体的对象。


4-6.什么是闭包?闭包解决了什么问题?闭包会导致什么问题呢?

4-6. 闭包是指一个函数可以访问其词法作用域之外的变量。它由一个函数和一个被该函数创建的词法环境组合而成。闭包可以解决变量作用域和数据私有性的问题。但闭包也会导致内存泄漏问题,因为即使函数执行完毕,闭包依然保留对外部变量的引用,导致变量无法被垃圾回收机制回收。


4-7.如何理解JS中的this关键词?

4-7. 在JavaScript中,this关键字指的是当前执行代码的上下文对象。它的值取决于函数的调用方式。在全局作用域中,this指向全局对象(如window)。在对象方法中,this指向调用该方法的对象。在事件处理程序中,this指向触发事件的元素。在使用构造函数创建对象时,this指向新创建的对象。


4-8.之前有没有解决过跨域问题?在你们项目里。当时是怎么解决的?

4-8. 解决跨域问题的方法有多种,其中一种常见且简单的方法是使用服务器端设置响应头部信息。通常使用CORS(跨来源资源共享)协议来实现跨域资源的访问。服务器端通过设置Access-Control-Allow-Origin头部信息来允许特定源的请求访问资源。在项目中,可以在服务器端进行相关的配置来解决跨域问题。例如,常见的配置包括设置Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等头部信息来允许特定的请求来源、请求方法和请求头部。

CSS基础篇


1.P元素和div元素,都是块元素,两者之间有什么区别呢?

P元素和div元素都是块级元素,但二者之间有一些区别。 P元素是用于表示段落的标签,通常用于包裹文本内容。它会自动添加上下边距,使得各个段落之间有一定的间距。 div元素是一个通用的容器标签,没有预定义的样式或语义。它可以用于将多个元素组合在一起,并且通过CSS来设置其样式。


2.谈谈你对CSS盒子模型的理解?

CSS盒子模型是指包裹在HTML元素周围的一个矩形框,它由四个部分组成:内容区域、内边距、边框和外边距。 内容区域是被实际内容填充的区域,内边距是内容区域与边框之间的空白区域,边框是围绕内容和内边距的线,外边距是边框与相邻元素之间的空白区域。


3.如何水平垂直居中一个页面元素?还有什么其他方式吗?

  1. 水平垂直居中一个页面元素的常见方式有:
    • 使用Flexbox布局:通过设置父容器为display: flex;以及align-items: center和justify-content: center属性可以实现水平垂直居中。
    • 使用position属性:通过设置元素的position为absolute,并结合top、left、right和bottom属性来实现居中。
    • 使用transform属性:通过设置元素的position为absolute,并将left和top都设为50%,再使用translate()函数来调整元素的位置。


4.清除浮动的方式有哪些?他们之间有哪些区别?

  1. 清除浮动常用的方式包括:
    • 使用clear属性:可以设置clear:both来清除浮动,但需要在浮动元素下方添加一个空元素并设置clear属性。
    • 使用溢出属性:可以给父容器添加overflow: hidden或overflow: auto属性来清除浮动,但需要注意可能会造成内容溢出被隐藏的问题。
    • 使用clearfix技巧:可以给父容器添加类名clearfix,并在CSS中定义该类选择器的::after伪元素设置content:””、display:block和clear:both。


5.重绘和回流有什么区别?

  1. 重绘(Repaint)和回流(Reflow)是浏览器渲染过程中的两个关键步骤。
    • 重绘:当元素的样式发生改变但不影响其布局时,浏览器会重新绘制元素的外观,例如修改颜色、背景等。
    • 回流:当页面布局发生改变时,浏览器需要重新计算并更新元素的几何属性,然后进行重新布局。回流触发会导致其他与之相关的元素也被迫重新回流。回流显著影响性能。


6.(你说你做过移动端开发,对响应式布局了解吗?)实现响应式布局有哪些方式?

  1. 响应式布局的实现方式有:
    • 使用媒体查询(Media Queries):通过为不同的屏幕尺寸定义不同的CSS样式,以适配不同的设备。
    • 弹性网格布局(Flexbox):使用弹性容器和项目属性,使得元素能够灵活地自适应不同的屏幕尺寸和布局要求。
    • CSS栅格系统:借助栅格系统将页面划分为多个等宽的列,达到适应不同屏幕尺寸的效果。
    • CSS框架:一些流行的CSS框架如Bootstrap或Foundation提供了响应式的组件和布局工具,简化了开发过程。


7.有没有用过一些CSS框架?

  1. CSS框架,例如Bootstrap和Tailwind CSS。这些框架提供了预定义的样式和组件,能够快速构建响应式的用户界面,提高开发效率。


8.当我在浏览器中输入URL,一直到页面显示,这个中间过程发生了哪些事情呢?(说的越具体越好)

  1. 当在浏览器中输入URL后,主要经历以下过程:
    • DNS解析:将输入的域名解析成对应的IP地址。
    • 建立连接:通过IP地址建立与服务器的TCP连接。
    • 发送请求:浏览器向服务器发送HTTP请求,包括请求头和请求体等信息。
    • 服务器处理请求:服务器接收、解析请求,并做相应的处理,如查询数据库、读取文件等。
    • 返回响应:服务器生成HTTP响应,包含响应状态码、响应头和响应体等信息。
    • 页面渲染:浏览器根据收到的响应内容解析HTML结构,构建DOM树,并进行CSS解析生成渲染树。然后浏览器根据渲染树来进行布局和绘制。
    • 资源加载:浏览器根据解析到的HTML内容发起对其他外部资源(如CSS、JavaScript、图片等)的请求,并在得到响应后进行相应的处理和加载。
    • 加载完毕:当所有资源都加载完成后,页面显示完整内容,并触发相应的事件(如DOMContentLoaded和load事件)。


9.说几条web前端的优化策略吧。

  1. 一些常见的前端优化策略包括:
    • 压缩和合并资源:压缩HTML、CSS、JavaScript等文件大小,减少网络传输时间,并将多个文件合并为一个减少请求次数。
    • 使用缓存:通过设置HTTP缓存相关头部信息使得浏览器可以缓存静态文件,从而减少服务器的负载和提高页面加载速度。
    • 图片优化:选择适合场景的图片格式、压缩图像以减小文件大小,使用懒加载或按需加载技术来延迟加载图片。
    • 异步加载:将不影响首屏渲染的JS文件进行异步加载,避免阻塞页面渲染。使用惰性加载(Lazy Loading)延迟加载非关键内容。

第五部分,综合能力


1.你在项目中遇到过哪些大坑,那当时是怎么解决的?

  1. 在项目中遇到的大坑包括:
    • 性能问题:页面加载过慢或内存占用过高等。解决方式包括优化代码结构、减少网络请求、使用缓存等。
    • 跨浏览器兼容性问题:不同浏览器对某些CSS或JavaScript特性的支持可能存在差异,需要针对性地解决兼容性问题,例如使用前缀、polyfill等。
    • 代码质量问题:代码重复、命名不规范、可读性差等。通过代码审查、规范制定以及使用lint工具进行静态分析可以改善代码质量。


2.在你们团队中,你有没有一些突出的亮点可以在这分享一下

  1. 在团队中我的亮点包括:
    • 细致入微:我注重细节和精益求精,在项目开发过程中深入理解需求并提出有效的解决方案。
    • 团队合作:我乐于与团队成员合作,在团队中有良好的沟通和协作能力,能够积极分享知识和经验,并且愿意帮助他人解决问题。
    • 学习能力强:我对新技术和行业趋势保持关注,并持续学习和提升自己的技能,能够快速适应新的工作环境和项目需求。


3.那你提到前端工程实践,那项目中的package.json有什么作用?它里面都有哪些内容?

  1. package.json文件是Node.js项目中的配置文件,用于管理项目的依赖和脚本等。它包含了以下内容:
    • “name”:项目名称。
    • “version”:项目版本号。
    • “description”:项目描述信息。
    • “dependencies”:项目所依赖的第三方模块及其版本号。
    • “devDependencies”:项目开发过程中所需的第三方模块及其版本号。
    • “scripts”:定义了一些命令脚本,可以通过npm进行运行。
    • “main”:指定了入口文件。
    • “repository”:项目的代码仓库信息。
    • “license”:项目采用的许可证信息。


6.对webpack比较熟是吧,那你对webpack的使用有哪些优化建议呢?

  1. 对于webpack的使用,一些优化建议包括:
    • 使用ES6模块语法:尽量使用import和export关键字进行模块导入和导出。
    • 使用Tree Shaking:通过在构建过程中去除未使用的代码来减小打包体积。
    • Code Splitting:将应用程序的代码拆分为多个较小的部分,使得每个部分可以独立加载和缓存。
    • 开启缓存:利用webpack的缓存机制,避免重新编译没有改变的模块。
    • 压缩输出:使用webpack插件压缩和优化输出的代码。

7.你平常业余时间都是怎么学习的呢,看什么书,浏览什么网站?

在业余时间,我经常阅读相关的技术书籍、浏览技术博客和社区,以了解最新的前端技术趋势和最佳实践。我参与一些在线课程或培训来学习新技术,并通过实践项目来巩固所学的知识。


8.职业规划是什么样的呢?

我的职业规划是成为一名资深前端工程师,不断提升自己的技术能力和团队管理能力,以解决复杂的技术问题并带领团队开发出高质量的产品。同时,我也希望能够担任技术顾问的角色,为团队提供指导和支持,推动技术创新和团队发展。


1、vue的双向绑定原理是什么?里面的关键点在哪里? Vue的双向绑定原理是基于Object.defineProperty或者Proxy来实现的,其关键点在于数据劫持,即对数据的读取和修改进行拦截,在数据发生变化时自动更新视图

2、实现水平垂直居中的方式? 实现水平垂直居中的方式有多种,比如使用Flex布局、绝对定位、margin负值等。

3、常用伪元素有哪一些? 常用的伪元素有before和after。

4、移动端如何适配不同屏幕尺寸? 移动端可以通过设置meta标签中的viewport属性来适配不同屏幕尺寸,例如设置width=device-width、initial-scale=1等。

5、本地存储有哪一些?他们三者有什么区别? 常见的本地存储方式有cookie、localStorage和sessionStorage,它们的区别在于作用域、存储容量和过期时间等方面。

6、JS的数据类型?如何判断js的数据类型? JavaScript的数据类型包括Number、String、Boolean、Object、Null和Undefined等,可以使用typeof、instanceof和Object.prototype.toString.call()等方法来判断数据类型

7、说一下ES6的新特性有哪些? ES6的新特性包括let和const关键字、箭头函数、模板字符串、解构赋值、类和继承、模块化等。

8、Let、const、var三者有什么区别? let和const是块级作用域的关键字,var是函数作用域的关键字,let和const声明的变量不能重复声明,const声明的变量不可修改。

9、数组去重有哪些办法? 数组去重的方法包括利用构造函数Set的去重功能、使用循环遍历和对象属性去重等。

10、说一下深拷贝和浅拷贝,如何自己实现一个深拷贝? 深拷贝和浅拷贝是指在复制对象时,是否对其内部的子对象进行递归复制。实现深拷贝可以使用JSON.parse(JSON.stringify(obj))、递归复制等方法。

11、Vue的生命周期有哪一些?说一下它们每个阶段做什么操作? Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段,每个阶段对应着不同的操作,例如数据初始化、DOM挂载和销毁等。

12、组件通讯方式有哪一些? 组件通讯方式有props、$emit、$parent/$children、provide/inject和$refs等。

13、Vuex有几个属性及作用? Vuex的属性包括state、getters、mutations、actions和modules等,它们用于管理Vue应用中的状态。

14、Vue的监听属性和计算属性有什么区别? Vue的监听属性和计算属性都用于监测数据变化,但监听属性是一个函数,需要手动调用,而计算属性是一个属性,会自动计算并缓存结果

15、说一下防抖和节流。怎么实现? 防抖和节流是用于控制函数执行频率的方法,防抖是在一定时间内只执行最后一次操作,节流是在一定时间内只执行一次操作。可以通过setTimeout和时间戳等方式实现。

16、Vue的导航守卫有哪一些? Vue的导航守卫包括全局前置守卫、全局后置钩子、路由独享守卫和组件内的守卫等

17、你的登录拦截怎么实现的? 登录拦截可以通过路由守卫、请求拦截和响应拦截等方式实现

18、有用过图表吗?用的多吗? 常见的图表库包括ECharts、Highcharts、D3等

19、闭包是什么?如何实现? 闭包是指函数内部可以访问外部函数的变量,可以用于封装私有变量和实现柯里化等操作。

20、Vue2.0和vue3.0有什么区别? Vue2.0和Vue3.0的区别在于性能优化、组合式API、响应式系统和虚拟DOM等方面。

21、Vue常用的指令有哪些? Vue常用的指令包括v-model、v-for、v-if、v-show、v-bind、v-on等。

22、v-If和v-show有什么区别? v-if和v-show的区别在于前者在条件为false时会销毁对应的DOM元素,而后者只是在样式上隐藏元素。

23、v-for为什么要加一个key? v-for需要加key属性是为了帮助Vue识别节点的唯一性,提高渲染效率。

24、你是如何封装一个组件的? 封装一个组件需要考虑组件的输入和输出,可以使用props和$emit等方式实现。

25、有自己从0到1搭建过项目吗? 从0到1搭建一个完整的项目需要考虑项目架构、技术选型、开发流程、测试和部署等方面

26、有用过uni-app吗? uni-app是一款基于Vue的跨平台开发框架,可以用于快速开发小程序、H5、APP等应用。

27、你会写后台吗?有搞过服务端渲染吗? 后台开发需要掌握服务器端语言和数据库等技术,服务端渲染可以提高页面的首屏加载速度和SEO效果。

28、说一下你项目中遇到的难点,如何解决? 在项目中遇到的难点可能包括架构设计、性能优化和业务逻辑等方面,需要通过调试和优化等方式解决

29、Url到浏览器的一个过程有哪些步骤? URL到浏览器的过程包括DNS解析、建立TCP连接、发送HTTP请求、服务器处理请求、浏览器解析渲染页面等步骤

30、如何实现小程序的request封装及拦截? 可以通过封装request函数和使用拦截器等方式实现小程序的请求封装和拦截。

31、在vue的项目应用中,不使用框架,怎么封装? 在Vue项目中不使用框架可以使用原生的HTML、CSS和JavaScript来实现,需要手动处理数据和事件等方面。

32、什么是Js原型?原型链是什么? JavaScript的原型是指每个对象都有一个原型对象,原型对象又有自己的原型,形成了一条原型链。

33、组件通讯方式有哪些? 组件通讯方式包括props、$emit、$parent/$children、provide/inject和$refs等。

34、用闭包的原理做过哪些? 闭包可以用于实现柯里化、封装私有变量和缓存等操作。

35、作用域是什么? 作用域是指变量的可访问范围,JavaScript中有全局作用域和函数作用域等

36、操作数组的方式有哪些? 操作数组的方式包括遍历数组、添加和删除元素、数组去重和排序等。

37、0.1 + 0.2 等于 0.3吗?为什么?如何解决? 0.1 + 0.2不等于0.3,这是因为JavaScript采用的是IEEE 754浮点数标准,存在精度问题。可以使用toFixed方法处理。

38、keep-alive是什么?有哪几个生命周期阶段? keep-alive是Vue中的一个组件,用于缓存组件实例,提高组件的渲染效率,其生命周期包括activated和deactivated等阶段

39、判断一个变量是否是数组,有哪些办法? 判断一个变量是否是数组可以使用Array.isArray和instanceof等方法。

40、判断一个变量是否是对象,有哪些办法? 判断一个变量是否是对象可以使用typeof和Object.prototype.toString.call()等方法。

41、对象/数组常用方法有哪些? 对象/数组常用方法包括push、pop、shift、unshift、slice、splice、concat、map、filter、reduce等。

42、创建一个空数组/空对象有哪些方式? 创建一个空数组可以使用[]或new Array(),创建一个空对象可以使用{}或new Object()。

43、哪些遍历方式会改变原数组? 使用forEach、map、filter、reduce等遍历方式不会改变原数组,而使用push、pop、shift、unshift、splice等方法会改变原数组

44、Set和Map各是什么? Set是一种数据结构,用于存储唯一值,Map是一种键值对数据结构,用于存储任意类型的键和值

45、介绍一下promise。 Promise是一种异步操作管理的解决方案,用于解决回调地狱问题,其特点是链式调用和状态机制

46、Promise通常会解决三种问题

(1)链式回调

(2)同时发起几个异步请求,谁先有结果就拿谁的

(3)发起多个请求,等到所有请求后再做下一步处理

这三种方式promise是怎么处理的?

Promise可以通过then方法实现链式回调,通过Promise.all方法实现同时发起多个异步请求,通过Promise.race方法实现等待多个异步请求的结果

47、如何改变一个函数a的上下文? 可以使用bind、apply和call等方法改变一个函数的上下文

48、Call和replay有什么区别? call和apply都是用于改变函数上下文的方法,区别在于传入参数的方式不同

49、Evenbus是什么东西? EventBus是一种事件发布/订阅的机制,可以实现组件之间的通讯

50、Vue中普通的生命周期大概有哪些? Vue中普通的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。

51、父子组件生命周期执行顺序是怎么样的? 父子组件生命周期执行顺序是父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。

52、mixins有几个生命周期阶段? mixins有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等生命周期阶段。

53、弹性布局,一行两列,一列固定宽,如何实现? 实现一行两列,一列固定宽的水平垂直居中布局可以使用Flex布局,父元素设置display: flex、align-items: center和justify-content: center,左侧元素设置flex: 1,右侧元素设置固定宽度

54、Flex:1 包含哪三种属性 Flex:1包含flex-grow、flex-shrink和flex-basis三个属性,分别表示元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准大小。

249 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注