发表新帖
发表新帖

Where to place JavaScript in an HTML file?

前端 未结
关注
12 2228
萌比男神i
萌比男神i 2020-11-22 04:30

Say I have a fairly hefty JavaScript file, packed down to roughly 100kb or so. By file I mean it’s an external file that would be linked in via

相关标签:
12条回答
  • 一个人的身影
    2020-11-22 04:53

    I would say that it depends of fact what do you planed to achieve with Javascript code:

    • if you planned to insert external your JS script(s), then the best place is in head of the page
    • if you planed to use pages on smartphones, then bottom of page, just before tag.
    • but, if you planned to make combination HTML and JS (dynamically created and populated HTML table, for example) then you must put it where you need it there.
    0 讨论(0)
  • 抹茶落季
    2020-11-22 04:58

    With 100k of Javascript, you should never put it inside the file. Use an external script Javascript file. There's no chance in hell you'll only ever use this amount of code in only one HTML page. Likely you're asking where you should load the Javascript file, for this you've received satisfactory answers already.

    But I'd like to point out that commonly, modern browsers accept gzipped Javascript files! Just gzip the x.js file to x.js.gz, and point to that in the src attribute. It doesn't work on the local filesystem, you need a webserver for it to work. But the savings in transferred bytes can be enormous.

    I've successfully tested it in Firefox 3, MSIE 7, Opera 9, and Google Chrome. It apparently doesn't work this way in Safari 3.

    For more info, see this blog post, and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript, or not. If your server side can dynamically choose to send the gzipped or the plain text, you can make the page usable in all web browsers.

    0 讨论(0)
  • 粉色の甜心
    2020-11-22 04:59

    As a rule of thumb, the best place to put <script> tags is the bottom of the page, just before </body> tag. Something like this:

    <html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

    Why?

    The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. More...

    CSS

    A little bit off-topic, but... Put stylesheets at the top.

    While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. More...

    Further reading

    Yahoo have released a really cool guide that lists best practices to speed up a website. Definitely worth reading: https://developer.yahoo.com/performance/rules.html

    0 讨论(0)
  • 误落风尘
    2020-11-22 05:02

    Using cuzillion you can test the affect on page load of different placement of script tags using different methods: inline, external, "HTML tags", "document.write", "JS DOM element", "iframe", and "XHR eval". See the help for an explanation of the differences. It can also test stylesheets, images and iframes.

    0 讨论(0)
  • Happy的楠姐
    2020-11-22 05:04

    The scripts should be included at the end of the body tag because this way the HTML will be parsed by the browser and displayed before the scripts are loaded.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-22 05:07

    The Yahoo! Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components.

    Of course Levi's comment "just before you need it and no sooner" is really the correct answer, i.e. "it depends".

    0 讨论(0)
 看不清?
提交回复
热议问题