-
Notifications
You must be signed in to change notification settings - Fork 0
/
12129355.21fe6f36.js
1 lines (1 loc) · 26.4 KB
/
12129355.21fe6f36.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{482:function(e,n,t){"use strict";t.d(n,"a",(function(){return i})),t.d(n,"b",(function(){return j}));var c=t(0),r=t.n(c);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);n&&(c=c.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,c)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){s(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function a(e,n){if(null==e)return{};var t,c,r=function(e,n){if(null==e)return{};var t,c,r={},s=Object.keys(e);for(c=0;c<s.length;c++)t=s[c],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(c=0;c<s.length;c++)t=s[c],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var b=r.a.createContext({}),p=function(e){var n=r.a.useContext(b),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},i=function(e){var n=p(e.components);return r.a.createElement(b.Provider,{value:n},e.children)},u={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,c=e.mdxType,s=e.originalType,l=e.parentName,b=a(e,["components","mdxType","originalType","parentName"]),i=p(t),m=c,j=i["".concat(l,".").concat(m)]||i[m]||u[m]||s;return t?r.a.createElement(j,o(o({ref:n},b),{},{components:t})):r.a.createElement(j,o({ref:n},b))}));function j(e,n){var t=arguments,c=n&&n.mdxType;if("string"==typeof e||c){var s=t.length,l=new Array(s);l[0]=m;var o={};for(var a in n)hasOwnProperty.call(n,a)&&(o[a]=n[a]);o.originalType=e,o.mdxType="string"==typeof e?e:c,l[1]=o;for(var b=2;b<s;b++)l[b]=t[b];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},92:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return o})),t.d(n,"toc",(function(){return a})),t.d(n,"default",(function(){return p}));var c=t(3),r=t(7),s=(t(0),t(482)),l={},o={unversionedId:"javascript/asynchronous_programming/JOBS",id:"javascript/asynchronous_programming/JOBS",isDocsHomePage:!1,title:"JOBS",description:"[es2015+] \uc7a1\uc2a4(Jobs)",source:"@site/docs/javascript/asynchronous_programming/JOBS.md",slug:"/javascript/asynchronous_programming/JOBS",permalink:"/docs/javascript/asynchronous_programming/JOBS",version:"current",lastUpdatedAt:1626882853,sidebar:"javascript",previous:{title:"Promise",permalink:"/docs/javascript/asynchronous_programming/Promise"},next:{title:"\ube44\ub3d9\uae30 \ud568\uc218 Async Await",permalink:"/docs/javascript/asynchronous_programming/\ube44\ub3d9\uae30 \ud568\uc218 Async Await"}},a=[{value:"\uc7a1\uc2a4\uc640 \uc7a1\ud050\uc758 \uac1c\uc694.",id:"\uc7a1\uc2a4\uc640-\uc7a1\ud050\uc758-\uac1c\uc694",children:[]},{value:"\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud558\ub824\uba74 \uc7a1\ud050\uc5d0 \ub4f1\ub85d",id:"\uc2a4\ud06c\ub9bd\ud2b8\ub97c-\uc2e4\ud589\ud558\ub824\uba74-\uc7a1\ud050\uc5d0-\ub4f1\ub85d",children:[{value:"ES6 \uc758 \uc2a4\ud06c\ub9bd\ud2b8 \uc2e4\ud589 \ubc29\uc2dd",id:"es6-\uc758-\uc2a4\ud06c\ub9bd\ud2b8-\uc2e4\ud589-\ubc29\uc2dd",children:[]},{value:"\ud558\ub098\uc758 JOB",id:"\ud558\ub098\uc758-job",children:[]},{value:"\uc7a1\ud050 JobQueue",id:"\uc7a1\ud050-jobqueue",children:[]}]},{value:"\ub450 \uac00\uc9c0 \uc7a1\uc2a4",id:"\ub450-\uac00\uc9c0-\uc7a1\uc2a4",children:[{value:"ScriptJobs",id:"scriptjobs",children:[]},{value:"PromiseJobs",id:"promisejobs",children:[]}]},{value:"ScriptJobs \uc640 PromiseJobs \ub97c \uc5f0\uacb0\uc9c0\uc5b4 \uc774\ud574\ud558\uae30",id:"scriptjobs-\uc640-promisejobs-\ub97c-\uc5f0\uacb0\uc9c0\uc5b4-\uc774\ud574\ud558\uae30",children:[]},{value:"async defer\uc5d0 \ub530\ub978 \ucc28\uc774",id:"async-defer\uc5d0-\ub530\ub978-\ucc28\uc774",children:[{value:"async",id:"async",children:[]},{value:"defer",id:"defer",children:[]}]},{value:"\uacb0\ub860",id:"\uacb0\ub860",children:[]},{value:"Reference",id:"reference",children:[]}],b={toc:a};function p(e){var n=e.components,t=Object(r.a)(e,["components"]);return Object(s.b)("wrapper",Object(c.a)({},b,t,{components:n,mdxType:"MDXLayout"}),Object(s.b)("h1",{id:"es2015-\uc7a1\uc2a4jobs"},"[es2015+]"," \uc7a1\uc2a4(Jobs)"),Object(s.b)("h2",{id:"\uc7a1\uc2a4\uc640-\uc7a1\ud050\uc758-\uac1c\uc694"},"\uc7a1\uc2a4\uc640 \uc7a1\ud050\uc758 \uac1c\uc694."),Object(s.b)("p",null,Object(s.b)("inlineCode",{parentName:"p"},"Jobs")," ES6 \ubd80\ud130, \ub0b4\ubd80\uc801\uc73c\ub85c \uac1c\ubcc4 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc5b4\ub5a4 \ubc29\uc2dd\uc73c\ub85c \uc801\uc7ac\ub418\uace0 \uc2e4\ud589\ub418\ub294\uc9c0\ub97c \uc815\uc758\ud558\ub294 \uc0c8\ub85c\uc6b4 \ubc29\ubc95"),Object(s.b)("p",null,"\uc7a1\ud050\uc758 \ub3d9\uc791\uc744 \uc774\ud574\ud558\uba74 \uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc2e4\ud589 \uc21c\uc11c\ub97c \uc774\ud574\ud558\uace0 \ud1b5\uc81c\ud560 \uc218 \uc788\ub2e4. "),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},"<html>\n<head></head>\n<body>\n \x3c!--\ub85c\uadf8 \ucd9c\ub825--\x3e\n <sectio id=\"log\"></section>\n \n \x3c!--\ud14c\uc2a4\ud2b8\uc6a9 \ud568\uc218\ub97c \uba3c\uc800 \uc815\uc758\ud574 \uc900\ub2e4.--\x3e\n <script>\n const $log = document.getElementById('log');\n const test = t => {\n $log.innerHTML += `<div>${t} step1 </div>`;\n \n // \ub450 \uac1c\uc758 Promise \uac00 \ub450 \ubc88\uc758 then \uc73c\ub85c \ube44\ub3d9\uae30 \ubd84\ub9ac\n Promise.resolve()\n .then(_ => $log.innerHTML += `<div>${t} promise1 step1</div>`)\n .then(_ => $log.innerHTML += `<div>${t} promise1 step2</div>`)\n Promise.resolve()\n .then(_ => $log.innerHTML += `<div>${t} promise2 step1</div>`)\n .then(_ => $log.innerHTML += `<div>${t} promise2 step2</div>`)\n log.innerHTML += `<div>${t} step2</div>`;\n };\n \n // async false \ubc1c\ub3d9\n 'asyncFalse1,asyncFalse2'.split(',').forEach(v => {\n const s = document.createElement('script');\n s.src = v + '.js';\n s.async = false;\n document.body.append(s);\n });\n \n // \uc9c1\uc811 \uc0dd\uc131\ud55c \uc2a4\ud06c\ub9bd\ud2b8\n test('mix1');\n {\n const s = document.createElement('script');\n s.text = \"test('dynamic')\";\n document.body.append(s);\n }\n test('mix2');\n \n <\/script>\n \x3c!-- async \uac00 true \uc778 \uac83\uacfc false \uc778 \uac83\uc774 \uc11e\uc774\uba74? --\x3e\n <script src=\"async1.js\" async><\/script>\n <script src=\"async2.js\" async><\/script>\n\n \x3c!-- \uadf8 \uc640\uc911\uc5d0 defer \uac00 \ub07c\uc5b4\ub4e4\uba74? --\x3e\n <script src=\"defer1.js\" defer><\/script>\n <script src=\"defer2.js\" defer><\/script>\n \n \x3c!-- \uccab\ubc88\uc9f8 \uc2a4\ud06c\ub9bd\ud2b8 \ube14\ub7ed\uacfc \uadf8 \uc548\uc758 Promise --\x3e\n <script >\n test('main1');\n <\/script>\n \n \x3c!-- \ub450 \ubc88\uc9f8 \uc2a4\ud06c\ub9bd\ud2b8 \ube14\ub7ed\uacfc \uadf8 \uc548\uc758 Promise --\x3e\n <script >\n test('main2');\n <\/script>\n\n</body>\n</html>\n")),Object(s.b)("p",null,"\ucf58\uc194 \ud638\ucd9c \uc21c\uc11c\uc758 \uc124\uba85\ub3c4 \uc5b4\ub835\uace0, \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \ub2e4\ub974\uae30\ub3c4 \ud558\ub2e4."),Object(s.b)("p",null,"\ud45c\uc900\uc801\uc778 \uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc2e4\ud589 \uc21c\uc11c\uac00 \uc5b4\ub5a4 \uc2a4\ud399\uc73c\ub85c \uaddc\uc815\ub418\uc5b4\uc788\ub294\uc9c0 \uc774\ud574\ud558\uace0 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \uad6c\ud604 \ucc28\uc774\ub97c \uc774\ud574\ud560 \ud544\uc694\uac00 \uc788\ub2e4."),Object(s.b)("h2",{id:"\uc2a4\ud06c\ub9bd\ud2b8\ub97c-\uc2e4\ud589\ud558\ub824\uba74-\uc7a1\ud050\uc5d0-\ub4f1\ub85d"},"\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud558\ub824\uba74 \uc7a1\ud050\uc5d0 \ub4f1\ub85d"),Object(s.b)("h3",{id:"es6-\uc758-\uc2a4\ud06c\ub9bd\ud2b8-\uc2e4\ud589-\ubc29\uc2dd"},"ES6 \uc758 \uc2a4\ud06c\ub9bd\ud2b8 \uc2e4\ud589 \ubc29\uc2dd"),Object(s.b)("ol",null,Object(s.b)("li",{parentName:"ol"},"\ud558\ub098\uc758 \ud504\ub808\uc784 \ub0b4\uc5d0\uc11c\ub3c4 \ub2e4\uc2dc \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc2e4\ud589\ud558\ub294 \ud050\ub97c \uac16\uac8c\ud55c\ub2e4. "),Object(s.b)("li",{parentName:"ol"},"\uc2e4\ud589\ud560 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \ud050\uc5d0 \uc801\uc7ac\ud55c\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\ud050\ub97c \ube44\uc6cc\uac00\uba70 \ud558\ub098\uc529 \uc2e4\ud589\ud55c\ub2e4. ")),Object(s.b)("h3",{id:"\ud558\ub098\uc758-job"},"\ud558\ub098\uc758 JOB"),Object(s.b)("p",null,"\uac1c\ubcc4\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ub294 \uc2a4\ud06c\ub9bd\ud2b8 \ube14\ub7ed"),Object(s.b)("h3",{id:"\uc7a1\ud050-jobqueue"},"\uc7a1\ud050 JobQueue"),Object(s.b)("p",null,"Jobs \ub97c \uc801\uc7ac\ud558\ub294 FIFO"),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},"<script>\n//\uc5ec\uae30 \uc804\uccb4\uac00 \uccab\ubc88\uc9f8 \uc7a1\uc73c\ub85c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub428\n<\/script>\n \n<script>\n//\uc5ec\uae30 \uc804\uccb4\uac00 \ub450\ubc88\uc9f8 \uc7a1\uc73c\ub85c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub428\n<\/script>\n")),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"\ud604\uc7ac \uc9c4\ud589\uc911\uc778 execution context \uac00 \uc5c6\uc744 \ub54c",Object(s.b)("ul",{parentName:"li"},Object(s.b)("li",{parentName:"ul"},"Job \uc774 Queue \uc5d0 \uc801\uc7ac \ub418\uba74 RunJobs() \uc5d0 \uc758\ud574 \uc989\uc2dc \uc2e4\ud589\ub41c\ub2e4."),Object(s.b)("li",{parentName:"ul"},"\uc774 \ucf54\ub4dc\uc758 \uacb0\uacfc\ub85c \ub610 \ub2e4\ub978 Job \uc774 \ub4f1\ub85d\ub420 \uc218 \uc788\ub2e4.")))),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},"<script>\n//\ub9cc\uc57d \uc5ec\uae30\uc11c \ucd94\uac00\uc801\uc778 \uc7a1\uc744 \ub4f1\ub85d\ud558\uba74\n//\ub4f1\ub85d\ub41c \uc7a1\uc774 \ub2e4 \ud574\uc18c\ub41c \ud6c4\n<\/script>\n \n<script>\n//\uadf8 \ub2e4\uc74c\uc5d0 \uc774 \uc7a1\uc774 \uc2e4\ud589\ub41c\ub2e4.\n<\/script>\n\n")),Object(s.b)("h2",{id:"\ub450-\uac00\uc9c0-\uc7a1\uc2a4"},"\ub450 \uac00\uc9c0 \uc7a1\uc2a4"),Object(s.b)("p",null,"JobQueue \uc5d0\ub294 \ub450\uac00\uc9c0 Job \uc744 \ub4f1\ub85d\ud560 \uc218 \uc788\ub2e4."),Object(s.b)("ol",null,Object(s.b)("li",{parentName:"ol"},"ScriptJobs - \uc77c\ubc18\uc801\uc778 \uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\ub294 \uc7a1"),Object(s.b)("li",{parentName:"ol"},"PromiseJobs - Promise \uc758 \ud574\uc18c\ub098, \uc608\uc678\ub85c \ubd84\uae30\ub418\uc5b4 \uc2e4\ud589\ub420 \ud568\uc218\uac00 \uc801\uc7ac\ub418\ub294 Job",Object(s.b)("ul",{parentName:"li"},Object(s.b)("li",{parentName:"ul"},"Promise \uac00 \ud604\uc7ac \ud504\ub808\uc784\uc5d0\uc11c then \uc73c\ub85c \ubd84\uae30\ub418\ub294 \uacbd\uc6b0",Object(s.b)("ul",{parentName:"li"},Object(s.b)("li",{parentName:"ul"},"\ub2e4\uc74c\ud504\ub808\uc784\uc73c\ub85c \ub118\uc5b4\uac00\ub294 \uac74 \uc544\ub2c8\uc9c0\ub9cc JobQueue \ub85c then \uc774\ud6c4\uac00 PromiseJobs \ub85c \ub4f1\ub85d\ub41c\ub2e4."),Object(s.b)("li",{parentName:"ul"},"\ud604\uc7ac Execution Context \uc758 \uc2e4\ud589\uc774 \uc9c4\ud589\ub41c \uc774\ud6c4\uc5d0 JobQueue \uc5d0\uc11c \uaebc\ub0b4 \uc2e4\ud589\ud558\uac8c \ub41c\ub2e4.")))))),Object(s.b)("h3",{id:"scriptjobs"},"ScriptJobs"),Object(s.b)("p",null,"w3c \uc2a4\ud399\uc5d0\uc11c\ub294 ScriptJobs \ub294 \ucf54\ub4dc\ub85c \uc0dd\uc131\ud558\uc9c0 \ubabb\ud55c\ub2e4\uace0 \ud558\uc600\uc9c0\ub9cc "),Object(s.b)("p",null,"\ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\ub85c ScriptJobs \ub97c \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4."),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"const s = document.createElement('script');\ns.text = '// script contents';\ndocument.body.append(s);\n")),Object(s.b)("h3",{id:"promisejobs"},"PromiseJobs"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"promise \uc758 then \uc740 \uc989\uc2dc JobQueue \uc5d0 \ub123\ub3c4\ub85d \uc2a4\ud399\uc5d0\uc11c \uaddc\uc815\ud558\uace0 \uc788\ub2e4."),Object(s.b)("li",{parentName:"ul"},"promise \uac00 \uc989\uc2dc \ud574\uc18c\ub41c\ub2e4 \ud558\ub354\ub77c\ub3c4 \uc2e4\ud589\uc911\uc778 Execution Context \uac00 \uc644\ub8cc\ub41c \ud6c4 \ub2e4\uc74c Job \uc73c\ub85c \uc2e4\ud589\ub41c\ub2e4.")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"Promise.resolve() // \uc989\uc2dc \ud574\uc18c\ub418\ub294 Promise\n .then(_ => console.log('promise step1'));\nconsole.log('ec running');\n\n// ec running\n// promise step1\n")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"Promise.resolve()//\uc989\uc2dc \ud574\uc18c\ub418\ub294 \ud504\ub77c\ubbf8\uc2a41\n .then(_=>console.log('promise1 step1')) //\uccab\ubc88\uc9f8 then\n .then(_=>console.log('promise1 step2'));//\ub450\ubc88\uc9f8 then\n \nPromise.resolve()//\uc989\uc2dc \ud574\uc18c\ub418\ub294 \ud504\ub77c\ubbf8\uc2a42\n .then(_=>console.log('promise2 step1')) //\uccab\ubc88\uc9f8 then\n .then(_=>console.log('promise2 step2'));//\ub450\ubc88\uc9f8 then\n \nconsole.log('ec running');\n")),Object(s.b)("ol",null,Object(s.b)("li",{parentName:"ol"},"\ucc98\uc74c \ub4f1\uc7a5\ud55c \ud504\ub77c\ubbf8\uc2a41\uc758 \uccab \ubc88\uc9f8 then \uc774 \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc774 \uc2dc\uc810\uc5d0\uc11c then \uc740 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc73c\ubbc0\ub85c \ub450 \ubc88\uc9f8 then \uc740 \ubb34\uc2dc\ud574\ub450\uc8e0."),Object(s.b)("li",{parentName:"ol"},"\uc774\uc5b4 \ub450 \ubc88\uc9f8 \ub4f1\uc7a5\ud55c \ud504\ub77c\ubbf8\uc2a42\uc758 \uccab \ubc88\uc9f8 then \uc774 \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub429\ub2c8\ub2e4. \uc774\uc81c \uc7a1\ud050\uc5d0\ub294 \ub450 \uac1c\uc758 PromiseJobs \uac00 \ub4f1\ub85d\ub418\uc5c8\uc2b5\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc774\uc81c \ub9c8\uc9c0\ub9c9 \uc904\uc758 console.log \uac00 \uc2e4\ud589\ub418\uc5b4 \ud604\uc7ac\uc758 ScriptJobs \uac00 \uc644\ub8cc\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc7a1\ud050\uc5d0 \uc788\ub294 \ub2e4\uc74c \uc7a1\uc778 1\ubc88\uc5d0\uc11c \ub4f1\ub85d\ud55c \uccab \ubc88\uc9f8 \ud504\ub77c\ubbf8\uc2a4\uc758 \uccab \ubc88\uc9f8 then \uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4. \uadf8 \uacb0\uacfc \ub2e4\uc2dc then \uc774 \ud638\ucd9c\ub418\uc5b4 \uc774\ub97c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ud558\uac8c \ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\ub450 \ubc88\uc9f8 \uc7a1\ud050\uc5d0 \ub4e4\uc5b4\uc788\ub294 \uc7a1\uc740 3\ubc88\uc5d0\uc11c \ub4f1\ub85d\ud55c \ub450 \ubc88\uc9f8 \ud504\ub77c\ubbf8\uc2a4\uc758 \uccab \ubc88\uc9f8 then \uc785\ub2c8\ub2e4. \uc774\uac83\ub3c4 \uc2e4\ud589\ud558\uba74 \uadf8 \uacb0\uacfc \uc7a1\ud050\uc5d0 \ub450 \ubc88\uc9f8 then \uc758 \ub0b4\uc6a9\uc744 \ub4f1\ub85d\ud558\uac8c\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc774\uc81c 5\ubc88\uc5d0\uc11c \ub4f1\ub85d\ud55c \uccab \ubc88\uc9f8 \ud504\ub77c\ubbf8\uc2a4\uc758 \ub450 \ubc88\uc9f8 then \uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc774\uc5b4\uc11c 6\ubc88\uc5d0\uc11c \ub4f1\ub85d\ud55c \ub450 \ubc88\uc9f8 \ud504\ub77c\ubbf8\uc2a4\uc758 \ub450 \ubc88\uc9f8 then \uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4.")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-text"},"ec running\npromise1 step1\npromise2 step1\npromise1 step2\npromise2 step2\n")),Object(s.b)("p",null,"\uac19\uc740 \ud504\ub808\uc784\uc5d0\uc11c \uc989\uc2dc \ud574\uc18c\ub418\ub294 Promise \ub77c\ub3c4 \ud574\ub2f9 \ud504\ub808\uc784\uc758 JobQueue \uc5d0 \ub4f1\ub85d \uc21c\uc11c\uc5d0 \ub530\ub77c \uc2e4\ud589\ub41c\ub2e4."),Object(s.b)("h2",{id:"scriptjobs-\uc640-promisejobs-\ub97c-\uc5f0\uacb0\uc9c0\uc5b4-\uc774\ud574\ud558\uae30"},"ScriptJobs \uc640 PromiseJobs \ub97c \uc5f0\uacb0\uc9c0\uc5b4 \uc774\ud574\ud558\uae30"),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},"<script>\n Promise.resolve()\n .then(_=>console.log('block1 step1'))\n .then(_=>console.log('block1 step2'));\n console.log('block1');\n<\/script>\n \n<script>\n Promise.resolve()\n .then(_=>console.log('block2 step1'))\n .then(_=>console.log('block2 step2'));\n console.log('block2');\n<\/script>\n")),Object(s.b)("ol",null,Object(s.b)("li",{parentName:"ol"},"\uc6b0\uc120 ScriptJobs\uc5d0 \uccab \ubc88\uc9f8 script\ud0dc\uadf8 \ub0b4\uc6a9\uc774 \ub4f1\ub85d\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\ub4f1\ub85d\ub418\uc5c8\uc73c\ubbc0\ub85c \ubb34\uc870\uac74 \uc2e4\ud589\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc2e4\ud589\ud558\ub2c8 \ud504\ub77c\ubbf8\uc2a4\uc758 then\uc774 \ub098\uc640 \ub2e4\uc74c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"3\ubc88\uc5d0\uc11c \ub4f1\ub85d\ub41c PromiseJobs\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4. \uadf8 \uacb0\uacfc \ub2e4\uc2dc then\uc774 \ub098\uc640 \ub2e4\uc74c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"4\ubc88\uc5d0\uc11c \ub4f1\ub85d\ub41c PrmoiseJobs\uac00 \uc2e4\ud589\ub418\uba70 \uc7a1\ud050\ub294 \ube44\uc5b4\uc788\ub294 \uc0c1\ud0dc\uac00 \ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc774\uc5b4\uc11c \ube0c\ub77c\uc6b0\uc800\uac00 \ub2e4\uc74c script\ud0dc\uadf8 \ub0b4\uc6a9\uc744 ScriptJobs\ub85c \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ud569\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"6\uc5d0\uc11c \ub4f1\ub85d\ud55c \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc2e4\ud589\ub429\ub2c8\ub2e4."),Object(s.b)("li",{parentName:"ol"},"\uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc2e4\ud589\ub418\uba70 3\ubc88\uacfc \ub9c8\ucc2c\uac00\uc9c0 \ud615\ud0dc\ub85c \ud504\ub77c\ubbf8\uc2a4\uc640 then \ub450 \ubc88\uc774 \uc7a1\ud050\uc5d0 \ub4f1\ub85d\ub418\uba70 \uc2e4\ud589\ub429\ub2c8\ub2e4.")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-text"},"block1\nblock1 step1\nblock1 step2\nblock2\nblock2 step1\nblock2 step2\n")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},"<script>\n{\n const s = document.createElement('script');\n //\ub3d9\uc801 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uc774 \uc548\uc5d0\ub3c4 \ud504\ub77c\ubbf8\uc2a4\ub97c \ub123\uc790\n s.text = `\n Promise.resolve()\n .then(_=>console.log('dynamic step1'))\n .then(_=>console.log('dynamic step2'));\n console.log('dynamic');\n `;\n document.body.appendChild(s);\n}\n \n//\uc774\ucabd\uc774 \ud604\uc7ac ScriptJobs\uc5d0\uc11c \uc2e4\ud589\ud558\uace0 \uc788\ub294 \ud750\ub984 \ucabd\uc758 \ucf54\ub4dc\nPromise.resolve()\n .then(_=>console.log('base step1'))\n .then(_=>console.log('base step2'));\nconsole.log('base');\n<\/script>\n\n")),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-text"},"dynamic\nbase\ndynamic step1\nbase step1\ndynamic step2\nbase step2\n")),Object(s.b)("p",null,"\ub3d9\uc801 \uc0dd\uc131\ub41c \uc2a4\ud06c\ub9bd\ud2b8\uc640 \ud604\uc7ac \uc2e4\ud589\uc911\uc778 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ud558\ub098\uc758 ScriptJobs \uac00 \ub418\uc5b4 \uc2e4\ud589\ub418\ub294 \uacb0\uacfc\uc640 \uac19\ub2e4."),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"script \ud0dc\uadf8 \uc0dd\uc131, innerHTML \uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 DOM \uc81c\uc5b4\uac00 \ub610 \ub2e4\ub978 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ub0b4\ub3c4, \uc0c8\ub85c\uc6b4 Job \uc73c\ub85c \ub4f1\ub85d\ub418\uc9c0 \uc54a\uace0, \ud604\uc7ac Job \uc5d0\uc11c \uacc4\uc18d \uc2e4\ud589\ub41c\ub2e4."),Object(s.b)("li",{parentName:"ul"},"\uc0c8\ub85c \uc0dd\uc131\ud55c \ub3d9\uc801 \uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud604\uc7ac\uc758 ScriptJobs \uc5d0\uc11c \uc2e4\ud589\ub418\uc5b4, Execution Context \uac00 \ud574\uc18c \ub41c \ud6c4 \uc21c\ucc28\uc801\uc73c\ub85c Promise \uac00 JobQueue \uc5d0 \ub4f1\ub85d\ub418\uba70 \ud574\uc18c\ub41c\ub2e4.")),Object(s.b)("h2",{id:"async-defer\uc5d0-\ub530\ub978-\ucc28\uc774"},"async defer\uc5d0 \ub530\ub978 \ucc28\uc774"),Object(s.b)("p",null,"defer"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"DOMLoaded \uc774\ud6c4\uc5d0 \ub85c\ub529\ub41c \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc21c\uc11c\uc5d0 \ub9de\uac8c \uc2e4\ud589\ub418\ub294 \uac83\uc744 \ubcf4\uc7a5\ud55c\ub2e4.")),Object(s.b)("p",null,"async"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"html \uc0c1\uc5d0 \ub4f1\uc7a5\ud55c \uc21c\uc11c\uc640 \uc0c1\uad00\uc5c6\uc774 \uba3c\uc800 loading \ub41c \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc2e4\ud589\ub41c\ub2e4.")),Object(s.b)("h3",{id:"async"},"async"),Object(s.b)("p",null,Object(s.b)("inlineCode",{parentName:"p"},'async="false"')),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"HTML5.1"),Object(s.b)("li",{parentName:"ul"},"\ub85c\ub529\uc740 async \ud558\uac8c \ub418\uc9c0\ub9cc \uc2e4\ud589\uc740 \uc21c\uc11c\uc5d0 \ub9de\uac8c \ud574\uc900\ub2e4."),Object(s.b)("li",{parentName:"ul"},"\ub3d9\uc801 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub9cc\ub4e0 \uacbd\uc6b0\uc5d0\ub9cc \uc801\uc6a9\ud560 \uc218 \uc788\ub2e4.")),Object(s.b)("p",null,"\uc801\uc6a9\uc548\ub40c, async \uc120\uc5b8\uacfc \ub3d9\uc77c"),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},'<script async="false" src="1.js"><\/script>\n')),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"const s = document.createElement('script');\ns.src = '1.js';\ns.async = false; // \ud6a8\uacfc \uc788\uc74c\ndocument.body.appendChild(s);\n")),Object(s.b)("p",null,"async \ub97c \uc801\uc6a9\ud55c script \uc758 \uacbd\uc6b0"),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},'<script async src="1.js"><\/script>\n<script async src="2.js"><\/script>\n')),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"//1.js-------------------\nPromise.resolve()\n .then(_=>console.log('1 step1'))\n .then(_=>console.log('1 step2'));\nconsole.log('1');\n//2.js-------------------\nPromise.resolve()\n .then(_=>console.log('2 step1'))\n .then(_=>console.log('2 step2'));\nconsole.log('2');\n")),Object(s.b)("p",null,"async=false \uc758 Jobs \uc5d0 \ub300\ud55c \ud45c\uc900 \uc2a4\ud399\uc740 \uc5c6\uae30 \ub54c\ubb38\uc5d0, \uacb0\uacfc\ub294 \ube0c\ub77c\uc6b0\uc800\ub9c8\ub2e4 \ub2e4\ub974\ub2e4.."),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},"1.js \uc640 2.js \uac00 \uc11e\uc774\uc9c0 \uc54a\uace0 \uc790\uc2e0\uc758 JobQueue \ub97c \uad00\ub9ac\ud55c\ub2e4."),Object(s.b)("li",{parentName:"ul"},"1.js \uc774 \uba3c\uc800 \uc2e4\ud589\ub420 \uc218\ub3c4 \uc788\uace0 2.js \uac00 \uba3c\uc800 \uc2e4\ud589\ub420 \uc218\ub3c4 \uc788\ub2e4. ")),Object(s.b)("p",null,"\ud30c\uc774\uc5b4 \ud3ed\uc2a4 \uac19\uc740 \uacbd\uc6b0 async = false \uc778 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubb36\uc5b4\uc11c \ud558\ub098\uc758 ScriptJobs \ub85c \ub4f1\ub85d\ud558\uae30\ub3c4 \ud558\uace0 \ubd84\ub9ac\ud574\uc11c \ub4f1\ub85d\ud558\uae30\ub3c4 \ud55c\ub2e4.\n\uc624\ud788\ub824 \ud30c\uc774\uc5b4\ud3ed\uc2a4\ub9cc \ud55c \ud504\ub808\uc784 \ub0b4\uc5d0\uc11c \uc5ec\ub7ec\uac1c\uc758 \uc2a4\ud06c\ub9bd\ud2b8\ub85c\ub529\uc644\ub8cc \uac00 \ubc1c\uc0dd\ub418\ub294 \uc9c4\uc815\ud55c \ubcd1\ub82c\ub85c\ub354\uc77c \uc218 \uc788\ub2e4."),Object(s.b)("h3",{id:"defer"},"defer"),Object(s.b)("p",null,"\uc5ec\ub7ec \uac1c\uc758 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub85c\ub529\ud574\ub3c4 \ubc18\ub4dc\uc2dc \uc21c\uc11c\ub97c \ubcf4\uc7a5\ud55c\ub2e4."),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-html"},'<script defer src="1.js"><\/script>\n<script defer src="2.js"><\/script>\n')),Object(s.b)("p",null,"\ud06c\ub86c\uacfc \ud30c\uc774\uc5b4\ud3ed\uc2a4: \uac1c\ubcc4 defer \ub97c \uac01\uac01 ScriptJobs \ub85c \ub4f1\ub85d\ud55c\ub2e4."),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-text"},"1\n1 step1\n1 step2\n2\n2 step1\n2 step2\n")),Object(s.b)("p",null,"\uc5e3\uc9c0 : \ub3d9\uc801 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0bd\uc785\ud588\uc744 \ub54c \ucc98\ub7fc defer \uc120\uc5b8 \uc2a4\ud06c\ub9bd\ud2b8\ub4e4\uc744 \ubb36\uc5b4\uc11c \ud558\ub098\uc758 ScriptJobs \ub85c \ub4f1\ub85d\ud55c\ub2e4."),Object(s.b)("pre",null,Object(s.b)("code",{parentName:"pre",className:"language-javascript"},"//2\n//1 step1\n//2 step1\n//1 step2\n//2 step2\n")),Object(s.b)("p",null,"\uc774\ucabd\ub3c4 \uc5b4\ub290 \ucabd\uc774 \ub9de\ub2e4\uace0\ub294 \ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. defer\uc758 \uacb0\uacfc\uac00 \ucde8\ud569\ub418\ub294\ub370 \uc788\uc5b4\uc11c \ud45c\uc900\uc740 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc81c\uac01\uac01 \uad6c\ud604 \ubc29\uc2dd\uc744 \ub530\ub985\ub2c8\ub2e4."),Object(s.b)("h2",{id:"\uacb0\ub860"},"\uacb0\ub860"),Object(s.b)("p",null,"es2015+\uc5d0 \ub3c4\uc785\ub418\uc5b4\uc788\ub294 \uc7a1\uc2a4\uc640 \uc7a1\ud050\uc758 \uac1c\ub150\uc740 HTML5\uc5d0\ub3c4 \uc720\uae30\uc801\uc73c\ub85c \ubc18\uc601\ub418\uc5b4\uc788\ub294 \ud45c\uc900\uc785\ub2c8\ub2e4. \uc5b8\uc81c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ucf54\ub4dc\uac00 \ud65c\uc131\ud654\ub418\uace0 \uc2e4\ud589\ub418\ub294\uac00\uc5d0 \ub300\ud55c \uc6d0\ub9ac\ub77c\uace0 \ud560 \uc218 \uc788\uc8e0.",Object(s.b)("br",{parentName:"p"}),"\n","\ud604\uc0c1\ubcf4\ub2e4\ub294 \uc2a4\ud399\uc744 \uc774\ud574\ud558\uace0 \ube0c\ub77c\uc6b0\uc800 \uac04\uc758 \ucc28\uc774\uc810\uc744 \uc778\uc2dd\ud558\uba74 \ud63c\ub3d9\uc2a4\ub7ec\uc6b8 \uac83\uc740 \uc5c6\ub294 \uc815\ub3c4\uc785\ub2c8\ub2e4 ^^;",Object(s.b)("br",{parentName:"p"}),"\n","script\ud0dc\uadf8\uc758 async\uc640 defer\uc758 \uad00\uacc4\ub97c \ubcf4\uba74 \uacb0\uad6d \ud06c\ub86c, \ud30c\ud3ed, \uc5e3\uc9c0\ub294 \ub2e4\ub978 \uc815\ucc45\uc73c\ub85c ScriptJobs\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc774\ub97c \uc798 \uc774\ud574\ud558\uace0 \ubbf8\ubb18\ud55c \ubb38\uc81c\ub97c \ud53c\ud574\uc57c\uaca0\uc2b5\ub2c8\ub2e4."),Object(s.b)("h2",{id:"reference"},"Reference"),Object(s.b)("ul",null,Object(s.b)("li",{parentName:"ul"},Object(s.b)("a",{parentName:"li",href:"https://www.bsidesoft.com/5385"},"https://www.bsidesoft.com/5385"))))}p.isMDXComponent=!0}}]);