完虐前端面试官（offer，拿来吧你~）

a、br、code、em、img、input...

div、p、dl、dt、form、h1~h6...

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

 .parent { 	overflow: hidden; } 

.clear { 	clear: both; } 

.clearfix:after {
	content: "";  // 设置内容为空
	height: 0;  // 高度为0
	line-height: 0;  // 行高为0
	display: block; // 将文本转为块级元素
	visibility: hidden; // 将元素隐藏
	clear: both; //清除浮动
}
.clearfix {
	zoom: 1;  // 为了兼容IE
}

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   initial-scale：初始的缩放比例
   minimum-scale：允许用户缩放到的最小比例
   maximum-scale：允许用户缩放到的最大比例
   user-scalable：用户是否可以手动缩放

text-align:center /*水平居中*/  
height = 100px;  /*垂直居中  */
line-height = 100px; 

text-align:center 水平居中  
display:table-cell; 垂直居中  
vertical-align:middle; 

父级元素设置position:relative;
儿子元素设置
width: 100px;  
height: 100px;  
position:absolute;  
top:50%;  
left:50%;  
margin-top:-50px;  
margin-right:-50px;  

父级元素设置position:relative;
儿子元素设置
position:absolute;  
top:0;  
bottom:0;  
left:0;  
right:0;  
margin:auto;

父级元素
display:table-cell;  
text-align:center;  
vertical-align:middle; 
子元素
display:inline-table

语法：@media 媒介类型 and | not | only (媒介特性) {
	css 代码
}
媒介类型：
	print: 用于打印机和打印预览
	screen: 用于电脑屏幕、平板电脑、只能手机等
	all: 用于所有媒体设备类型
媒介特性：
	device-height: 定义输出设备的屏幕可见高度
	device-width: 定义输出设备的屏幕可见宽度
	height：定义输出设备中的页面可见区域高度。
	width：定义输出设备中的页面可见区域宽度。
	max-device-height：定义输出设备的屏幕可见的最大高度。
	max-device-width：定义输出设备的屏幕可见的最大宽度。
	max-height：定义输出设备中的页面可见的最大高度。
	max-width：定义输出设备中的页面可见的最大宽度。
	min-device-height：定义输出设备的屏幕可见的最小高度。
	min-device-width：定义输出设备的屏幕可见的最小宽度。
	min-height：定义输出设备中的页面可见的最小高度。
	min-width：定义输出设备中的页面可见的最小宽度。

$("#aijquery"): //这种方式获取得到的就是jquery对象
document.getElementById("aijquery")://这种方法获取到的就是dom对象

$(document.getElementById("aijquery"))

$("#aijquery").get(0)

$("#aijquery")[0];
$("div")[5];
//上面这两种返回的都是dom对象,可以直接使用js里的方法

document.querySelectorAll('*')

[...document.querySelectorAll('*')]

[...document.querySelectorAll('*')}.map(ele => ele.tagName)

new Set([...document.querySelectorAll('*').map(ele=>ele.tagName)).size

console.log(typeof 1);               // number
console.log(typeof true);            // boolean
console.log(typeof 'mc');           // string
console.log(typeof function(){});    // function
console.log(typeof []);              // object 
console.log(typeof {});              // object
console.log(typeof null);            // object
console.log(typeof undefined);       // undefined
优点：能够快速区分基本数据类型 缺点：不能将Object、Array和Null区分，都返回object

console.log(1 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true
优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象 缺点：Number，Boolean，String基本

var toString = Object.prototype.toString;
 
console.log(toString.call(1));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('mc'));                  //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]
优点：精准判断数据类型 缺点：写法繁琐不容易记，推荐进行封装后使用

如何创建Ajax
XMLHttpRequest对象的工作流程
==========兼容性写法===========
var xmlHttp = null;
if(window.XMLHttpRequset) {
	// IE7+,Firefox,Chrome,Safari,Opera
	xmlHttp = new XMLHttpRequset();
}
else {
	// IE5,IE6
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
兼容性处理
事件的触发条件
xmlHttp.onreadystatechange = function() {
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		responseText、responseXML
	}
}
事件的触发顺序
======================注意=================
如果是POST请求则需要添加头
xmlHttp.setRequestHeader("Content-type": "application/x-www-form-urlencoded")

~ function () {
    function add(number) {
    		if (typeof number !== 'number' || Number.isNaN(number)) {
        	throw new Error('请输入数字～');
    		}
        return this + n
    }
    function minus(number) {
    		if (typeof number !== 'number' || Number.isNaN(number)) {
        	throw new Error('请输入数字～');
    		}
        return this - n
    }
    Number.prototype.add = add
    Number.prototype.minus = minus
}()

console.log((5).add(3).minus(2)) // 6

DOM0：element.onlick = function(){}
	一是在标签内写onclick事件
	二是在JS写onclick=function(){}函数
DOM2：element.addEventListener('click', function(){},false)
	三个参数分别表示为：事件名、事件处理的函数、为true则表示在捕获阶段调用，为false则表示在冒泡阶段调用
DOM3：element.addEventListener('keyup',function(){},false)
    DOM事件模型：（冒泡、捕获...）
冒泡事件是从内向外；捕获是从外向内======document->html->body->div
    DOM事件流
一个完整的事件流分为三个阶段：捕获-》目标阶段-》冒泡=========事件通过捕获到达目标元素再从目标元素通过冒泡上传到元素
    描述DOM事件捕获的具体流程
捕获：window->document->html->body->......->目标元素
冒泡：相反
    Event事件的用
			event.preventDefault()  // 阻止默认行为
			event.stopPropagation()  // 阻止冒泡行为
			event.stopImmediatePropagation()  // 在调用完stopPropagation函数之后，就会立即停止对后续节点的访问，但是会执行完绑定到当前节点上的所有事件处理程序；而调用stopImmediatePropagation函数之后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序就不会再执行了
			event.currentTarget  //  指的是绑定了事件监听的元素（可以理解为触发事件元素的父级元素）
		event.target  // 表示当前被点击的元素
    自定义事件（CustomEvent）
		var eve = new Event('custom');
		eve.addEventListener('custom',function(){
			console.log('custom')
		})
		eve.dispatchEvent(eve)

1.1 最简单的方法就是JSON.parse(JSON.stringify())
	但是这种拷贝方法不可以拷贝一些特殊的属性（例如正则表达式，undefine，function）
1.2 用递归去复制所有层级属性

function deepCopyTwo(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj == 'object') {
        for (const key in obj) {
            //判断obj子元素是否为对象，如果是，递归复制
            if (obj[key] && typeof obj[key] === "object") {
                objClone[key] = deepCopyTwo(obj[key]);
            } else {
                //如果不是，简单复制
                objClone[key] = obj[key];
            }
        }
    }
    return objClone;
}

Object.assign(target, ...sources)

function simpleClone(obj) {
    var result = {};
    for (var i in obj) {
        result[i] = obj[i];
    }
    return result;
}

// 第一种：字面量
var o1 = {name: "o1"}
var o2 = new Object({name: "o2"})
// 第二种：通过构造函数
var M = function(name){this.name = name}
var o3 = new M("o3")
// 第三种：Object.create()
var p = {name: "p"}
var o4 = Object.create(p)

vue.js的生命周期一共有10个：
		beforeCreate：实例初始化之后，this指向创建实例，不能访问到data、computed、watch、method上订单方法和数据
		created：实例创建完成，可访问data、computed、watch、method上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组
		beforeMount：在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数
		mounted：实例挂载到DOM上，此时可以通过DOMAPi获取到DOM节点，$ref属性可以访问
		beforeUpdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前
		updated：虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
		activated：keep-alive开启时调用
		deactivated：keep-alive关闭时调用
		beforeDestroy：实例销毁之前调用。实例仍然完全可用，this仍能获取到实例
		destroy：实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

Redux提供的API
1、createStore
		createStore方法的作用就是创建一个Redux store来存放应用中所有的state
		createStore(reducer, [preloadState], [enhancer])
		createStore方法接受三个参数，后面两个是可选参数
		reducer: 参数的类型必须是function
		preloadState: 这个参数代表初始化的state(initialState), 可以是任意类型的参数
		enhancer: 这个参数代表添加的各种中间件，参数的类型必须是function
		createStore提供的方法：
			1、getState()
				返回当前的state
			2、dispach(action)
				参数action必须是一个对象，且必须含有type字段
			3、subscribe(listener)
				事件监听
2、combineReducers
		combineReducers主要是把多个reducer合并成一个，并且返回一个新的reducer函数，该函数接收的参数也是两个state和action
3、compose
		主要是在中间件时候使用，合成函数
		compose(applyMiddleware(thunk), 
				window.devToolsExtension ?
				window.devToolsExtension() : undefined
		)
4、applyMiddleware
5、bindActionCreator
		bindActionCreator的主要作用就是将aciton与dispatch函数绑定，生成直接可以出发action的函数

200 OK：客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务器完成了它（当时音频或视频文件很大时返回206）
301 Moved Permanently：所请求的页面已经转移至新的URL
302 Found：所请求的页面已经临时转移至新的URL
303 Not Modified：客户端有缓冲的文档并发出看一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用
403 Forbidden：对请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误原来缓冲的文档还可以继续使用
503 Server Unavailable：请求未完成，服务器临时过载或宕机，一段时间后可恢复正常

1. 首先，在浏览器地址中输入url
2. 浏览器先查看**浏览器缓存**-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作
3. 浏览器向DNS（Domain Name System）服务器请求解析该URL中的域名对应的IP地址
4. 解析出IP地址后，根据该IP地址和默认端口80，和服务器建立TCP连接
5. 浏览器发出读取文件（URL中域名后面部分对应的文件）的HTTP请求，该请求报文作为TCP三次握手的第三个报文的数据发送给服务器
6. 服务器对浏览器请求做出响应，并把对应的html文本发送给浏览器
7. 释放TCP连接
8. 浏览器将该html文本并显示内容

/ 触发Reflow
当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
当你移动DOM的位置，或是搞个动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
当你修改网页的默认字体时
// 触发Repaint
DOM改动
CSS改动
// 如何防止重排Reflow和重绘Repaint？

1. -webkit-：webkit核心浏览器，Chrome

2. -moz-：Gecko核心浏览器，fixfox

3. -o-：Opera核心浏览器，Opera

4. -ms-：微软的IE浏览器

<meta ="x-dns-prefetch-control" content="no">
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改