面试造火箭，工作拧螺丝！
在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做着普通的事情。此文总结了最近2-3 年（成渝地区）基础的面试题，适合初中级前端工程师。帮助小伙伴们快速梳理知识，关注面试本身，不会涉及到具体的很细节的知识点。
1、Flex布局熟悉吗？说几个常用的属性
答：这个几乎每天都在用，还是挺熟悉的。
display：flex
align-items 多个
align-content：单个
justify-content
justify-items
flex-direction
flex-wrap
flex-basic：初始盒子宽度
flex-grow：增长因子
flex-shrink：缩减因子
2、CSS常用选择器，选择器权重问题
*(has，not，target，root...) 通配符
ID，class，attr属性，
element，子代（ > + ~ ）
UI状态伪类选择器(hover,active,link..,checked)
结构性伪类选择器(nth-child,fist-child...before,after....)
!important > style > id > class > element > 伪类和属性
3、什么是浮动，有什么(副)作用，如何清除？
答：浮动是使用给节点添加float属性。添加了float的节点脱离文档流，同时触发节点的BFC，让节点往一个方向靠，并排成一行。当一个父节点的子节点全部浮动，就会造成父节点高度塌陷，解决的办法首先是可以给父节点主动添加高度值，再者利用只要有一个子节点不浮动原理来添加一个不浮动的节点(通常使用伪元素before,after)，还可以触发父节点的bfc，常用的定位，或者overflow：hidden。
4、CSS里面有哪些相对单位？都相对什么？
答：REM,EM,VW,VH 等。
REM：相对于根节点html的font-size
EM：父节点的font-size
VW：视口的宽度为100VW，相当把视口分为100份
VH：视口高度为100VH
同理，以上单位都可以在移动端做页面适配，但通常使用REM和VW。
5、fixed相对谁定位,加上transform会有问题吗
答：fixed定位相对于浏览器视口来定位的，添加上 transform以后，fixed定位会失效(现在这个bug已经不存在啦)。如果fixed元素的祖先有transform属性，则 fixed元素会相对与这个祖先计算，而不是视口(问题还在)。
6、为什么不推荐用style内联元素？有什么缺点？
答：首先是style是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人协作开发的时候。但是如果一个页面的style样式足够少的时候，可以使用style元素，因为一次请求最多携带14K 的数据，如果足够小，还可以节约一次请求。
7、http常见状态码有哪些？
404：找不到资源
500：服务器内部错误
200：请求成功，并返回数据
301：永久重定向
302： 临时移动，可使用原有URI
304：资源未修改，可使用缓存
400：请求语法错误(一般为参数错误)
403：没有权限访问
……
8、浏览器页面渲染的流程,输入url页面发生什么?
答：首先dns解析IP，建立tcp链接下载资源，构建 dom树，当遇到link标签，会下载并执行解析css(不会阻止dom树的构建)，当遇到script标签时，dom树构建会暂停，下载并执行完js才会继续(defer：下载延迟执行，async：异步下载并执行)，然后再布局和绘制(layout,paint)，最后在render。
9、HTML5常用特性(API)有哪些？用过哪些？
答：语义化标签(header,nav等)，video、audio，获取 dom的方式(queryselector)，websocket Canvas，svg，requestAnimationFrame，Geolocation，stroage ，notification，file API，Orientation API用于检测手机的摆放方向等。
10、列举出几个常见的浏览器兼容性问题？
答：现在市面上IE678基本已经停止使用了，所以尽量不要说这方面的兼容性。有些浏览器支持的，有些不支持；或者是支持的方式不一致。
(1) 不同浏览器的默认margin和padding不一致
(2) 图片的默认间距不一致
(3) 获取视口的宽高 window.innerheight/width
(4) CSS3 的动画，过渡，渐变，flex 也有，grid
(5) Canvas，SVG
(6) IE9以下不能的opacity，使用filter: alpha(opacity= 50);
(7) event.offsetX/Y
(8) 绑定事件IE9才支持（addEventListener）
11、什么是原型、原型链，有什么作用？
原型：每一个对象都与另一个对象相关联，关联的对象就称为原型。
意义：函数Person有一个属性prototype，指向一个对象，对于普通函数来说没多意义，对于构造函数就有作用了，当使用new操作符时，会把Person.prototype（原型对象）赋值给实例的__proto__（原型实例）属性，再通过原型查找机制所有的Person产生的实例都可以访问到挂载到原型上的方法，这样就达到了函数的复用，减少内存开销。
原型链：每一个对象，都有一个原型对象与之关联，这个原型对象它也是一个普通对象，这个普通对象也有自己的原型对象，这样层层递进，就形成了一个链条，这个链条就是原型链。通过原型链可以实现 JS 的继承，把父类的原型对象赋值给子类的原型，通过原型查找机制，这样子类实例就可以访问到父类原型上的方法了。
12、如何实现继承（ES5/ES6）
function Anima(name){ //父类
this.name = name;
}
Anima.prototype.sayName = function(){ console.log(this.name)
}
function Person(name,age){ //子类 Anima.call(this,name);
this.age = age;
}
Person.prototype=Object.create(Anima.prototype, {
constructor: {
value: Person,
enumerable: false
}
})
var p = new Persion("haha",12);
Extends //ES6
13、什么是this，常用方式有哪些？如何改变指向
简单的理解：this指向就是当前的执行上下文对象的一个引用。JS在运行过程中会产生执行上下文环境，context记录了包含函数在哪里被调用，作用域链，OA，this等信息，this是context的其中一个属性，会在函数的执行过程中使用，它指代的上下文对象取决于函数调用的各种条件。通常this在函数中使用。
设计的目的：this提供了一种优雅的方式来隐式的传递一个对象的引用，所以在函数中使用this可以更加方便的复用函数。
This的使用场景：
（1）全局使用 this===window很少使用，函数体包含严格模式时为undefined
（2）函数当中在全局调用这个 fn() this===window
（3）在方法当中使用thi ===调用当前这个函数的所在的对象
（4）构造函数this指向的 new创建出来的实例对象
（5）DOM事件处理函数中的this，指向当前的DOM节点
（6）通过bind，call，apply操作符来显示的设置this的指向。
（7）ES6的箭头函数箭头函数没有自己的this，父作用域（父函数）的this
14、手写bind，call，apply函数
15、什么是深、浅拷贝，请写出代码
答：浅拷贝，就是复制一个对象，当对象的属性值没有引用类型的时候。
Object.assign迭代(for..in for..of object.enteries)扩展运算符...，JSON.parse等
反之如果对象中还有引用类型，连着引用类型一并拷贝称为深拷贝。JSON对象的方法（会忽略到值为函数和 undefined 的属性），递归
彩蛋：如果老铁们觉得看文字比较头疼，还有录制好的视频哦~(私信发地址！！！)