(Conversion) Where should the script tag be placed?
Generally, the script tag is placed in the header or tail. The header is inside the
- <Script type = "text/javascript" src = "path/to/script1.js" async> </script>
- <Script type = "text/javascript" src = "path/to/script2.js" async> </script>
Scripts with The async attribute are executed asynchronously. Once the download is complete, script2.js may be executed before script1.js (if script2.js is large, the download is slow ). Defer ensures that scripts are executed in an orderly manner. script1.js is executed first, and script2.js is executed later.Conclusion1. [2] It is considered that if you do not consider supporting IE of <IE9, it is best to place the script tag in the head and use the async/defer attribute. In this way, the browser can download JS while parsing other HTML.2. google's own code scripts are also messy, some are placed behind </body> [6], some are placed in <body> [7], another one is in3. This article only discusses the script position. As for link and style, it is more common to put it in the head. Link also needs to download CSS. Why does link Block HTML parsing when downloading CSS? In fact, in general, JS and CSS, put in the head and put in the body is not much different. CSS links can also be placed in the body, but the page may not have a style [9-10] temporarily.Reference[1] https://developer.yahoo.com/performance/rules.html#js_bottom=[2] http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup[3] http://caniuse.com/#search=defer[4] https://github.com/IgorMinar/foodme/blob/master/app/index.html[5] https://github.com/GoogleChrome/wReader-app/blob/master/index.html[6] https://github.com/GoogleChrome/multi-device/blob/master/_preview.html[7] https://github.com/GoogleChrome/samples/blob/b2668086c25470e107e59f4ffa92dc0c21c63de3/beacon/index.html[8] https://github.com/GoogleChrome/web-audio-samples/blob/gh-pages/samples/audio/adaptive-release.html[9] http://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag[10] http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
