前端跳槽面试必备
面试模拟与技巧
如何看待面试
什么是面试？
答：面试时测查和评价人员能力素质的一种考试活动。具体地说，面试时一种通过组织者精心设计，在特定场景下，以考官对考生的面对面交谈与观察为主要手段，又表及里测评考生的知识、能力、经验等有关素质的一种考试活动。javascript
面试准备
职位描述分析
看公司的要求css
业务分析与实战模拟
看官方网站分析所用的技术栈
艺龙：jQuery+requireJs+模板引擎（handlerbar，underscore，Mustache）html
技术栈准备
prmoise fiddler charies mock-server typeScript canvas filesystem webRTC bower browserify three.js playcanvas d3js echartjsjava
自我介绍
不要夸大其词，也不要不自信web
一面二面
面试技巧：
- 准备要充分
- 知识要系统
- 沟通要简洁
- 心里要诚实
- 态度要谦虚
- 回答要灵活
页面布局
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。
五种方法
①浮动方式面试
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> /* *{ padding:0; margin:0 } html,body{ height:100%; } .main{ height: 100%; } .left{ float: left; width: 300px; background: red; height: 100%; } .right{ float: right; width: 300px; background: red; height: 100%; } .center{ width: 100%; background: green; height: 100%; }*/ html *{ padding:0; margin: 0; } .layout article div{ min-height: 100px; } .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style>
</head>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<h2>注意内容主体放在最后</h2>
</div>
</article>
</section>
<!--<div class="main"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>-->
</body>
</html>
②绝对定位算法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> /* *{ padding:0; margin:0 } html,body{ height:100%; } .main{ height: 100%; position: relative; } .left{ position: absolute; width: 300px; background: red; height: 100%; top:0; left:0; } .right{ position: absolute; width: 300px; background: red; height: 100%; top:0; right:0; } .center{ width: 100%; background: green; height: 100%; }//本身写的*/ html *{ padding: 0; margin: 0; } .layout article div{ min-height: 300px; } .layout.absolute .left-center-right>div{ position: absolute; } .layout.absolute .left{ left: 0; width: 300px; background: red; } .layout.absolute .center{ left: 300px; right:300px; background: yellow; } .layout.absolute .right{ right:0; width: 300px; background: blue; } </style>
</head>
<body>
<section class="layout absolute">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
一、这是三栏布局绝对定位中间部分
</div>
<div class="right"></div>
</article>
</section>
<!--<div class="main"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>-->
</body>
</html>
③弹性布局chrome
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> /* *{ padding:0; margin: 0; } body,html{ height: 100%; } .main{ display: flex; height:100%; } .left{ background: red; width: 300px;; } .center{ background: green; flex-grow: 1; } .right{ background: red; width:300px; }*/ html *{ margin: 0; padding: 0; } .layout article div{ min-height: 100px; } .layout.flexbox .left-center-right{ display: flex; } .layout.flexbox .left{ width: 300px; background: red; } .layout.flexbox .center{ flex: 1; background: yellow; } .layout.flexbox .right{ width: 300px; background: blue; } </style>
</head>
<body>
<!--<div class="main"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>-->
<section class="layout flexbox">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是flexbox的解决方案</h1>
1.这是三栏布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
④表格布局canvas
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> /* *{ padding:0; margin:0 } html,body{ height:100%; } .main{ height: 100%; position: relative; } .left{ position: absolute; width: 300px; background: red; height: 100%; top:0; left:0; } .right{ position: absolute; width: 300px; background: red; height: 100%; top:0; right:0; } .center{ width: 100%; background: green; height: 100%; }*/ html *{ margin: 0; padding: 0; } .layout article div{ min-height: 300px; } .layout.table .left-center-right{ width: 100%; display: table; height: 100px; } .layout.table .left-center-right>div{ display: table-cell; } .layout.table .left{ width: 300px; background: red; } .layout.table .center{ background: yellow; } .layout.table .right{ width: 300px; background: blue; } </style>
</head>
<body>
<!--<div class="main"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>-->
<section class="layout table">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格布局</h1>
1.这是三栏布局表格布局中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
⑤网格布局后端
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> html *{ padding: 0; margin: 0; } .layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left{ background: red; } .layout.grid .center{ background: yellow; } .layout.grid .right{ background: blue; } </style>
</head>
<body>
<!--网格布局-->
<section class="layout grid">
<div class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局</h1>
</div>
<div class="right"></div>
</div>
</section>
</body>
</html>
（1）这五种方案各有什么缺点和优势
- float，比较好的兼容性须要清除浮动，处理好与周边元素的关系
- absolute，方便快捷，布局脱离文档流，致使方案的可以使用性较差
- flex布局，解决上述两个的缺点，移动端使用flex更多，ie8不支持
- table-ceil布局，兼容性好，对SEO不够友好，每个部分能够理解为单元格，当其中的一个表格高度变高，其余的两个表格也会变高
- grid布局，代码量简洁，新技术
（2）若是中间高度不固定，那个还能够用
- float不能用，中间的内容被左侧挡住，由于撑开高度之后，左侧没有了遮挡物，就会流向左侧。
解决方案：建立BFC - absolute不能用
- flex可使用。
- table-ceil可使用。
- grid不能用
（3）这五种方法兼容性怎么样
小结
- 语义化总结到位
- 页面布局理解要深入
- CSS基础知识扎实
- 思惟灵活且积极上进
页面布局的变通
三栏布局
左右宽度固定，中间自适应
上下高度固定，中间自适应
两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应
CSS盒模型
题目：谈谈你对CSS盒模型的认识
文档中每一个元素都会被描述为一个矩形盒子，盒子有一个边界，分别为margin edge，border edge，padding edge，content edge。盒子模型分为标准盒子模型和IE盒子模型（微软没有听从W3C标准）
标准模型和IE模型之间的区别？
这二者的关键差异在于：W3C盒子模型——属性高（height）和属性宽（width）这两个值不包括（padding）和边框（border）；IE盒子模型——属性高（height）和属性宽（width）这两个值包含填充（padding）和边框（border）。
CSS如何设置这两种模型？
（1）”标准模式”下各个浏览器是没有区别的，以宽度为例：总宽度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C标准盒子模型）。页面在”怪异模式”下，css中为元素的width和height设置的值在标准浏览器和ie系列（ie9除外）里的表明的含义是不一样的（IE盒子模型）。也就是说在“怪异模式”下ie浏览器使用的IE盒子模型。
（2）标准模式和怪异模式些来由？
在HTML和CSS的标准化未完成以前，各个浏览器对于HTML和CSS的解析有各自不一样的实现，而有不少旧的网页都是按照这些非标准的实现去设计的。在HTML和CSS标准肯定之后，浏览器一方面要按照标准去实现对HTML和CSS的支持，另外一方面又要保证对非标准的旧网页设计的后向兼容性。所以，现代的浏览器通常都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML和CSS标准对文档进行解析和渲染；在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就可以使得旧网页正常显示；对于新的网页，则能够先启动标准模式，使得新网页可以用HTML和CSS标准特性。
（3）浏览器如何肯定使用哪一种渲染模式
知道了这两种渲染模式的来由，那剩下的问题就是浏览器如何可以肯定应该使用哪一种模式了。其实归根结底就是，浏览器如何能将旧网页和新网页区分开来。
日常编写网页的时候，通常都会将见到HTML文档的头部会有文档类型声明：DOCTYpe。当浏览器遇到正确的文档声明时，浏览器就会启动标准模式，按照指定的文档类型标准解析和渲染文档。而对于旧有的网页，因为网页编写的当时标准尚未肯定，因此通常是不会有文档类型声明的。因此，对于没有文档类型声明或者文档类型声明不正确的文档，浏览器就会认为他是一个旧的HTML文档，就会使用怪异模式解析和渲染该文档。关于DOCTYPE的更详细说明，请戳这里DOCTYPE声明做用和用法详解
（4）如何兼容IE模型
前提是页面处于”怪异模式”，“标准模式”不存在兼容性问题。
1）hack
假设内容的宽度必须固定为100px
#box {
width:100px !important; // ie9,ff,chrome,opera这样的标准浏览器
width:160px; //全部的浏览器；它的本意是只对不认识!important的设置。但是ie七、ie8也认识
+width:160px!important;//ie7
width:160px/0!important;//ie8
padding:0 10px;border:20px solid blue;margin:70px;
}
2）wrapper
#box{ width:100px; margin:70px; float:left; }
.wrapper{ padding:0 10px;border:20px solid blue; }
(5)Css3对盒子模型的设置
box-sizing有两个值一个是content-box， 另外一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
JS如何设置获取盒模型对应的宽和高？
dom.style.width/height
dom.currentStyle.width/height //渲染以后的宽高 只IE支持
window.getComputedStyle(dom).width/height //全部浏览器支持 渲染以后的宽高
dom.getBoundingClientRect().width/height //计算元素的绝对位置，根据viewport左上角肯定，会获得left top width height
实例题（根据盒模型解释边距重叠）
BFC（边距重叠解决方案）
①父子元素边距重叠
②兄弟元素边距重叠
③空元素边距重叠BFC的基本概念
块级格式化上下文
BFC的原理（BFC的渲染规则）
①BFC元素垂直方向的边距发生重叠
②BFC的区域不会与浮动元素的box重叠
③BFC是页面上一个独立的容器，内外的元素不会相互影响
④计算BFC的高度时，浮动元素也参与计算。如何建立BFC
①float值不为none
②position为absolute或fixed
③display为inline-block，table-cell，table-caption，flex；
④overflow不为visibleBFC的使用场景
DOM事件
基本概念：DOM事件的级别
DOM0 element.οnclick=function(){}
DOM2 element.addEventListener(‘click’,function(){},fasle);
DOM3 element.addEventListener(‘keyup’,function(){},false)
DOM事件模型
事件模型：捕获和冒泡
DOM事件流
第一阶段：捕获
第二阶段：目标阶段
第三阶段：冒泡 从目标元素上传到window对象
描述DOM事件捕获的具体流程
window–>document–>html(document.documentElement)–>
body–>…–>目标元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="ev">
<style> #ev{ width:300px; height:100px; background:red; color: #fff; text-align: center; line-height: 100px; } </style>
目标元素
</div>
<script> var ev=document.getElementById("ev"); window.addEventListener('click',function(){ console.log('window capture') },true); document.addEventListener('click',function(){ console.log('docuemnt capture') },true) document.documentElement.addEventListener('click',function(){ console.log('html capture') },true) document.body.addEventListener('click',function(){ console.log('body capture') },true) ev.addEventListener('click',function(){ console.log('ev capture') },true) </script>
</body>
</html>
结果：
window capture
docuemnt capture
html capture
body capture
ev capture
Event对象的常见应用
e.target //当前被点击的元素
e.preventDefault()
e.currentTarget //代理中的父元素
e.stopPropagation()
e.stopImmediatePropagation() //按钮绑定了两个click事件A、B，但愿点击A以后加上这句话，就能够阻止B的执行。
自定义事件
var eve=new Event(‘custome’);
ev.addEventListener(‘custome’,function(){console.log(‘custom’); })
ev.dispatchEvent(eve);
HTTP协议类
HTTP协议的主要特色
简单快速
灵活
无链接 连接一次就会断掉，不会持久连接
无状态
HTTP报文的组成部分
请求报文
①请求行（http方法 页面地址 http协议及版本）
②请求头（告诉服务端我要什么内容）
③空行
④请求体响应报文
①状态行
②响应头
③空行
④响应体
HTTP方法
GET——>获取资源
POST——>传输资源
PUT——>更新资源
DELETE——>删除资源
HEAD——>得到报文首部
OPTIONS——>询问支持的方法
TRACE——>追踪路径
CONNECT——>要求用隧道协议链接代理
POST和GET的区别
GET在浏览器回退是无害的，而POST请求会再次提交请求
GET产生的URL地址能够被收藏，而POST不能够
GET请求会被浏览器主动缓存，而POST不会，除非手动设置
GET请求只能进行URL编码，而POST支持多种编码方式
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
GET请求在URL中传送的参数是有长度限制的，而POST没有限制
对参数的数据类型，GET只接受ASCII字符，而POST没有限制
GET比POST更不安全，由于传递的参数直接暴露在URL上，因此不能用来传递敏感信息
GET参数经过URL传递，POST放在Request Body中
HTTP状态码
1xx:指示信息——表示请求已接收，继续处理
2xx:成功——表示请求已被成功接收
3xx:重定向——要完成请求必须进行更进一步的操做
4xx:客户端错误——请求有语法错误或请求没法实现
5xx:服务器错误——服务器未能实现合法的请求200 OK：客户端请求成功
206 partial Content:客户发送了一个带有Range头的GET请求，服务器完成了它
301 Moved Permanently:所请求的页面已经转移至新的URL
302 Fonud:所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓存的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还能够继续使用
400 Bad Request：客户端请求有语法错误，不能被服务器所理解
401 Unauthoried：请求未经受权，这个状态码必须和WWW-Authenticate报头域一块儿使用
403Forbidden：对被请求页面的访问禁止
404 Not Found：请求的资源不存在
500 Internal Server Error：服务器发生不可预期的错误原来缓存的文档还能够继续使用
503 Server Unavailable：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常。
什么是持久连接
HTTP协议采用的是“请求-应答模式”，当使用普通模式，即非Keep-Alive模式时，每一个请求/应答客户和服务器都要新建一个链接，完成以后当即断开链接（HTTP协议为无链接的协议）
当使用Keep-Alive模式（又称持久连接、链接重用）时，Keep-Alive功能使客户端到服务器端的链接有效，当出现对服务器的后继请求时，Keep-Alive功能避免了创建或者从新创建链接
什么是管线化
在使用持久连接的状况下，某个链接上消息的传递相似于 请求1->响应1->请求2->响应2->请求3->响应3
某个链接上的消息变成了相似这样
请求1->请求2->请求3->响应1->响应2->响应3①管线化机制经过持久链接完成，仅HTTP/1.1支持此技术
②只有GET和Head请求能够管线化，而POST则有所限制
③初次建立链接时不该启动管线机制，由于对方（服务器）不必定支持HTTP/1.1版本的协议
④HTTP/1.1要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败便可
⑤因为上面提到的服务器端问题，开启管线化极可能并不会带来大幅度的性能提高，而不少服务器端和代理程序对管线化的支持并很差。所以现代浏览器如Chrome和Firefox默认并未开启管线化支持
⑥管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
原型链
建立对象有几种方法
var o1={name:’o1’};
var o2=new Object({name:’o2’});var M=function(){this.name=’o3’}
var o3=new M();var P={name:’p’}
var o4=Object.create(P)；//o4.proto===P
原型、构造函数、实例、原型链
instanceof的原理
new运算符
模拟new过程
var o6=function(func){
var o=Object.create(func.prototype);
var k=func.call(o);
if(typeof k===’object’)
return k;
else
return o;
}
面向对象
类与实例
①类的声明
function Animal(){
this.name="name";
}
//ES6中的class的声明
class Animal2{
constructor(){
this.name=name;
}
}
//实例化
console.log(new Animal(),new Animal2());
类与继承
① 继承的几种方式
//借助构造函数实现继承
function Parent1(){
this.name="parent1"
}
Parent1.prototype.say=function(){} ;//缺点：child1没有继承Parent1原型对象的方法
function Child1(){
Parent1.call(this);//apply
this.type="child1";
}
console.log(child1);
//借助原型链实现继承
function Parent2(){
this.name="parent2";
this.play=[1,2,3];
}
function Child2(){
this.type="child2"
}
Child2.prototype=new Parent2();
console.log(new Child2());
var s1=new Child2();
var s2=new Child2();
console.log(s1.play,s2.play);
s1.play.push(4);//缺点：s1改变的东西，s2也会看到
//组合方式
function Parent3(){
this.name="parent3";
this.play=[1,2,3];
}
function Child3(){
Parent3.call(this);
this.type='child3';
}
Child3.prototype=new Parent3();//Parent3初始化了两次
var s3=new Child3();
var s4=new Child3();
s3.play.push(4);
console.log(s3.play,s4.play);
console.log(s3.constructor);//指向Parent3构造函数
//组合继承的优化1
function Parent4(){
this.name="parent4";
this.play=[1,2,3];
}
function Child4(){
Parent4.call(this);
this.type='child4';
}
Child4.prototype=Parent4.prototype;
//Child4.prototype.contructor=Child4;//没法区分父类的实例的原型对象
var s5=new Child4();
var s6=new Child4();
console.log(s5,s6);
console.log(s5 instanceof Child4);//true
console.log(s5 instanceof Parent4);//true 继承的本质就是原型链
console.log(s5.constructor);//指向Parent4的构造函数,没法区分实例是由父类建立的，仍是子类建立的 **这是缺点**
//组合优化2
function Parent5(){
this.name="parent5";
this.play=[1,2,3];
}
function Child5(){
Parent5.call(this);
this.type='child5';
}
Child5.prototype=Object.create(Parent5.prototype);
Child5.prototype.constructor=Child5;
var s7=new Child5();
console.log(s7 instanceof Child5,s7 instanceof Parent5);//true true
console.log(s7.constructor);//指向Child5的构造函数
通讯类
什么是同源策略及限制
同源策源限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
①Cookie、LocalStorage和IndexDB没法读取
②DOM没法得到
③Ajax请求不能发送
先后端如何通讯
Ajax
WebSocket
CORS
如何建立Ajax
XMLHttpRequest对象的工做流程
兼容性处理（XMLHttpRequest只有高级浏览器中支持，低版本中要用xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);）
事件的触发条件
事件的触发顺序
跨域通讯的几种方式
JSONP
Hash(hash改变页面不刷新)
PostMessage（H5）
WebSocket
CORS
安全类
CSRF
基本概念和缩写
CSRF，一般称为跨站请求伪造，英文名Cross-site request forgery 缩写CSRF
攻击原理（登陆事后记录cookie，其余网站利用接口，用cookie攻击）
防范措施
Token验证
Referer验证
隐藏令牌
XSS
基本概念和缩写
XSS（cross-site script，跨站脚本攻击）
攻击原理
不须要登陆验证，核心原理就是向页面注入脚本
防范措施
CSRF和XSS的区别
XSS是向页面注入js运行，CSRF是利用自己的漏洞去执行接口，CSRF要登陆网站
算法类
排序
堆栈、队列、链表
递归
波兰式和逆波兰式