建设一个网站需要注意哪些内容上海史特信息技术有限公司

建设一个网站需要注意哪些内容,上海史特信息技术有限公司,外包网站问些什么问题,wordpress怎么在上面建几个分类文章目录JavaScript 事件循环#xff08;Event Loop#xff09;#xff1a;宏任务、微任务与 async/await1.预备知识1.1 同步和异步2.事件循环基础知识2.1 事件循环的组成-执行栈和任务队列2.2 事件循环(Event loop)的过程2.3 宏观任务 微观任务3.实战题目3.1 分析含有Promi…文章目录JavaScript 事件循环Event Loop宏任务、微任务与 async/await1.预备知识1.1 同步和异步2.事件循环基础知识2.1 事件循环的组成-执行栈和任务队列2.2 事件循环(Event loop)的过程2.3 宏观任务 微观任务3.实战题目3.1 分析含有Promise的实战题目3.2 题目实战JavaScript 事件循环Event Loop宏任务、微任务与 async/await1.预备知识1.1 同步和异步在讨论事件循环前首先需要先了解同步与异步的概念JavaScript 是单线程语言一行代码执行完才会再执行下一行这个概念称之为同步。但是如果取一个服务器中拿数据需要等待 10 秒才能拿到等待途中无法进行任何操作是很糟糕的使用体验于是就有了异步。异步的程式或事件并不会阻碍主线程执行其他代码例如拿取资料当作是一个异步事件异步事件会在完成之后再通知主线程而在这之中主线程可以继续执行其他代码、使用者互动也不受异步事件的阻挡。而浏览器或其他的执行环境(例如Node.js) 之所以能够实践异步正是因为有**事件循环(Event loop)**的机制。透过事件循环机制能有效解决JavaScript 单执行绪的问题让耗时的操作不会阻塞主线程。2.事件循环基础知识2.1 事件循环的组成-执行栈和任务队列事件循环不存在JavaScript 本身而是由JavaScript 的执行环境(浏览器或Node.js) 来实现的其中包含几个概念堆(Heap)堆是一种数据结构拿来储存物件栈(Stack)采用后进先出的规则当函数执行时会被添加到栈的顶部当执行完成时就会从顶部移出直到栈被清空队列(Queue)也是一种数据结构特性是先进先出(FIFO)。在JavaScript 的执行环境中等待处理的任务会被放在队列(Queue) 里面等待栈(Stack) 被清空时会从队列(Queue)中拿取第一个任务进行处理事件循环(Event loop)事件循环会不断地去查看栈(Stack) 是否空出如果空出就会把队列(Queue)中等待的任务放进栈(Stack)中执行2.2 事件循环(Event loop)的过程1.User Interface橙色部分的User Interface是浏览器页面用户操作的来源比如点击按钮输入页面展示等等UI 不执行 JS只是触发事件。2.JavaScript Runtime黄色部分其中有 Heap堆和 Call Stack调用栈Heap 负责存数据对象/数组/函数对象不关心执行顺序Heap内存仓库。Call Stack调用栈执行 JS 代码函数一层一层压栈单线程只能有一个。3.Web APIs绿色部分理解事件循环的关键这里的东西不是 JS 在跑而是浏览器提供的能力独立于 JS 线程。包括DOM 事件clickAJAX/fetch定时器setTimeoutJS 调用它们只是登记一下4.Callback Queue蓝色部分回调的候车室,分成了宏任务队列Task Queue 微任务队列Microtask Queue中间的循环箭头是一种机制不停的检查call Stack 是否为空空了就从 Queue 拿一个回调不空就等着完整执行流程的描述Step 1UI 触发 JS同步代码直接执行Step 2遇到 Web API异步任务如 setTimeout1.setTimeout() 进 Call Stack2.浏览器 Web API 接管计时3.JS 立刻继续往下走不等setTimeout(fn, 1000)setTimeout() 本身是一次“同步函数调用”所以一定会先进 Call Stack但 setTimeout 里传的 callback才会进入宏任务队列。部分是什么去哪setTimeout()同步函数调用Call Stackfn回调异步回调宏任务队列Task QueueStep 3Web API 完成 → 回调进 Queue浏览器说「callback 已经准备好了」放进 Callback Queue,不是立刻执行Step 4Event Loop 把回调塞回 Call Stack条件只有一个Call Stack 必须是空的满足后callback → Call StackJS 开始执行回调函数2.3 宏观任务 微观任务JavaScript 中的异步任务又分成宏任务(Macro Task) 和微任务(Micro Task)这两者的执行顺序是不同的常见的宏任务与微任务如下宏任务script(整体程式码)、setTimeout、setInterval、I/O、事件、postMessage、MessageChannel、setImmediate(Node.js)微任务Promise.then、Promise.catch、MutaionObserver、process.nextTick(Node.js)。async 函数本身同步调用,await 的本质Promise.then 的语法糖.比如 async1 中有一个await async2()await async2() 会同步立即执行 async2并且把 await 后面的代码包装成一个「微任务」去执行。执行顺序如下执行一次宏任务(最开始会是整个srcipt所以上面的例子会先执行console.log(1))执行过程中如果遇到宏任务就放进宏任务列队执行过程中如果遇到微任务就放进微任务列队当执行栈空了先检查微任务列队如果有微任务就依序执行直到微任务列队为空接着进行浏览器的渲染渲然完后开始下一个宏任务(回到最开始的步骤)3.实战题目3.1 分析含有Promise的实战题目Promise 和 setTimeout 都是同步注册异步任务的机制只是 Promise 注册的是微任务setTimeout 注册的是宏任务。Promised 中的执行器函数是同步立即执行.then .catch 才是异步的微任务console.log(A);constpnewPromise((resolve,reject){// 这段就是 executor执行器函数console.log(B: executor start);resolve(OK);console.log(C: executor end);});p.then((value){console.log(E: then,value);});console.log(D);resolve 会标记 Promise 为 fulfilled并在「当前执行上下文结束后」派发微任务将.then 加入到微任务队列中「当前执行上下文结束后」指的是整个当前宏任务script执行完毕也就是 call Stack 为空。输出如下A B: executor start C: executor end D此时call Stack 栈空将微任务队列加入 call Stack保证call Stack 栈空后 1微任务队列也为空才能执行下一个宏任务最终如下A B: executor start C: executor end D E: thenpromise 中的 resolve.then 只有在 Promise「状态发生改变resolve / reject」的那一刻才会被“派发”为微任务Promise 的状态变化是同步的、确定的、不可回退的resolve 在当前调用栈里已经执行了吗执行了 → Promise 已 fulfilled → then 进微任务没执行 → Promise 还 pending → then 只注册情况一 promise 立刻变成fulfilledPromise.resolve().then((){console.log(promise 1);});这个 promise 立刻变成fulfilled情况二执行到 resolvepromise 状态变成fulfilledsetTimeout(function(){console.log(setTimeout 2);resolve(resolve 1);},0);}).then((res){这个就得等着resolve 执行才能变成fulfilled情况三不可预测fetch(/api).then(res { console.log(then); });Promise 的 resolve 时机是由外部事件决定的如网络、I/O、定时器对静态代码分析来说是不可预测的但对运行时来说是确定的所以面试题一般都是明确告知 resolve3.2 题目实战题目一console.log(1);setTimeout(function(){console.log(2);},0);Promise.resolve().then(function(){console.log(3);}).then(function(){console.log(4);});输出1; 3; 4; 2;题目二console.log(begins);setTimeout((){//1console.log(setTimeout 1);Promise.resolve().then((){//2console.log(promise 1);});},0);newPromise(function(resolve,reject){// 3console.log(promise 2);setTimeout(function(){// 4console.log(setTimeout 2);resolve(resolve 1);},0);}).then((res){//5console.log(dot then 1);setTimeout((){//6console.log(res);},0);});宏任务队列script(整体程式码)微任务队列无宏任务队列(1) (4)微任务队列无此时微任务队列为空应该继续执行宏任务1宏任务队列(4)微任务队列(2)此时宏任务1执行完应该执行微任务2此时应该继续执行加入新的宏任务宏任务队列(4)微任务队列执行到这 resolve(“resolve 1”); 5加入微任务队列宏任务队列微任务队列(5)宏任务队列(6)微任务队列输出begins; promise 2; setTimeout 1; promise 1; setTimeout 2; dot then 1; resolve 1;题目三asyncfunctionasync1(){console.log(async1 start);awaitasync2();console.log(async1 end);}asyncfunctionasync2(){console.log(async2);}console.log(script start);setTimeout(function(){console.log(setTimeout);},0);async1();newPromise(function(resolve){console.log(promise1);resolve();}).then(function(){console.log(promise2);});console.log(script end);输出如下script start async1 start async2 promise1 script end async1 end promise2 setTimeout注意注意await后的程式码会被放到微任务列队所以不会马上印出async1 end而是会把它放到微任务列队过程执行代码setTimeout 进入宏任务队列执行async1然后呼叫await async2()所以印出’async2’。但是 async2 是同步立即执行的。注意await后的程式码会被放到微任务列队所以不会马上印出’async1 end而是会把它放到微任务列队执行 promise 的执行器函数promise 状态变成fullfiled等待等待 call Stack 为空的时候将.then 加入微任务队列将两个微任务队列加入 call Stack执行两个微任务有先后顺序call Stack 为空微任务队列为空从宏任务队列中拿出一个宏任务加入 call Stack执行 call Stack