超全！超详细！2023大 厂 前端面试题手册

HTML、CSS、浏览器 相关 ................................................................... 1 1.网络中使用最多的图片格式有哪些 ............................................................................................. 1 2. 请简述 css 盒子模型 ................................................................................................................... 1 3.视频/音频标签的使用 ................................................................................................................... 2 4.HTML5 新增的内容有哪些 .......................................................................................................... 2 5.Html5 新增的语义化标签有哪些 ............................................................................................... 3 6.Css3 新增的特性 ............................................................................................................................ 3 7.清除浮动的方式有哪些？请说出各自的优点 ............................................................................. 5 8.定位的属性值有何区别 ................................................................................................................. 6 9.子元素如何在父元素中居中 ......................................................................................................... 6 10.Border-box 与 content-box 的区别 ....................................................................................... 7 11.元素垂直居中 ............................................................................................................................... 8 12. 如何让 chrome 浏览器显示小于 12px 的文字 ..................................................................... 8 13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些 ..... 8 14.网页中有大量图片加载很慢 你有什么办法进行优化？ ...................................................... 10 15.行内元素/块级元素有哪些？ ................................................................................................... 10 16.浏览器的标准模式和怪异模式区别？ .................................................................................... 11 17.Margin 和 padding 在什么场合下使用 ................................................................................ 12 - 1 - 18.弹性盒子布局属性有那些请简述? .......................................................................................... 12 19.怎么实现标签的禁用 ................................................................................................................ 12 20.Flex 布局原理 ............................................................................................................................ 12 21. Px，rem，em 的区别 ............................................................................................................ 13 22.网页的三层结构有哪些 ............................................................................................................ 13 25.常见的兼容性一阶段内容中记几个 ........................................................................................ 13 26.垂直与水平居中的方式 ............................................................................................................ 14 27.三栏布局方式两边固定中间自适应 ........................................................................................ 14 28.Doctype 作用 ............................................................................................................................ 14 29.说一下 HTML5 drag api ........................................................................................................ 15 30 对 HTML 语义化标签的理解 ................................................................................................. 15 31.web 性能优化 ........................................................................................................................... 15 32.浏览器缓存机制 ......................................................................................................................... 15 33.浏览器输入网址到页面渲染全过程 ........................................................................................ 16 34.画一条 0.5px 的线 .................................................................................................................. 16 35.关于 JS 动画和 css3 动画的差异性 .................................................................................... 17 36.双边距重叠问题（外边距折叠） ............................................................................................ 17 37.浮动清除 ..................................................................................................................................... 18 38.CSS 选择器有哪些，优先级呢 ............................................................................................. 18 39.css 动画如何实现 ..................................................................................................................... 19 40.如何实现元素的垂直居中 ........................................................................................................ 19 41.CSS3 中对溢出的处理 ............................................................................................................. 20 - 2 - - 3 - 42.对 CSS 的新属性有了解过的吗？ ......................................................................................... 20 43.overflow 的原理 ...................................................................................................................... 20 44.css 定位 ..................................................................................................................................... 21 Javascript 相关 ................................................................................................................... 23 1.Js 基本数据类型有哪些 .............................................................................................................. 23 2.Ajax 如何使用 .............................................................................................................................. 23 3.如何判断一个数据是 NaN ......................................................................................................... 24 5.闭包是什么？有什么特性？对页面会有什么影响 .................................................................. 24 6. Js 中常见的内存泄漏： ............................................................................................................. 25 7.事件委托是什么？如何确定事件源（ Event.target 谁调用谁就是事件源） .................... 25 8.什么是事件冒泡？ ....................................................................................................................... 26 9.本地存储与 cookie 的区别 ........................................................................................................ 26 10.ES6 新特性 ................................................................................................................................. 28 11.Let 与 var 与 const 的区别 ..................................................................................................... 28 12.数组方法有哪些请简述 ............................................................................................................ 28 13.Json 如何新增/删除键值对 ..................................................................................................... 29 14.什么是面向对象请简述 ............................................................................................................ 29 15.普通函数和构造函数的区别 .................................................................................................... 30 16.请简述原型/原型链/（原型）继承 ......................................................................................... 30 17.Promise 的理解 ....................................................................................................................... 32 18.我们用 Promise 来解决什么问题？ ....................................................................................... 32 19.请简述 async 的用法 ................................................................................................................ 33 20.. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ ................. 33 21.get 请求传参长度的误区 ........................................................................................................ 34 22.补充 get 和 post 请求在缓存方面的区别 ......................................................................... 34 23.说一下闭包 ................................................................................................................................. 35 24.说说前端中的事件流 ................................................................................................................ 35 25.说一下事件委托 ......................................................................................................................... 36 26.JS 的 new 操作符做了哪些事情 .......................................................................................... 36 27.改变函数内部 this 指针的指向函数（bind，apply，call 的区别） ............................. 36 28.JS 的 各 种 位 置 ， 比 clientHeight,scrollHeight,offsetHeight , 以 及 scrollTop, offsetTop,clientTop 的区别？ .................................................................................................... 37 29.JS 拖拽功能的实现 ................................................................................................................... 37 30.JS 中的垃圾回收机制 ............................................................................................................... 37 31.JS 监听对象属性的改变 ........................................................................................................... 39 32.自己实现一个 bind 函数 ........................................................................................................ 40 33.JS 怎么控制一次加载一张图片，加载完后再加载下一张 .................................................. 41 34.实现 JS 中所有对象的深度克隆（包装对象，Date 对象，正则对象） ......................... 43 35. 来讲讲 JS 的闭包吧 ............................................................................................................... 47 36. 能来讲讲 JS 的语言特性吗 .................................................................................................. 48 37. JS 的全排列 .............................................................................................................................. 48 jQuery 相关 ............................................................................................................................ 49 1.Css 预处理 sass less 是什么？为什么使用他们 ..................................................................... 49 2.Js 中.call()与.apply()区别 .......................................................................................................... 50 - 4 - 3.为什么会造成跨域/请简述同源策略 ......................................................................................... 50 4.请输出三种减少页面加载时间的方式 ....................................................................................... 51 5.This 指向 ...................................................................................................................................... 52 6.什么是 jsonp 工作原理是什么？他为什么不是真正的 ajax ................................................. 53 7.请掌握 2 种以上数组去重的方式 .............................................................................................. 54 8.深浅拷贝是什么如何实现？ ....................................................................................................... 54 9.为什么 js 是弱类型语言 .............................................................................................................. 55 10.怎么转换 less 为 css ................................................................................................................. 55 11.echarts 使用最多的是什么 ..................................................................................................... 55 12.For 循环与 map 循环有什么区别 ........................................................................................... 56 13.请写出一个简单的类与继承 .................................................................................................... 56 14.同步与异步的区别/阻塞与非阻塞区别 .................................................................................. 57 15.重绘和回流是什么 .................................................................................................................... 57 16.http 是什么？有什么特点 ....................................................................................................... 58 17.HTTP 协议和 HTTPS 区别 ....................................................................................................... 58 18.原型和继承，prototype，call 和 apply 继承的区别（第一个参数是相同的，第二个的 区别在哪） ...................................................................................................................................... 59 19.箭头函数与普通函数的区别 .................................................................................................... 59 20.什么是 js 内存泄露？ ................................................................................................................ 60 21.你如何对网站的文件和资源进行优化？ ................................................................................ 60 22.请简述 ajax 的执行过程 以及常见的 HTTP 状态码 ............................................................ 61 23.预加载和懒加载的区别，预加载在什么时间加载合适 ........................................................ 62 - 5 - 24.Jquery 选择器有哪些 ............................................................................................................... 62 25.Jquery 插入节点的方法 ........................................................................................................... 66 26.Js 的函数节流和函数防抖的区别 ............................................................................................ 67 27.Get 和 post 不同 ...................................................................................................................... 68 28.什么是 csrf 攻击 ........................................................................................................................ 68 29.什么时候用深拷贝 /浅拷贝 ..................................................................................................... 68 Vue 相关 .................................................................................................................................... 69 1.Vue 的核心是什么 ....................................................................................................................... 69 2.请简述你对 vue 的理解 .............................................................................................................. 69 3.请简述 vue 的单向数据流 .......................................................................................................... 70 4. Vue 常用的修饰符有哪些 ......................................................................................................... 70 5.v-text 与{{}}与 v-html 区别 ....................................................................................................... 71 6.v-on 可以绑定多个方法吗 ......................................................................................................... 72 7.Vue 循环的 key 作用 .................................................................................................................. 72 8.什么是计算属性 ........................................................................................................................... 72 9. Vue 单页面的优缺点 ................................................................................................................. 73 10.Vuex 是什么？怎么使用？在那种场景下使用 ...................................................................... 73 11.Vue 中路由跳转方式（声明式/编程式） .............................................................................. 74 12.vue 跨域的解决方式 ................................................................................................................. 75 13.Vue 的生命周期请简述 ............................................................................................................ 75 14.Vue 生命周期的作用 ................................................................................................................ 75 15.DOM 渲染在那个生命周期阶段内完成 ................................................................................. 76 - 6 - 16.Vue 路由的实现 ........................................................................................................................ 76 17.Vue 路由模式 hash 和 history，简单讲一下 ....................................................................... 77 18.Vue 路由传参的两种方式，params 和 query 方式与区别 ............................................... 77 19.Vue 数据绑定的几种方式 ........................................................................................................ 78 20.Vue 注册一个全局组件 ............................................................................................................ 78 21.Vue 的路由钩子函数/路由守卫有哪些 .................................................................................. 78 22.Vue 中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？ ................... 79 23.Elementui 中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？ ..... 79 24.Vue-cli 中如何自定义指令 ...................................................................................................... 80 25.Vue 中指令有哪些 .................................................................................................................... 80 26.Vue 如何定义一个过滤器 ........................................................................................................ 81 27.对 vue 中 keep-alive 的理解 ................................................................................................. 82 28.如何让组件中的 css 在当前组件生效 .................................................................................... 82 29.Vue 生命周期一共几个阶段 .................................................................................................... 82 30.Mvvm 与 mvc 的区别 .............................................................................................................. 83 31.Vue 组件中的 data 为什么是函数 ......................................................................................... 83 32.Vue 双向绑定的原理 ................................................................................................................ 84 33.Vue 中组件怎么传值 ................................................................................................................ 84 34.Bootstrap 的原理 ..................................................................................................................... 85 36.如果一个组件在多个项目中使用怎么办 ................................................................................ 85 37.槽口请简述 ................................................................................................................................. 85 38.Watch 请简述 ............................................................................................................................ 86 - 7 - - 8 - 39.Vant Ui 请简述下 ...................................................................................................................... 86 40.计算属性与 watch 区别 ........................................................................................................... 86 41.mvvm 框架是什么？它和其它框架（ jquery）的区别是什么？哪些场景适合？ ........... 86 42.Vue 首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题 ........... 87 43.Vue 双数据绑定过程中，这边儿数据改变了怎么通知另一边改变 ................................... 87 44.Vuex 流程 .................................................................................................................................. 88 45.Vuex 怎么请求异步数据 .......................................................................................................... 88 46.Vuex 中 action 如何提交给 mutation 的 ............................................................................. 88 47.Route 与 router 区别 .............................................................................................................. 89 49.vuex 的 State 特性是？ ........................................................................................................... 89 50.vuex 的 Getter 特性是？ ......................................................................................................... 89 51.vuex 的 Mutation 特性是？ ................................................................................................... 90 52.vuex 的 actions 特性是？ ....................................................................................................... 90 54.vuex 的优势 ............................................................................................................................... 90 55.Vue 路由懒加载（按需加载路由） ........................................................................................ 91 56.v-for 与 v-if 优先级 .................................................................................................................. 91 57.请写出饿了么 5 个组件 ............................................................................................................ 91 58.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？ ............... 91 59.说说你对 proxy 的理解 .......................................................................................................... 92 60.Vue3.0 是如何变得更快的？（底层，源码） ..................................................................... 92 React 相关 ............................................................................................................................... 93 1.fetch VS ajax VS axios ............................................................................................................. 93 - 9 - 2.React 事件处理---修改 this 指向 ............................................................................................. 93 3.请简述你对 react 的理解 ........................................................................................................... 94 4.react 组件之间的数据传递 ........................................................................................................ 94 5.Vue 与 react 区别 ....................................................................................................................... 95 6.请简述虚拟 dom 与 diff 算法 ................................................................................................... 95 7.你对组件的理解 ........................................................................................................................... 96 8.调用 setState 之后发生了什么？ ........................................................................................... 96 9.react 生命周期函数 ................................................................................................................... 96 10.为什么虚拟 dom 会提高性能?(必考) ................................................................................... 97 11.(组件的)状态(state)和属性(props)之间有何不同 ................................................................ 97 12.shouldComponentUpdate 是做什么的 ............................................................................ 97 13.react diff 原理 .......................................................................................................................... 98 14.何为受控组件 ............................................................................................................................. 98 15.调用 super(props) 的目的是什么 ........................................................................................ 98 16.React 中构建组件的方式 ........................................................................................................ 99 17.简述 flux 思想 .......................................................................................................................... 99 18.React 项目用过什么脚手架？Mern? Yeoman? ................................................................. 99 19.应该在 React 组件的何处发起 Ajax 请求？ ................................................................... 100 20.何为高阶组件(higher order component)？ .................................................................... 100 小程序相关 ............................................................................................................................. 101 1.小程序的优势 ............................................................................................................................. 101 2.小程序的页面构成（ 4 个文件） ............................................................................................. 101 3.小程序的生命周期 .................................................................................................................... 101 4.小程序如何请求数据 ................................................................................................................ 102 5.如何提高小程序的首屏加载时间 ............................................................................................ 102 6.请简述你经常使用的小程序的组件 ........................................................................................ 102 7.Wxss 与 css 的区别请简述 ...................................................................................................... 103 8.小程序如何实现响应式 ............................................................................................................ 103 9.怎么优化小程序 ......................................................................................................................... 103 10.小程序如何显示用户头像与用户名 ...................................................................................... 104 11.请谈谈小程序的双向绑定和 vue 的异同？ ......................................................................... 104 12.小程序中传参是怎么传的 ...................................................................................................... 105 13.和 vue 类比介绍 ..................................................................................................................... 105 14.说一下微信小程序的适配问题 .............................................................................................. 105 15.小程序页面间有哪些传递数据的方法？ .............................................................................. 105 16.你是怎么封装微信小程序的数据请求的 .............................................................................. 105 17.说一下微信小程序的适配问题 .............................................................................................. 105 18.小程序跳转页面的方式 .......................................................................................................... 105 19.微信小程序如何跳转到其他小程序 ...................................................................................... 105 20.小程序加载过慢的解决方式 .................................................................................................. 105 其他高频 .................................................................................................................................. 105 1.Typescript 是什么 请简述？ .................................................................................................. 105 2.Typescript 与 javascript 的优势？ ...................................................................................... 105 3.Webpack 与 gulp 区别 ........................................................................................................... 105 - 10 - 4.请简述 webpack 中的 loaders 与 plugin 的区别 ............................................................... 106 5.怎么提升页面性能？性能优化有哪些？ ................................................................................ 106 6.Node 使用来做什么的 ............................................................................................................. 106 7.说一下 webpack 的打包原理 ................................................................................................. 107 8.Commonjs ES6 模块区别？ ................................................................................................... 107 9.Git 如何使用/常用指令有哪些 ................................................................................................ 107 10.你们后台用的是什么技术 ...................................................................................................... 107 11.你的项目比较小为什么还是用 vue 全家桶 ......................................................................... 107 12.请简述你在项目中使用的 ui 框架 ........................................................................................ 107 13.什么是 cors ............................................................................................................................. 107 14.说一下对 websocked 的理解 ............................................................................................... 107 15.后台传递过来的数据是那些 .................................................................................................. 108 16.谈谈 Ajax，fetch，axios 的区别 ......................................................................................... 108 企业中的项目流程 ............................................................................................................. 108 1.WEB 前端项目开发流程 ........................................................................................................... 108 2.大公司和小公司开发的区别 .................................................................................................... 110 奇葩问题 .................................................................................................................................. 111 1.你们后端开发用的什么？ ........................................................................................................ 111 2.移动端如何刷新页面？ ............................................................................................................ 111 3.项目初始化构建流程 ................................................................................................................ 111 4.项目中自己觉得骄傲的地方？ ................................................................................................ 111 5.说说自己的缺点 ......................................................................................................................... 111 - 11 - 6.热部署是什么？ ......................................................................................................................... 111 7.用户有多少 ................................................................................................................................. 111 8 怎么调用接口（是怎么跟后台沟通的） ................................................................................ 111 9.单元格测试是怎么做的 ............................................................................................................ 111 10.开发环境，测试环境，上线环境的环境变量你们在开发中是如何处理的 ..................... 111 HTML 、 CSS 、浏览器 相关： 1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以 jpeg 格式存储时，提供 11 级压缩级别 2. 请简述 css 盒子模型 一个 css 盒子从外到内可以分成四个部分：margin（外边距），border （边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和 height 属性只是设置 content（内容）的宽和高， 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 第 1 页 盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框 3. 视频 / 音频标签的使用 视频：<video src=””></video> 视频标签属性： src 需要播放的视频地址 width/height 设置播放视频的宽高，和 img 标签的宽高属性一样 autoplay 是否自动播放 controls 是否显示控制条 poster 没有播放之前显示的展位图片 loop 是否循环播放 perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属 性，perload 属性会失效。 muted 静音模式 音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用 <audio> <source src=”” type=””> </audio> 4.HTML5 新增的内容有哪些 新增语义化标签 第 2 页 第 3 页 新增表单类型 表单元素 表单属性 表单事件 多媒体标签 5.Html5 新增的语义化标签有哪些 语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护 Header 页面头部 main 页面主要内容 footer 页面底部 Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容 Section 相 当 于 div figure 加 载 独 立 内 容 （ 上 图 下 字 ） figcaption figure 的标题 Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须 配合 open 属性） Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式 ogg，mp3，wav） 6.Css3 新增的特性 边框： border-radius 添加圆角边框 border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，insetr（内/外部阴影）） border-image：设置边框图像 border-image-source 边框图片的路径 第 4 页 border-image-slice 图片边框向内偏移 border-image-width 图片边框的宽度 border-image-outset 边框图像区域超出边框的量 border-image-repeat 图像边框是否平铺（ repeat 平铺 round 铺满 stretch 拉伸） 背景： Background-size 背景图片尺寸 Background-origin规定background-position属性相对于什么位置定 位 Background-clip 规定背景的绘制区域（padding-box，border-box， content-box） 渐变： Linear-gradient（）线性渐变 Radial-gradient（）径向渐变 文本效果： Word-break：定义如何换行 Word-wrap：允许长的内容可以自动换行 Text-overflow：指定当文本溢出包含它的元素，应该干啥 Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色） 转换： Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜 Transform-origin 可以更改元素转换的位置，（改变 xyz 轴） Transform-style 指定嵌套元素怎么样在三位空间中呈现 2D 转换方法： rotate 旋转 translate（ x，y）指定元素在二维空间的位移 scale（ n） 定义缩放转换 3D 转换方法： Perspective（ n）为 3D 转换 translate rotate scale 过渡： Transition-proprety 过渡属性名 Transition-duration 完成过渡效果需要花费的时间 Transition-timing-function 指定切换效果的速度 Transition-delay 指定什么时候开始切换效果 动画：animation Animation-name 为@keyframes 动画名称 animation-duration 动画需要花费的时间 animation-timing-function 动画如何完成一个周期 animation-delay 动画启动前的延迟间隔 animation-iteration-count 动画播放次数 animation-direction 是否轮流反向播放动画 篇幅有限，查看更多详资料2023年大厂前端面试手册