前端面试题总结

html与css
1、行内元素、块状元素、行内块状
行内元素
span label a strong em i
块状元素
div h1-h6、p、ul、li、table、form、nav、aside、header、footer、section、article、address
ps:替换元素（img input）、非替换元素
区别
inline
1)设置宽高无效(2)margin左右有效，上下无效；padding都有效，会撑大空间(3)不会自动进行换行
block
1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)默认排列方式为从上至下
inline-block
可设置宽高、margin和padding且不会换行，即表现在为inline但具有block的特性

2、h5新特性
语义化新元素
nav、aside、header、footer、section、article 有利于SEO
增强表单
placeholder占位提示文字，mutiple是否允许多个输入， autofocus自动获得输入焦点、required输入框内容不能为空
audio video
canvas
svg
地理位置 geolocation
websocket
storage
3、cookie sessionstorage localstorage区别
Cookie存储，如用户偏好、访问历史，浏览器兼容性好但处理麻烦且容量限制 4k左右，默认关闭即失效，可设过期时间
sessionstorage 会话级存储 关闭界面即失效 不同页面或标签页间无法共享
localstorage 永久存储 一般5M 不与服务器交互 相同浏览器同域名端口相同页面间可以共享数据

4、http状态码

200 OK
请求正常处理完毕
204 No Content
请求成功处理，没有实体的主体返回
206 Partial Content
GET范围请求已成功处理
301 Moved Permanently
永久重定向，资源已永久分配新URI
302 Found
临时重定向，资源已临时分配新URI
303 See Other
临时重定向，期望使用GET定向获取
304 Not Modified
发送的附带条件请求未满足
307 Temporary Redirect
临时重定向，POST不会变成GET
400 Bad Request
请求报文语法错误或参数错误
401 Unauthorized
需要通过HTTP认证，或认证失败
403 Forbidden
请求资源被拒绝
404 Not Found
无法找到请求资源（服务器无理由拒绝）
405 Method Not Allowed
HTTP使用的method类型不匹配
500 Internal Server Error
服务器故障或Web应用故障
503 Service Unavailable
服务器超负载或停机维护
504 超时

5、display:none 和 visibily:hidden 区别
都为隐藏 前者不占位 后者占位 类似opcity
类比vue v-show v-if的区别 前者隐藏 后者直接不加载 同时v-show不在template中生效

6、css盒子模型
内容(content)、内边距(padding)、边框(border)、外边距(margin
background-color将填充所有border以内的区域
border属性拆分 上下左右 还是 border-width border-height border-style
宽度如何计算？
总宽度=margin+border+padding+content
如果想用width表示真正宽度，应该怎么办？
box-sizing :border-box 即总宽度=margin+width

7、清除浮动的方式及优缺点 导致父级高度塌陷
想要清除浮动的元素后面元素 clear:both 或者使用伪元素 :after{clear:both}
父级设置 overflow：hidden
父级浮动 ，得设置width:100%
父级设置高度
父级设置为display：table

8、弹性布局
display: flex;
容器属性
flex-direction 主轴的方向 row | row-reverse | column | column-reverse
flex-wrap 如何换行 nowrap | wrap | wrap-reverse
flex-flow 前两个简写模式<flex-direction> || <flex-wrap> 默认值 row nowrap
justify-content 主轴上的对齐方式
align-items 交叉轴上对齐
align-content 多根轴线的对齐方式
项目属性
order 项目的排列顺序
flex-grow 项目的放大比例，默认为0
flex-shrink 项目的缩小比例，默认为1 为0既不会放大也不会缩小
flex-basis 在分配多余空间之前，项目占据的主轴空间 默认值为auto，即项目的本来大小
flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto 两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

9、垂直居中方法
1、dispaly :table dispaly:table-cell vertical-align:middle
2、position top botom 0 margin auto
3、 top 50% margin-top:- div一半 或 transform:translate(-50%,-50%)

10、position 定位
static relative (保留位置，相对于其在普通流中的位置进行定位，但可通过top left right bottom z-index调整)
absolute 不保留位置，相对父级中的relative或absolute定位，若无则相对body
fixed 固定定位

11、css3新特性
animation
animation-name 规定需要绑定选择器的keyframe名称
animation-duration 规定完成动画所花费的时间 s ms
animation-timing-function 动画的速度曲线
animation-deplay 动画开始之前的延迟
animation-iteration-count 动画播放的次数
animation-direction 是否应该轮流反向播放动画

transition
transition-property 规定过度css属性的名称 : none|all|propertyCSS
transition-duration 完成过渡效果需要多少秒或毫秒
transition-timing-function 速度曲线
transition-delay 延迟

transform
translate(x,y) 转换
scale(x,y)缩放
rotate(angle) 旋转
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴倾斜
matrix(n,n,n,n,n,n) 使用矩阵转换

:nth-of-type(n)
CSS3中backgroud-image可以设置多个背景图
shadow 阴影效果
@media 媒体查询
@font-face 添加字体
gradient 渐变效果

12、font简写 background简写
background: [background-color] [background-image] [background-repeat] [background-attachment(不随滚动条移动)] [background-position]/ [ background-size] [background-origin] [background-clip];
font:[font-style(斜体、倾斜)] [font-variant(显示小型大写字母)] [font-weight] [font-size]/ [line-height] [font-family]

13、http三次、四次握手
第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认
第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包
第三次握手：客户端收到服务器的SYN＋ACK包,向服务器发送确认包ACK(ack=k+1)
不是两次的原因，有连接消息延时，等关闭后才到达，否则会已连接，浪费资源

首先A向B发SYN（同步请求），然后B回复SYN+ACK（同步请求应答），最后A回复ACK确认，这样TCP的一次连接（三次握手）的过程就建立了
首先A向B发FIN，然后B回复ACK,等待数据发送完再回复FIN，A收到后回复ACK

物理 数据链路 网络 ip 传输 tcp udp 会话 （进程） 表示 (加密 asici) 应用(http ftp)
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

14、页面加载的过程
DNS解析 建立链接 发送请求（减少请求） 浏览器得到返回内容 （减少html代码量，压缩） 碰到的 js、css、图片等静态资源，

15、样式优先级
！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

16、伪元素伪类
:after :before
:hover :linked :fouces :activity :visited
顺序： a:link、a:visited、a:hover、a:active . （爱lv/ha恨原则）

17、line-height几种方式？区别？
1px 1 100%
当子元素没设置line-height时
数字 父line-height*父fontsize
百分比 父line-height*子fontsize

18、box-sizing
border-box content-box padding-box

19、link import区别
link属于XHTML标签可加载其他文件，而@import完全是css提供的一种方式
页面加载时link加载，而@import引用的CSS会等到页面全部被下载完再加载
兼容性的差别，import是后引入的

20、自适应布局
开发原则：文字流式，控件弹性，图片等比缩放 结合媒体查询
html的font-size rem值可通过媒介查询在css里定义好的 或通过js计算出来
网易
1）scale为1， 屏幕宽度 = （设计稿宽度/ 100）*1rem 因此：fontsize(rem的值)=屏幕宽度/(设计稿宽度/ 100)
淘宝
devicewidth=设备的物理分辨率/(devicePixelRatio * scale) 令devicePixelRatio * scale=1 目的是为了保证页面的大小与设计稿保持一致
2）scale=1/devicePixelRatio(设备像素比) ，fontsize = deviceWidth / 10
http://www.cnblogs.com/lyzg/p/4877277.html

21、px em rem区别

js
1、js基本数据类型和复杂数据类型
基本 null undefined number boolean string object symbol
复杂 array function set map date、regexp

2、常用数组的方法
pop push unshift shift sort reverse some every filter forEach map reduce find contact join includes indexOf splice slice

forEach ,for in, for ,for of的区别
forEach 不能中断循环(使用break语句或使用return语句）
for in key会变成字符类型，包括可枚举的属性
for of 支持return 并且值是of数组（不能遍历对象， 可使用内置的Object.keys()、Object.values() ）

find filter map
find 查询数组中符合条件的第一个元素，如果没有符合条件的元素则返回空数组
filter 返回数组
map 返回新数组

splice 添加或删除 slice 获取部分元素组成数组

字符串的方法
substring split('|') replace match search charAt indexOf lastindexOf slice trim() tolowerCase toUpperCase
startswith endswith repeat padStart padEnd

3、闭包的理解
独立的作用域，用于外部的上下文调用内部的私有属性和私有方法，同时不会销毁，容易导致内存泄漏

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了
ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用
声明变量的六种方法 var、function、let、const、import和class

4、js实现继承的方法
原型链继承
Cat.prototype = new Animal(); 类的原型是另一个类的实例
采用call的方式 组合继承

function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype=new Animal()
//因为会调用两次构造函数 所以采用寄生方式
Cat.prototype=object.create(Animal.prototype)
Cat.prototype.constructor=Cat

ES6
class A extends B
因为Class关键字等同如下操作
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
因此
Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性
子类的__proto__属性，表示构造函数的继承，总是指向父类。
子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

5、对promise的理解 静态方法
解决了回调地狱的问题，采用链式写法，可将异步修改为同步执行 状态一旦改变就不可恢复
方法 then catch finally all race 改进 async awite

6、js延迟加载的方式
defer是“渲染完再执行”，async是“下载完就执行”。
如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的

如果type属性设为module，浏览器知道这是一个 ES6 模块
是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于defer属性

7、改变函数的this对象的指向
apply 将单个数组参数作为多个参数传过去
call 将多个参数传过去
bind 创建一个新函数，把上下文绑定到bind()括号中的参数上，然后将它返回，不会立即调用

8、浏览器渲染页面的过程
根据 HTML 结构生成 DOM Tree
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到 <script> 时，会执行并阻塞渲染，因为 Javascript 代码有权利改变DOM树

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

9、解决跨域的几种方式
JSONP
反向代理
将其他域名的资源映射成自己的域名来规避开跨域问题。
CORS 跨域资源共享
Access-Control-Allow-Origin *
"跨域资源共享"（Cross-origin resource sharing）是W3C出的一个标准。

10、写一个判断对象是否为数组函数的例子
a instanceof Array 返回true或false
typeof a 返回的是基本数据类型(null返回object) 但包括function
typeof instanceof 区别用法
或者调用toString()

11、es6的类 包含属性和方法（包括继承）
注意extends要加s 方法之间不能加，
class A extends B {
construct(){
super() 指调用的父级构造函数
this.a=1
}
test(){}
test1(){} 方法之间不能加，
}

12、清除空格
'aaa'.replace(/(^/s*)|(*/s$)/g,"")
trim()

13、jQuery

$.extend 合并对象 或者为jquery添加全局方法
$.fn.extend jQuery实例对象添加方法

js原生添加
element.parentNode.removeChild(element)
element.appendChild(node)
jquery
$('#id').append() .prepend()
$('#id').remove() clear()

14、数组去重
Array.from(new Set(array)) [...new Set([1,2,3,34,5,5,56])]
求最大值
var arr=[1,23,344,5,6,76,7]
Math.max(...arr)

15、二维数组转一维数组
[].contact.apply([],array)
flat()

16、正则表达式
g 全局 i 忽略大小写 m 多行查询
若用变量 var test=new RegExp(a,'g')
str.replace(test,'-')

17、不用第三个变量交换两个变量的值
a=a+b a=a-b a=a|b等等
[a,b]=[b,a]

18、异步编程的方法，大概有下面几种。
回调函数
事件监听
发布/订阅
Promise 对象
async awite (generator)

采用委托机制，冒泡原则绑定事件放到父元素上，捕获
$(document).ready()方法和window.onload区别

原生操作属性 getAttribute setAttribute removeAttribute

常见插件
Babel ESLlint Uglilyjs

node的常见框架 为什么选择
express egg
Koa、hapi、Sail.js、DerbyJS、Flatiron 和LoopBack
Connect 核心中间件都是可配置的，一般中间件（req,res,next） 错误中间件（error,req,res,next）
Express 也有中间件的含义

npm
-save -save-dev区别
rm uninstall区别

用Gulp时，写JavaScript 代码是为了驱动构建系统，所以会涉及写gulpfile 和构建任务。
用Webpack时，写的是配置文件，用插件和加载器添加新功能

冒泡排序 快速排序

Vue
1、获取dom元素
$nexttick
2、async awite generate的语法糖
3、vuex包括哪些 state mutation action getter modules mutation action 区别 mutation不能处理异步方法
4、路由懒加载 router加载数据 component:()=>import（'./xxx.vue'）
5、$el $refs的区别 前者是当前的dom 后者是含ref的子组件的集合
6、如何缓存组件 keep-alive缓存
7、路由更改如何重新获取数据 watch $route 重新加载数据
8、computed与函数和watch的区别
9、vue的生命周期
10、如何理解双向绑定？！
实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

当执行 new Vue() 时，Vue就是进入了初始化阶段，一方面Vue会遍历data选项中的属性，并且Object.defineProperty将它们转换为getter/setter，实现数据变化监听功能；Vue的指令编译器Compile对元素节点的指令进行扫描和解析，初始化视图,并订阅Wacther来更新视图，此时wather会将自己添加到消息订阅器（Dep）,初始化完毕。

当数据发生变化时，Observer中的setter方法被触发，setter会立即调用Dep.notify(),Dep开始遍历所有的订阅者，并调用订阅者的update方法，订阅者收到通知后对视图进行相应更新
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调
遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中

原型 构造函数 实例
原型的constructor指向构造函数
构造函数的prototype指向原型
实例的_protype_属性指向原型
实例与构造函数没有关系 但可通过 实例 instanceof 构造函数 来判断
构造函数.prototype.isProtoType(实例) 可判断是否有关系
ES 5 增加了一个新方法Object.getPrototypeOf() 可获取实例的原型
实例可以获取原型的属性和方法 但不能修改，只会为实例添加新属性或方法，从而屏蔽了原型的属性和方法
实例.hasOwnProperty可判断是否为自己还是原型的属性或方法
in 操作符：单独使用和在 for-in 循环中使用，可判断对象是否包含属性，无论存在原型还是实例中
for-in 实例和原型的可枚举属性
Object.keys() 对象可枚举属性的字符串数组，不包括原型
Object.getOwnPropertyNames 获取所有属性
实例中的指针仅指向原型，而不指向构造函数！！！再次记忆
许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。
ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。

函数只不过是在特定环境中执行代码的对象

对组合式继承的改进，寄生组合式继承
不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象

web前端面试宝典1（https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions）
web前端面试宝典2（https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese）