一个tab有几个进程
- 浏览器进程，负责页面显示，用户交互，子进程管理等
- 渲染进程，将html,css,js转换为网页
- GPU进程，用来渲染UI界面
- 网络进程，负责网页资源加载
- 插件进程，主要负责插件的运行
进程，线程，协程（纤程）
-
一个进程就是一个程序的运行实例
-
线程是依附进程的，而进程中的多线程并行处理能提高运算效率
-
进程中的任意线程执行出错，都会导致整个进程崩溃
-
线程之间共享进程中的数据
-
当一个进程关闭之后，操作系统会回收进程所占用的内存
-
进程之间内容是相互隔离的
-
协程是一种比线程更轻量级的存在，协程不是被操作系统内核所管理，完全由程序控制（也就是在用户态执行）不会像线程切换那样消耗资源!
消息队列和事件循环
- 消息队列是先进先出的执行方式如何处理高优先级的任务，当修改了DOM后如何即时更新，立即执行会影响当前任务的执行时长，以异步消息添加到队尾会影响实时性，消息队列中的任务称为宏任务，每个宏任务中包含了微任务队列，在执行宏任务过程中，如果DOM有变化，那么就会将该变化添加到微任务列表中，这样就不会影响到宏任务的执行，等宏任务主要功能执行完后，执行当前宏任务的微任务，这样就解决了执行效率和实时性问题
- 如何解决单个任务执行时长过久问题，通过回调来让js任务滞后执行
setTimeout缺陷
- 执行不精确，由于同步任务执行过长，setTimeout被分配到了另一个task去执行，setTimeout回调被放入消息队列中并不是立即执行，要等当前任务执行完
function bar() {
console.log('bar')
}
function foo() {
setTimeout(bar, 0);
for (let i = 0; i < 5000; i++) {
let i = 5+8+8+8
console.log(i)
}
}
foo()
- 嵌套调用时，调用超过5次以上，后面每次调用的间隔时间为4ms
function cb() { setTimeout(cb, 0); }
setTimeout(cb, 0);
-
未激活的页面，setTimtout执行最小间隔是1000ms
-
延时执行时间有最大值，32bit，只有31bit表示数，另外1bit表示符号位
function showName(){
console.log("aaa")
}
var timerID = setTimeout(showName,2147483648);//会被理解调用执行
- this指向window
var name= 1;
var MyObj = {
name: 2,
showName: function(){
console.log(this.name);
}
}
setTimeout(MyObj.showName,1000)
XMLHttpRequest运行机制
宏任务与微任务
- 宏任务控制不精确，2个任务之间添加了其他的系统任务，如果添加的任务执行的时间过长，会影响到后面任务的执行
<!DOCTYPE html>
<html>
<body>
<div id='demo'>
<ol>
<li>test</li>
</ol>
</div>
</body>
<script type="text/javascript">
function timerCallback2(){
console.log(2)
}
function timerCallback(){
console.log(1)
setTimeout(timerCallback2,0)
}
setTimeout(timerCallback,0)
</script>
</html>
异步回调带来的问题
- 异步回调代码逻辑不连续
//执行状态
function onResolve(response){console.log(response) }
function onReject(error){console.log(error) }
let xhr = new XMLHttpRequest()
xhr.ontimeout = function(e) { onReject(e)}
xhr.onerror = function(e) { onReject(e) }
xhr.onreadystatechange = function () { onResolve(xhr.response) }
//设置请求类型，请求URL，是否同步信息
let URL = 'https://xxx.com'
xhr.open('Get', URL, true);
//设置参数
xhr.timeout = 3000 //设置xhr请求的超时时间
xhr.responseType = "text" //设置响应返回的数据格式
xhr.setRequestHeader("X_TEST","time.geekbang")
//发出请求
xhr.send();
改造一下使其变得线性
//makeRequest用来构造request对象
function makeRequest(request_url) {
let request = {
method: 'Get',
url: request_url,
headers: '',
body: '',
credentials: false,
sync: true,
responseType: 'text',
referrer: ''
}
return request
}
//[in] request，请求信息，请求头，延时值，返回类型等
//[out] resolve, 执行成功，回调该函数
//[out] reject 执行失败，回调该函数
function XFetch(request, resolve, reject) {
let xhr = new XMLHttpRequest()
xhr.ontimeout = function (e) { reject(e) }
xhr.onerror = function (e) { reject(e) }
xhr.onreadystatechange = function () {
if (xhr.status = 200)
resolve(xhr.response)
}
xhr.open(request.method, URL, request.sync);
xhr.timeout = request.timeout;
xhr.responseType = request.responseType;
//补充其他请求信息
//...
xhr.send();
}
XFetch(makeRequest('https://xxx.org'),
function resolve(data) {
console.log(data)
}, function reject(e) {
console.log(e)
})
- 接口依赖形成回调地狱
XFetch(makeRequest('https://aaa.org/?category'),
function resolve(response) {
console.log(response)
XFetch(makeRequest('https://bbb.org/column'),
function resolve(response) {
console.log(response)
XFetch(makeRequest('https://ccc.org')
function resolve(response) {
console.log(response)
}, function reject(e) {
console.log(e)
})
}, function reject(e) {
console.log(e)
})
}, function reject(e) {
console.log(e)
})
- Promise消灭嵌套，合并多个任务的错误处理
function XFetch(request) {
function executor(resolve, reject) {
let xhr = new XMLHttpRequest()
xhr.open('GET', request.url, true)
xhr.ontimeout = function (e) { reject(e) }
xhr.onerror = function (e) { reject(e) }
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText, this)
} else {
let error = {
code: this.status,
response: this.response
}
reject(error, this)
}
}
}
xhr.send()
}
return new Promise(executor)
}
var x1 = XFetch(makeRequest('https://aaa.org/?category'))
var x2 = x1.then(value => {
console.log(value)
return XFetch(makeRequest('https://bbb.org/column'))
})
var x3 = x2.then(value => {
console.log(value)
return XFetch(makeRequest('https://ccc.org'))
})
x3.catch(error => {
console.log(error)
})
Promise通过回调函数延迟绑定，回调函数返回值穿透和错误冒泡解决了问题
//创建Promise对象x1，并在executor函数中执行业务逻辑
function executor(resolve, reject){
resolve(100)
}
let x1 = new Promise(executor)
//x1延迟绑定回调函数onResolve
function onResolve(value){
console.log(value)
}
x1.then(onResolve)
function executor(resolve, reject) {
let rand = Math.random();
console.log(1)
console.log(rand)
if (rand > 0.5)
resolve()
else
reject()
}
var p0 = new Promise(executor);
var p1 = p0.then((value) => {
console.log("succeed-1")
return new Promise(executor)
})
var p3 = p1.then((value) => {
console.log("succeed-2")
return new Promise(executor)
})
var p4 = p3.then((value) => {
console.log("succeed-3")
return new Promise(executor)
})
p4.catch((error) => {
console.log("error")
})
console.log(2)
- async await 用线性的书写方式，不阻塞主线程的方式来写异步代码
fetch('https://aaa.org')
.then((response) => {
console.log(response)
return fetch('https://bbb.org/test')
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
async function foo(){
try{
let response1 = await fetch('https://www.geekbang.org')
console.log('response1')
console.log(response1)
let response2 = await fetch('https://www.geekbang.org/test')
console.log('response2')
console.log(response2)
}catch(err) {
console.error(err)
}
}
foo()
- generator 协程可以暂停和恢复执行的特点，用同步的方式来写异步代码
function* genDemo() {
console.log("开始执行第一段")
yield 'generator 2'
console.log("开始执行第二段")
yield 'generator 2'
console.log("开始执行第三段")
yield 'generator 2'
console.log("执行结束")
return 'generator 2'
}
console.log('main 0')
let gen = genDemo()
console.log(gen.next().value)
console.log('main 1')
console.log(gen.next().value)
console.log('main 2')
console.log(gen.next().value)
console.log('main 3')
console.log(gen.next().value)
console.log('main 4'
async function foo() {
console.log(1)
let a = await 100
console.log(a)
console.log(2)
}
console.log(0)
foo()
console.log(3)
异步回调执行过程
- UI线程会从消息队列中取出一个任务，并分析该任务
- 分析过程发现该任务是一个下载请求，那么主线程会将该任务交给网络线程去执行
- 网络线程接到请求之后，便会和服务器服务器端建立连接，并发出下载请求
- 网络线程不断的收到服务器端传过来的数据
- 网络线程每次接收到数据时，都会将设置的回调函数和返回的数据信息，如大小，返回了多少字节，返回的数据存在内存中存在的位置封装成一个新事件，并将该事件放到消息队列中
- UI线程继续循环的读取消息队列中的事件，如果是下载状态的事件，那么UI线程会执行回调函数
- 接收到下载结束事件，UI线程会显示该页面下载完成
永不爆栈的宏任务
function foo() {
setTimeout(foo, 0)
}
foo()
函数内部触发的宏任务比函数内部触发的微任务优先
function bar(){
console.log('bar')
Promise.resolve().then(
(str) =>console.log('micro-bar')
)
setTimeout((str) =>console.log('macro-bar'),0)
}
function foo() {
console.log('foo')
Promise.resolve().then(
(str) =>console.log('micro-foo')
)
setTimeout((str) =>console.log('macro-foo'),0)
bar()
}
foo()
console.log('global')
Promise.resolve().then(
(str) =>console.log('micro-global')
)
setTimeout((str) =>console.log('macro-global'),0)
永不执行的协程
function NeverResolvePromise(){
return new Promise((resolve, reject) => {})
}
async function getResult() {
let a = await NeverResolvePromise()
console.log(a)
}
getResult()
console.log(0)
function* getResult() {
yield 'getUserID'
yield 'getUserName'
return 'name'
}
let result = getResult()
console.log(result.next().value)
console.log(result.next().value)
console.log(result.next().value)
function HaveResolvePromise(){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(100)
}, 0);
})
}
async function getResult() {
console.log(1)
let a = await HaveResolvePromise()
console.log(a)
console.log(2)
}
console.log(0)
getResult()
console.log(3)
一帧内合理分配任务
浏览器每一帧都需要完成哪些任务
- 处理用户的交互
- js解析执行
- 帧开始，窗口尺寸变更
- rAF
- 布局绘制
刷新率
- 表示每秒钟更新多少次显示器的屏幕图像，60Hz，每秒60张画面，刷新率越高画面越流畅
帧率
- 每秒由显卡渲染生成的静态图像数量，单位是FPS，帧率越高，画面更顺畅
帧率与刷新率
- 刷新率与帧数不匹配就会出现卡断
- 60Hz页面要想不卡顿，1s就要执行60帧（FPS）与刷新率保持一致，每一帧1000/60 = 16ms，每一帧就需要控制在16ms内完成!
如果渲染进程生成的帧速比屏幕的刷新率慢，那么屏幕会在两帧中显示同一个画面，如果持续发生，用户就会感到明显的卡顿
如果渲染进程生成的帧速率实际上比屏幕刷新率快，比如当帧速率在 100fps 而刷新率只有 60Hz 的时候，GPU 所渲染的图像并非全都被显示出来，这就会造成丢帧现象。
setTimeout，setInterval无法准确执行
- 没有在16ms完成，帧率低于刷新率，造成2个画面绘制一帧造成卡顿
- setTimeout是由用户控制的，绘制时机很难和VSync时钟保持一致
- 还会出现丢帧现象
requestAnimationFrame
- 它由系统决定回调函数的执行时机，回请求浏览器在下一次重新渲染页面之前执行回调函数，无论设备的刷新率是多少，它会紧跟屏幕刷新一次所需要的时间，例如某一设备的刷新率是 75 Hz，那这时的时间间隔就是 13.3 ms（1 秒 / 75 次），但是也要注意在函数内不要做太多任务，如果太多同步阻塞代码，也会让任务的执行时间变长而掉帧
- requestAnimationFrame用来和VSync时钟保持一致
- 基本稳定在16ms没有掉帧的现象
requestIdleCallback
- 如果一帧内有空闲，会执行
requestIdleCallback(myNonEssentialWork, { timeout: 2000 });
// 任务队列
const tasks = [
() => {
console.log("第一个任务");
},
() => {
console.log("第二个任务");
},
() => {
console.log("第三个任务");
},
];
function myNonEssentialWork (deadline) {
// 如果帧内有富余的时间，或者超时
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
work();
}
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
function work () {
tasks.shift()();
console.log('执行任务');
}