`
tjuking
  • 浏览: 195143 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<script>标签位置的影响

阅读更多

通常情况下,我们会把<script>标签放置于<head>标签内,如下所示:

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

 这样做的好处就是把所有的外部链接(Javascript、CSS等)放在一起便于管理和维护。不过,如果引入较多的Javascript文件则会导致一些问题。

 

我们知道,head标签是前于body标签处理的,在head标签的所有文件加载完前是没法进行body内容的展示和渲染。如果js代码较多、文件较大或者数量较多很有可能导致用户需要较长的等待时间才能看到页面的结构和内容,这对于良好的用户体验设计而言是非常不好的。

 

此时可以将这样的script标签放置于body标签的底部,如下所示:

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<!-- 页面内容 -->
<script type=”text/javascript” src=”文件1.js”></script>
<script type=”text/javascript” src=”文件2.js”></script>
<script type=”text/javascript” src=”文件n.js”></script>
</body>
</html>

 当然我们应该认识到,对于Javascript文件的延迟加载,有可能导致在页面展示后Javascript未加载而无法交互或发生Javascript错误。

2
3
分享到:
评论
2 楼 宁极而待 2015-11-04  
题目写的这么大,没什么实质性内容
1 楼 tomastong 2014-03-01  
页面结构完成之后,才加载js文件,是不是就意味着先展示静态内容,后渲染呢

相关推荐

    js基础教程

    - **注意**:外部JavaScript文件中不应包含`&lt;script&gt;`标签。 #### 八、总结 - JavaScript是现代Web开发不可或缺的一部分,掌握其基础知识对于前端开发者至关重要。 - 了解JavaScript的不同插入方式及其执行时机有...

    word版Js网页设计课件.pdf

    总结来说,JavaScript在HTML页面中的使用涉及`&lt;script&gt;`标签的正确使用,理解代码执行的时机(取决于脚本位置),以及如何通过外部文件实现代码复用。这些基本概念构成了网页动态交互的基础,是进行网页开发时不可或...

    js优化1

    HTML4规范允许在&lt;head&gt;和&lt;body&gt;中任意位置放置&lt;script&gt;,但传统做法是将样式表&lt;link&gt;和脚本&lt;script&gt;放在&lt;head&gt;中,以便尽早定义页面外观和行为。然而,这样做会导致页面加载延迟,因为所有&lt;script&gt;都会阻塞页面渲染...

    myelicpse 出现Invalid location of tag的问题解决方法

    `&lt;script&gt;`标签位置不当 **问题描述**:`&lt;script&gt;`标签通常应放置在`&lt;body&gt;`标签内,或者也可以放在`&lt;head&gt;`标签内以加载脚本资源。 **解决方法**: - 将所有`&lt;script&gt;`标签移到`&lt;body&gt;`标签内,特别是那些需要在...

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

    在严格的XHTML中,`&lt;script&gt;`标签必须包含在CDATA部分内,否则XHTML解析器可能会将`&lt;script&gt;`标签误认为是XML标签的一部分,导致JavaScript代码无法正确执行。 **代码示例:** ```html &lt;!DOCTYPE ...

    高性能JavaScript编程(第一章)

    当浏览器遇到`&lt;script&gt;`标签时,必须先执行其中的脚本,因为它可能会影响DOM结构或页面内容。 ##### 三、脚本位置的影响 - **HTML4标准**:规定`&lt;script&gt;`标签可以放置在`&lt;head&gt;`或`&lt;body&gt;`中,并且没有数量限制。 ...

    html里js怎么使用知识分享.docx

    总结,JavaScript在HTML中的使用涉及到`&lt;script&gt;`标签的正确配置、脚本的插入位置、文档模式以及备用内容的处理。通过合理使用这些技术,可以创建出更加动态和交互性的网页。在实际开发中,还要注意优化脚本加载,以...

    WEB中javascript脚本语言

    - 在HTML文档中,通过`&lt;script&gt;`标签的`src`属性引用该文件: ```html &lt;html&gt; &lt;head&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 页面内容 --&gt; &lt;/body&gt; &lt;/html&gt; ``` #### 五、JavaScript...

    Web浏览器中的JavaScript

    **知识点6:标签位置的影响** - 将 `&lt;script&gt;` 标签放在 `&lt;head&gt;` 部分有助于确保在页面主体渲染之前完成脚本的加载,这对于依赖于 JavaScript 的动态元素尤为重要。 - 放在 `&lt;body&gt;` 标签中的 `&lt;script&gt;` 标签会...

    HTML标签分类及其属性.pdf

    “&lt;formid=form1&gt;&lt;/legend&gt;&lt;inputtype=checkbox&gt;HTML&lt;br&gt;&lt;inputtype=checkbox&gt;CSS&lt;br&gt;&lt;inputtype=checkbox&gt;DHTML&lt;br&gt;&lt;inputtype=checkbox&gt;SCRIPT&lt;br&gt;&lt;/form&gt;&lt;/fieldset&gt;”这段文字可能包含错误,正确的应该是关于...

    JavaScript引入方式

    - `&lt;script&gt;`标签可以出现在HTML文档的任意位置,但通常推荐将其放置于`&lt;head&gt;`部分或`&lt;body&gt;`部分的底部,以便优化网页加载速度。 - 在一个HTML文档中,可以插入多个`&lt;script&gt;`标签来定义不同的脚本代码段。 **...

    JavaScript基础学习

    在这个例子中,浏览器识别到`&lt;script&gt;`标签内的JavaScript代码,并执行`document.write`,从而在页面上显示文本。 对于不支持JavaScript的旧版浏览器,它们会将JavaScript代码作为普通文本处理。为了避免这种情况,...

    关于JS和html代码的执行先后问题

    在这个过程中,浏览器会遇到各种标签,如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;script&gt;`等。对于`&lt;script&gt;`标签,有两种情况: 1. 如果`&lt;script&gt;`标签位于`&lt;head&gt;`部分且没有`async`或`defer`属性,JavaScript代码会立即执行,...

    js入门教程例子

    此外,你还可以在外部文件中编写JavaScript代码,然后通过`&lt;script&gt;`标签的`src`属性引用这个文件,比如`&lt;script src="xxxx.js"&gt;&lt;/script&gt;`。这种方法有利于代码重用和组织,但记得外部文件不应包含`&lt;script&gt;`标签。...

    WEB开发 之 VBScript Where To ....docx

    当脚本位于`&lt;head&gt;`标签内,它们通常会在页面加载时同步执行,但不会直接在页面可见区域产生影响,除非脚本被明确地调用或者与某些事件关联。这种情况下,脚本的加载和解析通常是在用户看到页面内容之前完成的,确保...

    HTML5学习教程

    76. **`&lt;script&gt;`**:包含脚本。 77. **`&lt;section&gt;`**:定义文档中的独立部分。 78. **`&lt;select&gt;`**:选择框。 79. **`&lt;small&gt;`**:小字体。 80. **`&lt;source&gt;`**:定义多媒体文件的多个源。 81. **`&lt;span&gt;`**:通用...

    最新 uploadifive html5版.docx

    - `&lt;script&gt;` 标签用于嵌入或引入JavaScript代码,通过 `src` 属性指定外部脚本文件的路径。 ### 缩进与格式化 - 虽然HTML的缩进不影响浏览器的渲染结果,但良好的缩进习惯有助于提高代码的可读性,使代码结构更加...

    ASP.NET中不同部分的js代码的执行顺序

    例如,如果在`&lt;head&gt;`标签中包含多个`&lt;script&gt;`标签,那么这些脚本会依次加载并执行。这可以通过下面的例子来进一步解释: ```html &lt;head runat="server"&gt; &lt;title&gt;无标题页&lt;/title&gt; &lt;script type="text/...

    JavaScript执行顺序

    每个`&lt;script&gt;`标签内的代码都会在一个单独的作用域内执行,互不影响,除非通过全局变量进行交互。这意味着在同一个`&lt;script&gt;`标签内的代码会按照其在标签内的书写顺序执行,而在不同的`&lt;script&gt;`标签之间,执行顺序...

    网站前端设计资料

    在HTML文档中,JavaScript代码可以放置在`&lt;head&gt;`或`&lt;body&gt;`标签内,位置的不同会影响代码的执行时机。放在`&lt;body&gt;`中的JavaScript会在页面加载到相应位置时执行,而放在`&lt;head&gt;`中的脚本则会在文档加载完成后但渲染...

Global site tag (gtag.js) - Google Analytics