前端常见面试题html/css，js，ES6，Vue，前端工程化等等

最近找工作阶段，总结了不少前人的面经，总想整理的特别特别好再发出来，但是发现如果一直等等等的话，就不知道等到猴年马月了，先发一些吧，持续更新！！！

答案自己去整理吧，整理的过程也是学习的过程~~~

格式没有统一看着很尴尬啊，以后有时间再弄吧emmm

 

基础

 

简单介绍一下自己，为什么选择做前端？

介绍下你最近的项目？

说出你觉得自己身上最优秀的能力？

说出你未来的规划？

你最近有没有什么想要学习的技术？

你有什么要问我的？

HTML、CSS篇以及布局相关

• 说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
• position的值有哪些？
• css选择器有哪些？选择器的优先级？
• CSS属性选择器和伪类选择器的优先级?
• 使用css实现一个持续的动画效果
• animate和translate有没有用过，一些常见的属性说下？
• CSS实现宽度自适应100%，宽高16:9的比例的矩形。
• 如何实现左边两栏一定比例，左栏高度随右栏高度自适应？
• css有哪些垂直水平居中方式？
• 右边宽度固定，左边自适应怎么布局？
• Flex布局用的多吗？
• 移动端适配怎么做的？
• 你用到了Flex，请问flex怎么设置垂直水平居中？

JavaScript篇(重要)

• 变量提升遇到的一些简单code题
• 说一下对闭包的理解，以及你在什么场景下会用到闭包？
• 说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？
• iframe的缺点有哪些？ 
• Ajax的原生写法
• 为什么会有同源策略？
• 前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决
• 怎么判断两个对象是否相等
• 代码实现一个对象的深拷贝
• 从发送一个url地址到返回页面，中间发生了什么
• 说下工作中你做过的一些性能优化处理
•  js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
•  如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
• * JS常见的dom操作api
• * 解释一下事件冒泡和事件捕获
• * 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
• * 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
• * this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
• * call，apply，bind
• * 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
• * 创建对象的多种方式
• * 实现继承的多种方式和优缺点
• * new 一个对象具体做了什么
• * 手写Ajax，XMLHttpRequest
• * 变量提升
• * 举例说明一个匿名函数的典型用例
• * 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
• * attribute和property的区别
• * document load和document DOMContentLoaded两个事件的区别
• * === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
• * typeof能够得到哪些值
• * 什么是“use strict”,好处和坏处
• * 函数的作用域是什么？js 的作用域有几种？
• * JS如何实现重载和多态
• * 常用的数组api，字符串api
• * 原生事件绑定（跨浏览器），dom0和dom2的区别？
• * 给定一个元素获取它相对于视图窗口的坐标
• * 如何实现图片滚动懒加载
• * js 的字符串类型有哪些方法？ 正则表达式的函数怎么使用？
• * 深拷贝
• * 编写一个通用的事件监听函数
• * web端cookie的设置和获取
• * setTimeout和promise的执行顺序
• * JavaScript 的事件流模型都有什么？
• * navigator对象，location和history
• * js的垃圾回收机制
• * 内存泄漏的原因和场景
• * DOM事件的绑定的几种方式
• * DOM事件中target和currentTarget的区别
• * typeof 和 instanceof 区别，instanceof原理
• * js动画和css3动画比较
• * JavaScript 倒计时（setTimeout）
• * js处理异常
• * js的设计模式知道那些
• * 轮播图的实现，以及轮播图组件开发，轮播10000张图片过程
• * websocket的工作原理和机制。
• * 手指点击可以触控的屏幕时，是什么事件？
• * 什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？(函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
• * JS代码调试

 

ES6篇(引导篇，相对重要)

 

这块面试官主要是问你哪块用的比较多，你可以引导性地把面试官往你会的地方说

• 谈一谈 promise
• 如何实现一个promise，promise的原理，以及它的两个参数是什么？
• promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？
• 所有的 ES6 特性你都知道吗？如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
• es6的继承和es5的继承有什么区别
• promise封装ajax
• let const的优点
•  es6 generator 是什么，async/await 实现原理
• ES6和node的commonjs模块化规范区别
• 箭头函数，以及它的this
• map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

 

Vue相关知识点 (框架之一重要)

因为我简历上主要写的是会vue啦，其实也不是精通，因为边学边开发，主要是实践的项目不是特别复杂，不过常见的一些坑点还是有遇到的啦，这个是看你会的框架问相应的知识点

1. Vue是如何实现双向绑定的？看过Vue源码吗？
2. 简单阐述一下vue的生命周期
3. 如何实现一个自定义组件，不同组件之间如何通信的？
4. 父子组件如何通信的？
5. 前端路由有没有用过，你在项目中怎么实现路由的嵌套？
6. nextTick和Vuex两个有没有用过，分为什么情况下用到？
7. Vue的响应式原理你知道是怎么实现的吗？你觉得订阅者-发布者模式和观察者模式有区别吗？有的话，说一下它们的区别。
8. CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

构建（工程化&模块化）

工程化

• 对webpack,gulp，grunt等有没有了解?对比。
• webpack的入口文件怎么配置，多个入口怎么分割。
• webpack的loader和plugins的区别
• gulp的具体使用。
• 前端工程化的理解、如何自己实现一个文件打包，比如一个JS文件里同时又ES5 和ES6写的代码，如何编译兼容他们

模块化

• 对AMD,CMD,CommonJS有没有了解?
• 为什么要模块化？不用的时候和用RequireJs的时候代码大概怎么写？
• 说说有哪些模块化的库，有了解过模块化的发展的历史吗？
• 分别说说同步和异步模块化的应用场景，说下AMD异步模块化实现的原理？
• 如何将项目里面的所有的require的模块语法换成import的ES6的语法？
• 使用模块化加载时，模块加载的顺序是怎样的，如果不知道，根据已有的知识，你觉得顺序应该是怎么样的？

计算机网络篇(相对重要)

• http、https、以及websocket的区别
• http常见的状态码，400,401,403状态码分别代表什么？
• 协商缓存和强缓存的区别
• 说下计算机网络的相关协议？
• HTTP协议头含有哪些重要的部分，HTTP状态码
• 网络url输入到输出怎么做？
• 性能优化为什么要减少 HTTP 访问次数？
• Http请求的过程与原理
• https（对是https）有几次握手和挥手？https的原理。
• http有几次挥手和握手？TLS的中文名？TLS在哪一网络层？
• TCP连接的特点，TCP连接如何保证安全可靠的？
• 为什么TCP连接需要三次握手，两次不可以吗，为什么
• 为什么tcp要三次握手四次挥手？
• tcp的三次握手和四次挥手画图（当场画写ack 和 seq的值）？
• tcp与udp的区别
• get和post的区别？什么情况下用到？
• http2 与http1 的区别？
• websocket
• 什么是tcp流，什么是http流
• babel是如何将es6代码编译成es5的
• http2的持久连接和管线化
• 域名解析时是tcp还是udp
• 域名发散和域名收敛
• Post一个file的时候file放在哪的？
• HTTP Response的Header里面都有些啥？

其他

• 正则表达式
• 前端渲染和后端渲染的优缺点
• 数据库的四大特性，什么是原子性，表的关系
• 你觉得前端体系应该是怎样的？
• 一个静态资源要上线，里面有各种资源依赖，你如何平稳上线
• 如果要你去实现一个前端模板引擎，你会怎么做
• 知道流媒体查询吗？
• SEO
• mysql 和 mongoDB 有什么区别？
• restful的method解释
• 数据库知识、操作系统知识
• click在ios上有300ms延迟，原因及如何解决
• 移动端的适配，rem+媒体查询/meta头设置
• 移动端的手势和事件；
• unicode，utf8，gbk编码的了解，乱码的解决

浏览器相关（兼容性，跨域等等）

因为我的工作主要还在专注在web端，所以浏览器兼容性的问题没有少碰到过，因主要是兼容IE8以上以及其他各个浏览器，这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的，因为回答的比较多2333)

• 使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面

1.  http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

• rgba不支持IE8 解决：用opacity
• CSS3前缀

1. -webkit- webkit渲染引擎 chrome/safari
2. -moz gecko引擎  firefox
3. -ms- trident渲染引擎 IE
4. -o-  opeck渲染引擎 opera

• 过渡不兼容IE8，可以用JS动画实现
• background-size不支持IE8，可以用img
• 使用PIE.htc让IE6/7/8支持CSS3部分属性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA属性

1. .border-radius {
2. border-radius: 10px;
3. -webkit-border-radius: 10px;
4. -moz-border-radius: 10px;
5. background: #abcdef;
6. behavior: url(css/PIE.htc);
7. }

• 用css hack

1. IE6: _
2. IE7/7: *
3. IE7/Firefox: !important
4. IE7: *+
5. IE6/7/8: 9
6. IE8:

• :IE浮动margin产生的双倍距离,通常使用float:left来实现，浏览器存在兼容性问题，导致图片与 后面的内容存在margin不一致的问题，解决方法就是给图片添加diaplay:inline即可
• ie8不支持nth-child，但支持first-child和last-child，可以通过转化写法来处理问题，span:nth-child(2)可以转换为span:first-child+span,可以使ie8显示该内容，last-child可以自定义一个class类兼容ie8写法
• IE8下不支持HTML5属性placeholder，解决问题的js插件挺多的，常用的使用jquery.JPlaceholder.js插件处理问题
• 识别HTML5元素，IE中可能无法识别nav/footer，使用html5shiv
• 火狐下表单阻止表单默认提交事件：在form中添加 action="javascript:",秒杀上述所有默认行为;
• 始终为按钮button添加type属性，IE下的默认类型是button，其他浏览器下的默认类型是submit
• IE下删除所有不必要的console语句，IE下当遇到console时不识别之后报错，代码不会执行，或者全局自定义一个window.console方法
• IE浏览器下由于参数过长导致通过GET请求下载文件方法报错，解决改为POST请求
• IE浏览器下iframe弹窗中输入框光标丢失（无法输入）问题，解决清一下frame
• 兼容IE8 new Date()返回NaN问题，解决自定义方法

1. function parseISO8601(dateStringInRange) {
2. var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
3.  date = new Date(NaN), month,
4.  parts = isoExp.exec(dateStringInRange);
5. if(parts) {
6.  month = +parts[2];
7.  date.setFullYear(parts[1], month - 1, parts[3]);
8.  if(month != date.getMonth() + 1) {
9.    date.setTime(NaN);
10.  }
11. }
12. return date;
13. }

 

• 跨域，为什么JS会对跨域做出限制
• 前端安全：xss，csrf...
• 浏览器怎么加载页面的？script脚本阻塞有什么解决方法？defer和async的区别？
• 浏览器强缓存和协商缓存
• 浏览器的全局变量有哪些
• 浏览器同一时间能够从一个域名下载多少资源
• 按需加载，不同页面的元素判断标准
• web存储、cookies、localstroge等的使用和区别
• 浏览器的内核
• 如何实现缓存机制？（从200缓存，到cache到etag再到）
• 说一下200和304的理解和区别
• 什么是预加载、懒加载
• 一个 XMLHttpRequest 实例有多少种状态？
• dns解析原理，输入网址后如何查找服务器
• 服务器如何知道你？
• 浏览器渲染过程
• ie的某些兼容性问题
• session
• 拖拽实现
• 拆解url的各部分