前端一面（字节，百度，阿里 ......）面试题收藏！

╰+攻爆jí腚メ 2023-01-20 11:47 9阅读 0赞

### 前言 ###

一面都比较偏基础，大部分题目都会，即使不会也似曾相识，都能说上几句。但为什么有些人能过有些人过不了，这就是考查你的基础知识是否全面且扎实，这就需要平常的积累了。

**字节一面**：

*  自我介绍
 *  vue router 有哪些api
 *  web页面生命周期和dom生命周期
 *  vue生命周期
 *  数据请求写在哪个生命周期函数中
 *  promise 有什么api
 *  promise.all的参数是什么
 *  promise代码输出
 *  宏任务微任务
 *  settimeout代码看输出
 *  防抖节流函数 有什么区别
 *  css中实现单行多行文字截断
 *  垂直居中
 *  函数柯里化
 *  怎么学习前端

**百度一面**：

*  自我介绍
 *  你了解事件循环吗？
 *  微观任务/宏观任务执行顺序，微观任务创建的微观任务怎么执行？
 *  介绍一下flex；
 *  回流/重绘简单介绍一下，BFC了解吗？transform会造成回流吗 ？
 *  前端安全你了解多少？
 *  你接触过同源策略吗？为什么要有同源策略？
 *  你了解过vue吗？
 *  说一下原型链
 *  new关键字
 *  协商缓存/强缓存简单说一下
 *  你为什么学习前端？
 *  前端页面的性能有关注过吗？怎样提升页面的性能？
 *  怎么优化首屏时间？

**阿里一面**：

*  自我介绍
 *  项目
 *  let const
 *  call apply
 *  对象的遍历方式
 *  ESmodule CommonJS
 *  浏览器的缓存方式
 *  三栏等分布局
 *  预编译期
 *  事件的传递过程
 *  typescript用过吗
 *  因为前端过于简单了可能 主要聊的服务端
 *  反问

**快手一面（实习）**：

*  自我介绍
 *  项目
 *  localStorage，sessionStorage，cookie区别
 *  http2 新功能
 *  解释二进制分帧
 *  sass有什么功能？
 *  vue router用法？
 *  怎么动态传参？
 *  ES6新特性有哪些？
 *  引出weakMap和Map区别
 *  写一下用reduce给数组求和
 *  懒加载
 *  vue双绑原理
 *  vue router中两种模式的区别？解释原理？
 *  跨域相关
 *  移动端适配方案有哪些？哪个更好？
 *  水平垂直居中
 *  说说两种盒模型？
 *  vuex的使用？
 *  mutation和action区别
 *  组件中的data用箭头函数行不行
 *  如何让前端禁用cookie？
 *  怎么学前端？
 *  算法题：大数相加

**腾讯一面（实习）**：

*  自我介绍
 *  可以实习多久
 *  讲一下队列和栈，以及应用场景
 *  说一下闭包
 *  Promise 解决了什么问题，有什么问题；
 *  async-await 解决了什么问题
 *  Nodejs 如何实现高并发的
 *  Nodejs 的 eventloop
 *  了解 ES6 吗
 *  跨域方法
 *  jsonp 的 script 何时执行，cors 设置什么头
 *  了解哪些设计模式
 *  知道 react 的 hook吗
 *  React 兄弟间传参的方式场景题：有一个下拉框，点击某一个选项，框中进行展示：在react中，props和state分别怎么设计
 *  http 和 https 的区别
 *  Vue 的 MVVM 设计，底层原理
 *  compile 的实现
 *  Class 中 static 的属性和普通属性的区别
 *  nginx 的配置
 *  项目中觉得做得好的地方是什么

### 面试题总结 ###

> 内容大纲包括**HTML，CSS，JavaScript，jQuery，浏览器，HTTP，React，小程序**，需要可以私信 “前端面试” [免费领取][Link 1]！

**HTML、CSS相关**

*  网络中使用最多的图片格式有哪些
 *  请简述css盒子模型
 *  视频/音频标签的使用
 *  HTML5新增的内容有哪些
 *  HTML5 新增的语义化标签有哪些
 *  CSS3新增的特性
 *  清除浮动的方式有哪些？请说出各自的优点
 *  定位的属性值有何区别
 *  子元素如何在父元素中居中
 *  Border-box与content-box的区别
 *  元素垂直居中
 *  如何让chrome浏览器显示小于12px的文字
 *  CSS选择器有哪些，那些属性可以继承，优先级如何计算？
 *  CSS3新增的伪类有哪些？
 *  网页中有大量图片加载很慢 你有什么办法进行优化？
 *  行内元素/块级元素有哪些？
 *  浏览器的标准模式和怪异模式区别？
 *  Margin和padding在什么场合下使用
 *  弹性盒子布局属性有那些请简述?
 *  怎么实现标签的禁用
 *  Flex布局原理
 *  px，rem，em的区别
 *  网页的三层结构有哪些
 *  请简述媒体查询
 *  三栏布局方式两边固定中间自适应
 *  Doctype作用
 *  CSS 预处理 sass less 是什么？为什么使用他们
 *  怎么转换less为css

![addee3d6941c6852b40a72ace65165e9.png][]

**JavaScript相关**

*  Js基本数据类型有哪些
 *  Ajax如何使用
 *  如何判断一个数据是NaN
 *  闭包是什么？有什么特性？对页面会有什么影响
 *  Js中常见的内存泄漏：
 *  事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）
 *  什么是事件冒泡？
 *  本地存储与cookie的区别
 *  ES6新特性
 *  Let与var与const的区别
 *  数组方法有哪些请简述
 *  请掌握2种以上数组去重的方式
 *  什么是面向对象请简述
 *  普通函数和构造函数的区别
 *  请简述原型 / 原型链 /（原型）继承
 *  Promise的理解
 *  请简述async的用法
 *  一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
 *  Js中.call()与.apply()区别
 *  为什么会造成跨域/请简述同源策略
 *  This指向
 *  什么是jsonp工作原理是什么？他为什么不是真正的ajax
 *  请写出一个简单的类与继承
 *  同步与异步的区别/阻塞与非阻塞区别
 *  为什么js是弱类型语言
 *  箭头函数与普通函数的区别
 *  For循环与map循环有什么区别
 *  原型和继承，prototype，call和apply继承的区别
 *  深浅拷贝是什么如何实现？
 *  什么时候用深拷贝 /浅拷贝
 *  什么是js内存泄露？
 *  什么是csrf攻击
 *  预加载和懒加载的区别，预加载在什么时间加载合适
 *  Js的函数节流和函数防抖的区别

![e10c44cec5e6c70b662ad56ced6783f1.png][]

**jQuery相关**

*  什么是jQuery？
 *  为什么要使用jQuery？jquery有哪些好处？
 *  Jquery选择器有哪些
 *  Jquery插入节点的方法
 *  jQuery对象和DOM对象是怎样转换的
 *  jQuery中.get()提交和.post()提交的区别
 *  怎么使用jQuery中的动画
 *  jQuery中如何来获取和设置属性
 *  如何来设置和获取HTML和文本的值？
 *  jQuery中有哪些方法可以遍历节点？
 *  $(this) 和 this 关键字在 jQuery 中有何不同？
 *  jQuery 里的 each() 是什么函数？你是如何使用它的？
 *  Query中的Delegate()函数有什么作用？

![3b59bdfb69f24316ceedb7154317910a.png][]

**浏览器，HTTP相关**

*  http是什么？有什么特点
 *  HTTP协议和HTTPS区别
 *  请简述ajax的执行过程 以及常见的HTTP状态码
 *  Get和post不同
 *  请输出三种减少页面加载时间的方式
 *  重绘和回流是什么
 *  你如何对网站的文件和资源进行优化？

![1bb18e6d107f93958a32ae967567665f.png][]

**Vue相关**

*  Vue的核心是什么
 *  请简述你对vue的理解
 *  请简述vue的单向数据流
 *  Vue常用的修饰符有哪些
 *  v-text与\{ \{\}\}与v-html区别
 *  v-on可以绑定多个方法吗
 *  Vue循环的key作用
 *  什么是计算属性
 *  Vue单页面的优缺点
 *  Vuex是什么？怎么使用？在那种场景下使用
 *  Vue中路由跳转方式（声明式/编程式）
 *  路由中name属性有什么作用？
 *  vue跨域的解决方式
 *  Vue的生命周期请简述
 *  Vue生命周期的作用
 *  DOM渲染在那个生命周期阶段内完成
 *  Vue路由的实现
 *  Vue路由模式hash和history，简单讲一下
 *  Vue路由传参的两种方式，params和query方式与区别
 *  Vue数据绑定的几种方式
 *  Vue注册一个全局组件
 *  Vue的路由钩子函数/路由守卫有哪些
 *  Vue中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？
 *  Elementui中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？
 *  Vue中指令有哪些
 *  Vue如何定义一个过滤器
 *  对vue 中keep-alive的理解
 *  如何让组件中的css在当前组件生效
 *  Vue生命周期一共几个阶段
 *  Mvvm与mvc的区别
 *  Vue组件中的data为什么是函数
 *  Vue双向绑定的原理
 *  Vue中组件怎么传值
 *  Bootstrap的原理
 *  槽口请简述
 *  Watch请简述
 *  Vant Ui请简述下
 *  计算属性与watch区别
 *  mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
 *  Vue首屏加载慢的原因，怎么解决的，怎么解决白屏问题
 *  Vue双数据绑定过程中，这边儿数据改变了怎么通知另一边改变
 *  Vuex流程
 *  Vuex怎么请求异步数据
 *  Vuex中action如何提交给mutation的
 *  Route与router区别
 *  vuex的State特性是？
 *  vuex的Getter特性是？
 *  vuex的Mutation特性是？
 *  vuex的actions特性是？
 *  vuex的优势
 *  v-for与v-if优先级

![804e71a2642fd1f0efed92991a563869.png][]

**React相关**

*  fetch VS ajax VS axios
 *  React事件处理—修改this指向
 *  请简述你对react的理解
 *  react组件之间的数据传递
 *  Vue与react区别
 *  请简述虚拟dom与diff算法
 *  调用 setState 之后发生了什么？
 *  react 生命周期函数
 *  为什么虚拟 dom 会提高性能?(必考)
 *  State与props区别
 *  shouldComponentUpdate 是做什么的
 *  react diff 原理
 *  何为受控组件
 *  调用 super(props) 的目的是什么
 *  React 中构建组件的方式

![057e69eb01253c5e5b6ab98bfb629483.png][]

**小程序相关的**

*  小程序的优势
 *  小程序的页面构成
 *  小程序的生命周期
 *  小程序如何请求数据
 *  如何提高小程序的首屏加载时间
 *  请简述你经常使用的小程序的组件
 *  wxss与css的区别请简述
 *  怎么优化小程序
 *  小程序如何显示用户头像与用户名
 *  请谈谈小程序的双向绑定和vue的异同？

> 篇幅限制，展示了部分内容截图，需要面试题文档完整版的，可以点赞支持❤，【[点击这里][Link 1]】免费获取！

![5038c2dcf9a4ed0271add3f307d7bd23.png][]

[Link 1]: https://jq.qq.com/?_wv=1027&k=JLfw1yS1
[addee3d6941c6852b40a72ace65165e9.png]: /images/20221021/663823e83fcf4ca682c540ab71bbb3e0.png
[e10c44cec5e6c70b662ad56ced6783f1.png]: /images/20221021/b94ea81e471b4060a0cab7c6bc8b08e8.png
[3b59bdfb69f24316ceedb7154317910a.png]: /images/20221021/b7a6097dc7914a69b3f2284a8c5668de.png
[1bb18e6d107f93958a32ae967567665f.png]: /images/20221021/c7e8720c6ec44266ba2a30a987a059e6.png
[804e71a2642fd1f0efed92991a563869.png]: /images/20221021/f753e73d53a14cc9bfaf6927311f1db6.png
[057e69eb01253c5e5b6ab98bfb629483.png]: /images/20221021/8fe3eb7837394a6d8614070f289ff819.png
[5038c2dcf9a4ed0271add3f307d7bd23.png]: /images/20221021/2edb06bee0c14cd6bc20416c9df38589.png