1、同步和异步
同步:从头到尾,一步一步的执行代码
异步:改变程序正常执行顺序的(从头到尾)的操作
原理:js是单线程语言,当在js中出现比较耗时的操作,就容易堵塞后续代码的执行。
因此,在js中,遇到一些比较耗时的操作,像setTimeout,ajax请求时,js会将他们放入一个代办的任务队列(taskqueue)中,当执行完同步代码时,再依次执行任务队列中的任务。
2、宏任务和微任务
宏任务:普通的js代码(同步代码),setTimeout,setInterve
微任务:process.nextTick(),promise.then
执行原理(顺序):js先执行同步代码,再去执行异步代码,而异步代码中的任务队列又分为两个栈,一个是宏任务,一个是微任务,任务队列会先把微任务推到执行栈中执行,等微任务全部执行完,再把宏任务栈推到执行栈中,依次执行。
注:promise是同步代码,而promise.then()是微任务
3、事件循环 Event Loop
js是单线程语言,一个时间点只能做一件事
js代码执行的时候,会把所有代码推到主线程去执行,然后js的代码又分为同步和异步。
他会先把同步的代码推到主线程去执行,然后异步代码放到任务队列中,等同步队列中的代码执行完后,再返回来把异步中的任务推到主线程去执行,反复这样循环,就是事件循环。
4、js数据类型
基本数据类型: Number(数字类型)、String(字符串类型)、Symbol(es6)、Boolean(布尔类型)、Null、Underfind、
引用类型: Object(对象类型,Date Array function)
5、判断数据类型的方法
(1)typeof
数据类型 | 结果 |
---|---|
Underfind | "underfind" |
Boolean | "boolean" |
Null | "object" |
String | "string" |
Number | "number" |
Symbol | "symbol" |
函数对象([[Call]] 在ECMA-262条款中实现了) | "function" |
任何其他对象(Array,Date) | "object" |
注:
其中null返回了object是因为JavaScript语言设计遗留的问题。
对于引用类型,除 function 以外,一律返回 object 类型
对于 function 返回 function
(2)instanceof
返回值是true false
原理:运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。
判断对象类型是数组
var arr1 = [1,2,3]
console.log(arr1 instanceof Array) //true
6、js的深浅拷贝
浅拷贝:只是复制的引用,一个值的改变会同时影响另外一个值的改变,相互影响。(相同的值,相同的地址)
深拷贝:在堆中重新分配内存,值相同,地址不同,相互不影响。
深拷贝的原理:
遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝。
实现:
(1)浅拷贝
var arr1 = [1,2]
var arr2 = arr1 //直接赋值
(2)一维数组的深拷贝:(浅拷贝)
var arr1 = [1, 2]
1、slice(0)
var arr2 = arr1.slice(0); //复制 方法一 原生的slice
2、concat()
var arr2 = arr1.concat(); //复制 方法二 原生的concat
3、map
var arr2 = arr1.map(item=>item); //复制 方法三 es5
4、扩展运算符
var arr2 = [...arr1]; //复制 方法四 es6的扩展运算符
5、Object.assign() 对象的浅拷贝 es6方法
let obj1 = { person: {name: "kobe", age: 41},sports:'basketball' };
let obj2 = Object.assign({}, obj1);
obj2.person.name = "wade";
obj2.sports = 'football'
console.log(obj1); // { person: { name: 'wade', age: 41 }, sports: 'basketball' }
6、函数库lodash的_.clone方法
var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.clone(obj1);
console.log(obj1.b.f === obj2.b.f);// true
(3)二维数组的深拷贝
1、JSON.parse(JSON.stringify())
var arr1= [1,2]
var arr2 = JSON.parse(JSON.stringify(arr1))
注:json拷贝的缺陷
1、 如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失;
2、 如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式。而不是时间对象;
2、函数库lodash的_.cloneDeep方法
var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);// false
(4)手写递归方法(深复制)
递归方法实现深度拷贝的原理:遍历对象、数据直到里面都是基本数据类型,然后再去复制,就是深度拷贝。
function deepClone (obj) {
let cloneObj
// 1.基本数据类型
if (obj && typeof obj !== 'object') {
cloneObj = obj
}
// 2、引用类型
else if (obj && typeof obj === 'object') {
cloneObj = Array.isArray(obj) ? [] : {}
for (let k in obj) {
//hasOwnProperty判断数据对象是否存在某个属性名
if (obj.hasOwnProperty(k)) {
// 引用类型
if (obj[k] && typeof obj[k] ==='object') {
//递归调用
cloneObj[k] = deepClone(obj[k])
} else {
// 基本类型
cloneObj[k] = obj[k]
}
}
}
}
return cloneObj
}
7、对Promise的理解
Promise 异步编程一种解决方案
promise特点
(1)promise状态不受外界的影响。
promise对象代表一个异步操作,有三种状态:
pending(进行中)
fulfilled/resolved(已成功)
rejected(已失败)
只有异步操作结果,可以决定当前是哪一种状态 ,任务其他操作都无法改变这个状态。
(2)promise状态一旦改变,就不会发生变化,任何时候都可以得到这个结果。
promise状态改变,只有两种可能
从pending变为fulfilled(进行中变为已成功)
从pending变为rejected(进行中变为已失败)
promise.then(res=>{
//对于成功回调接受数据做处理
},err{
//对于失败的回调数据做处理
})
(3)手写一个promise
8、html页面渲染的过程
解析html文件,创建dom树
解析css,形成css对象模型
将css和dom树合并,构建渲染树(render tree)
进行布局和绘制进行重排和重绘
9、数组去重
10、get和post的区别
相同点:
本质上都是http请求协议的请求方法,底层实现都是基于tcp/ip协议
不同点:
(1)get请求的参数携带在url上,而post请求的参数携带在request的body也就是报头上。
(2)get会产生一个tcp数据包,而post会产生两个数据tcp包(并不是所有浏览器都会在POST中发送两次包,Firefox就只发送一次)
(3)get请求方式会把请求头和data一起发送出去,服务器响应200返回数据,post请求方式是浏览器先发送header,服务器响应100 continue,浏览器再发送data服务器响应200后再返回数据。(一般来说POST时间上消耗的要多一点,GET比POST更有效率)
(4)get请求的数据会暴露在浏览器上,所以数据是不安全的,而post请求的数据是通过send方法传递的,所有post请求的数据相对于get请求的数据来说是比较安全的。
(5)get请求在url的参数长度是有限制的,而post没有限制。
(6)get请求参数会被保存在浏览器历史记录中,而post中的参数不会被保存。
11、对重排重绘的理解
重排和重绘的详解
重排(回流):(结构变化)
当渲染树(Render Tree)中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程
重绘:(样式变化)
当页面中元素样式改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它的过程。
回流必将引起重绘,重绘不一定会引起回流。
回流比重绘的代价要更高。
如何避免:
(1)css
避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式(例如:calc())。
(2)js
避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。
也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
12、js的继承
13、tcp 3次握手 4次挥手
客户端与服务端之间的通信
(1)握手:表示连接
通俗来理解
客户端向服务端发了个请求,我要和你连接,你准备一下吧,这是一次握手
服务端接收到了请求,并说我已经准备好了,你请求吧,这是二次握手
客户端向服务端发请求,服务端接收请求,这是三次握手
和我去朋友家作客是一样的
我是客户端,朋友是服务端
我打电话给朋友,我要来你说作客了
朋友接到电话,说你过来吧,给你搞个大餐
然后我去准备出门,并到达了朋友家,一起吃大餐
(2)挥手:表示关闭
客户端向服务端发送,我要关闭和你的连接,这是一次挥手
服务端接收到客户端要关闭的请求,回应,你关闭吧,这是二次挥手
客户端向服务端发送了断开连接,这是三次挥手
服务端接收到了要断开的信息,然后断开了,这是四次挥手
和我去朋友家作客,玩的差不多了,准备要走了
我是客户端,朋友是服务端
天色已晚,我准备从朋友家回家,就和朋友说 ,我要准备回家了
朋友听到你要回家,说好的
然后我穿上鞋子,准备一下,回家
朋友和我说再见,下次再来玩
14、HTTP与HTTPS有什么联系?他们的端口号是多少?
HTTP
超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
HTTPS
在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS
HTTP默认的端口号为80,Https默认的端口号为443。
15、HTTP常见状态码。
(1)100 Continue表示继续,一般在发送post请求时,已发送了 HTTP header之后,服务器端将返回此信息,表示确认,之后发送具体参数信息。
(2)200 OK表示正常返回信息
(3)201 Created表示请求成功并且服务器创建了新的资源。
(4)202 Accepted表示服务器已接受请求,但尚未处理。
(5)301 Moved Permanently表示请求的网页已永久移动到新位置。
(6)302 Found表示临时性重定向。
(7)303 See Other表示临时性重定向,且总是使用GET请求新的URI。
(8)304 Not Modified表示自从上次请求后,请求的网页未修改过,
(9)400 Bad Request表示服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
(10)401 Unauthorized表示请求未授权。
(11)403 Forbidden表示禁止访问。
(12)404 Not Found表示找不到如何与URI相匹配的资源。
(13)500 Internal Server error表示最常见的服务器端错误。
(14)503 Service Unavailable表示服务器端暂时无法处理请求(可能是过载或维护)。
16、完整的HTTP事务流程是怎样的
基本流程如下。
(1)域名解析。
(2)发起TCP的3次握手。
(3)建立TCP连接后发起HTTP请求。
(4)服务器端响应HTTP请求,浏览器得到HTML代码。
(5)浏览器解析HTML代码,并请求HTML代码中的资源。
(6)浏览器对页面进行渲染并呈现给用户。
17、一个页面从输入URL到页面加载显示完成,这个过程中都发生了什么
整个过程可分为4个步骤。
(1)当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上毎个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
(2)浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCPP连接。该握手包括一个同步报文、一个同步-应答报文和一个应答报文,这3个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,然后服务器应答并接受客户端的请求,最后由客户端发出已经接受该请求的报文。
(3)一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态码表示一个正确的响应
(4)此时web服务器提供资源服务,客户端开始下载资源。请求返回后,便进入了浏览器端模块。浏览器会解析HTML生成 DOM Tree,其次会根据CSS生成CSS规则树,而 JavaScript又可以根据 DOM API操作DOM。
18、浏览器缓存
19、闭包
(1)闭包是什么
函数嵌套函数
函数内部的值可以访问外部的值
(2)闭包的作用是
使用闭包是为了设计私有方法和变量
(3)闭包的优点
避免全局变量的污染
(4)闭包的缺点
闭包会一直占用内存,会增大内存的使用量,使用不当很容易造成内存的泄露。参数和变量不会被垃圾回收机制回收。