{"id":781,"date":"2012-04-25T08:26:52","date_gmt":"2012-04-25T08:26:52","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=781"},"modified":"2012-04-25T08:26:52","modified_gmt":"2012-04-25T08:26:52","slug":"js-script%ed%83%9c%ea%b7%b8%ec%9d%98-async%ec%99%80-defer-%ec%86%8d%ec%84%b1","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=781","title":{"rendered":"JS : script\ud0dc\uadf8\uc758 async\uc640 defer \uc18d\uc131"},"content":{"rendered":"<p><a href=\"http:\/\/webkit.org\/blog\/1395\/running-scripts-in-webkit\/\"><br \/>\nWebKit nightly builds\uac00 HTML5 \ud45c\uc900\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\ub294 script \uc694\uc18c\uc758 async\uc640 defer \uc18d\uc131\uc744 \uc9c0\uc6d0\ud558\uae30 \uc2dc\uc791\ud588\ub2e4\ub294 \uc18c\uc2dd.<\/a><\/p>\n<p>\uae30\ubcf8\uc801\uc73c\ub85c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 \uc678\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubd88\ub7ec\uc624\ub294 \uc77c\ubc18 script \ud0dc\uadf8\ub97c \ub9cc\ub098\uac8c \ub418\uba74, \uc6b0\uc120 \ud574\ub2f9 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub0b4\ub824\ubc1b\uc544 \ud574\uc11d\ud558\uace0 \uc2e4\ud589(execute)\ud560 \ub54c\uae4c\uc9c0 \uc6f9 \ubb38\uc11c\uc758 HTML \ucf54\ub4dc parsing \uc791\uc5c5\uc744 \uc7a0\uc2dc \ub4a4\ub85c \ubbf8\ub8ec\ub2e4. \uadf8\ub798\uc11c \uc6a9\ub7c9\uc774 \ud070 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubb38\uc11c \ud574\uc11d \ucd08\uae30\uc5d0 \ub9cc\ub098\uac8c \ub418\uba74 \ud574\ub2f9 \ud398\uc774\uc9c0\ub97c \ubd88\ub7ec\uc624\ub294 \uc18d\ub3c4\ub9c8\uc800 \uc9c0\uccb4\ub418\ub294 \ud604\uc0c1\uc744 \uc77c\uc73c\ud0a4\uac8c \ub418\uc5b4 \uacb0\uad6d \uc804\uccb4\uc801 \uc131\ub2a5\uc744 \ub5a8\uc5b4\ub728\ub9ac\ub294 \uacb0\uacfc\ub97c \uac00\uc838\uc624\ub294\ub370, \uc774\ub7f0 \uc131\ub2a5\uc758 \ubcd1\ubaa9 \ud604\uc0c1\uc744 \ub9c9\uae30 \uc704\ud574?<a href=\"http:\/\/www.stevesouders.com\/blog\/2009\/04\/27\/loading-scripts-without-blocking\/\">\uc5ec\ub7ec<\/a>?<a href=\"http:\/\/css.dzone.com\/news\/lazy-loading-asyncronous\">\ub2e4\uc591\ud55c<\/a>?<a href=\"http:\/\/www.nczonline.net\/blog\/2009\/06\/23\/loading-javascript-without-blocking\/\">\uaf3c\uc218<\/a>\ub4e4\uc774 \uc4f0\uc5ec\uc654\ub2e4. \uc774\ub7f0 \ubd80\uc791\uc6a9\uc744 \uadfc\ubcf8\uc801\uc73c\ub85c \ub9c9\uae30 \uc704\ud574 \uc18c\uac1c\ub41c \uac83\uc774 script \ud0dc\uadf8\uc758 async\uc640 defer \uc18d\uc131\uc774\ub2e4.<\/p>\n<p>\uc0ac\uc6a9 \uc608\ub97c \ubcf4\uba74 \uc544\uc8fc \ub2e8\uc21c\ud558\ub2e4:<\/p>\n<div><a title=\"\ucf54\ub4dc \ubaa8\uc591\uc0c8 \ubc14\uafb8\uae30\" href=\"http:\/\/appletree.or.kr\/blog\/web-development\/javascript\/script-%ED%83%9C%EA%B7%B8%EC%9D%98-async%EC%99%80-defer-%EC%86%8D%EC%84%B1\/#content\">?<\/a><\/div>\n<pre>&lt;script async src=\"myAsyncScript.js\" onload=\"myInit()\"&gt;&lt;\/script&gt;\n&lt;script defer src=\"myDeferScript.js\" onload=\"myInit()\"&gt;&lt;\/script&gt;<\/pre>\n<p>\uc704\uc640 \uac19\uc774 async \ud639\uc740 defer \ub41c \uc2a4\ud06c\ub9bd\ud2b8\ub294 \ubb38\uc11c parsing \uc791\uc5c5\uc758 \uc911\ub2e8 \uc5c6\uc774 \ub3d9\uc2dc\uc5d0 \ub0b4\ub824\ubc1b\uac8c \ub418\uba70, \uc120\ud0dd\uc801\uc73c\ub85c onload handler\ub97c \uc9c0\uc815\ud574\uc11c \uc77c\ubc18\uc801\uc778 \ucd08\uae30\ud654 \uc791\uc5c5\ub3c4 \uc9c4\ud589\ud560 \uc218 \uc788\ub2e4.<br \/>\n\ub458\uc758 \ucc28\uc774\ub97c \uacb0\uc815\uc9d3\ub294 \uc911\uc694\ud55c \uac83\uc740 \ubc14\ub85c \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc2e4\ud589\ub418\ub294 \uc2dc\uc810\uc774 \uc11c\ub85c \ub2e4\ub974\ub2e4\ub294 \uac83\uc778\ub370, async script\ub294 window\uc758 load event \uc804 \ub0b4\ub824\ubc1b\ub294 \uc989\uc2dc \ubc14\ub85c \uc2e4\ud589\ub418\ub294 \ub370 \ubc18\ud574 defer script\ub294 \ubb38\uc11c\uc758 parsing \uc791\uc5c5\uc774 \ub05d\ub09c \ud6c4 DOMContentLoaded event \uc804\uc5d0 \ubb38\uc11c\uc5d0 \uc0bd\uc785\ub41c \uc21c\uc11c\uc5d0 \ub530\ub77c \uc2e4\ud589\ub41c\ub2e4.<\/p>\n<p>\ub458\uc758 JavaScript \uc2e4\ud589 \uc2dc\uc810\uc758 \ucc28\uc774\ub294?<a href=\"http:\/\/peter.sh\/experiments\/asynchronous-and-deferred-javascript-execution-explained\/\">Peter Beverloo\uc528\uac00 \uadf8\ub9b0 \ub3c4\ud45c<\/a>\ub97c \ubcf4\uba74 \ud6e8\uc52c \ub354 \uba85\ud655\ud574\uc9c4\ub2e4.<br \/>\n<img loading=\"lazy\" src=\"http:\/\/appletree.or.kr\/blog\/images\/javascript_execution.jpg\" alt=\"\" width=\"545\" height=\"112\" \/><\/p>\n<p>script\uac00 \ubb38\uc11c\ub97c \uc9c1\uc811 \ub9cc\uc9c0\uace0 \uc870\uc791\ud558\uac70\ub098 \uc11c\ub85c \uac04 \ub85c\ub529 \uc21c\uc11c\uac00 \uc911\uc694\ud560 \uacbd\uc6b0\uc5d4 defer \uc18d\uc131\uc744 \uc4f0\uace0, \uadf8\ub807\uc9c0 \uc54a\ub2e4\uba74 async \uc18d\uc131\uc744 \uc368\uc11c \uc6f9 \ud398\uc774\uc9c0 \ub85c\ub529 \uc18d\ub3c4\ub97c \uc904\uc77c \uc218 \uc788\ub2e4.<\/p>\n<p>\uc55e\uc73c\ub85c WebKit \uae30\ubc18 \ube0c\ub77c\uc6b0\uc800\uac00 \uc774 \uc18d\uc131\uc744 \ubaa8\ub450 \uc9c0\uc6d0\ud560 \uc608\uc815\uc774\ub77c\uc9c0\ub9cc, \uc774\ubbf8 Firefox\ub294 3.6 \ubc84\uc804\ubd80\ud130 \ub450 \uc18d\uc131 \ubaa8\ub450\ub97c \uc9c0\uc6d0\ud558\uace0 \uc788\uc73c\uba70, Internet Explorer \uc5ed\uc2dc \uc608\uc804\ubd80\ud130 defer \uc18d\uc131\uc744 \uc9c0\uc6d0\ud558\uace0 \uc788\uc5c8\uc73c\ub098 async \uc18d\uc131\uc740 \uc544\uc9c1 \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294\ub2e4.<\/p>\n<p>\uacb0\uad6d, \ud070 \uc6a9\ub7c9\uc758 JavaScript\ub85c \ub9d0\ubbf8\uc554\uc740 \ud398\uc774\uc9c0 \ub85c\ub529 \uc9c0\uccb4 \ud604\uc0c1\uc744 \ubc29\uc9c0\ud558\ub824\uba74 \ub450 \uc18d\uc131\uc758 \uc9c0\uc6d0 \uc0c1\ud669\uc774 \ub098\uc544\uc9c8 \ub54c\uae4c\uc9c0 \uc544\uc9c1 \uaf3c\uc218\uac00 \ud544\uc694\ud558\ub2e4. ??<a href=\"http:\/\/peter.sh\/experiments\/asynchronous-and-deferred-javascript-execution\/\">\uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 async\uc640 defer \uc18d\uc131 \uc9c0\uc6d0 \uc5ec\ubd80 \uc54c\uc544\ubcf4\uae30.<\/a><\/p>\n<p>\ub367\ubd99\uc784(2011-2-3):?<a href=\"http:\/\/html5.org\/tools\/web-apps-tracker?from=5816&amp;to=5817\">HTML5 spec\uc5d0 async=false \uc18d\uc131\uc744 \uc4f0\uba74 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \uc0bd\uc785\ub41c \uc21c\uc11c\ub300\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \ud558\ub294 \uae30\ub2a5\uc774 \ucd94\uac00\ub428.<\/a>?async \uc18d\uc131\uc758 \uae30\ubcf8\uac12\uc740 true.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WebKit nightly builds\uac00 HTML5 \ud45c\uc900\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\ub294 script \uc694\uc18c\uc758 async\uc640 defer \uc18d\uc131\uc744 \uc9c0\uc6d0\ud558\uae30 \uc2dc\uc791\ud588\ub2e4\ub294 \uc18c\uc2dd. \uae30\ubcf8\uc801\uc73c\ub85c \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 \uc678\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubd88\ub7ec\uc624\ub294 \uc77c\ubc18 script \ud0dc\uadf8\ub97c \ub9cc\ub098\uac8c \ub418\uba74, \uc6b0\uc120 \ud574\ub2f9 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ub0b4\ub824\ubc1b\uc544&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/781"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=781"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/781\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}