个人面试题汇总

20200623面试题

1.什么是bfc

bfc 是块状格式化上下文，它是一块独立的渲染区域，决定内部元素如何布局，由bfc 包裹的元素不会影响外部元素。

bfc布局规则：

1.内部的box 会在垂直方向，一个接一个的放置

2.box的垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box会重叠

3.BFC的区域不会与float box 重叠（定位情况除外）

4.计算BFC的高度时，浮动元素也参与计算

5.BFC就是页面上的一个隔离的独立容器，容器里面的元素在布局上不会影响到外面的元素。

怎么生成BFC

1.body根元素

2.float 属性不为none的元素

3.position 为absolute 或fixed

4.display 为inline-block,table-cell,flex

5.overflow除visible以外的值（可为hidden ,auto,scroll）

BFC的作用

1.防止垂直方向margin重叠

2.自适应两栏布局（在兄弟上添加overflow：auto）

3.清除内部浮动，（在父亲上添加overflow：auto）

2.怎么清除浮动

1.在浮动元素后面给一个空的块级元素clear：both

2.触发bfc（overflow：auto）

3.给父容器添加一个伪元素::after

4.给父容器添加双伪元素

 

3.防抖和节流

当一个函数被频繁，无限制的被调用时，会加重浏览器的负担，造成浏览器卡顿的现象。  

防抖是将多次行为变为只执行一次，节流是将多次执行变为每隔一段时间执行

防抖

触发高频率函数执行后，短时间内大量触发同一函数，只会执行一次函数

节流    

类似控制阀门一样定期开放的函数，让函数执行一次之后，在某个时间段内暂时失效，过了这段时间再重新激活

4.keep-alive 的应用场景

用途：主要用来保存组件状态或避免重新渲染，用在其一个直属组件被开关的情况。

与相似，是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在组件的父组件链中。

keep-alive 组件不会在函数式组件正常工作，因为他们没有缓存实例

props  里面有

include（string，正则，数组，缓存的组件）

exclude（string，正则，数组， 不缓存的组件）

max（在新实例创建之前，已缓存最久没有被访问的实例会被销毁），actived ，deactived

场景：用户前进属性，后退缓存浏览数据

从列表进入详情-点击回退到列表，列表需要被缓存，重新进入列表页面，获取最新数据

第一次进入：beforeRouterEnter=》created=>...=>activated=>...=>deactivated

后续进入：beforeRouterEnter=》actived=》deactivated

5.路由的几种模式

vue-router 默认使用的实hash模式

三种：

history 以Html5 History API和服务器配置

hash 是用url的hash值来作为路由

abstract  支持所有JavaScript的运行模式。如果发现没有浏览器api ，会自动强制进入这个模式

6 .v-for 中的key是干嘛用的

key 是唯一的，为了跟踪每个节点的身份，从而重新排列排序现有元素，Vue会使用一种尽可能减少动态元素，并且尽可能就地更新，复用相同类型类型的算法，有了key，它会基于key的变化，重新排列数据，移除掉不存在key的元素。key重复，会造成渲染错误。

目的:key标记各个子节点的唯一性，diff算法更正确的识别此位置，也就更高效的更新虚拟dom。

7.双向数据绑定

vue的数据双向绑定是通过数据劫持结合发布者，订阅者模式来实现的。

通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调。

1.实现一个数据监听器Observe ，能够对数据对象的所有属性进行监听，如有变动，可以拿到最新值并通知订阅者，

2.实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

3.实现一个watch。作为连接Obeserve和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应的回调函数，从而更新视图。

8.v-if 和-show的区别，性能方向

页面效果：v-if 为false，对应的dom不存在 ；v-show为false 会生成dom节点，样式为display：none

编译条件：v-if 为false，不生成dom；v-show为false 还是会生成dom节点

编译过程：v-if 编译有一个局部编/译卸载的过程，切换过程中会重建内部的事件监听和子组件，v-show为纯样式的切换

性能：v-if 有较高的切换消耗，v-show有较高的初始消耗

9.什么是事件委托

事件委托利用事件冒泡的思想，通过定义一个事件处理程序，管理某一类型的所有事件，（target表示发生操作的dom）例如：click，keydown，keyup

没有事件冒泡（focus，blur）

JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。

JavaScript 运行机制：

a. 单线程（用途决定，需要与用户互动以及操作DOM）
b. 分同步任务(主线程)与异步任务（任务队列），只有任务队列通知主线程某个任务可以执行了，该任务才会进入主线程执行。
放入异步任务的情况：
1. setTimeout、setInterval
2. DOM 事件
3. ES6中的 Promise
4. Ajax异步请求

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

setTimeout(function(){
console.log(1);
})

new Promise(function(resolve,reject){
console.log(2);
resolve(3);
}).then(function(val){
console.log(val);

})
//执行结果2，3，Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}，1

以下事件属于宏任务：

• setInterval()
• setTimeout()

以下事件属于微任务

• new Promise()
• new MutaionObserver()

 当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

---

Ajax 的工作原理

1. 创建 Ajax 对象 （XMLHttpRequest/ActiveXObject）
2. 确定请求方式 get post等
3. 连接 open, 发送 send
4. 当对象完成 onreadystatechange 数据接收，判断 http 响应状态，执行回调函数

---

TypeScript是JavaScript的扩展；里面包含了很多类库；

为什么使用严格模式:消除javascript的一些不合理，不严谨之处，减少一些怪异行为;

a.为未来新版本的javascript的发布做好铺垫
b.提高编译效率，增加运行速度
c.消除代码运行的一些不安全之处，保证代码运行的安全

严格模式声明出现的位置："use strict" 指令只允许出现在脚本或函数的开头。

js的作用域:方法里面包含变量和函数的一个执行环境，可以称作作用域；

js的作用域链：就是方法的嵌套，里面的函数可以调用外层的函数和方法，但是因为作用域链是单向的，所以外层无法访问内部的变量和函数。

---

闭包的好处？

a.可以访问内部函数的变量;
b.方法调用完毕，变量可以不被垃圾回收 

闭包的坏处：变量堆在内存中，容易造成内存溢出

---

 js回调函数

回调函数就是被作为参数传递到主函数中的一个函数，主函数先执行，执行完之后，再执行作为参数传递到主函数的函数。

冒泡：由里向外 

写冒泡排序：

    function bubbleSort(arr){
    	for(var i=0;i=arr[j+1]){
    				var temp=arr[j];
    				arr[j]=arr[j+1];
    				arr[j+1]=temp;
    			}
    		}
    	}
    	return arr;
    }
  var arr=[1,-1,0,3,5,6,7,9,8];
   bubbleSort(arr);
   console.log(arr)//[-1, 0, 1, 3, 5, 6, 7, 8, 9]

解析

两个循环

当i=0的时候，里面的循环完整执行，从j=0执行到j=8,这也就是第一遍排序，结果是将最大的数排到了最后，这一遍循环结束后的结果应该是[1,-1,0,3,5,6,7,8,9]

当i=1的时候，里面的循环再次完整执行，由于最大的数已经在最后了，没有必要去比较数组的最后两项，这也是j的巧妙之处，结果是 [-1, 0, 1, 3, 5, 6, 7, 8, 9]

说到这里，规律就清楚了，每次将剩下数组里面最大的一个数排到最后面，当第一个循环执行到最后的时候，也就是i=8,此时，j=0,只需要比较数组的第一和第二项，比较完毕，返回

---

 

 

数组的的各种方法操作：

对于集合的遍历效率(从高到低):var value = obj[key]; > for ( ; ; ) > for ( in )。效率最差的就是for( in )了，如果集合过大，尽量不要使用for ( in )遍历。

//Array:    
/*新建:*/var ary = new Array(); 或 var ary = [];   
/*增加:*/ary.push(value);   
/*删除:*/delete ary[n];  // undefined
/*遍历:*/for ( var i=0 ; i < ary.length ; ++i ) ary[i];  
  
//Object:   
/*新建:*/var obj = new Object(); 或 var obj = {};   
/*增加:*/obj[key] = value; (key为string)   
/*删除:*/delete obj[key];   
/*遍历:*/for ( var key in obj ) obj[key];  

//数组的方法（1.shift，2.unshift，3.pop，4.push，5.concat,6.splice，7.reverse，8.sort，9.slice,10.join）

var  arr=[1,2,4];

  //1.shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 
  //console.log(arr.splice(0,1));//[1]
    console.log(arr.shift());//1 
    console.log(arr);//[2,4]

 //2.unshift:将参数添加到原数组开头，并返回数组的长度 	
 //console.log(arr.splice(0,0,[1,4]));//[] 
   console.log(arr.unshift([1,4]));//3 
   console.log(arr);//[Array(2),2,4]

//3.pop:删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined  //console.log(arr.splice(arr.length-1,1));//[4]  
  console.log(arr.pop());//2  
  console.log(arr);//[Array(2),2]

//4.push:将参数添加到原数组末尾，并返回数组的长度 
//console.log(arr.splice(arr.length,0,"xujing"));//[]
  console.log(arr.push("xujing"));//3
  console.log(arr);//[Array(2),2,"xujing"]

//5.concat:返回一个新数组，是将参数添加到原数组中构成的 
  console.log(arr.concat(124));//[Array(2),2,"xujing",124]
  console.log(arr);//[Array(2),2,"xujing"]

 //6.splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,... 
   console.log(arr.splice(0,2,1,2));// [Array(2),2]
   console.log(arr);// [1,2,"xujing"]

//7.reverse:将数组反序 
   console.log(arr.reverse());// ["xujing", 2, 1]
   console.log(arr);// ["xujing", 2, 1]

 //8.sort(orderfunction):按指定的参数对数组进行排序 
    console.log(arr.sort());// [1, 2,"xujing"]
    console.log(arr);//[1, 2,"xujing"]

 //9.slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 
    console.log(arr.slice(1,2));// [2]
    console.log(arr);// [1,2,"xujing"]

//10.join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符 
    console.log(arr.join(""));//12xujing
    console.log(arr);//[1,2,"xujing"]

---

 

与后台数据交互的几种数据格式：

1.利用cookie对象 

2.利用session对象

3.利用request重定向，设置setAttribute

4.利用ajax进行异步数据请求，得到的数据可以以json或xml的格式返回。

参考网址：https://blog.csdn.net/qq_35729592/article/details/77620745

---

 

Es6 的set 和map：

a.Set 是无重复值的有序列表。根据 Object.is()方法来判断其中的值不相等，以保证无重复。 Set 会自动移除重复的值，因此你可以使用它来过滤数组中的重复值并返回结果。 Set并不是数组的子类型，所以你无法随机访问其中的值。但你可以使用has() 方法来判断某个值是否存在于 Set 中，或通过 size 属性来查看其中有多少个值。 Set 类型还拥有forEach()方法，用于处理每个值。

b.Weak Set 是只能包含对象的特殊 Set 。其中的对象使用弱引用来存储，意味着当 Weak Set中的项是某个对象的仅存引用时，它不会屏蔽垃圾回收。由于内存管理的复杂性， Weak Set的内容不能被检查，因此最好将 Weak Set 仅用于追踪需要被归组在一起的对象。

c.Map 是有序的键值对，其中的键允许是任何类型。与 Set 相似，通过调用 Object.is()方法来判断重复的键，这意味着能将数值 5 与字符串 "5" 作为两个相对独立的键。使用set() 方法能将任何类型的值关联到某个键上，并且该值此后能用 get() 方法提取出来。Map 也拥有一个 size 属性与一个 forEach() 方法，让项目访问更容易。

d.Weak Map 是只能包含对象类型的键的特殊 Map 。与 Weak Set 相似，键的对象引用是弱引用，因此当它是某个对象的仅存引用时，也不会屏蔽垃圾回收。当键被回收之后，所关联的值也同时从 Weak Map 中被移除。

参考网址：https://blog.csdn.net/zemprogram/article/details/86310066

---

 

Es6 的var和let：

javascript 中有两种作用域一种是全局作用域，另一种是函数作用域；

const和let的作用域范围是一样的 ，不同的是const被赋值后，值不能更改。
a.let 不存在变量提升（暂时性死区）不能未定义就先使用；

b.let 不能够重复声明，否则报语法错误；

c.let 的作用域范围是块级作用域{}

d.与for循环搭配，可以形成一个独立的块级作用域，执行时，不会被外层干扰

/*
考察javascript事件循环机制，与setTimeout机制
*/
for(var i=1;i<=3;i++){
setTimeout(function(){ //执行时，同步加入宏任务队列中
console.log(i); //打印3个4 因为i是var声明的，在全局范围内都用，每次新的i都会覆盖原来的。
},0)
}

   //方式1
   for(let i=1;i<=3;i++){
	setTimeout(function(){ //执行时，
	console.log(i); //打印1,2,3
	},0)
	}
	 
//方式2
var j=1;
   for(var i=1;i<=3;i++){
	setTimeout(function(){ //执行时，
	console.log(j++); //打印1,2,3
	},0)
	} 

//方式3
   for(var i=1;i<=3;i++){
   	(function(e){
   		setTimeout(function(){ //执行时，
	    console.log(e); //打印1,2,3
	},0)
   	})(i)
	}  
	      

---

 

mvc和mvvm的区别:

a.mvvm在mvc的基础上，将数据和视图之间的逻辑层ViewModle分的更加细致，更易于后续代码维护。

b.以前通过 MVP 设计模式进行开发的时候，是面向 DOM 进行开发。

c.使用 MVVM 设计模式进行开发的时候，是面向数据编程;极大程度的简化了代码量。

---

组件化，模块化 

高内聚，低耦合

---

HTTP的协议：是基于TCP/IP的一种超文本传输协议

HTTP常用状态码： 404 ,403（客户端没有访问权限）,500（内部服务出现问题）,200,301 ，503 （拒绝客户端访问）

跨域 的几种形式：

1.nginx 反向代理，

2.通过iframe

3.websocket

4.jsonp（jsonp是通过script标签的异步加载来实现的）

5.后台配置 cors

6.postMessage

---

Tab切换:

	
		
		
		
	
	
		

			

				

					
家电
					
手机
					
男装
					
女装
					
童装
				
			
			

				
A
				
B
				
C
				
D
				
E
			
		
		
	

---

 

vue 之间的组件通信：

vue的项目经验：

Node.js 的项目经验：

了解webpack与typescript：

前端SEO的方式：

1.减少http请求
2.使用浏览器缓存
3.启用压缩（合并js，css）
4.css sprites 合并css图片
5.对图片懒加载，节省带宽
6.减少cookie传输
7.javascript代码优化

---

HTML中 title 和 alt 属性有什么区别:

html

当图片不输出信息时，显示 alt 信息；正常输出会不会显示 alt 信息，鼠标放上去会出现 title 信息

::before和：after中的双冒号和单冒号的区别

1.单冒号 css3伪类选择器，双冒号用于伪元素选择器
2.::before就是以一个子元素的存在，定义在元素主题内容之前的一个伪元素，并不存在dom中，只存在页面中

em 与rem的区别：em 指字体高，任意浏览器的默认字体高都是16px；rem是相对于html元素的font-size的一个单位；

css清除浮动的几种形式:

a.添加一个空的div标签 clear：both
b.在父元素上面写个class .cls{overflow：hidden;}
c.在父元素上面添加一个class，使用伪元素。.cls:after{content:"";display:block;height:0;visibility:hidden;}.cls{*zoom:1;}a.添加一个空的div标签 clear：both

d.第四种双层闭合更好
.cls:after,.cls:before{content:"";display:table;}
.cls:after{clear:both;}
.cls{*zoom:1;}

none和hidden的区别:none是看不见摸不着，hidden是看不见摸得着

css 三种定义方式：外链，内链，行内

选择器权重问题：

标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
包含选择器的权重：所包含选择器的权重之和
子选择器的权重：所包含选择器的权重之和
交集选择器权重为选择器之和
继承样式的权重为0000
行内样式的权重为1000

可以使用多个伪类，只能用一个伪元素 span:not(:lang(fr)):not(:lang(en))::after{}

css实现元素居中的几种方式

1.给父元素设置相对定位，给子元素绝对定位
a.子元素里面设置margin 的top 和left值
b.给子元素里面top，left，bottom，right 值为0
c.left 和right 为50%，margin值为子元素的宽高各位 一半
2.给父元素设置display:table-cell,vertical-align:middle,text-align:center;然后子元素设置为display：inline-block；
3.给父元素一个display:flex,然后justify-algin:center;align-items:center;

css 的行内元素，块级元素，行内块元素的区别

行内元素和行内块元素的默认宽高均由其内容撑开，横向排列，排列不下换行显示；

行内元素不能设置宽高，无法设置垂直方向的间距

块级元素默为所在容器的100% ，独占一行

注意：p标签不能包裹div和h1 标签 ，a标签也不能包裹a标签，会提前闭合，重新生成一个合理的标签嵌套

如果给你一些小图标你会怎么优化？

为了减少网络请求个数，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，简称雪碧图。

用DOM0 和DOM2分别对button做一个click点击事件

DOM0分2级：一个是标签内写onclick，另一个是οnclick=function(){}，取消事件使用el.οnclick=null；

DOM2:只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener（）和removeEventListener（）；它们都有三个参数：第一个参数是事件名（如click）；第二个参数是事件处理程序函数；第三个参数是true则表示在捕获阶段调用，为false表示在冒泡阶段调用

特点：

1.DOM0级事件会覆盖，DOM2不会覆盖，会依次执行

2.DOM0 和DOM2可以共存

本质的区别是 el.onclick 相当于在标签上写 onclick，用 addEventListener 和 attachEvent 是通过 DOM 接口去绑定事件。

el.onclick和addEventListener和attachEvent 绑定的事件怎么取消？

el.onclick：el.οnclick=null; 

通过 attachEvent() 添加的事件处理程序要通过 detachEvent() 来移除，其他的情况和 addEventListener() 一样。

阻止事件传播和默认行为

阻止事件传播：

• 在W3c中，使用 e.stopPropagation() 方法
• 在IE下设置cancelBubble = true；
• 封装阻止事件冒泡函数：

html的解析方式

解析html，加载外部样式及外部脚本，构建dom树，构建render树，布局rander树，绘制rander树。

 

Css的继承

具有嵌套关系的html上在父元素上定义的样式，内部标签自动拥有与外部标签不冲突的性质。

DOM和BOM 的区别

Dom 是文档对象模型；BOM是浏览器对象模型

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

1) DOM是W3C的标准[所有浏览器都遵循的标准];

2) DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）;

3) BOM各个浏览器厂商根据DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同;

4) BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括

window(窗口)、location（地址栏内容相关）、history（历史）、screen（屏幕）、navigator（有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象）

DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

面试实战

写出对应的结果

Null==undefined  true

NaN == 'NaN'  false

NaN == NaN  false

false ==0  true

true==2  false

Undefined ==0 false

Null ==0 false

AJAX ：一种创建交互式网页应用的动态开发技术。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

jquery中的ajax
$.ajax({
        type:"GET",
        url:"service.php?number="+$("#keyword").val(),
        dataType:"json", 预期服务器返回数据的类型
        success:function(data){
           if(data.success){
               $("searchResult").html(data.msg);
           }else{
               $("#searchResult").html("出现错误：" + data.msg);
           }
        },
        error:function(jqXHR){
           aler("发生错误："+ jqXHR.status);
        }
});
 

GET与POST的区别

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用；
• GET存在缓存问题，使用GET方法一定要记得清除缓存，不然请求的数据不是最新的；
• GET不安全，明文传输，POST更安全；
• GET适用于小文件，POST没有数量限制；
• GET使用send方法时不传参，POST必须传参；

只能使用 POST 请求的情况：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

事件冒泡和事件捕获

事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)。

• DOM事件流包括三个阶段：

1. 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
2. 处于目标阶段
3. 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

btn.addEventListener('click',function(){

            console.log('我是按钮')

        },false)   //当第三个参数不写时，也是默认为false（冒泡时添加事件）

   

addEventListener 和 attachEvent 的区别

二者有个本质上的区别，attachEvent 的事件处理程序会在全局作用域中运行，this等于window对象，而 addEventLinstener 添加的事件处理程序是在其依附的元素的作用域中运行的，this等于绑定元素对象。

 

Vue 和 react的生命周期：

Vue生命周期 就是描述vue的实例从生到死的一个过程，其中有8个钩子。从开始创建、初始化数据，编译模板，挂载DOM--》渲染，更新--》渲染、销毁等一系列过程，称之为Vue的生命周期。

 

 React生命周期

• 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
• 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
• 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

 

函数表达式和函数声明的区别

函数表达式未声明不能使用，函数声明可以直接使用

 Sessionstorage 和localstorge的区别

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；

 

弹性布局的开始步骤

第一步：在父容器上设置display：flex

第二步：设置主轴方向，flex-direction:row

第三步：设置侧轴方向flex-wrap:wrap;

Rem和em以及px的区别和使用场景

Rem 是相对于html根元素的font-size大小来进行计算

Em是相对于自身元素font-size大小行计算

Px是个固定值

 

Rem的默认字体大小:1rem=100px;

响应式布局等比例还原设计稿:实际像素/实际设备宽度=设计稿像素/1920

H5适配主要分适配不同像素密度和适配不同屏幕大小。而适配的目的是为保证用户体验，比如图片不失真；以及在不同大小的屏幕上呈现比例相同的页面布局，这也就是所谓的百分之百还原设计稿，或像素级还原设计稿。

明确了适配和还原的含义及原理，接下来技术实现层面的关键是找到一个全局性的CSS单位。我们先介绍了阿里手机淘宝团队基于 rem 的适配框架（这个框架除了动态修改 rem ，还解决了真1像素边框的问题），然后介绍了基于更普适的 vw 单位实现适配。最后简单介绍了自动实现 px 到 vw 单位转换的插件postcss-px-to-viewport的配置

适配像素密度和适配不同屏幕大小

伪类和伪元素

伪类扩充了css选择器 ，更方便的获取元素

伪元素是创建了一个虚拟的元素

 

Vuex

cookie和session 以及localstorage和sessionstorage

Cookie 存储在浏览器，session存储在服务器

Cookie 和session都是用来跟踪浏览器用户身份的会话方式

常用http的状态，

304  服务器端已经执行了get，但是文件没有变化

未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

简述http协议 三次握手

原型链继承：

Function A(){

this.color=[“a”，“b”]；

}

Function B(){

 

}

B.prototype=new A();

Var b =new B();

B.color.push(“dd”);

跨域：

nginx 反向代理nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。

用nginx反向代理实现跨域，是最简单的跨域方式，而且支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能，只需要修改nginx的配置即可。
在nginx服务器上配置多个前缀来转发http/https请求到多个真实的服务器，nginx服务器上所有url都是相同的域名、协议和端口，没有跨域限制。

nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自用户浏览器的。

 

快速排序和冒泡排序时间复杂度

代码评审：

需求评审:

做功能出现问题：

前端页面优化：

前端http协议版本：

性能优化：尽量使用缓存

Session和cookie   session怎么知道是哪个客户端对应的请求

有个sessionId 可以在Url结尾加上；sessionid=122222之类的字符串

Session和cookie 是一种会话机制

http缓存，强缓存

H5 缓存：   H5的缓存，大概有localstorage、sessionstorage、cookie和manifest。

Pwa 渐进式页面：

离线模式，给人的感觉是应用，但运行机制是网站

移动端遇到的问题，兼容性问题，移动端图片不清晰，做两倍大的。

组件库，UI 组件库

Vue的内置对象 $符号开头的内置对象：

Vue是怎么实现dom更新，属性是怎么改变的

虚拟dom是怎么做更新的：

通过diff算法来比较新老dom节点

浏览器的重绘:

样式改变不会影响元素在它在文档流中的位置

浏览器的重排（回流）：

dom树结构发生变化，渲染树需要重新计算

浏览器去加载一个页面的过程:首先创建一个DOM树，将所有的DOM元素挂载在这棵树上，与此同时，根据css样式，每个dom对象都会去查找一遍与自己相关的样式规则，生成渲染树，开始重排，最后开始绘制样式。

render函数选项 > template选项 > outer HTML.

Vue是在dom更新时做了哪些东西？（自主了解vue的一些原理）

Vue生命周期的解析和应用：

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

1. beforecreate : 
   完成实例初始化，初始化非响应式变量
   this指向创建的实例；
   可以在这加个loading事件；
   data computed watch methods上的方法和数据均不能访问
2. created
   实例创建完成
   完成数据(data props computed)的初始化 导入依赖项。
   可访问data computed watch methods上的方法和数据
   未挂载DOM,不能访问$el,$ref为空数组
   可在这结束loading，还做一些初始化，实现函数自执行,
   可以对data数据进行操作，可进行一些请求，请求不易过多，避免白屏时间太长。
   若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
3. berofeMount
   有了el,编译了template|/outerHTML
   能找到对应的template,并编译成render函数
4. mounted
   完成创建vm.$el，和双向绑定，
   完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
   即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
   可在这发起后端请求，拿回数据，配合路由钩子做一些事情；
   可对DOM 进行操作
5. beforeUpdate
   数据更新之前
   可在更新前访问现有的DOM,如手动移除添加的事件监听器；
6. updated :
   完成虚拟DOM的重新渲染和打补丁；
   组件DOM 已完成更新；
   可执行依赖的dom 操作
   注意：不要在此函数中操作数据，会陷入死循环的。
7. activated:
   在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，
   如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
8. deactivated 
   for keep-alive 组件被移除时使用
9. beforeDestroy： 
   在执行app.$destroy()之前
   可做一些删除提示，如：你确认删除XX吗？ 
   可用于销毁定时器，解绑全局时间 销毁插件对象
10. destroyed ：当前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁

参考网址： https://www.cnblogs.com/LO-ME/p/4591463.html

JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。

内联模型（通过HTML元素指定事件属性来绑定 ）

由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。这种写法将HTML代码和JS写在不同的位置，维护 起来更加容易

Dom2的事件监听器addEventListener，三个参数：响应的事件名称，响应的函数，是冒泡还是捕获，false表示事件冒泡，true表示事件捕获。

$(function(){
	var all=$("*");		
	all.each(function(){
		var rel=this;
		this.addEventListener("click",function(event){
			var event=event?event:window.event;
			var target=event.target?event.target:event.srcElement;
			print("事件捕获事件源"+target.id+"---"+target.tagName+",事件对象："+this.id+"
");
		},false)
	})
	
	function print(text){
		$("#content").append(text)
	}
})

//获取变量名

		   //设置事件监听器（元素对象.addEventListener())用来获取真实点击的元素
		   function getTarget(evt){
		   	var e = evt || window.event;//兼容ie的//实现跨浏览器兼容获取 event 对象
		   	return e.target|| e.srcElement; //兼容得到事件目标 DOM 对象
		   };


		  window.onload=function(){
			var ul=document.getElementById("ul_one");
			var lis=document.getElementsByTagName("li");
			for(var i=0;i

原生js事件参考网站：http://www.w3school.com.cn/jsref/jsref_events.asp

jquery事件参考网站：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

作为一个编程语言必备要素：变量，数据结构，函数，运算能力。

if 使用场景，条件存在互斥性。带上else 执行次数比单纯使用if性能好。

call 和apply 更改this 指向。

浏览器多线程：

从这张图我们可以知道JS引擎线程首先执行回调函数块，然后是执行点击事件回调，接着是执行定时器的线程，最后在执行其他的线程。

万物皆对象，对象分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。

凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。Function Object 也都是通过 New Function()创建的。

---

基本运算操作符

括号运算符>普通运算>赋值

任何数据类型+字符串=字符串

0/0 NaN 数字类型

a%b  //是求余数;a/b  //是求商;Math.abs(x)   //是求x的绝对值;12除以5=2，余数是2，即5*2+2=12，所以12%5=2

交换值

num 遇上字符串，先把字符串转成num再比较。

字符串相对比，比较字符串相对应的ascii码（十进制代码），从左往右

相等是不看数据类型的，全等要看数据类型。

NaN与任何数据都不相等，包括自己。

undefined ,null,NaN,"",0,false; 都是假 ，可以在if条件判断语句中使用

js 执行三部曲

a.先检查语法

b.预编译

{

1.创建GO/AO对象

2.形参和变量挂载在对应的GO、AO中

3.形参和实参相统一

4.找函数里面的函数声明，值赋予函数体。

}

c.开始执行

javascript 构造函数

构造函数出现的原因：多次创建同类型的对象，导致代码重复，更不易维护。

定义：用new关键词来调用的函数。

注意事项：

1.用new创建的对象会创建新的内存空间（引用对象）this指向的是当前实例化对象的地址。

2.构造函数默认不写返回值，返回的是this；如果写的返回值是基本数据类型，返回的仍然是this，如果是写的返回值是引用类型，return 啥返回啥。

3.{ } 和[ ] 一起使用，我们前面说到，{ } 是一个对象，[ ] 是一个数组，我们可以组成一个对象数组。

弊端：使用new创建过多的实例，会造成内存溢出。

为了解决内存溢出，出现了原型对象的概念。

---

javascript的原型对象和原型

原型对象是构造函数的一个实例。

特例：Function.prototype它是函数对象，但它没有prototype 属性。

所有的构造器都来自于 Function.prototype，甚至包括根构造器Object及Function自身。所有构造器都继承了·Function.prototype·的属性及方法。如length、call、apply、bind**

Math，JSON是以对象形式存在的，无需new。它们的proto是Object.prototype。

// 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true

// 所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身
Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

 function Person(){};
 console.log(Person.prototype) //Person{}
 console.log(typeof Person.prototype) //Object
 console.log(typeof Function.prototype) // Function，这个特殊
 console.log(typeof Object.prototype) // Object
 console.log(typeof Function.prototype.prototype) //undefined

Object.prototype.__proto__ === null // true

Array.prototype.__proto__ == Object.prototype

所有函数对象的proto都指向Function.prototype，它是一个空函数（Empty function）

每个函数都有propertype 属性，这个属性的值（字面量）（内存地址）就是一个对象，这个对象就是原型对象。只要在该原型对象上添加属性，所有的属性和方法都可以被该函数的实例所访问。

每个对象上都有一个_proto_属性，但只有函数对象才有prototype属性。

所有对象上都有一个constructor 属性，这个属性也指向函数本身。

构造函数的实例上没有prototype属性。

原型对象就是一个普通对象。

 

所有构造函数的实例上的_proto_属性指向原型对象。

原型对象上的constructor属性指向函数本身。

原型：简单说_proto_,是实例指向原型对象的指针.（每个对象都有）

原型对象：prototype 指向的是原型对象。

Person.prototype === p1.__proto__;   // true
Person.prototype === p2.__proto__;   // true
p1.__proto__ === p2.__proto___;      // true

 

所有对象上都有_proto 属性。

 hasOwnProperty().方法用来检测给定的名字是否是对象的只有属性.对于继承属性它将返回false  

Object.getOwnPropertyNames()方法返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

原型和原型链是JS实现继承的一种模型。

原型链的形成是真正是靠__proto__ 而非prototype

所有函数对象的 __proto__ 都指向 Function.prototype，它是一个空函数（Empty function）

Function.prototype 是唯一一个typeof XXX.prototype为 “function”的prototype

所有对象的 __proto__ 都指向其构造器的 prototype

Person这个构造函数的显式原型是一个对象，简称原型对象。Person.prototype就是原型对象。
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针,即原型对象（Person.prototype）是 构造函数（Person）的一个实例。 

原型链总结:

　　1.继承的实现并不是靠prototype,而是靠__proto__
　　2.原型链的作用,在于读取对象的某个属性时,js引擎会优先查找对象本身的属性,如果没有,会去该对象的构造函数的原型对象(prototype)上面找,一直找到最顶层的原型对象,Object.prototype , 如果还没有则返回undefined
　　3.这个过程中,维持上下层关系靠的是__proto__

参考网址：https://www.cnblogs.com/nlj-blog/p/7544568.html

javascript 构造函数的演变

参考网址：https://www.cnblogs.com/lhl66/p/8001609.html

参考网址：https://www.jb51.net/article/107012.htm

 retun  continue  break 3个关键词的含义和比较

在 break,continue和return 三个关键字中， break,continue是化为一类的，return 是函数返回语句，但是返回的同时也将函数停止。

相同之处：三个都会将此时进行的语句停止。

不同之处：

1、break：是立即结束语句，并跳出语句，进行下个语句执行。

2、continue：是停止当前语句，并从头执行该语句。

3、return：停止函数。

4、使用的语句环境不一样，break和continue是用在循环或switch语句中，return是用在函数语句中。

参考网址：https://www.cnblogs.com/roashley/p/7752401.html

javascript 区别（类、成员、属性、对象、方法）

类：具有同种属性的对象称为类，是个抽象的概念。比如说：汽车、人、狗、神；

对象：日常生活中的所有东西都是对象，是类的实例化。比如说：小强是蟑螂的实例化，

属性：用来描述具体某个对象的特征的是属性，是静态的。比如：姚明身高2.26米；

方法：每个对象有它们自己的行为或者是使用它们的方法，比如说一只狗会跑会叫等，我们把这些行为称之为方法，是动态的，可以使用这些方法来操作一个对象；

类的成员：属性和方法称为这个对象的成员，因为它们是构成一个对象的主要部分，没有了这两样东西，那么对象也没什么存在意义了
参考网址：https://blog.csdn.net/boss2967/article/details/78551201

---

javascript 创建对象的形式：

第一种：Object构造函数创建

第二种：使用对象字面量表示法

第三种：使用工厂模式创建对象

第四种:使用构造函数创建对象

https://www.jb51.net/article/107012.htm

---

setInterval 与setTimeout的区别

setInterval 代表在指定的周期内循环调用函数

setTimeout代表在指定毫秒数后调用函数。

setInterval会不停的调用函数，直到窗口关闭或者clearInterval（）被调用，由setInterval返回的id值可以作为clearInterval方法的参数。

setTimeout 只会执行一次，需要多次执行可以在函数体内再次调用。

数组的定义：

数组是值得有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。数组元素的索引不一定要连续，元素之间可以有空隙，叫做稀疏数组 。每个数组都具有一个lengrh属性。针对非稀疏数组，length属性就是数组元素的个数，针对稀疏数组，元素的length属性比所有元素的索引要大。

javascript数组：

数组就是一组数据的集合，其表现形式就是内存中的一段连续的内存地址，数组名称其实就是连续内存地址的首地址

 

js引擎是单线程的，可以模拟多线程 

参考网址：https://www.cnblogs.com/pandawind/p/9777810.html

参考网址：https://www.cnblogs.com/pandawind/p/9777778.html

---

JS中回调函数及用法

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

回调函数特点：

1不会立刻执行, 正如定义中给出的一样回调函数作为代码片段可以根据需要在其特定条件下执行, 回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。

2.this，ES6推出了箭头函数, 箭头函数的推出需要在写回调函数的时候格外注意, this 是指向所在函数的上下文对象；

回调函数的优点和使用场景是个闭包

回调函数是闭包的简单使用，也就是说它能访问到其外层定义的变量。

//定义:回调函数是一个函数是作为另外一个函数的参数。
//回调函数	C 是A1的回调函数	
function A1(a, b, c){	// 此时c是形参(方法)
	var m=a+b;
	return c(m);
}
function C(e){
	return e+1;
}

function B1(d){
	return d*d;
}
var d=A1(3, 3, C);//C是实参
console.log(d);//7

回调函数之美

• DRY，避免重复代码。
• 可以将通用的逻辑抽象。
• 业务逻辑分离 
• 提高代码可维护性和可读性。
• 加强代码可读性。
• 分离专职的函数。

js回调函数的伟大之处是其他传统语言所没有的, 它可以实现业务逻辑分离, 相当于暴露给外界一个接口, 这一点像极了前后端分离架构中的 API 接口设计理念

参考网址：https://www.jb51.net/article/134549.htm

参考网址：https://www.jb51.net/article/144414.htm

---

JS实现继承的6种方式

参考网址：https://www.w3cschool.cn/wqf_web/wqf_web-x54328d9.html

//定义：调用一个对象的一个方法，以另一个对象替换当前对象。
//子类调用父类的方法,并且用父类的方法替换子类A.call(B); B 是子类，A是父类，传递的参数也是父类的

	function A(name){
				B.call(A);//A 继承B
				this.name=name;
				this.run=function(){
					
				}
			}
			function B(){
				this.say=function(){
					
				}
			}

参考网址 :https://blog.csdn.net/longyin0528/article/details/80504270

---

 

JavaScript,DOM之 querySelect() 和 querySelectAll()

1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果

参考网址：https://blog.csdn.net/dalei9243/article/details/81075408 

参考网址： https://www.cnblogs.com/3532gll/p/9538271.html

---

javascript 原生方法对dom节点的操作，创建、添加、删除、替换、插入、复制、移动等操作

• getElementsByClassName() 方法可以返回所有指定类名的对象的集合。。
• getElementsByTagName()方法可返回带有指定标签名的对象的集合。
• getElementsByName() 方法可返回带有指定名称的对象的集合。
• querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
• querySelectorAll()方法返回匹配所有指定选择器的元素。

  var div = document.createElement("div");//创建一个div元素
  			var a = document.createElement("a");//创建一个a元素
  			div.appendChild(a);
  			//创建文本节点
  			var atext=document.createTextNode("today is difficult,tomorrow is more difficult,but the day after tomorrow is beautiful,so we have to work hard to survive in the future")
  			a.appendChild(atext);
  			var p=document.createElement("p");
  			a.insertBefore(p,null);//p 在a里面
  			//文档起点
  			document.body.appendChild(div);
  			//创建文本节点
  			ul=document.createElement("ul");
  			//替换 
  			a.replaceChild(ul,p)// ul取代了p的位置
  			
  			var li= document.createElement("li");
  			//完全复制li的节点
  			var cloneli=li.cloneNode(true)
  			
  	        ul.appendChild(cloneli);
  	        //在ul里面插入li的节点
  	        ul.insertBefore(li,null);
  	        //删除节点
  	        ul.removeChild(li);

  $(selector).html(content)
  改变被选元素的（内部）HTML
  
  $(selector).append(content)
  向被选元素的（内部）HTML 追加内容
  
  $(selector).prepend(content)
  向被选元素的（内部）HTML “预置”（Prepend）内容
  
  $(selector).after(content)
  在被选元素之后添加 HTML
  
  $(selector).before(content)
  在被选元素之前添加 HTML

参考网址：https://www.jianshu.com/p/d34107ddd028

参考地址：https://blog.csdn.net/xiasohuai/article/details/84794939

JS中null与undefined的区别

1. 相同点

　　if 判断语句中，两者都会被转换为false

2. 不同点

• Number转换的值不同，Number(null)输出为0, Number(undefined)输出为NaN

• null表示一个值被定义了，但是这个值是空值

  • 作为函数的参数，表示函数的参数不是对象

  • 作为对象原型链的终点 （Object.getPrototypeOf(Object.prototype)）

  • 定义一个值为null是合理的，但定义为undefined不合理（var name = null）　　　　　　

• undefined表示缺少值，即此处应该有值，但是还没有定义

  • 变量被声明了还没有赋值，就为undefined

  • 调用函数时应该提供的参数还没有提供，该参数就等于undefined

  • 对象没有赋值的属性，该属性的值就等于undefined

函数没有返回值，默认返回undefined

Number(null);
0
Number(undefined);
NaN
Boolean(null)
false
Boolean(undefined)
false

参考网址：https://www.cnblogs.com/lvmylife/p/8183653.html

---

javascript中clearinterval和settimeout的区别

JS里设定延时：
　　使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
　　setTimeout("function",time) 设置一个超时对象
　　setInterval("function",time) 设置一个超时对象
　　SetInterval为自动重复，setTimeout不会重复。
　　clearTimeout(对象) 清除已设置的setTimeout对象
　　clearInterval(对象) 清除已设置的setInterval对象
　　使用定时器实现JavaScript的延期执行或重复执行
　　window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
　　window.setTimeout(expression,milliseconds);
　　window.setInterval(expression,milliseconds);
　　其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数;而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。

参考网址：https://www.jianshu.com/p/dd1bf6d4cafa

---

jQuery中hover与mouseover和mouseout的区别

也就是说hover！=mouseover+mouseout。但hover=mouseenter+mouseleave。

而hover的效果等同于mouseenter，mouseleave。

原生js里面没有hover方法，一般都是用onmouseover 和 onmouseout结合。

mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触发。

mouseenter，mouseleave是指鼠标指针在穿过/离开被选元素时触发。

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

a:link{color:green;} a:visited{color:orange;} a:hover{color:red;}a:active{color:yellow;}

常见不冒泡事件

•blur 不冒泡 ❌•focus 不冒泡 ❌•focusin•focusout

要注意 blur 事件和 focus 事件都是不冒泡的，因获取和失去焦点本身就是针对这个元素的。如果要坚挺具体的焦点变化情况，那么应该使用 focusin 和 focusout

•load 异步 不冒泡 ❌•unload 不冒泡 ❌•abort 不冒泡 ❌•error 异步 不冒泡 ❌•select

参考网址：https://www.jb51.net/article/153961.htm

参考网址：https://www.cnblogs.com/torchstar/p/null.html

参考网址：https://cloud.tencent.com/developer/article/1416941

捕获阶段 ： 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对 象绑定了响应事件则做相应的处理。

目标阶段 ： 这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

事件冒泡阶段 –：这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向 上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。

取消事件传播 

我们可以使用event对象的两个方法完成： – stopPropagation() – stopImmediatePropagation()

取消默认行为： – preventDefault()

事件流包括两种模式：冒泡（是从里往外逐个触发）和捕获（是从外往里逐个触发）

参考网址：https://www.cnblogs.com/LO-ME/p/4591463.html

HTTP请求参数的编码和解码

参考网址：https://www.jianshu.com/p/15039c07a6b4

---

less语法总结

变量 ，带参数的混合，模式匹配，导引表达式，嵌套规则，运算，函数，Math函数，命名空间，作用域，importing(导入)，字符串插值，避免编译，JavaScript表达式

实例参考网址：https://www.jianshu.com/p/9f64b62e8e65

---

bind函数的作用

call 和apply的区别，用代码写出call是怎么实现的

JavaScript类的继承有哪几种实现方式,分别列举？

JavaScript 中prototype的理解？

css样式中的层叠问题？

继承和多态

事件绑定和事件委派

事件绑定：在相应的标签上绑定相应的处理函数

事件委派：

作用域，作用域链，闭包，原型链，垃圾回收机制

闭包:通过引用，突破变量作用域的范围，访问函数内的函数实现信息的驻留。

表达式和函数声明的区别

表达式函数可以自调用，声明的函数不能自调用

表达式函数不能在未定义前使用，声明的函数可以在声明前使用

性能优化

ajax请求

组件

组件是复用代码最有效的一种实现方式，将配置参数，方法，事件进行分离，可以用同一套代码来满足不同的需求。

AJAX

组件特点

前比较流行的js框架对比

Jquery 插件编写

http协议 

了解MVVM 

Vue双向数据绑定原理

认识NPM

 nodeJs优缺点

前端构建工具Gulp

初识webgis 

 认识TypeScript

 认识RESTful

响应式布局实现原理

认识css预处理器

初识Flex的属性

css页面布局（注意下BFC块状格式化上下文）

img中alt和title区别

border与border-style的区别

javascript基本数据类型

js打印日期时间方法

前端架构

建议：多了解下原理，多写些例子练习，多看下源码，加强技术深度，技术栈有些老。