`

HTML元素加载顺序与JavaScript放置的位置

阅读更多
在HTML中,元素的加载顺序是:先加载位置在前面的,后加载位置在后面的。

例如:
如果<head>在前,先加载<head>中的内容。
如果<body>在前,就先加载<body>中的内容。

看下面的例子:
<html>
  <body>
    <script type="text/javascript">
      alert("in body");
    </script>
  </body>
  <head>
    <script type="text/javascript">
      alert("in head");
    </script>
  </head>
</html>

如果把上面的代码拷贝到一个名为a.html的内容为空的文件中,
并用浏览器打开,首先出现的是:in body



把含有founction的JavaScript 放在<head>中(因为一般是<head>标签在<body>之前),是让代码提前加载,方便在后面的<body>中调用。






引自:
http://www.cnblogs.com/ddyq/archive/2012/03/06/2382816.html








-
分享到:
评论

相关推荐

    html中js代码的加载顺序

    在HTML文档中,JavaScript代码的加载顺序是网页解析过程中至关重要的一部分。这关乎到脚本何时执行、页面元素的渲染以及整个用户体验。理解这一过程对于优化网页性能和编写高效的JavaScript至关重要。 首先,我们要...

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    - DOM(Document Object Model):JavaScript通过DOM来操作HTML元素。DOM是HTML和XML文档的结构化表示,允许程序和脚本动态更新、添加或删除页面元素。 - `document`对象:JavaScript中的全局`document`对象提供了...

    Javascript在页面加载时的执行顺序.pdf

    在Firefox和Opera中,由于它们按照加载顺序执行,所以先弹出`test.js`中的值,然后是内联脚本中的值。而在IE中,由于`document.write()`的特性,可能会导致`tmpStr`未定义的错误。 为了解决IE中的问题,我们可以...

    高性能的javascript之加载顺序与执行原理篇

    高性能的JavaScript涉及到多个方面的考虑,包括脚本文件的加载顺序、执行原理、以及如何减少对页面渲染的影响。以下是对给定文件中提到的知识点的详细说明。 首先,关于JavaScript脚本在HTML文档中的放置位置,存在...

    javascript代码应当放在html代码哪个位置比较好_.docx

    这样做的目的是确保所有HTML元素都已被完全加载后再执行JavaScript代码,从而避免因为DOM元素未加载完毕而导致的错误。此外,这种方法还有助于提高页面的初始加载速度,因为浏览器可以优先加载可视内容,然后加载和...

    2010html执行顺序.pdf

    在HTML文档中,JavaScript的执行顺序与HTML元素的加载顺序密切相关。HTML文档的加载是从上到下的,这意味着浏览器会按照文档的结构逐行解析并执行遇到的元素。对于JavaScript,有几种不同的引入方式,每种方式的执行...

    javascript写在head标签中产生的报错.pdf

    JavaScript是一种广泛用于网页和网络应用的编程语言,它通常被用来添加交互性和动态功能到HTML文档中。...在编写Web应用时,理解JavaScript与HTML的加载顺序是至关重要的,这有助于创建更高效、无错的网页。

    javaScript教程

    当脚本放置在`&lt;head&gt;`部分时,它们通常在HTML文档加载完成后但所有元素加载之前执行。而在`&lt;body&gt;`部分,脚本会按照它们在页面中的顺序依次执行,这意味着位于底部的脚本可能会在用户看到页面内容之后才运行,可能...

    2010html执行顺序.docx

    如果在`&lt;input&gt;`元素之上放置一个`&lt;script&gt;`标签来获取`id="a"`的元素,由于此时元素还未加载,因此会返回`null`。 了解这些基本概念对于调试和优化网页性能至关重要,因为它们决定了页面元素何时显示、何时响应...

    JavaScript入门-教案1.pdf

    将JavaScript放在有助于页面加载时执行初始化任务,而中的代码会在对应的HTML元素被解析到时执行。尽管JavaScript可以放在任何位置,但遵循正确的执行顺序至关重要,因为浏览器会按照HTML源代码的顺序逐行解析和执行...

    交换两个div的位置

    3. **动态调整**:在动态加载内容的应用中,如新闻列表、商品展示等场景下,可以通过 JavaScript 动态调整元素顺序。 通过以上详细解释和代码示例,我们可以清晰地理解如何使用 JavaScript 实现两个 `div` 元素的...

    浅谈Javascript 执行顺序

    通过使用jQuery提供的`$(document).ready()`函数,可以确保在DOM元素加载完毕后执行脚本,无论这段脚本位于页面的哪个位置。这提供了一种更为灵活且简便的方式来处理依赖于DOM元素的Javascript代码。 ```javascript...

    解决easyui不加载js问题.docx

    然而,在实际使用过程中,可能会遇到JavaScript文件加载失败或者不执行的问题,这通常是由于HTML结构不正确、脚本加载顺序不当或编码格式冲突等因素导致的。下面我们将详细探讨这些问题及其解决方案。 首先,HTML的...

    JavaScript 生成弹性透明的图片放大代码

    在`MyHtml.html`文件中,首先需要创建一个基本的HTML结构,包括一个放置原始图片的`&lt;img&gt;`元素和一个用于显示放大图片的容器,如`&lt;div&gt;`。容器可以设置为透明,以便在鼠标悬停时显示放大效果。 2. **CSS 样式**: ...

    韩顺平十天javascript全套笔记(整理版)

    - **代码执行流程**:JavaScript代码可以放置在HTML文档的任何位置,按照从上至下的顺序依次执行。 #### 嵌入JavaScript代码 - **代码嵌入方式**:可以使用`&lt;script&gt;`标签将JavaScript代码嵌入到HTML文档中。 ```...

    JavaScript程序开发之JS代码放置的位置

    将脚本放在body底部,可以在页面元素加载完成后再加载和执行JavaScript代码,这样能够确保当脚本运行时页面元素已经渲染完毕,从而避免了上述提到的问题。这种方式对于提升页面的加载速度和用户体验都有正面效果。 ...

    cookie.js 加载顺序问题怎么才有效

    在HTML文件中,通常将jQuery库放置在`&lt;head&gt;`标签内,或者在`&lt;body&gt;`标签的底部,以确保在页面其他元素加载之前或之后,jQuery已经准备好供其他脚本使用。这样做可以提高页面的加载速度,因为浏览器可以并行下载多个...

    javascript学习笔记

    - 放置于`&lt;body&gt;`底部的脚本,可以确保所有DOM元素加载完毕后再执行。 - **使用`window.onload`事件**:当页面所有资源(包括图片、脚本等)完全加载完成后触发,通常用于需要确保页面所有元素都已加载完毕后再...

    JavaScript基础语法

    它可以直接操作HTML元素,对用户事件作出响应,读写HTML元素的内容,验证输入数据,检测用户的浏览器类型和版本,以及处理cookies。 下面是一些JavaScript的基础使用示例: ```html &lt;html&gt; &lt;!-- 位于body部分的...

Global site tag (gtag.js) - Google Analytics