Promise Async/await 运行时机制

故事要从一道今日头条的笔试题说起～

题目来源：半年工作经验今日头条和美团面试题面经分享！！！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

async function async1(){

    console.log('async1 start')

    await async2()

    console.log('async1 end')

}

async function async2(){

    console.log('async2')

}

console.log('script start')

setTimeout(function(){

    console.log('setTimeout') 

},0)  

async1();

new Promise(function(resolve){

    console.log('promise1')

    resolve();

}).then(function(){

    console.log('promise2')

})

console.log('script end')

求打印结果？

题目考 js 事件循环和回调队列～ 假设看客已经了解 setTimeout 是宏任务会在最后执行的前提（因为它不是今天要讨论的重点），主要讨论 promise、async 和 await 之间的关系。

个人思路：

1
2
3
4
5
6

1. console.log('script start')
2. console.log('async1 start')
   async2 开始执行
   console.log('async1 end') 等待 async2
3. 
4.

JS 执行机制 及 异步回调( setTimeout / setInterval / Promise )

javascript执行机制 代码执行顺序 函数生命周期加载等类似问题 都与javascript执行机制相关。

1. 关于javascript
   javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！
2. javascript事件循环
   既然js是单线程，排队 办理业务, js任务也要一个一个顺序执行。如 任务耗时过长，后一个任务必须等着。浏览新闻 超清图片加载慢 需要异步加载 任务分为两类：

• 同步任务
• 异步任务
  打开网站，网页渲染 过程 就是 同步任务，比如 页面骨架和 页面元素的渲染。而 加载 图片 音乐之类占用资源大耗时久的任务，就是异步任务。关于这部分有严格的文字定义，但本文的目的是用最小的学习成本彻底弄懂执行机制，所以我们用导图来说明：
  
  导图要表达的内容用文字来表述的话：
  
  同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数 移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。

上述过程会不断重复，也就是常说的Event Loop(事件循环)。

我们不禁要问了，那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。
说了这么多文字，不如直接一段代码更直白：略

1. 又爱又恨的setTimeout

(https://juejin.im/post/59e85eebf265da430d571f89)

(https://blog.csdn.net/haoaiqian/article/details/78622651)

Async/Await替代 Promise 的6个理由

阅读原文

CSS text-indent段落首行文字缩进

1. css text-indent文本缩进样式属性单词，text-indent的值跟 数字 + 单位 组成缩进样式。

1

.divcss5{ text-indent:35px}

1. 通常 text-indent 缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签，第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进，这里我们给大家通过案例演示给大家，希望通过DIVCSS5案例掌握CSS text-indent缩进样式。

JS修改CSS样式

1. setAttribute

1
2
3

let evedd = sideMenu.children[i].getElementsByTagName('dd')[0]

evedd.setAttribute('style', `height: 0px`)

2. .style

1
2

document.documentElement.style.fontSize
    = document.documentElement.clientWidth / 3.75 + 'px';