美文网首页
JS <script>标签的位置

JS <script>标签的位置

作者: 兔子不打地鼠打代码 | 来源:发表于2018-03-26 21:21 被阅读15次

按照惯例,所有<script>元素都应该放在页面的<head>元素中,例如:

<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" src="example1. js"></script>
        <script type="text/javascript" src="exarnple2. js"></script>
    </head>
    <body>
        <!-- 这里放置内容 -->
    </body>
</html>

这种做法的目的就是把所有外部文件(包指CSS 文件和JavaScript 文件)的引用都放在相同的地方。

可是,在文挡的<head>元素中包含所有JavaScript 文件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容) 。

对于那些需要很多JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。

为了避免这个问题,现代Web应用程序一般都把全部JavaScript引用放在<body>元索中,放在页面的内容后面。如下例所示:

<html>
    <head>
        <title>Example HTML Page</title>
    </head>
    <body>
        <!-- 这里放置内容 -->
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
    </body>
</ htrnl>

这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

相关文章

  • test

    <script>alert(1);</script>

  • 无标题文章

    <script>alert('hello’);</script>

  • JS <script>标签的位置

    按照惯例,所有 元素都应该放在页面的 元素中,例如: 这种做法的目的就是把所有外部文件(包指CSS 文件和Java...

  • 论<script>的位置

    放置在之间 放入 部分js代码将在页面加载完之前被载入 ...

  • arguements应用

    HTML 标签, 在页面上显示代码< 做尖括号 , > 右尖括号 JS arguements是传递给函...

  • <script>在HTML文档中位置

    从大红书中学习到的