精华内容
下载资源
问答
  • script标签位置

    2016-02-03 12:20:00
    2、为什么很多人把script标签放在底部:  初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下:  虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,...

    1、在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的。

    2、为什么很多人把script标签放在底部:

      初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下:

      虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM文档是从上往下的顺序执行的。 

    3、script标签在body标签内还是外:

      许多人认为只要放在底部了,无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的,其实还是有差别的,因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签, 都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

      所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是还是应该按照标准来,放在“body标签闭合之前”。

    下面我们举个例子:

    <!DOCTYPE HTML>
    <html>
    <head>
        <title> </title>
    </head>
    <body>
    
    
    <script type="text/javascript"></script>    
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/shazhou-blog/p/5179419.html

    展开全文
  • script标签位置详解

    2019-06-09 17:22:53
    2、为什么很多人把script标签放在底部: 初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下:  虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,...

    1、在我们编写代码的时候,会在页面内使用<script>标签来写JS,虽然理论上script标签的位置放在哪里可以,但是还是有一点区别的。

    2、为什么很多人把script标签放在底部:

    初学者在学习JS的时候看见很多DEMO里面的script标签写在底部,但是却不是很清楚为什么,下面来解释一下:

      虽然理论上放在哪里都是可以的,但是对于前端页面优化来讲,还是放在底部是最佳的,因为如果JS执行出现错误了,最起码页面中的元素还能加载出来,因为DOM文档是从上往下的顺序执行的。 

    3、script标签在body标签内还是外:

      许多人认为只要放在底部了,无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的,其实还是有差别的,因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签, 都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

    4.

    关于性能:
    我觉得因为这样才出现了模块化,CommonJS同步加载(nodejs),AMD依赖关系前置,CMD按需加载,这些都是管理js代码的方法,减少影响的有效途径.

    关于</body>前的<script></script>
    window.onload事件明确规定了事件在页面上所有的DOM、样式表、脚本、图片和flash都已经加载完成了之后.

     

      所以,只要是让浏览器做了多余的事都是不好的,虽然差别细微,但是还是应该按照标准来,放在“body标签闭合之前”。

    <!DOCTYPE HTML>

    <html>

    <head>

    <title>script标签的位置详解</title>

    </head>

    <body>

     

    <script type="text/javascript"></script>

    </body>

    </html>

     

    展开全文
  • Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别?浏览器会如何解析它们? html标签只包含head 和body两个标签,解析时,所有标签都会解析进这两个标签里边。body之前的任何位置都会解析进...

    把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

    html标签只包含head 和body两个标签,解析时,所有标签都会解析进这两个标签里边。body之前的任何位置都会解析进head里边,之后的都会解析进body里边。

    展开全文
  • 脚本位置 浏览器在解析到&lt;body&gt;标签之前,不会渲染页面的任何部分。把脚本放到页面顶部会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法和页面进行交互。 尽管IE8,FX3.5,...

    脚本位置

    浏览器在解析到<body>标签之前,不会渲染页面的任何部分。把脚本放到页面顶部会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法和页面进行交互。

    尽管IE8,FX3.5,Safari4和Chrome2+都允许并行下载JavaScript文件。这样<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是,JavaScript下载过程中任然会阻塞其他资源的下载,比如图片。

    由于脚本会阻塞其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。

     

    组织脚本

    由于每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含<script>标签数量有助于改善这一情况。这不仅仅针对外链脚本,内嵌脚本的数量也要同样的限制。浏览器在解析HTML页面的过程中每遇到一个<script>标签,都会因执行脚本而导致一定的延迟,因此最小化延迟时间将会明显地改善页面的性能。

    因此下载单个100kb的文件比下载4个25kb的文件更快。

     

    无阻塞下载JavaScript的方法

    延迟的脚本

    HTML4为<script>标签定义了一个拓展属性:defer。Defer属性指明本元素所含的脚本不会修改DOM,因此代码能够安全地延迟执行。对应的JavaScript文件将在页面解析到这个<script>标签时开始下载,但不执行,直到DOM下载完成(onload事件被触发前)因而它不会阻塞其他进程,此类文件可以与页面其他资源并行下载。

    经过我的测试发现只有在外链脚本时defer才起到作用,内嵌脚本没有起到作用,我用的浏览器为Chrome。

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script src="../../../Scripts/javascript/PO/defer.js" defer></script>
        <script src="../../../Scripts/javascript/PO/defer2.js"></script>
        <script>
            window.onload = function (event) {
                alert("onload ");
            }
        </script>
    </body>
    </html>

    defer.js:

    alert("defer")

    defer2.js:

    alert("before onload");

    动态创建脚本

    动态创建script脚本后,文件会在被添加到页面时立即下载。它的重点在于:文件的下载和执行过程不会阻塞页面其他进程,在下载文件时里面的代码会立即执行。

    这种情况下,当下载的代码包含其他脚本要调用的接口或者方法时,就会有问题,所以我们需要跟踪并确保脚本下载完毕且准备就绪。FX,Opera,Chrome和Safari 3+的版本会在script元素接收完成时触发load事件,因此,你可以通过监听此事件来判断是否下载完毕。

    具体代码如下:

    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.onload = function () {
            callback();
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    以上内容来自《高性能JavaScript》

    展开全文
  • 推荐的是js的script标签放在body的末尾,</body>标签之前,包含在body内! <body>  <!--其它Html标签-->  <script>js 代码/js 引用</script> </body> 这样写的好处: 1...
  • html标签只包含head 和body两个标签,解析时,所有标签都会解析进这两个标签里边。body之前的任何位置都会解析进head里边,之后的都会解析进body里边。 ...
  •  一般script标签会被放在头部或尾部。头部就是<head></head>里面,尾部一般指<body></body>里,但也有放在</body>闭合标签之后的。 究竟这些位置不同有什么不一样呢?下面我来详细说...
  • 一般script标签会被放在头部或尾部。头部就是里面,尾部一般指里,但也有放在闭合标签之后的。 究竟这些位置不同有什么不一样呢?下面我来详细说一下: 1.标签放置在标签内部时:  将script放在里,浏览器解析...
  • 熟悉的< script >标签

    2019-01-23 06:03:59
    作为前端开发的小伙伴,一...它的位置应该放在哪?为啥这样放?它有几个属性?每个属性是干什么的?当然有些小伙伴已经知道个大概了,那么咱们就带着这几个问题,来真正的了解一下熟悉的< script>标签 1 <...
  • 理论上来说js标签放在html文档的任何位置都可以,规范起见,推荐放到body结束标签的末尾,包含到body标签内: 这里是你页面的内容 <!-- js内容放在上面,页面内容下面 --> <script src="js/jquery-1.12.1.min....
  • 总结:js代码写在head标签中,并且放在title标签后面,写在script标签中,但是最好不要直接写在script标签中,而是写在window.onload事件的function里边的函数体中最合适,参照如下写法是比较规范的写法: ...
  • 理论上来说js标签放在html文档的任何位置都可以,规范起见,推荐放到body结束标签的末尾,包含到body标签内: <body> <!-- 这里是其他的HTML标签 --> <script> // 这里是代码 </script>...
  • Script标签最好放在标签的前面,因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况,可以持续的给用户提供视觉反馈,同时在有些情况下,会降低错误的发生;而css标签应该放在标签之间,因为如果放在...
  • 2. “script标签“指的都是普通的不带其他属性的外联javascript。  3. web性能优化的手段并不是非黑即白的,有些手段过头了反而降低性能,所以在讨论条件和结论的时候,虽然很多条件本身会带来其他细微的负面
  • javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。 比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给...
  • src 和 href 有什么区别

    2021-02-07 09:25:22
    src:source的缩写,指向外部资源的 位置 ,指向的内容会嵌入到当前文档的标签所在的位置。在请求src资源时,会将其指向的资源下载并应用到文档中。比如js文件,img图片 <script src=" .js"></script> ...
  • javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body...
  • [Css] 杂七杂八

    2021-02-10 20:20:04
    什么不建议 script 标签放在 head 那里,如果我一定要放呢? 如果在文档的 head 元素中放 JavaScript 文件,意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成之后,才能开始呈现页面内容(浏览器在...
  • React为什么要引入 JSX 这种语法

    千次阅读 2019-02-14 16:50:27
    传统的 MVC 是将模板放在其他地方,比如 &lt;script&gt; 标签或者模板文件,再在 JS 中通过某种手段引用模板。按照这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放...
  • 既然整个文档都加载完成了,为什么提示没有到找呢? 后来我将jquery.js和custom.js放在</body>之前。靠,生效了,没有弹出错误了。而且文本框获得焦点也能改变颜色。 我的...
  • JavaScript1-概念

    2020-07-26 09:37:18
    可以在一个网页中的任何位置通过script标签来嵌套js代码,放在哪个位置取决于你的需求 在当前网页中使用,只在当前网页生效 2.3外部文件引入 在外部js文件中之间编写代码,在网页中通过script的src属性来引入 !...
  • 关于浏览器渲染机制的总结 ...2、为什么script标签引入的js代码放在body下方? 浏览器在解析HTML代码时,遇到script标签,会暂停DOM树的构建。为了提高用户体验,浏览器在加载页面时,会先将已...
  • JavaScript基础(一)

    2017-11-18 14:23:28
    标签浏览器会执行这个标签里面的脚本<script> </script> 位置这一段脚本习惯性放在head里或者body内部的下面 但是更多的还是单独放在一个文件里,然后将文件导入<script src="myScript.js"></script
  • 1、将所有script标签放在尽可能接近body标签底部的位置,尽可能减少对整个页面下载的影响。 2、尽量少用全局变量。因为变量在作用域链中的位置越深,访问的时间就越长。局部变量位于作用域链中的第一个对象中,全局...
  • JavaScript的认识

    2019-03-26 17:15:55
    JavaScript的认识JavaScript的认识什么是JavaScriptJavaScript的编写位置注释常用的输出语句 ...JS代码需要编写到script标签中。 JS中scrip可以放在HTML中的任何地方(哪里用就放哪里)。 src:当需要引...
  • 嵌入式:在script标签里写js,通常该标签可以放在王爷的任意位置,但通常放在head里比较多 文件调用式:再单独的js文件中写js 需要引用到网页上才能使用 1)该标签必须写成双标签,哪怕没有内容 2)该标签不能即...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

script标签放在什么位置