1，高度已知，三栏布局，左右两边宽度固定，中间自适应，有几种方案？
浮动方案
.left {
width: 400px;
height: 800px;
background-color: #000000;
float: left;
}
.center {
width: auto;
height: 800px;
background-color: white;
}
.right {
float: right;
width: 400px;
height: 900px;
background-color: red;
}
绝对定位方案
.left{
position: absolute;
left:0;
top:0;
width: 400px;
background-color: #000000;
}
.center{
background-color: yellow;
position:absolute;
right:400px;
left: 400;
top:0;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
background-color: red;
}
flex方案
.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: black;
}
表格布局
.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: blueviolet;
}
网格布局
.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: gold;
}
.layout.grid .right{
background: cyan;
}
2，谈谈你对css盒模型认识？
盒模型分为： 正常盒模型 + ie盒模型正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。盒模型的大小包括content，padding，border，并且先做content.。
怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。
怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下，一般手机上用的更多。
这句话的理解，我们可以根据下图的具体示例来看。即便是红色方块宽度是100px，但是对于怪异盒模型，分配给内容区域的宽度就是90px。
content-box：标准盒模型，CSS定义的宽高只包含content的宽高 border-box：IE盒模型，CSS定义的宽高包括了content，padding和border
Dom事件类
基本概念：Dom事件级别，Dom事件模型，Dom事件流，描述Dom事件捕获的具体流程，Event对象常见应用，自定义事件Dom事件级别
Dom0：element.onClick = function(){}
Dom2: element.addEventListener('click',function(){},false)
Dom3: element.addEventListener('keyup',function(){},false)
事件模型：从上到下事件捕获，再从下到上事件冒泡
事件流：事件先捕获到目标阶段再冒泡返回到事件流
描述Dom事件捕获与冒泡的具体流程
window -> document -> html -> body -> 目标元素 反之就是冒泡
window.addEventListener('click',function(){
console.log('window captrue');
},true);
document.addEventListener('click',function(){
console.log('document captrue');
},true);
document.documentElement.addEventListener('click',function(){
console.log('html captrue');
},true);
document.body.addEventListener('click',function(){
console.log('body captrue');
},true);
ev.addEventListener('click',function(){
console.log('ev captrue');
},true);
Event对象应用
event.preventDefault()
event.stopPropagation()
event.stopImmediatePropagation()
event.currentTarget()
event.target()
自定义事件
var ev = new Event('custome');
ev.addEvenListener('custome',function(){
console.log('custome');
});
ev.dispatchEvent(ev);
HTTP协议类
http协议的主要特点：简单快速，灵活，无连接，无状态http报文的组成部分：请求报文和响应报文
请求报文：请求行，请求头，空行，请求体
响应报文：状态行，响应头，空行，响应体
http方法：GET,POST,PUT,DELETE,HEAD
POST和get区别：
get在浏览器回退是无害的，而post会再次提交请求
get产生的url地址可以被收藏，而post不会
get没post安全，因为参数直接暴露在url上，所以不能用来传递敏感信息
get请求在url中传送的参数是有长度限制的，而post没有
get请求会被浏览器主动缓存，而post不会，除非手动设置
http状态码
1xx：指示信息-表示请求已接收，继续处理
2xx：成功-表示请求已被成功接收
3xx：重定向-要完成请求必须进行更进一步的操作
4xx: 客户端错误-请求有语法错误或请求无法实现
5xx：服务器错误-服务器未能实现合法的请求
200 ok客户端请求成功
206：客户发送一个带有range头的请求，服务器完成了它，视频地址过大导致
301：所请求的页面已经转移至新的url
302: 所请求的页面已经临时转移至新的url
304：客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来的缓冲文档还可以继续使用
400：客户端请求有语法错误，不能被服务器所理解
401：请求未经授权，这个状态代码必须和www-Authenticate报头域一起使用
403：对被请求的页面访问被禁止
404：请求资源不存在
500：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常
http持久连接
HTTP协议是位于传输层之上的应用层协议，其网络层基础通常是TCP协议。TCP协议是面向连接和流的。
1.1版本支持持久连接的
原型链类
创建对象有几种方法，构造函数，实例，原型链的关系，instanceof的原理，以及new运算符创建对象方法：
字面量 ：var o1 = {name:'o1'}； var o2 = new Object(name:'o2');
通过构造函数 ：var m = function(name){this.name = name;};var o3 = new m('o3');
Object.caeate : var p = {name: 'p'};var o4 = object.create(p);
函数才有prototype
构造函数，实例，原型链的关系
1、构造函数是什么
所谓的构造函数其实就是一个普通的函数前面加了new运算符，其实质也是一个函数，所以构造函数都有函数的prototype属性
2、实例是什么
实例就是通过构造函数创建出来的对象。
3、原型是什么
原型指的就是原型对象，至于是谁的原型对象，需要靠函数的prototype属性和实例的__proto__属性来区别。
4、原型链是什么
指从一个实例对象开始往上找，这个实例对象的__proto__属性所指向的则是这个实例对象的原型对象，
如果用obj表示这个实例，则原型对象表示为obj.__proto__。同时，
这个原型对象顾名思义也是一个对象，而且它也有上一级的原型对象，相对于上一级原型对象而言，
它也是一个实例对象，那么它也拥有__proto__属性，它的__proto__属性也指向它的原型对象，
后面也以此类推，一直到Object.prototype这个原型为止，Object.prototype为原型链的末尾点。
instanceof的原理
首先，通过instanceof能做什么呢？instanceof可以判断实例对象的__proto__属性是否与构造函数的prototype属性指向同一地址，是的话返回true，否则fasle。
而原型对象上还有上一级的原型对象，上一级原型对象也有对应的构造函数，事实上，实例的__proto__属性与在原型链上的所有构造函数的prototype属性都指向同一个地址，所以有如下的结果。
new运算符做了哪些事情？
第一步：先创建一个对象
第二步：设置原型链，传入相应参数，执行上下文
第三步：判断返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。
var new = function(func){
var o = object.create(func.prototype);
var k = func.call(o);
if( typeof k === 'object'){
return k
}else{
return
}
})
面向对象类
类与实例：
类的声明
function Animal(){
this.name = 'name';
}
es6类的声明
class Animal2{
constructor () {
this.name
}
}
生成实例: new Animal() , new Animal2()
类与继承：
如何实现继承
构造函数实现继承
原型实现继承
组合方式实现继承
继承的几种方式
构造函数实现继承
function Parent1 () {
this.name = 'parent1';
}
function Child1 () {
Parent1.call(this);
this.type = 'child';
}
优点：简单，可以在子类型中向父类型的构造函数传递参数
缺点：相同方法在不同对象的构造函数中都要定义一遍，无法实现函数复用。在超类型原型中定义的方法，对子类型是不可见的，
因此所有的超类型的原型属性都不能被继承。
原型实现继承
function Parent2 () {
this.name = 'parent2'
}
function Child () {
this.type = 'child2'
}
Child2.prototype = new Parent2();
组合方式实现继承
function Parent3 () {
this.name = 'parent3'
this.play = [1,2,3];
}
function Child3() {
Parent3.call(this);
this.type = 'child3';
}
child3.prototype = Parent3.prototype;
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
可以改变实例化值不会跟着改变
通信类
什么是同源策略及限制同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的安全机制。
前后端如何通信 ajax,websocket以及cors
如何创建ajax
1.创建Ajax核心对象XMLHttpRequest
2.向服务器发送请求
3.服务器响应处理
跨域通信的几种方式： jsonp,hash,postMessage,websocket,cors
jsonp原理：
首先在客户端注册一个callback，然后把callback的名字传给服务器。
此时，服务器先生成json数据，然后以javascript语法的方式，生成function，
function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，
这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，
此时数据作为参数，传入了客户端预先定义好的callback函数里。
** 简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。**
hash通信代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
window.onhashchange = function(){
var data = window.location.hash
}
postMessage通信如下
B.Window.postMessage('data','http://www.baidu.com');
window.addEventListener('message',function(event){
event.origin;
event.source;
event.data
})
webSocket通信如下：
var ws = new WebSocket('www://baidu.com');
ws.onopen = function(ev){
ws.send('hello websocket')
}
ws.onmessage = function(){
ws.close()
}
ws.onclose = function(ev){
}
cors通信如下：
fach('/some/url',{
method: 'get',
}).then(function(response){
}).catch(function(err){
});
安全类
一 CSRF是什么？（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式，它在 2007 年曾被列为互联网 20 大安全隐患之一,
也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用也就是人们所知道的钓鱼网站。
尽管听起来像跨站脚本（XSS），但它与XSS非常不同，并且攻击方式几乎相左。XSS利用站点内的信任用户，
而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。与XSS攻击相比，
CSRF攻击往往不大流行（因此对其进行防范的资源也相当稀少）和难以防范，所以被认为比XSS更具危险性。
CSRF攻击原理
一、CSRF攻击原理
二、CSRF防御
1,通过 referer、token 或者 验证码 来检测用户提交。
2,尽量不要在页面的链接中暴露用户隐私信息。
3,对于用户修改删除等操作最好都使用post 操作 。
4,避免全站通用的cookie，严格设置cookie的域。
XSS攻击是什么？
XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器
执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列
表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实
施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨
大的，是web安全的头号大敌。
攻击的条件
实施XSS攻击需要具备两个条件：
一、需要向web页面注入恶意代码；
二、这些恶意代码能够被浏览器成功的执行。
XSS（cross-site scripting跨域脚本攻击）攻击是最常见的Web攻击，其重点是“跨域”和“客户端执行”。有人将XSS攻击分为三种，分别是：
1. Reflected XSS（基于反射的XSS攻击）
2. Stored XSS（基于存储的XSS攻击）
3. DOM-based or local XSS（基于DOM或本地的XSS攻击）
XSS 攻击的防御
XSS防御的总体思路是：对输入(和URL参数)进行过滤，对输出进行编码。
也就是对提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行html编码，
使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的XSS攻击。
xss与csrf区别
xss：浏览器无法判断html中代码的合法性，执行了可能的恶意代码；->原因：服务端过滤用户提交的数据不严谨
csrf：服务器无法判断请求是否来自用户的真实意图，执行了恶意的操作；->原因：服务端对用户请求合法性的验证机制不严谨
渲染机制
什么是Doctype及作用什么是DTD
DTD（document type definition），文档类型定义。可定义合法的XML文档构建模块，
它使用一系列合法的元素来定义文档的结构。通过DTD，每一个xml文件均可携带一个有关其自身格式的描述。
doctype的作用
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，
“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则
浏览器渲染过程
HTML解析出DOM Tree
CSS解析出Style Rules
将二者关联生成Render Tree
Layout 根据Render Tree计算每个节点的信息
Painting 根据计算好的信息绘制整个页面
重排
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性,
重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
下列情况会发生重排
页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片等）
改变窗口尺寸
重绘
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。
浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
布局
布局是一个递归的过程，由根渲染对象开始，它对应html文档元素，逐级递归，
为每个渲染对象计算需要的几何信息。根渲染对象的位置是0,0，它的大小是viewport－浏览器窗口的可见部分。
页面性能
提升页面性能有哪些方法？资压缩合并，减少http请求
非核心代码异步加载
利用浏览器缓存
使用CDN
预解析DNS
异步加载的方式
1，动态加载脚本 2，defer 3,async
异步加载的区别
1，defer是在html解析完之后才会执行，如果是多个，按照加载的顺序执行
2，async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
缓存的分类
强缓存和协商缓存
强制缓存
1.0的时候见到我——Expires
最早使用的是Expires字段，该字段表示缓存到期时间，即有效时间+当时服务器的时间，然后将这个时间设置在header中返回给服务器。
1.1的时候我来了——Cache-Control
已知Expires的缺点之后，在HTTP/1.1中，增加了一个字段Cache-Control，该字段表示资源缓存的最大有效时间，在该时间内，
客户端不需要向服务器发送请求
协商缓存
用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。
