当前位置: 首页 > Web前端 > HTML

2022前端面试总结

时间:2023-03-28 16:44:51 HTML

先废话。这是笔者在采访中记录的一篇文章。它不打算写一个非常全面的面试问题总结。希望看完这篇文章,对你有所帮助。首先,面试是对个人在以往工作中积累的经验的一种考验。相信如果在面试的时候花时间死记硬背面试题的话,你不一定能胜任预期的工作,除了你求职时的工作~其次,除了技术面试,还有项目中使用的技术亮点以及您可以提供的技术方案和其他能力的演示。如果你没有真正解决过这方面的能力,你肯定无法提出自己的解决方案。所以居安思危,平时严格要求自己。对于疑难问题和性能问题,不要回避问题,迎难而上去解决,这样才能真正在技术岗位上站稳脚跟。工作必备的核心框架工具Vue和React是前端开发岗位必备的两个技术栈。以下是在工作中进行项目开发必须具备的框架技能。参考大纲查漏补缺Vue(Vue2/3)Vue主流组件库(ant-design,element-ui,arco-design)Vue组件封装(公共组件抽取,npm组件发布和私有部署,编写组件时必须考虑的几个元素props、方法、样式)Vue父子和兄弟组件通信(Vuex、EventBus)生命周期函数、Watch函数和计算属性计算应用程序Vue动态路由、权限相关(菜单页面、按钮操作)、单点登录、使用图片验证防止CSFR攻击Vue3更新内容、老Vue2项目维护注意事项和新项目Vue3技术选型、Vue配合TypeScriptReact(React16及以上)企业级开发框架UMI(简化项目搭建和初期开发流程)React主流组件库(ant-design、arco-design)React组件封装(模拟oustoVue)React组件通信(Redux、Redux-thunk、Redux-saga、Redux-logger、dva)生命周期功能、ReactHooks钩子功能的应用无状态组件、项目分层(视图+模型+服务)React路由和权限(类比Vue)public部分webpack打包配置,性能优化,webpack.dev.conf.js添加cdn配置如何在首屏加载优化,当前面试遇到的图标和图片资源优化问题JavaScript和CSSES6数据有哪些类型?(基本数据类型和引用数据类型,ES6新增Symbol,作为对象属性中的唯一key;新增BigInt,解决数据量过大时Int报错的问题)ES6有哪些新方法?(newSet()处理数组去重,newMap()chains处理数组,可以和Filter一起使用,和ForEach有一些区别,ForEach是在原数组中操作的。可以再讲一下is(),判断值是否相等;assign(),浅拷贝对象;entries()与后者相反,fromEntries()键值对数组转换为对象)Javascript中的assign()方法是浅拷贝还是深拷贝?Es6新增的对象方法是如何判断一段数据是否为对象的?(1.isArray2.Object.prototype.toString().call(),return'[objectArray]'为3.实例构造函数的constructor属性指向构造函数,array.contructor===Array可以4.也可以使用instanceof,ainstanceofArray)JS四种方式来判断是否是数组。什么是BFC盒模型,它的作用是什么(具有BFC特性的元素可以看作是隔离的独立容器,容器内的元素不会影响布局中的外部元素;触发条件:1.溢出值除了visible(hidden,auto,scroll)。2.绝对定位元素:position(absolute,fixed)。3.display是inline-block,table-cells,flex。)盒模型和BFCnull和undefined的区别(null和undefined不是严格相等的,也是全等的,但不是严格相等的;null是人为分配的初始null值,undefined是全局对象的属性;typeof(null)不是null,而是object,因为typeof判断的是二进制码,object的前三位都是0,null正好相同,typeof(undefined)正常;)var和let的区别(var是函数作用域,let是block中let声明的变量不可重复;const声明的变量不能被修改;var声明的变量属于window,可以被window访问。let和const的区别就是var和let的区别。const声明了一个数组并且可以压入元素为什么?push()、pop()、shift()、unshift()、splice()、sort()和reverse()操作之间的区别。shift删除第一个元素并返回,unshift则相反。splice用于在数组中添加或删除元素,array.splice(index,howmany,item1,...,itemX);index是必需的,指定在哪里添加/删除元素;howmany是可选的,指定要删除多少个元素,必须是一个数字,但可以是“0”。如果不指定该参数,则删除原数组index到末尾的所有元素;item1,...,itemX是可选的,要添加到数组的新元素JavaScriptsplice()方法Axios有任何竞品。听说过吗(ajax和fetch,fetch是js原生api,需要自己封装一下;ajxa现在不是mvc的,是基于原生xhr的,需要引入jquery;axios支持promise,支持防止csrf)ajax,axios,fetch的详细区别及优缺点Ajax,Fetch,Axiosjs深拷贝和浅拷贝(1.常用的深拷贝使用JSON.parse+JSON.stringify,2.object.assign一个3.使用foreach方法递归迭代实现深拷贝,4.使用第三方函数库,比如loadsh的clonedeep或者underscore的deepclone,clone是浅拷贝)js的深拷贝和浅拷贝如何优化H5移动端性能(1.资源压缩,图片压缩,引入资源包压缩,有条件使用cdn加速,iconsprite精灵图。2.优化dom结构,减少页面重绘和重排,第一页的页面屏幕经验nditure使用了inlinecss,通过节流防抖的方式降低了修改dom事件触发的频率。采用预加载骨架图的方式优化用户体验。我们之前使用过page-web-skeletonchorme组件来快速生成。骨架图。4、尽量使用css内置动画,减少requestAnimationFrame的使用,会触发大量DOM操作,而内置动画会调用硬件加速,体验更好。5.配合后端同学合并界面,将首页展示的界面统一为通用界面,针对性优化。6.最后优化主要是针对不同项目,不同方式优化,针对性修改)H5前端性能优化指南css样式优先规则(简单来说就是内联样式>ID选择器>类选择器=属性选择器=伪-classselector>labelselector=pseudo-elementselector,!important最高)CSS优先级CSS样式优先级VueVue的实现原理,Object.defineProperty();Vue2和Vue3Responsive实现的区别;Vue如何实现数组的响应式(底层代码主要是写一组js相同的方法暴露,Vue通过原型拦截重写数组的7个方法)Vue如何封装一个组件(定义参数,定义需要暴露的方法,需要写成参数的属性,最后导出)Vue父子组件与兄弟组件的通信方式(1.第一种方法使用父组件。2.第二种方法使用eventbus在main中全局注册事件总线,由$on和$emit监听和触发。3.使用vuex)vue学习-兄弟组件之间如何通信vue如何实现v-model(使用object.defineProperty设置getset方法,然后在绑定的input输入框的keyup事件中添加劫持,从而实现实现mvvm,即数据驱动的页面;然后继续吹mvvm和之前jquery时代的区别;jquery主要是链式函数操作,对dom的操作比较多,性能会落后;mvvm参考tomodel,view,viewmodel,最后一个是Synchronizeviewandmodelobjects,model是业务逻辑,view是页面ui)Vue的v-model的原理和实现什么是MVVM?vue使用history模式时,出现404,nginx应该如何处理(try_files$uri$uri//index.html,意思是查找当前请求地址对应的文件是否存在,不存在则查找请求地址对应的目录是否存在,如果仍然不存在,则跳转到/index.html页面)Nginx:vue路由使用history方式刷新404React(个人简历没有突出react的能力,所以有关于这方面的问题相对较少)如何使用redux?redux中的组件样式css无法生效怎么办?乱记录一些前端性能优化:如何解决H5页面首屏加载白屏问题,如何防止内存泄露前端安全基础:XSS攻击,XSRF攻击js继承的几种方式:总结JS继承的六种方式,js继承的几种类型Howtocreateobjectsinjs:FourwaystocreateobjectsinJSHowtorealizeapromise:javaScriptjs模拟对promise的封装,模拟Promise的实现(小白版)What高德地图、Cesium、ArcGIS中有图层吗?原型和原型链的作用是什么,简单描述一下?面试笔试记录了一些冷门的CSS知识点,在陌生的工作中很少用到(例如:长度50px,宽度50px,border-radius:30px50px;有什么作用?)数组去重,数组排序和组合能力的算法题(牛客网和leecode刷题处理)手写sql(附加项)套路文总是会被问到,但还是要看看。千篇一律遇到的问题,大部分在工作中遇到的也能找到,碰到过就会印象深刻。前端200道面试题及答案(更新中)50道最新TypeScript面试题集锦-TypeScript开发教程React面试题最全react花了一个月时间整理面试题,一万字总结React知识点(超全超基础)webpack面试题整理vue面试原理常见问题12Vue高频原理面试问题,你能回答几个?vue面试题整理(2022-持续更新中...)vue3面试题:2022最新前端Vue3.0面试题及答案vue3.0面试题高频JS面试题汇总数据类型和变量,闭包,作用域,原型链、继承CSS高频面试题本人是fx67ll.com,如果您发现本文有错误,欢迎在评论区讨论指正,感谢阅读!如果您喜欢本文,欢迎访问我本文的github仓库地址,并为我点个Star,谢谢~:)转发请注明参考文章地址,万分感谢!!!