前端知识整理1
前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。
本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:）
1.HTML
2.CSS
2.1 css三栏布局实现方案
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
1.浮动布局
实现方法：左栏、右栏分别左右浮动，定宽300px，中间不设置宽度自适应
缺点：浮动元素脱离文档流，需要清除浮动，如果处理不好，会导致很多问题（影响前后标签、父级标签的位置及 width height 属性）。
优点：比较简单，兼容性比较好。只要清除浮动做的好，是没有什么问题的。
2.绝对定位布局
实现方法：三栏设置绝对定位，左栏 left:0; width:300px，右栏 right:0; width:300px，中间 left:300px; right:300px;
缺点：脱离文档流，之后的元素也要脱离文档流。有效性、可使用性比较差。
优点：方便快捷，配合js使用方便。
3.flex布局
实现方法：三栏的父元素 display:flex; 中间 flex:1; 左栏、右栏定宽300px;
优点：移动端已经大量使用，是css3为了解决上面两种方案的缺点而出现，是相对比较完美的方案。
缺点：不能兼容IE8及以下浏览器。
4.表格布局
实现方法：三栏的父元素 display:table; 三栏分别设置 display: table-cell; 左栏、右栏定宽300px;
优点：用表格布局实现三栏布局很简单就能搞定，兼容性好（兼容IE8），在flex布局不兼容的时候，可以尝试表格布局。
缺点：有些历史诟病，只适用部分场景；某个内容撑开了，其他内容也会跟着撑开，有时候这种效果不是我们想要的。
5.网格布局
实现方式：三栏的父元素 display:grid; grid-template-rows:100px; grid-template-columns:300px auto 300px;
网格布局是新出的一种布局方式，技术比较新，还未普及，但是也需要我们掌握。
三个延伸问题
1.几种布局方式的优缺点？
如上
2.假设把高度去掉，三栏的高度根据内容自适应，那个方案不再适用，哪个还能适用？
flex和table还能适用，其余不再适用。
3.兼容性如何，在真实业务中，哪个方案最实用？
如上，根据使用场景和业务需求，选择合适的方案。
2.2 清除浮动的实现方案
题目：有哪些清除浮动的方案？每种方案的优缺点？
2.3 css盒模型
题目：谈谈你对css盒模型的认识？
1.基本概念（标准模型+IE模型）
css 盒模型：margin + border + padding + content
2.标准模型和IE模型的区别
区别就是高度和宽度的计算方式不同
标准模型：width(height) = content
IE模型：width(height) = border + padding + content
3.css如何设置这两种模型
标准模型：box-sizing: content-box; （浏览器默认值）
IE模型：box-sizing: border-box;
4.JS如何设置、获取盒模型对应的宽和高
（1）dom.style.width/height ，这种方式只能获取内联样式设置的宽和高
（2）dom.currentStyle.width/height ，不管是内联样式、<style>标签写的样式、<link>外联样式，即获取渲染后的宽高（仅IE支持）
（3）window.getComputedStyle(dom).width/height ，获取渲染后的宽高（兼容性更好、通用性更好，chrome/firefox）
（4）dom.getBoundingClientRect().width/height ，获取渲染后的宽高（计算元素的绝对位置，返回top/left/width/height）
5.根据盒模型解释边距重叠
（1）父子元素边距重叠，取最大值合并
（2）兄弟元素边距重叠，取最大值合并
（3）空元素上下边距重叠，取最大值合并
6.BFC（边距重叠解决方案）
BFC的基本概念：块级格式化上下文
BFC的原理（BFC的渲染规则）：
（1）在BFC元素的垂直方向的边距会发生重叠；
（2）BFC的区域不会与浮动元素发生重叠；
（3）BFC在页面上是一个独立的容器，外面的元素不影响里面，里面的元素不影响外面；
（4）计算BFC的高度时，浮动元素也会参与计算；（BFC子元素即使是float也会参与高度计算）
如何创建BFC？
（1）float的值不为none；
（2）position的值不为static或者relative（可以设置为absolute或者fixed）；
（3）display:inline-block; 或者table/table-cell等与table相关的属性
（4）overflow:hidden; overflow:auto;
3.JavaScript
3.1 DOM 事件
DOM事件的级别
DOM0 element.onclick = function(){};
// false 为默认值，代表事件在冒泡阶段触发。设为true，代表事件在捕获阶段触发。
DOM2 element.addEventListener('click', function(){}, false);
DOM3 element.addEventListener('keyup', function(){}, false);DOM事件模型
捕获：由上到下
冒泡：由下到上
DOM事件流
三个阶段：（鼠标点击）-> 捕获 -> 目标阶段 -> 冒泡
DOM事件捕获的具体流程
window -> document -> html -> body -> ...(父元素) -> 目标元素
document.documentElement === html，冒泡流程则相反
Event对象的常见应用
event.preventDefault(); // 阻止默认行为 event.stopPropagation(); // 阻止事件冒泡 event.stopImmediatePropagation(); // 元素绑定了多个同样类型的事件，处理事件优先级 event.currentTarget; // 当前绑定事件的对象 event.target; // 当前被点击的元素
自定义事件
let ev = document.getElementById('ev');
let eve = new Event('custome');
ev.addEventListener('custome', function () {
console.log('custome');
});
ev.dispatchEvent(eve);
// new CustomEvent(); // 用法类似Event，传参不一样事件捕获流程
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);
// window -> document -> html -> body -> ev自定义事件
let ev = document.getElementById('ev');
let eve1 = new Event('test1');
ev.addEventListener('test1', function () {
console.log('test1 dispatch');
});
setTimeout(function () {
ev.dispatchEvent(eve1);
}, 1000);
/*bubbles: 一个布尔值, 表明该事件是否会冒泡
cancelable: 一个布尔值, 表明该事件是否可以被取消
detail: 当事件初始化时传递的数据*/
let eve2 = new CustomEvent('test2', {bubbles: false, cancelable: true, detail: {a: 'aaa'}});
ev.addEventListener('test2', function (e) {
console.log(e);
console.log('test2 dispatch');
});
setTimeout(function () {
ev.dispatchEvent(eve2);
}, 2000);3.2 HTTP协议
HTTP协议的主要特点？
简单快速，灵活，无连接，无状态
HTTP报文的组成部分？
请求报文：请求行，请求头，空行，请求体
响应报文：响应行，响应头，空行，响应体
HTTP方法？
GET 获取资源
POST 传输资源
PUT 更新资源
DELETE 删除资源
HEAD 获得报文首部
POST和GET的区别？
重要的五点：
（1）GET在浏览器回退时是无害的，而POST会再次提交请求
（2）GET请求会被浏览器主动缓存，而POST不会，除非手动设置
（3）GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
（4）GET请求在URL中传送的参数是有长度限制的，而POST没有限制
（5）GET参数通过URL传递，POST放在Request body中
其他不同：
GET产生的URL地址可以被收藏，而POST不可以
GET请求只能进行URL编码，而POST支持多种编码方式
对参数的数据类型，GET只接受ASCll字符，而POST没有限制
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
HTTP状态码？
1xx: 指示信息-表示请求已经接收，继续处理
2xx: 成功-表示请求已被成功接收
3xx: 重定向-要完成请求必须进行更进一步的操作
4xx: 客户端错误-请求有语法错误或请求无法实现
5xx: 服务端错误-服务端未能实现合法的请求
常见的状态码：
200 OK：客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务端完成了它
301 Moved Permanently：所请求的页面已经转移至新的URL
302 Found：所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓冲的文档并发出了一个条件性的请求，服务端告诉客户，原来缓冲的文档还可以继续使用
400 Bad Request：客户端请求有语法错误，不能被服务器所理解
401 Unauthorized：请求未经授权，这个状态码必须和WWW-Authenticate报头域一起使用
403 Forbidden：对被请求页面的访问被禁止
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
管线化特点：
1、管线化机制通过持久连接完成，仅 HTTP/1.1 支持此技术
2、只有GET和HEAD请求可以进行管线化，而POST则有所限制
3、初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持 HTTP/1.1 版本的协议
4、管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
5、HTTP/1.1 要求服务器端支持管线化，但并未要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
6、由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，
因此现代浏览器如Chrome和FireFox默认并未开启管线化支持
3.3 原型和原型链
创建对象有几种方法？
// 第一种方式：字面量
let o1 = {name: 'o1'};
let o2 = new Object({name: 'o2'});
// 第二种方式：通过构造函数
let M = function (name) {
this.name = name;
};
let o3 = new M('o3');
// 第三种方式
let p = {name: 'p'};
// Object.create() 的参数就是所创建出来的对象的__proto__
let o4 = Object.create(p);
console.log(o4.__proto__ === p); // trueinstanceof的原理？
当使用instanceof判断一个对象实例的构造函数时，只要是在实例的原型链上的构造函数，instanceof 都返回true
console.log(o3 instanceof M); // true console.log(o3 instanceof Object); // true console.log(o3.__proto__ === M.prototype); // true console.log(M.prototype.__proto__ === Object.prototype); // true console.log(o3.__proto__.constructor === M); // true console.log(o3.__proto__.constructor === Object); // false
new运算符原理？
let new1 = function (func) {
// 一个新对象被创建，它继承自 func.prototype
let o = Object.create(func.prototype);
// 构造函数foo被执行。执行的时候，相应的参数会被传入，同时上下文（this）会被指定为这个新实例
// new func 等同于 new func()，只能用在不传递任何参数的情况
let k = func.call(o);
if (typeof k === 'object') {
// 如果构造函数返回了一个对象，那么这个对象会取代整个new出来的结果
return k;
} else {
// 如果构造函数没有返回对象，那么 new 出来的结果就是之前 Object.create 创建的对象
return o;
}
};
let o5 = new1(M);
console.log(o5 instanceof M, o5 instanceof Object); // true true
console.log(o5.__proto__.constructor === M); // true
console.log(o5.__proto__.constructor === Object); // false
M.prototype.walk = function () {
console.log('walk');
};
o5.walk(); // 'walk'
o3.walk(); // 'walk'3.4 面向对象
声明类的方式
/*ES5类的声明*/
function Animal () {
this.name = 'name';
}
/*ES6中class的声明*/
class Animal2 {
constructor () {
this.name = name;
}
}
/*实例化*/
console.log(new Animal(), new Animal2()); // Animal {name: "name"} Animal2 {name: ""}js实现继承的几种方式
1.借助构造函数实现继承
原理：利用call、apply，改变父类的this指向
缺点：无法继承父类prototype上的属性
function Parent1 () {
this.name = 'parent1';
}
Parent1.prototype.say = function () {
console.log('say');
};
function Child1 () {
Parent1.call(this); // apply
this.type = 'child1';
}
console.log(new Child1()); // Child1 {name: "parent1", type: "child1"}
console.log(new Child1().say()); // Uncaught TypeError: (intermediate value).say is not a function2.借助原型链实现继承
原理：原型链的原理
缺点：实例化出来的每一个对象，他们的属性会相互影响。（原型链中的原型对象是公用的）
function Parent2 () {
this.name = 'parent2';
this.arr = [1, 2, 3];
}
function Child2 () {
this.type = 'child2';
}
Child2.prototype = new Parent2();
let s1 = new Child2();
let s2 = new Child2();
s1.arr.push(4);
console.log(s1.arr); // [1, 2, 3, 4]
console.log(s2.arr); // [1, 2, 3, 4]
console.log(s1.__proto__ === Child2.prototype); // true
console.log(s1.__proto__ === s2.__proto__); // true3.组合方式
缺点：父类的构造函数执行了两次。。。
function Parent3 () {
this.name = 'parent3';
this.arr = [1, 2, 3];
}
function Child3 () {
Parent3.call(this);
this.type = 'child3';
}
Child3.prototype = new Parent3();
let s3 = new Child3();
let s4 = new Child3();
s3.arr.push(4);
console.log(s3.arr, s4.arr); // [1, 2, 3, 4] [1, 2, 3]4.组合方式的优化1
缺点：通过子类实例化的对象，它的constructor指向了父类而不是子类，无法区分实例是由父类创造的还是子类创造的
function Parent4 () {
this.name = 'parent4';
this.arr = [1, 2, 3];
}
function Child4 () {
Parent4.call(this);
this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
let s5 = new Child4();
console.log(s5 instanceof Child4, s5 instanceof Parent4); // true true
// s5是通过new Child4()创建的，它的constructor应该指向Child4，但是却指向了Parent4
console.log(s5.constructor); // f Parent4 () {}5.组合方式的优化2
js实现继承比较完美的方案
function Parent5 () {
this.name = 'parent5';
this.arr = [1, 2, 3];
}
function Child5 () {
Parent5.call(this);
this.type = 'child5';
}
// Object.create 创建了一个中间对象
Child5.prototype = Object.create(Parent5.prototype);
// 如果一下这句代码放在上一种方案，因为Child4.prototype也是一个对象（引用类型数据），直接赋值也是改的Parent4
Child5.prototype.constructor = Child5;
let s7 = new Child5();
let s8 = new Child5();
s7.arr.push(4);
console.log(s7.arr, s8.arr); // [1, 2, 3, 4] [1, 2, 3]
console.log(s7 instanceof Child5, s7 instanceof Parent5); // true true
console.log(s7.constructor); // ƒ Child5 () {}3.5 前端通信
1.什么是同源策略以及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制
限制：（1）Cookie、LocalStorage和IndexDB无法读取（2）DOM 无法获得（3）AJAX请求不能发送
2.前后端如何通信
Ajax WebSocket CORS
3.如何创建Ajax
（1）XMLHttpRequest 对象的工作流程
（2）兼容性处理
（3）事件的触发条件
（4）事件的触发顺序
util.json = function (options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function () {},
error: function () {},
};
util.extend(opt, options);
if (opt.url) {
var xhr = XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k]);
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res ==== 'string') {
res = JSON.parse(res);
opt.success.call(xhr, res);
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
};
}
};4.跨域通信的几种方式
（1）JSONP
util.jsonp = function (url, onsuccess, onerror, charset) {
var callbackName = util.getName('tt_player');
window[callbackName] = function () {
if (onsuccess && util.isFunction(onsuccess)) {
onsuccess(arguments[0]);
}
};
var script = util.createScript(url + '&callback=' + callbackName, charset);
script.onload = script.onreadystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = script.onreadystatechange = null;
// 移除该script的 DOM 对象
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// 删除函数或变量
window[callbackName] = null;
}
};
script.onerror = function () {
if (onerror && util.isFunction(onerror)) {
onerror();
}
};
document.getElementsByTagName('head')[0].appendChild(script);
};举个例子
// 使用jsonp的方式向页面动态添加了script，发出一个请求。注意callback=需要执行的函数名
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
// 上面的请求会返回如下内容，你在本地定义了全局函数jsonp()，随之执行
<script type="text/javascript">
jsonp({
data: {},
// ...
});
</script>（2）Hash
// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的伪代码如下
window.onhashchange = function () {
var data = window.location.hash;
};（3）postMessage
HTML5的标准，利用一些API就能实现
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
// 在A中伪代码如下：
window.postMessage('data', 'http://B.com');
// 在B中的伪代码如下：在窗口B中监听
window.addEventListener('message', function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);（4）WebSocket
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log('Connection closed.');
};Websocket【参考资料】：http://www.ruanyifeng.com/blo...
（5）CORS
// url（必选），options（可选）
fetch('/some/url/', {
method: 'get',
}).then(function (response) {
}).catch(function (err) {
// 出错了，等价于 then 的第二个参数，但这样更好用更直观
});CORS【参考资料】：http://www.ruanyifeng.com/blo...
3.6 前端安全
1.CSRF
CSRF，通常称为跨站请求伪造，英文名 Cross-site request forgery
攻击原理：
防御措施：
token验证
referer验证（页面来源验证）
隐藏令牌（类似token，把token放在http header中，不放在链接上）
2.XSS
XSS（cross-site scripting 跨域脚本攻击）
攻击原理
注入js脚本
防御措施
宗旨：让注入的js脚本无法执行