超全！前端面试题大汇总
HTML
HTML5 的新特性？
为什么要在 html 文件开头加上一个<!DOCTYPE html>
DOCTYPE 的作用，严格与混杂模式的区别，有何意义
HTML5 为什么只需要写<!DOCTYPE HTML>
请写出 table 标签下面会包含哪些标签元素
很多网站不常用 table iframe 这两个元素，知道原因吗？
jpg 和 png 格式的图片有什么区别？
常用浏览器有哪些，内核都是什么？
a 标签在新窗口打开链接怎么加属性？
form 标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？
css
元素水平垂直居中的方法
flex 布局介绍。
css 盒模型中，IE 盒模型和标准盒模的区别。
选择器的优先级。
css 中 link 和 @import 的区别。
position 的属性。
介绍下和伪元素和伪类。
如何清除浮动。
less 和 sass 是什么？他们的区别。
如何实现页面适配 简写代码
原生复选框如何去点击改变里面的样式？比如把点击勾选的样式变成圆圈的样式？
了解过处理兼容性的问题吗？
标准的 CSS 的盒子模型？
说下盒模型?
与低版本 IE 的盒子模型有什么不同的？
box-sizing 属性？
盒子模型在不同浏览器上的区别
不定宽高水平垂直居中？
文字在垂直和水平方向重叠的两个属性分别是什么？
如何居中 div
为什么 margin: 0 auto 会让 div 居中
对 BFC 的理解？
如何触发 BFC？
BFC 解决了什么问题？
为什么 overflow:hidden 能触发 bfc？
Position 定位值有哪些？
absolute 的 containing block 计算方式跟正常流有什么不同？
display 有哪些值？说明他们的作用?
display:none 与 visibility：hidden 的区别？
display:inline-block 什么时候会显示间隙？
overflow 属性定义溢出元素内容区的内容会如何处理?
visibility 属性有个 collapse 属性值？在不同浏览器下以后什么区别？
position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
margin 和 padding 分别适合什么场景使用？
CSS 常用选择器
哪些属性可以继承？
CSS 优先级算法如何计算？
CSS3 新增伪类有那些?
::before 和 :after 中双冒号和单冒号的区别？这 2 个伪元素的作用？
Flex 布局
请解释一下 flexbox（弹性盒布局模型）,以及适用场景？
如何让 DOM 元素不显示在浏览器的可视范围内？
一个满屏品字布局如何设计?
常见的兼容性问题？
浏览器兼容性有哪些
CSS 预处理器
CSS 3 的新增特性？
CSS 创建一个三角形
CSS 初始化样式是为什么？
CSS 优化 提高性能的方法有哪些？
CSS 选择器是怎样被浏览器解析的？
CSS Sprites
CSS Hack 是什么?ie6,7,8 的 hack 分别是什么？
CSS 引入方式？
移动端的布局用过媒体查询吗
在网页中的应该使用奇数还是偶数的字体？为什么呢？
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了 CSS 的哪些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
视差滚动效果？
li 与 li 之间不可见空白间隔引起原因？解决办法？
width: auto 和 width: 100% 的区别
有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？
style 标签写在 body 后与 body 前有什么区别？
使用 base64 编码的优缺点
超链接访问过后 hover 样式就不出现的问题时什么？如何解决？
rgba()和 opacity 的透明效果有什么区别？
px 和 em 的区别
描述一个“reset”的 css 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处吗?
vue react
vue 的生命周期有哪些。
子组件和父组件如何传值的。
v-if 和 v-show 之间的区别。
介绍以下 watch 和 computed vue 中 watch 的用法和讲解
vue2 是如何监听数据的
为啥不使用全局对象来管理数据，要用 vuex
自定义指令哪些参数 自定义指令的生命周期
vue2x 监听方面有什么缺点？所以才有了 vue3.0
使用路由懒加载的时候，如何让点击加载 A 页面的时候，B 页面也能加载？
.react 跟 vue 的区别？
不用 v-model 是怎样实现双向数据绑定的？比如我用的不是 input 输入框，而是下拉选择，是怎样实现的？
react diff 大致原理
react setState 什么时候同步什么时候异步为什么会这样
你们当前 react 版本多少，此版本做了哪些优化
跳转页面时如何去监听路由的变化？
hook 中 setState 原理
什么是 vue 生命周期？
详细说明生命周期
vue 生命周期的作用是什么？
vue 生命周期总共有几个阶段？
第一次页面加载会触发哪几个钩子？
DOM 渲染在 哪个周期中就已经完成？
Vue 内置指令
vue-cli 如何新增自定义指令？
v-if 和 v-show 区别
Vue 模板语法-插值
vue 几种常用的指令
事件修饰符
键值修饰符
计算属性 computed
计算属性与 methods 的区别
计算属性与 watch 的区别
什么是 vue 的计算属性？
插槽 slot
Vue 的双向绑定数据的原理
单向数据流和双向数据绑定
单向数据流
双向数据绑定
Vue 如何去除 url 中的 #
组件通信
父组件向子组件通信
子组件向父组件通信
vue-router 相关
vue-router 是什么 它有哪些组件？
vue-router 路由实现
$route 和 $router 的区别
怎么定义 vue-router 的动态路由？
怎么获取传过来的动态参数？
Vue 的路由实现：
前端怎么控制管理路由
vue-router 提供两种模式的原因？
Hash 基本介绍
vue-router 原理
active-class 是哪个组件的属性？嵌套路由怎么定义？
谈谈你对 MVVM 开发模式的理解
为什么会出现 MVVM
虚拟 dom 的原理
说一下 virtual Dom 中 key 的作用
为什么要使用虚拟 DOM？
Vuex 是什么？怎么使用？哪种功能场景使用它？
Vue 3.0
Vue 组件 data 为什么必须是函数
Vue 中怎么自定义过滤器
Vue 中 key 的作用
简述 Vue 的响应式原理
Vue 中如何监控某个属性值的变化？
Vue 组件间的参数传递
css 只在当前组件起作用
vue.js 的两个核心是什么？
vue 常用的修饰符？
vue 等单页面应用及其优缺点
MVC
vue.nextTick 实现原理
Emit 事件怎么发，需要引入什么
使用 import 时，webpack 对 node_modules 里的依赖会做什么
vue 怎么监听数组
Proxy 相比于 defineProperty 的优势
RESTful
架构优点
什么是 RESTful API？怎么使用?
RESTful 架构设计原则（不同公司具体细节可能不同）：
vue 组件的优点，以及注册使用的过程
Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中？
js
this 指向问题
promise 说一下 promise 的原生实现 实现 promise 并指出为何能够实现.then 连续调用
箭头函数 使用箭头函数应注意什么
解构赋值
Ajax 以及 axios 使用和二次封装 通过 axios 请求拦截器
闭包
原型 原型链
作用域
钩子函数是什么
设计模式 设计模式用过吗？最熟悉的模式是什么？
事件冒泡 事件捕获
优雅降级和渐进增强
闭包
事件委托
js 延迟加载
深拷贝和浅拷贝
重排和重绘
跨域
写一个冒泡排序
构造函数，实例，原型之间的关系
cookie sessionStorage localStorage 区别及相关安全等
Webpack 打包性能优化 webpack 大致运行流程
单例模式的实现原理是什么 手写一个
说一下输入 URL 到页面显示的过程，越详细越好
手写 JS 的继承
说一下宏任务和微任务有什么区别 那么 promise 和 setTimeout 会谁先执行
说一下 vue 双向绑定实现的原理
es6 了解过吗？模块化是怎么实现的？怎么做到变量名之间互不干扰就是模块之间如何保证互不影响，模块化是怎么做到的？
ES5 和 ES6 的区别？说一下你所知道的 ES6
class es6 变为 es5 是怎么写的
防抖怎么写
做过什么插件
大文件上传
断点续传怎么分包
数据一开始没定义，后面新增，不会变化，怎么修改
import 和 require 的区别
表单提交的时候的报文头
图片在线预览 new blob
事件循环(出了好几道)
深拷贝
静态资源缓存是怎样实现的？cdn 加速又是怎样实现的
使用 axios 请求时 ，如何中断请求
存储数据在浏览器有哪些方法？如何设置一个时间让存储在浏览器里面的数据消失？
浏览器的缓存策略是怎样的？如何给强缓存设置过期时间？协商缓存发送了什么请求？
原型链相关
实现 class 中的 extends
Proxy 为什么不能被 babel polyfill
如何压缩图片？
当 git 上传之后，发现代码有 bug，该如何去做？
object.definedproperty 参数有哪些？分别是哪些？
了解过处理兼容性的问题吗？
video 如何实现自动播放？
发送请求要不要加密？是如何加密的？全部都能请求到后台数据吗？
怎样实现路由懒加载？不用懒加载有什么后果？
为什么不直接用 mutaction 去发送请求，请求之后直接修改数据。而要在 action 里面发送异步请求？
ES6 怎么写 class ，为何会出现 class？
实现 compose 函数
扩展运算符与 rest 运算符的区别？
解决异步的方式有哪些
event loop 简述原理
ajax 原理
ajax 到 async 的发展过程
什么是同源策略？
跨域的方式及原理？
Axios 的特点
es5 与 es6 继承方式？
处理数组用过哪些方法？
数组对象，变异和非变异方法？
js 判断是不是数组的方法？
数组去重有哪些方法？
利用 set 的唯一性来达到去重效果（es6 中最常用）
利用双重 for 循环，然后 splice 去重（es5 中最常用）
利用 indexOf 去重
利用 sort（）排序方法来实现
利用 es7 中新增的 includes 方法
利用 hasOwnProperty()方法和 filter
处理字符串用过哪些方法？
处理对象用过哪些方法？
Math 对象常用的方法？
js 的数据类型有哪些？
substr 与 substring 的区别？
数组的 map，filter，forEach 的区别？
闭包？
闭包的适用场景？
什么是内存泄漏？
如何解决内存泄漏？
什么是垃圾回收机制？
说下原型链？
js 事件流？
深拷贝和浅拷贝？
DOM 操纵 增删改查？
如何做防止重复提交？
防抖和节流
网络
http 常见状态码
跨域
表单请求的 header
http 与 https 区别 https 大致实现原理
服务端渲染与客户端渲染相比好处，减少多少首屏渲染时间
怎样解决跨域跨域时的请求头 option 请求什么时候发
http1.1 跟 http2.0 有什么区别？
算法
排序数组去重 要求不新建情况下返回去重后的新数组元素个数
二叉树镜象
数组输出翻转后的数组 要求空间复杂度为 0（1）
根据最小位进行排序相同则根据进位排序例 in: [1,20,33,31,50] out: [20,50,1,31,33]14.实现相同数字消除例如[1,3,2,2,2,3,5] => [1,3,3,5] => [1,5]
爬楼梯只能爬 1 梯或 2 梯求爬第 n 梯有几种跳法
ast 语法树都能干哪些事
实现柯里化函数
了解过 diff 算法吗？是如何计算的？
小程序
小程序中是否能实现后端可配置动态页面，是否能过微信审核
小程序渲染出页面整个流程
微信小程序生命周期？
微信小程序用哪种响应式方案？
优化
怎样减少 http 请求？
项目部署时候，前端还有什么优化性能方案
安全
对 web 性能安全有什么了解吗？（主要说了 xss 和 csrf）
xss 一般会过滤什么？（尖括号、斜杠）
为什么要过滤尖括号？（可以插入脚本，如)
了解过哪些 web 安全及防护原理？
手写部分：
1. 以下代码会不会报错，如何不报错输出什么，为什么?（备注，es6 介绍下）var y = 10;if (!(x in window)) {var x = 10;} else {++y;}
2. 以下代码会不会报错，如何不报错输出什么，为什么?（备注，数据类型介绍）var a = {n: 1};var b = a;a = {n: 2}a.x = a;console.log(a.x);console.log(b.x);
3. 以下代码输出什么。（备注，闭包介绍）for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 1000);}
版权声明: 本文为 InfoQ 作者【肥晨】的原创文章。
原文链接:【http://xie.infoq.cn/article/cfc4913ce577df6ba50fecc78】。文章转载请联系作者。
还未添加个人签名 2021-04-15 加入
平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域：前端 公众号：农民工前端
评论