285页解析百度、阿里、腾讯前端面试题，通关秘籍请收好！

你的名字 2023-01-19 03:25 59阅读 0赞

## 前言 ##

前端面试题解析主要内容包括**HTML、CSS、JS、ES6、Vue、生命周期相关、Vue-router、Vuex、React、React Native、微信小程序、IOS/Andriod浏览器适配问题整理、Pc端兼容性问题、webpack的原理、项目类问题**等等。

解析百度、阿里、腾讯大厂面试被问到的题目，也涵盖了初中级前端技术点。文章所列出来的是主要大纲部分，详细内容[请点击这里直接领取哦][Link 1]

## HTML ##

*  Doctype的作用？
 *  标准模式和怪异模式的区别：
 *  行内元素/块级元素/空元素有哪些？
 *  介绍一下你对浏览器内核的理解?
 *  常用浏览器的内核有哪些？
 *  浏览器是怎么对HTML5的离线储存资源进行管理和加载的？
 *  .描述一下cookies/sessionStorage和localStorage的区别?
 *  HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？
 *  简述一下你对HTML语义化的理解?
 *  HTML5离线缓存怎么使用，工作原理能不能解释一下？
 *  页面导入样式时,使用link和@import有什么区别?
 *  Iframe有哪些缺点?
 *  Label的作用是什么?怎么用?
 *  HTML5的form如何关闭自动完成功能?
 *  如何实现浏览器内多个标签之间的通信?
 *  页面可见性有哪些用途?(visibility API)  
    ![9d3d58b1c1f8a6ebb9bac07d05ab0e11.png][]

## CSS ##

*  浏览器盒模型?
 *  清除浮动的方式
 *  CSS选择器有哪些?哪些属性可以继承?
 *  ::after/:after与::before/:before的区别?
 *  CSS样式优先级计算法:
 *  CSS3新特性和伪类有哪些?
 *  less的一些优势。
 *  如何居中div?
 *  Display有哪些哪些值?说明他们的作用
 *  Position的值?
 *  flex布局以及常用属性
 *  请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
 *  CSS打造三角形?
 *  满屏品字布局?
 *  li与li之间有看不见的空白间隙是什么原因引起来的?
 *  为什么要初始化css样式?
 *  CSS中的visibility属性的collapse\[kə’læps\]属性是干嘛的?
 *  外边距合并是指的什么意思?
 *  移动端的布局用过媒体查询吗?
 *  响应式页面?  
    ![ff5a9e9553c8513f4c096ce29d461a8e.png][]

## JS ##

*  JS是一种什么样的语言?
 *  JS数据类型有哪些?
 *  介绍JS有哪些内置对象？
 *  栈与堆的区别?
 *  js中的作用域与变量声明提升
 *  如何转化类型?
 *  什么是面向对象编程及面向过程编程，他们的异同和优缺点
 *  面向对象编程思想
 *  如何解释this在js中起的作用?
 *  js中this的用法（经典）：
 *  ☆说说JS原型和原型链
 *  如何准确判断一个变量是数组类型?
 *  call和apply的区别和作用?
 *  继承的方法有哪些？
 *  什么是闭包？闭包有什么作用？
 *  事件代理（事件委托）:
 *  事件的各个阶段
 *  new操作符在创建实例的时候经历了哪几个阶段
 *  异步编程的实现方式
 *  对原生JS了解程度
 *  js延迟加载的方法有哪些？  
    ![725d335d102dffd1ce16272167dadf31.png][]

## ES6 ##

*  列举常用的ES6特性：
 *  箭头函数需要注意哪些地方？
 *  let、const、var
 *  拓展：var方式定义的变量有什么样的bug？
 *  Set数据结构
 *  拓展：数组去重的方法
 *  箭头函数this的指向。
 *  手写ES6 class继承。
 *  generator生成器函数:
 *  什么是async/await及其如何工作?
 *  async函数的基本用法:
 *  async与generator的区别?
 *  简单实现async/await中的async函数
 *  有用过promise吗？请写出下列代码的执行结果，并写出你的理解思路：
 *  Object.is（）与原来的比较操作符===，==的区别？
 *  介绍一下Set、Map、WeakSet和WeakMap的区别？  
    ![2515271d92726c037b54bcf5dcb30172.png][]

## Vue ##

*  什么是MVVM?
 *  mvvm和mvc的区别？它和其他框架（JQuery）的区别是什么？哪些场景适合？
 *  Vue的优点是什么？
 *  Vue.js的两个核心是什么?
 *  Vue组件之间的传值
 *  Vue-cli中怎么使用自定义组件，又遇到过哪些问题吗?
 *  Vue如何实现按需加载配合webpack设置
 *  v-show和v-if指令的共同点和不同点
 *  如何让CSS只在当前组件中起作用
 *  的作用是什么？
 *  聊聊Keep-alive的实现原理和缓存策略
 *  Vue中引入组件的步骤
 *  Vue常用的修饰符？  
    14.什么是Vue的计算属性?
 *  Vue等单页面应用及其优缺点？
 *  指令v-el的作用是什么?
 *  在Vue中使用插件的步骤
 *  active-class是哪个组件的属性？
 *  说出至少4中vue当中的指令和它的用法？  
    ![a9fcd265bf96be41ddd98be7d2139a3f.png][]

## 生命周期 ##

*  什么是vue生命周期？
 *  vue生命周期的作用是什么？
 *  vue生命周期总共有几个阶段？
 *  请列举出3个Vue常用的声明周期钩子函数
 *  DOM渲染在那个周期中已完成？

## React ##

*  react的优势以及特点
 *  React中的props和state的用法
 *  react组件之间如何通信？
 *  为什么虚拟DOM会提高性能？
 *  react生命周期函数：
 *  react性能优化是哪个周期函数？
 *  在生命周期中的哪一步你应该发起AJAX请求？
 *  概述一下REact中的事件处理逻辑
 *  如何告诉React它应该编译生产环境版本？
 *  调用setState之后发生了什么？
 *  react的setState的原理及用法
 *  setState为什么是异步的?
 *  传入setState函数的第二个参数的作用是什么?
 *  shouldComponentUpdate的作用是啥以及为何它这么重要？
 *  createElement与cloneElement的区别是什么？  
    ![aa88d9c164252b49cfe6b502e4d79da7.png][]

## 微信小程序 ##

*  简单描述一下微信小程序的相关文件类型?
 *  你是怎么封装微信小程序的数据请求？
 *  有哪些参数传值的方法？
 *  你使用过哪些方法，来提高微信小程序的应用速度？
 *  小程序和原生App哪个好？
 *  简述微信小程序原理？
 *  分析微信小程序的优劣势
 *  微信小程序与H5的区别？
 *  怎么解决小程序的异步请求问题？
 *  小程序的双向绑定和vue哪里不一样
 *  小程序的wxss和css有哪些不一样的地方?
 *  小程序关联微信公众号如何确定用户的唯一性？  
    ![9b7a529362329068905130a2ec1794c1.png][]

## IOS/Andriod浏览器适配问题整理 ##

*  渐进增强和优雅降级:
 *  IOS移动端click事件300ms的延迟响应
 *  一些情况下，对非可点击元素（如label，span）监听click事件，IOS不会触发
 *  三星手机遮罩层下的input、select、a等元素可以被点击和focus（点击穿透）
 *  安卓浏览器看背景图时，有些设备会模糊
 *  当输入框在最底部，点击软键盘后输入框内被遮挡
 *  消除reansition闪屏
 *  CSS3动画页面闪白，动画卡顿
 *  阻止旋转屏幕时自动调整字体大小
 *  Input的placeholder会出现文本位置偏上的情况
 *  往返缓存问题：
 *  calc的兼容性处理
 *  加上一个CSS3的属性后，让所关联的元素事件监听失效
 *  防止手机中网页放大和缩小
 *  上下拉动滚动条时卡顿，慢
 *  关于图片加载
 *  关于Zepto点透
 *  html5调用安卓或者IOS的拨号功能  
    ![d6363fdc6f22a075c3bc96e9b06b3b8d.png][]

## 笔试编程题： ##

*  JS数组的顺序排序,随机排序篇
 *  编写一个九九乘法表
 *  实现一个函数，判断输入是不是回文字符串。
 *  你对重绘、重排的理解？
 *  实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置
 *  简单实现双向数据绑定mvvm
 *  为string扩展一个trim方法,取掉字符串中的所有空格
 *  JS中如何检测一个变量是string类型?请写出函数实现
 *  解释一下下面代码的输出
 *  说说以下代码运行会输出什么?
 *  14.\{\}\{\}、\[\]\[\]的执行结果
 *  \[‘1’, ‘2’, ‘3’\]. map( parseInt )的答案以及为什么?

![ee18132637dc677f7510b29e7069917d.png][]  
由于篇幅限制，展示了部分内容截图，需要完整文档资料的小伙伴[请点击这里直接领取哦][Link 1]

## 面试建议 ##

1、回答问题前思考一下，虽然不保证有用，但还是要好好履行的。

2、多面几次，指的不同公司，只要你不嫌累。

3、在面试某一家公司时，根据前面的面试，尝试推测后续考官会问到的业务的大致范围，或者问内推同学，提前做准备。一般会问：1 你简历上的项目，2 对方部门知名的产品，3 招聘 jd 上的 title。

4、简单的复盘，保证别倒在同样的问题上。

5、增加知识的广度，可以引导向别的问题，考官也是乐意听的。千万不要被牵着鼻子走。

6、挑个面试的好时间，比如我本人，早上 10 点我的脑子无比灵光，说话都带着沉稳富有磁性……晚上  
7 点后，就会莫名紧张，声音分贝提高几个点略微沙哑，这个真的因人而异。有时候沉稳不一定是好事，紧张反倒促使你偶有妙语和想法，当然也可能搞砸。

[Link 1]: https://jq.qq.com/?_wv=1027&k=bmcfl1mD
[9d3d58b1c1f8a6ebb9bac07d05ab0e11.png]: /images/20221021/a89fcc5d7b7f43b6a753e07dcd1674d8.png
[ff5a9e9553c8513f4c096ce29d461a8e.png]: /images/20221021/819c66a2da8d4525a5e9f76488f7b332.png
[725d335d102dffd1ce16272167dadf31.png]: /images/20221021/c6cdc1666c2d4d14bf92be6c7fe8306d.png
[2515271d92726c037b54bcf5dcb30172.png]: /images/20221021/ce8940c80dbb40b5b0b2cbf9d5b0bdb5.png
[a9fcd265bf96be41ddd98be7d2139a3f.png]: /images/20221021/0cf515b95fb94c7997d176d2d8a0ea5f.png
[aa88d9c164252b49cfe6b502e4d79da7.png]: /images/20221021/32b1ac4710e642758ee8e93f8775e1bf.png
[9b7a529362329068905130a2ec1794c1.png]: /images/20221021/5f787d4d9da14a0d86f33680c0a9701c.png
[d6363fdc6f22a075c3bc96e9b06b3b8d.png]: /images/20221021/2977b7eeb5084f5688c92e1c9e852eaf.png
[ee18132637dc677f7510b29e7069917d.png]: /images/20221021/1d4935a940f240ac9db51d88a1098bb3.png