前端知识体系梳理

1：jd描述分析
2：业务分析
3：技术站准备
4：自我介绍
模拟一面
1：布局类
2：css盒模型DOM事件类
3：HTTP写一类原型链
4：前端安全类前端算法类
模拟二面
1：渲染机制类
2：js运行机制
3：页面性能
4：错误监控
模拟三面
1：业务能力
2：团队协作能力
3：带人能力
模拟终面HR
1：职业竞争力
2：职业规划

一面／二面

题目一

假设高度已知，请写出三栏布局，其中左栏，右栏宽度各位300px 自适应

//第一种方案 模拟table
//html
    <div class="container">
        <div class="left"> 左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
//css
* {
    margin: 0;
    padding: 0;
}

.container {
    display: table;
    width: 100%;
}

.container>div {
    height: 300px;
    display: table-cell;
}

.container .left {
    width: 300px;
    background: #fe4565;
}

.container .middle {
    background: #f3d565;
}

.container .right {
    width: 300px;
    background: #eeab65;
}
//第二种方案 flex
//html
    <div class="container">
        <div class="left"> 左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
//css
* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
}

.container>div {
    height: 300px;
}

.container .left {
    width: 300px;
    flex: 0 0 300px;
    background: #fe4565;
}

.container .middle {
    flex: 1;
    background: #f3d565;
}

.container .right {
    width: 300px;
    flex: 0 0 300px;
    background: #eeab65;
}    
//第三种方案 float
//html
    <div class="container clearfix">
        <div class="left"> 左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    </div>
//css
* {
    margin: 0;
    padding: 0;
}

.clearfix:after,
.clearfix:before{
    content: ' ';
    display: table;
}
.clearfix:after {
    clear: both;
}

.container {

}

.container>div {
    height: 300px;
}

.container .left {
    width: 300px;
    float: left;
    background: #fe4565;
}

.container .middle {

    background: #f3d565;
}

.container .right {
    width: 300px;
    float: right;
    background: #eeab65;
}
//第四种方案 position: absolute;
//html
    <div class="container">
        <div class="left"> 左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    </div>
//css
* {
    margin: 0;
    padding: 0;
}


.container {
   position: relative;
}

.container>div {
    height: 300px;
}

.container .left {
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fe4565;
}

.container .middle {
    position: absolute;
    top: 0;
    left: 300px;
    right: 300px;
    background: #f3d565;
}

.container .right {
    width: 300px;
    position: absolute;
    top: 0;
    right: 0; 
    background: #eeab65;
}
//第五种解决方案 grid
//html
    <div class="container">
        <div class="left"> 左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
//css
* {
    margin: 0;
    padding: 0;
}

.container {
   display: grid;
   grid-template-rows: 100px;
   /* 设置高度100px */
   grid-template-columns: 300px auto 300px;
   /* 设置左中右的宽度分别为300px auto 300px */
}

.container>div {
    height: 300px;
}

.container .left {
    width: 300px;
    background: #fe4565;
}

.container .middle {
    background: #f3d565;
}

.container .right {
    width: 300px;
    background: #eeab65;
}      

盒模型

基本概念： 标准模型+ IE模型

标准模型width是content
IE模型width是 content+padding+border

标准模型和IE模型区别
css如何设置这两种模型

//浏览器默认的渲染方式
box-sizing:content-box;
box-sizing:border-box;

js如何设置获取盒模型对应的宽和高

//只能获取内联属性的样式
dom.style.width/height
//获取渲染以后的width 只有ie支持
dom.currentStyle.width/height
// 兼容性更好 chrome和IE 都支持
window.getCumputedStyle(dom).width/height
// 计算元素的绝对位置 相对视窗左上角，left top width height
dom.getBoundingClientRect().width/height

实例题（根据盒模型解释边距重叠）
bfc（边距重叠解决方案）
基本概念 块级格式化上下文
bfc的原理
1：bfc这个元素的垂直方形上的边距会发生重叠
2：bfc区域不会与浮动元素的box重叠
3：bfc 在页面上是一个独立的容器
4：计算bfc高度的时候浮动元素也会参与计算

//创建bfc
1:float 值不为none
2：position: 不为 static relative;
3：display:table
4：overflow: hidden;

bfc使用场景

DOM事件类
基本概念：DOM事件的级别

DOM0 element.onclick=function(){}
//dom1标准制定的时候 不涉及事件饿制定
DOM2 element.addEventListener('click',function(){},false)
//DOM3 新增鼠标键盘等事件
DOM3 element.addEventListener('keyup',function(){},false)

DOM事件模型

捕获
冒泡

DOM事件流

    第一阶段事件捕获
    第二阶段目标阶段
    第三阶段事件冒泡

描述DOM事件捕获的具体流程

window > document > html > body ... 目标元素
window.addEventListener('click',function(){},true)
//设置为true 事件在捕获阶段触发 默认的false 事件冒泡阶段触发
document.addEventListener('click',function(){},true)
document.documentElement.addEventListener('click',function(){},true);
document.body.addEventListener('click',function(){},true);
ev.addEventListener('click',function(){},true)

Event对象的常见应用

//阻止默认事件
event.preventDefault()
//阻止事件冒泡
event.stopProagation()
//事件响应优先级
event.stopImmediatePropagation()
//事件委托 事件代理
//当前绑定的事件 
event.currentTarget
event.target

自定义事件

var eve= new Event('custome');
ev.addEventListener('custom',function(){
console.log('custome')
})
ev.dispatchEvent(eve)
//Event CustomEvent 都是自定义事件 CustomEvent不仅可以指定事件名还可以跟一个object 对象参数
var eve = new Event('test');
ev.addEventListener('test',function(){
console.log('test dispatch')
});
setTimeout(function(){
ev.dispatchEvent(eve)
},1000);

HTTP协议类

HTTP协议的主要特点

简单快速 灵活 无连接 无状态

HTTP报文的组成部分

请求报文（请求行 请求头 空行 请求体）
响应报文（状态行 响应头 空行 响应体）

HTTP方法

get     获取资源
post    传输资源
put     更新资源
delete  删除资源
head    获取报文首部

POST和GET的区别

get 在浏览器回退时候是无害的，而post会再次提交请求
get 产生的url可以被收藏，而post 不可以
get 请求会被浏览器主动缓存，而post不会，除非手动设置
get 请求只能进行url编码，而post支持多种编码方式
get 请求的参数会被完整保留在浏览器历史记录里，而post的参数不会被保留
get 请求的url中传送的擦数是有长度限制的，而post没有限制对参数的数据烈性，get只接受AScll字符而post没有限制
get比post更不安全，因为参数直接暴露在url，所以不能用来传递敏感信息
get参数通过url传递，post放在Request body 中

HTTP状态码

1xx ：指示信息 - 表示请求已经接受，继续处理
2xx ：成功 - 表示请求已被成功接受
200 ok :客户端请求成功
206 Partial content： 客户段发送了一个带有Range头get请求，服务器完成了它
3xx ：重定向 - 要完成请求必须进行更近一步的操作
301 Moved Permanently ：所请求的页面已经转移至信url
302 Found ：所请求的页面已经临时转移至信的url
304 Not Modified : 客户端有缓冲的文档并发出了一个条件性的请求，服务器高速客户，原来缓冲的文档还可以继续使用
4xx ：客户端错误 - 请求又语法错误火请求无法实现
400 Bad Request ：客户端请求有语法错误，不能被服务器所解释
401 Unauthorized：请求未经授权，这个状态码必须和www-Authenticate报头域一起使用
403 Forbidden 对被请求的页面的访问被禁止
404 Not found ：请求资源不存在
5xx ：服务器错误 - 服务器未能实现合法的请求
500 internal server Error ： 服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 server Unavailable ：请求未完成，服务器临时过载或者当机，一段时间后可能恢复正常 

什么是持久连接

HTTP协议采用 '请求-应答'模式 ，当使用普通模式，即非 keep-alive模式时，每个请求。应答客户和服务器都要重新建一个连接，完成之后立即断开连接（HTTP协议为无连接协议）

当使用 kee--alive模式（又称持久连接 连接重用）时，keep-alive 功能使客户端到服务器连接持久有效，当出现对服务器的后继请求时，leep-alive 功能避免了建立或者重新建立连接
//版本支持http1.1

什么是管线化

在使用持久连接的情况下，某个连接上信息的传递类似于
请求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 o11 = new Object({name:'o11'})
//第二种
var M  = function(name){this.name = name}
var o2 = new M('o2');
//第三种
var P = {name:'o3'}
var o3 = Object.create(P)  

原型 构造函数 实例 原型链

1: 只要是对象 就是一个实例
2: 构造函数，任何函数只要被new使用了就是构造函数
3:constructor 判断是否是当前函数的原型对象
4:构造函数才有 prototype 对象是没有的

instanceof的对象

new运算符

一个新对象被创建 它继承自foo.prototype

构造函数foo 被执行，执行的时候，响应的参数被传入，同时上下文（this）会被指定这个新实例。new foo 等同于 new foo（）只能用在不传递任何参数的情况下。

如果构造函数返回了一个‘对象’ 那么这个对象会取代整个new出来的结果。如果函数没有返回对象，那么new出来的结果就是步骤12创建的对象

面向对象

类与实例
类的声明

function Animal () {
this.name = 'name';
}
//es6 种的class 的声明
class Animal2{
constructor() {
  this.name = name; 
 }
}

生成实例

//实例化
console.log(new Animal(),new Animal2());    

类与继承
如何实现继承
继承的几种方式

//实现类继承的原理就是原型链
//第一种方式借助构造函数实现继承
function Parent1(){
this.name = "parent1";
}
//call apply 改变js运行上下文
function Child1(){
//将父级构造函数的this指向子构造行数实例上
Parent1.call(this);
this.type = 'child1';
}
//Parent1 原型链上的属性并没有被Child1 所继承 如下 Child1 无法继承say方法
Parent1.prototype.say= function(){};
//总结 父级属性都在构造函数里面是可以继承的 在prototype 不可以继承

//第二种继承方式 借助原型链实现继承
function Parent2(){
this.name = 'Parent2';
this.play = [1,2,3]
}
function Child2(){
 this.type = 'child2';
}
Child2.prototype = new Parent2()
//Child2.prototype 是子类的构造函数的一个属性 是一个对象可以任意赋值 new Child2().__proto__  Child2.prototype===new Child2().__proto__ 实例话一个新的对象
//原型链继承方式的缺点

var s1 = new Child2();
var s2 = new Child2();
console.log(s1,s2);
//重新给s1.play 赋值
s1.play.push(4)
console.log(s2.play) //[1, 2, 3, 4]
s1.__proto__===s2.__proto__ //true

//第三种继承方式 组合方式 构造函数和原型链
function Parent3(){
this.name = 'parent3';
this.play = [1,2,3];
}
function Child3(){
Parent3.call(this);
this.type = 'child3';
}
Child3.prototype = new Parent3()
var s1 = new Child3();
var s2 = new Child3();
s1.play.push(4);
s1.play //[1,2,3,4]
s2.play //[1,2,3]

//第四种方式 组合方式的优化1
function Parent4(){
    this.name='Parent4';
    this.play=[1,2,3]
}

function Child4(){
    Parent4.call(this);
    this.type = 'Child4';
}
Child4.prototype = Parent4.prototype;

var s1 = new Child4();
var s2 = new Child4();
s1 instanceof Child4 //true
s1 instanceof Child4 // true

instanceof 判断对象是不是该类的实例
s1.constructor //返回的结构 function Parent4(){this.name='Parent4';this.play=[1,2,3]}

 //第五种方式 组合方式的优化2
 function Parent5 (){
     this.name='parent5';
     this.play=[1,2,3]
}

function Child5 (){
    Parent5.call(this);
    this.type = 'Child5'
}

Child5.prototype = Object.creat(Parent5.Prototype);
Child5.prototype.constructor = Child5
var s1 = new Child5();
var s2 = new Child5();
s1 instanceof  Child5 //true 
s1 instanlceof Child5 //true
s5 constructor  //返回的结果 function Child5(){Parent5.call(this); this.type = 'child5'}

通信类

什么是同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互这是一个用于隔离潜在恶意文件的关键的安全机制

源 包含 （协议 域名 和端口）

Cookie LocalStorage 和 IndexDB 无法读取
DOM无法获取
AJAX请求不能发送

前后端如何通信

ajax（同源策略下的通信）
WebSocket（没有限制）
CORS（支持跨域通信和同源通信）

如何创建ajax

XMLHttpRequest 对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

跨域通信的几种方式

JSONP
Hash
postMessage
WebSocket
CORS

fetch('/some/url',{
    method:'get'
}).then(function(response){
}).catch(function(err){
    //出错了 等价于 then 的第二个参数 但这样更好用更直接
})

安全类

CSRF

基本概念和缩写
CSRF 通常称为跨站请求伪造，英文名 Cross-site request forgery 缩写CSRF

攻击原理

防御措施

Token 验证
Referer 验证
隐藏令牌

XSS

基本概念和缩写
XSS（cross-site scripting 跨域脚本攻击）

攻击原理：http://www.imooc.com.learn/812
防御措施：http://www.imooc.com.learn/812

算法类

排序

堆栈 队列 链表

递归

波兰式和逆波兰式

二面／三面

渲染机制

什么是DOCTYPE 及作用
//DID（document type definition 文档类型定义） 是一系列的语法规则 ，用来定义XML 或者XHTML 的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式

DOCTYPE 是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证 如果文件代码不合法，那么浏览器解析便会出一些差错

HTML5
<!DOCTYOE html>

HTML4.0.1 Strict
HTML4.01 Transitinal

浏览器渲染过程

重排Reflow

定义
DOM 结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各个样式来计算并根据计算结果奖元素放到它该出现的位置，这个过程称之为reflow

触发 Reflow
当你增加 ，删除，修改 DOM结点时，会导致Reflow 或Repaint
当你移动DOM位置的时候 或是搞个动画的时候
当你修改css样式的时候
当你Resize窗口的时候 或是滚动的时候
当你修改网页默认字体的时候

重绘Repaint

定义
当各盒子的位置 大小 及其其他属性 例如颜色，字体大小都确定下来以后，浏览器于是便把这些元素都按照各自特性绘制一遍，于是页面出现了，这个过程称之为repaint

触发Repaint
DOM改动
CSS改动

布局Layout

js运行机制

例1

console.log(1);
setTimeout(function(){
 console.log(3);
},0);
//这里是异步队列 js是单线程，执行完同步队列之后执行异步队列
console.log(2);

例2

console.log('A');
while(true){
}
console.log('B')
//打印结构只是输出A

例3

//什么是EventLoop

for(var i = 0; i < 4 ;i++){
    settimeout(function(){
        console.log(i)
    },1000);
} 
//异步队列被放入的时间和执行时间
//打印结果4个4
开启异步任务事件
settimeout和setInterval
DOM 事件
ES6中的Promise

理解js单线程的概念（同一时间内只能干一件事情）
理解任务队列
理解EventLoop
理解那些语句会放入异步队列
理解语句放入异步任务队列的时机

页面性能

//题目 提升页面性能的方法有哪些？
1:资源压缩合并，减少HTTP请求
2:非核心代码异步加载 》 异步加载的方式 》 异步加载的区别
异步加载的方式

 1》动态脚本加载 2》defer 3》 async

异步加载的区别

1》defer 是在HTML解析完后才会执行，如果是多个，按照加载的顺序依次执行
2》async 是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关。

3:利用浏览器缓存 》 缓存的分类 》 缓存的原理
4:实用CDN
5:预解析DNS
<meta htt[-dquiv-'x-dns-prefetch-control' content='no'
强制打开a标签的dns预解析
<link rel='dns-refetch' href='//host_name_to_prefetch.com' >

错误监控

前端错误的分类

1:及时运行错误：代码错误
错误捕获方式1》try...catch 2》window.onerror

2:资源加载错误
1》 object.onerror 2》performance.getEntries() 3》Error事件捕获

performance.getEntries().forEach(item=>(console.log(item.name)))

//Error 事件捕获
        window.addEventListener('error',function (e) {
            // body...
            console.log('捕获',e);
        },true);

    </script>
    <script type="text/javascript" src="//baidu.com/test.js"></script>

延伸：跨域的js运行错误可以捕获吗，错误提示是什么？应该怎么处理？

错误的捕获方式

1:在script 标签增加 crossorigin 属性
2:设置js资源响应头 Access-Control-Allow-Origin:*

上报错误的基本原理

1: 采用Ajax 通信的方式上报
2: 利用Image 对象上报

   <script type="text/javascript">
       (new Image()).src='http://baidu.com/testjs?=tksjg';
   </script>