JS 腳本應該放在頁面哪一個位置 head body foot

時間 2019-12-08

標籤腳本應該放在頁面哪一個位置 head body foot 欄目 JavaScript 简体版

原文原文鏈接

咱們平時在頁面上寫JS 是放在頭部<head>中呢仍是放到body 最下面能更優化？javascript

查了一番資料，推薦放在頁面底部如：css

<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？html

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...java

CSS

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

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...ajax

參考：api

http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-fileapp

https://developer.yahoo.com/performance/rules.html#js_bottom=優化