html and css

1、doctype作用：

!Doctype声明叫做文件类型定义（DTD），位于文档中的最前面，是告知浏览器以哪种模式来解析文档。 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。 保障页面在浏览器中正确的显示

2、html5，css3的新特性

1.语义化标签，丰富的表单元素，canvas，关于拖放的api，h5的一些接口（全屏，网络等）
2.b边框圆角，渐变背景，flex布局，多列布局，阴影，新增伪元素(::selection)，边框图片等

3、清除浮动

浮动的影响：浮动元素会脱离文档流，不占据空间，浮动元素碰到包含它的边框的时候会停留，父元素的高度不会被撑开，后面的相同的浮动元素跟随其后，会影响页面结构。
清除浮动：
1.父元素的末尾添加空块元素标签并设置clear:both
2.触发bfc独立布局（父overflow：hidden；position：absolute或者fixed；display:inline-block；浮动）
3.after伪元素来清除浮动（父::after{content:'',display:block;clear:both}）

4、水平垂直居中方式（3种以上）

首先对父元素设置相对定位father{position:relative}
1.son{position:absolute;top:50%；left：50%；margin-left:-width/2margin-top:-height/2;}适用于已知元素宽高
2.son{transform:translate(-50%,50%)}适用未知宽高
3.son{top,left,right,bottom:0;margin:auto}适用未知宽高
flex布局居中
4.father{display：flex;justify-content:center;align-items: center;}

5、src和href的区别

href：标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src：表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分

6、适用不同分辨率方案 

1.媒体查询
2.百分比布局
3.rem布局

7、px em rem

他们都是相对单位
px不会随浏览器变化
em是相对于父级
rem是相对于html标签的font-size而言

8、css sprites

雪碧图一般适用于比较小的icon式的图片，将他们放到一张画布上，集成为一张图片，使用是用定位的方式展示用使用的图片
一般用作优化提高页面的加载速度

9、scss/sass 和less区别 

scss和less都是css的预处理器，让css代码具有语法功能，提高css的复用与简便使用
1.编译环境
2.定义变量scss支持语法，scss更强大
@mixin -@include  @extend+类名或者占位符%创建的类

10、常用的meta头

移动端添加当前的meta头，用来解决移动端窗口的问题，方便用户操作，如窗口的width，缩放比列等，还可以设置一些缩放限制
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

11、标签语义化

语义化标签：就是让标签有自己的含义，常用的header,footer,nav,article（定义文档外独立的布局）main,aside,section
好处：css样式未加载出来，任然可以呈现页面的结构 有利于SEO和搜索引擎建立良好的沟通，有利于爬虫抓取更多的有效信息 便于开发和维护，更具有可读性

12、html渲染解析过程，js（会阻塞页面加），css位置，重绘，重排（回流）

页面的解析过程：
在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后，渲染出了render tree。
回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为回流。
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。

13、flex布局

flex布局在前端开发使用的比较多，可以参考阮一峰flex讲解

14、权重css，盒模型，动画，flex布局

!important>内联样式>id>class>div

15、移动和web开发有何不同，

1.业务场景不同
2.技术不太相同
3.移动端适配
4.性能（网络问题）

16、如何实现响应式布局（3种）

1.meta标签viewport+媒体查询
2.百分比布局
3.rem布局

17、url解析过程

1.首先，在浏览器地址栏中输入url
2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作
3.在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址
4.浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手
5.握手成功后，浏览器向服务器发送http请求，请求数据包
6.服务器处理收到的请求，将数据返回至浏览器
7.浏览器收到HTTP响应
8.浏览器解析渲染页面:解析html源码;生成Dom树、解析css样式、js交互

javascript

1、事件委托

事件委托：利用冒泡机制，把子元素的事件委托到父级元素上，
优点：不需要循环绑定事件，能够动态添加元素

2、防抖节流

为什么使用：有些浏览器事件可以在短时间内快速触发多次，这可能会导致一些严重的性能问题，构建应用程序，出现滚动、窗口大小调整或按下键等事件请务必提及防抖(Debouncing)和函数节流（Throttling）来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用setTimeout来控制事件的触发频率。
节流：主要思想在于：在某段时间内，不管你触发了多少次回调，都只认第一次，并在计时结束时给予响应。
防抖：主要思想在于：在某段时间内，不管你触发了多少次回调，我都只认最后一次。

3、闭包

闭包：就是能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
原因：外层函数调用后，外层函数的函数作用域（AO）对象无法释放，被内层函数引用者
好处：1.防止命名冲突，实现封装，当做公有变量 2.可以做缓存
坏处：1.私有变量不能被销毁，内存大量消耗，造成内存泄露 2.由于闭包需要突破作用域链，性能会有损失

4、原型链

原型：是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
原型链：当函数被new操作符调用时，会创建出一个对象，并且该对象中会有一个指向其原型对象的属性_proto_，这样新建的对象实例就可以调用相关原型对象中的成员；原型对象自身也具原型，因此，也包含了指向其原型对象的属性，原型链的终端是Object.prototype.__proto__。这样就形成了一个链式结构。

5、继承

1.原型链继承,方式：子类的构造函数的原型等于父类的实例
function Parent(){this.lastName = 'parent'};
function Child(){this.name = 'child'};
Child.prototype = new Parent();
var child = new Child(); 
2.构造继承
function Parent(){}
function Sub(){ Parent.call(this);}
var sub = new Sub()
继承：（字面意思理解）访问实例对象上面的某一个属性或者方法的是时候，如果实例对象上面没有，就会沿着原型链往上找，找到自己的原型，如果原型上也没有，直到找到终点，这个过程中，访问实例对象没有的属性，也能找到属性值，称为继承null->Object.prototype -> Function.prototype -> Object,Array,Function,Boolean,String,Number

6、call，apply，bind

作用：用来改变this指向
传参列表不同：call,bind挨个添加，apply是数组，bind绑定后不会立即执行函数，需要再次执行

7、对象，数组，字符串常用的方法

1.string对象：字符串操作不会改变原来的字符串length,indexOf(),lastIndexOf(),toLowerCase().toUpperCase(),
replace(),substr(,参数2为个数),substring(，参数2为索引) split("分割符")最强大的让字符创变成数组 charAt(index),charCodeAt()，includes(),starWith(),endWith(),repeat(),concat();
padStart(maxlength,fillString),padEnd()
2.arr对象 ：length  shift(),unshift(),push(),pop(),join(),slice(),reverse(),splice(index,delNumber,addEle...),
concat(),sort(),from(),of(),find(f),fundIndex(),map(),forEach(),filter(),each(),indexOf(),lastIndexOf()
3.object：Object.assign(obj,obj1)合并对象，Object.is()类似于===，Object.keys()，values,entries返回一个属性名,属性值，键值对的数组，Object.create(null||obj)创建一个对象（可以创建一个没有原型的对象，或者创建一个固定原型的对象）
4.Math对象：floor(向下取整),ceil(上),round(四舍五入),max(),min(),random(),abs()

8、对象深度克隆

1.JSON.stringify()适合没有函数的对象
2.function deepClone(Origin){
 if(typeof Origin !== 'object') return Origin;
  var Target = Origin instanceof Array ? [] : {};
   for(var key in Origin){ if(Origin.hasOwnProperty(key)){
     Target[key] = typeof Origin[key] === 'object'?deepClone(Origin[key]) : Origin[key];}
  }
 return Target;
}
3.Object.assign({},obj)适用于只有一层结构对象

9、作用域，变量提升，预编译

作用域：每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供javascript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。
作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链
运行期上下文：当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，执行上下文被销毁
预编译的四个环节
1.创建AO对象
2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefined
3.将实参值和形参统一
4.在函数体里面找函数声明，值赋予函数体

10、this

1.全局this指向window
2.预编译this指向window
3.call,apply,bind会改变this指向
4.this指向调用者，
5.构造函数指向实例对象

11、数据类型基本

基本值：Number String Boolean undefined null symbol
引用值：array  object  function

12、typeof返回值

 number string function object boolean undefined symbol

13、创建数组，对象的常用方式

数组：字面量[]，new Array(2) , 2为长度，new Array(12,21)值
对象：字面量{}，new Object()，构造函数，Object.create()

14、new的原理 

在函数体的逻辑最上面新建一个this对象，在最后return这个对象，可参考：原理

15、跨域常用的方法

1.axios封装了ajax然后本地使用proxy代理
2.jsonp

16、同源策略

是一种浏览器的安全性的约定，既没有明确授权，就不能读取对方资源协议，ip，端口号不一致都会跨域

17、宏任务，微任务Event-Loop

可以参考：教程详解
常见的宏任务：setTimeout
常见的微任务:promise.then()  process.nextTick
执行顺序:同步代码=》微任务=》宏任务

18、事件冒泡，事件捕获（阻止方法默认事件）

冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。
捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）
先捕获-》元素执行-》冒泡 
冒泡阻止方法：    event.stopPropagation() event.cancelBubble = true;
捕获阻止方法：1.return false; 2.event.preventDefault();3.event.returnValue = false;

19、js垃圾回收机制

1.可达性（一个对象，里面有一些属性，当对象重新被赋值的时候，原来对象的不可访问的属性）
2.两个引用。（就是说对象的赋值，必须两个对象都重新赋值，才能被销毁）
算法：标记-清除算法：就是找到根并标记，标记来自它的引用，以此类推，除了标记外都清除

20、怎么判断一个变量是否 null/undefined

区别就是null已经定义了，但是没有值，而undefined是未定义

1.typeof ->'object','undefined' 2.String()->'null','undefined' 3.Number()->0,NaN 4.===

21、callee caller

arguments在函数中存着实参列表，arguments.callee()返回当前伪数组所属的函数func.caller()返回当前函数的运行环境，如果为全局返回null,如果是其他函数，则返回该函数

22、|| &&运算机制

常见的判断返回false的值：undefined,null,false,0,''
（||(&&)遇到真(假)的停，都为假(真)，返回最后
例如：11||0 返回11,0||11返回11,0&&11返回0，

23、Regexp

请参考我的另一篇关于正则表达式的文章

24、隐式类型转换 运算符号的优先级

（）[] .》++，--》*/》+-》==》&&》|| 》=

25、区分数组还是对象方法

1.Object.prototype.toString.call([])"[object Array]"
2.String([])"",String({})"[object Object]"
3.[] instanceof Array4.Array.isArray([])5.[].constructor

26、原生ajax

Var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
xhr.open('get/post',url);
xhr.onreadystatechange(){if(xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300){var data = xhr.responseText}};
xhr.send(post参数);
readyState：状态0：请求未初始化 1：服务器连接已经建立 2：请求已接收 3：请求正在处理 4：请求已完成，且响应已就绪

27. 状态码

1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理，200 OK请求成功
3** 重定向，需要进一步的操作以完成请求，301 Moved Permanently永久重定向；302 Found临时重定向；303 Not Modified未修改 （所请求的资源未修改）
4** 客户端错误，请求包含语法错误或无法完成请求：400 Bad request客户端错误语法错误；403 Forbidden服务端理解客户端的请求，但是拒绝执行请求；404 Not Found找不到客户端请求的资源
5** 服务器错误，服务器在处理请求的过程中发生了错误，500 :服务器内部错误，无法完成请求任务
知识点：tcp三次握手（客户端服务器数据传输协议）
第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。syn_sent。第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（seq=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；syn_recv。第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。established

Es6

1、let const var

let const块级作用域，暂时性死区，没有变量提升，不能重复定义，const标记的是地址不能变化（对象级就可以变化）

2、模板字符串

``变量可以直接在字符串里面使用${变量}

3、参数默认值

function(a = ‘aaa’){}

4、箭头函数和普通函数的区别

1.箭头函数不能new
2.箭头函数的实参不会绑定arguments而是形参的...运算符
3.箭头函数没有自己的this，或者说他绑定了自己定义时的this

5、数组，对象扩展方法

数组：
伪数组->真数组Array.from(),
把数值转化成数组Array.of()，
找到符合的第一个元素find()找到索引findIndex()，
[].entries()，keys(),values()返回一个Interator遍历器，可以使用呢些（）获取，也可以使用for...of遍历接口得到数据
includes()flat()数组扁平化
对象:
Object.assign() Object.is() keys() values() entries()

6、set map

Set:不重复的value的集合 方法：add delete has clear has size
Map：类似于object但是属性值不限制为字符串，可以是一个对象map可key值地址不一样视为两个key  方法：set get delete size has clear

7、for ... of  for ... in

For of可以遍历数组，对象，字符串，set结构等具有Interator接口的数据结构

8、import export

9、解构赋值

Var [a,b,c] = [1,2,3],多的为undefined
Var {name,age} = {name:’1’,age’2’}定义的变量和属性值一样，没有的undefined。
字符串可以解构赋值

10、...展开运算符

展开对象和数组，函数中放到形参位置接收实参

11、es5和es6构造函数的区别，

1.不new，es6报错，2.class造成暂时性死区，3启用严格模式

12、Symbol（原始数据类型）

number string undefined null boolean
根本上是解决命名冲突，var a = Symbol(‘描述信息，用于控制台区分变量’)这就是一个独一无二的变量了，如果穿进去对象，则会执行对象的toString()方法

13、promise async

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）

14、Class

Class Person{constructor(x,y){this.x = x;this.y = y} say(){}}
New Person()
class ColorPoint extends Point{}   //继承

15、Proxy reflect

提供了一些基于对象的升级的方法。可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

Vue

1、vue2.x原理很重要（vue3.0原理）

Object.defineProperty会遍历data对象的所有属性，转换成getter和setter，这两个属性对用户是不可见的，但是在内部它们让Vue能够追踪依赖，在属性被访问和修改时通知变更。
重点：Object.defineProperty(obj, prop, desc)Obj:需要定义的当前对象Prop当前需要定义的是属性名Desc属性描述desc:{value:’’,writable,configurable,enumerable进行配置，get:()=>{return;},set:()=>{}

2.mvvm

m: model层; v view视图层;  vm view-model层充当一个观察者的角色，当v层的数据发生变化后，会通过vm传递到m层,相同的，当m层发生变化，相应的v层也会发生变化

3.v-if,v-show

v-if:控制dom节点的显示和隐藏，v-show是控制dom节点的样式为display：none
v-if具有更高的切换消耗，v-show是渲染消耗
v-if当值第一次为false是不会渲染该组件，v-show在任何情况都会渲染

4.父子组件传值 非父子（eventBus，vuex）

父->子：子组件props来接收
子->父：子组件在自己的方法中调用父组件的方法this.$emit(‘fatherMethod’,payload)

5、watch，computed(高级用法)

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
1.watch擅长处理的场景：一个数据影响多个数据,可以监视路由
2.computed擅长处理的场景：一个数据受多个数据影响,1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。

6、this.$set() 

一般是在data中某个对象添加一个属性的时候

7、This.$nextTick() 

当你执行对data中的数据进行赋值的时候，此时data中的数据会更新，但是dom此事并没有跟新，而是把这个事件放在一个队列中，等同一时刻需要变化的数据集齐后才会一起渲染dom，但是如果我想在dom更新后做点什么就会比较棘手这样使用nextTick就会在dom个更新后立即调用

8、Vue生命周期函数

beforeCreate， created ，beforeMount， mounted，beforeUpdata，updated，beforeDestory, destoryed, activited，deactivie， errorCapture

9、路由的hash与history

hash在浏览器中符号“#”hash虽然在URL中，但不被包括在HTTP请求中；
history 前端的URL 必须和实际向后端发起请求的 URL 一致

10、路由守卫

1. router.beforeEach((to,from,next)=>{})
2.回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

课后练习

1、写出代码对下列数组去重并从大到小排列{5,2,3,6,8,6,5,4,7,1,9}

2、用 JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24

3、用 js 实现随机选取 10–100 之间的 10 个数字，存入一个数组，并排序。

4、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert

出”This is Baidu Campus”

5、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化

成驼峰表示法”getElementById”

7、有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一

段JS程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其按

key-value形式返回到一个 json 结构中，如{a:’1′, b:’2′, c:”, d:’

xxx’, e:undefined}。

8、var numberArray = [3,6,2,4,1,5];

1)实现对该数组的倒排，输出[5,1,4,2,6,3]

2)实现对该数组的降序排列，输出[6,5,4,3,2,1]

9、输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月

26日，则输出 2014-09-26

以上内容是自己复习面试的汇总，有些答案比较简洁，可能有错的，希望大家谅解上述内容纯属是自己面试做的笔记，为了方便自己，后续会整理格式和错的信息（有时间的话会继续整理一些有用的知识）