本文翻译youtube上的up主kudvenkat的javascript tutorial播放单

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

本次视频我们讨论,我们应该在html文档中何处放我们的script标签.是应该放在body里还是head里呢?一言概之,script标签既可以放在head里,也可以放在body里

我们来看几个例子

例子1:script标签放在head里

[html]

[head]

    [script type="text/javascript"]

        alert("Welcome to JavaScript Tutorial");

    [/script]

[/head]

[body]

    [form id="form1" runat="server"]

    [/form]

[/body]

[/html]

例子2:Script标签放在body里

[html]

[head]

[/head]

[body]

    [form id="form1" runat="server"]

    [/form]

    [script type="text/javascript"]

        alert("Welcome to JavaScript Tutorial");

    [/script]

[/body]

[/html]

在例子1中我们把script标签放在了head里,在例子2中我们把script标签放在了body里,两种情况下script都可以按预期运行

例子3:把TextBox的背景颜色设为red

[html]

[head]

[/head]

[body]

    [form id="form1" runat="server"]

        [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]

    [/form]

    [script type="text/javascript"]

        document.getElementById("TextBox1").style.backgroundColor = "red";

    [/script]

[/body]

[/html]

例子4:与例子3相同,唯一的不同之处是我们把script标签移到head的部分.这种情况下script将不会正常工作.根据我们所使用的浏览器的不同,会出现以下的Javascript错误信息

Firefox - TypeError: document.getElementById(...)is null

Chrome - Uncaught TypeError: Cannot read property 'style' of null

IE - Unable to get property 'style' of undefined or null reference

按下F12调出开发者工具来监视上面的这些Javascript错误信息.对于上面的三种浏览器,F12都是可以用的

[html]

[head]

    [script type="text/javascript"]

        document.getElementById("TextBox1").style.backgroundColor = "red";

    [/script]

[/head]

[body]

    [form id="form1" runat="server"]

        [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]

    [/form]

[/body]

[/html]

那么为何Javascript在这种情况下会出错呢

Javascript代码在textbox控制之前就出现了.当Javascript代码被执行后,textbox仍未被加载进浏览器的DOM(Dociment Object Model)里.这就是为何Javascript无法找到textbox并且throws一个NULL参考项错误的原因

在第六部分的视频中,我们讨论过,总的来说,将Javascript存放在外部的.js文件中是一种好的编程习惯.所以,如果Javascript在外部文件中,而且你想用<script>元素将其作为参考项放进页面中的话,这个<script>元素应该放到哪里呢?

为了回答这个问题,首先我们要了解当浏览器加载一个网页的时候其背后到底发生了什么.

1.浏览器开始parsing HTML

2.当parser碰到<script>标签后,而且该标签指向一个外部的Javascript文件的时候.parser停止parsing HTML,然后浏览器发出一个下载该script文件的请求.直到下载结束为止,parser都不允许继续parsing余下的页面上的HTML

3.当下载结束后,parser继续回复原来的工作,parse剩下的HTML

这就意味着直到所有的script都被加载之前页面的加载是被暂时停止的,很明显这会影响到用户体验

综上所述,最好将<script>标签放在<body>的闭标签之前.因为这样就不会阻止HTML parser的正常工作.但是,当今的浏览器支持async以及defer scripts的属性.这些属性会告诉浏览器,你可以继续parsing页面,就算script正在被下载中.但是就算是有这些属性,从性能表现上来说,依然将<script>标签放到<body>闭标签之前依然是不错的选择

根据HTTP/1.1规则,特定的浏览器不能并行下载两个以上的部件.所以,如果页面上有多个图片等待下载,而你将<script>标签放到了页面顶端,那么<script>文件会优先下载,并且阻止其他页面图片的下载,从而导致页面加载时间大大增加

[译]我们应该在HTML文档中何处放script标签的更多相关文章

  1. 如何动态在文档中加入＜script＞＜/script＞写入大段js

    <script language="javascript"> var script = document.createElement("script" ...

  2. 如何动态在文档中加入＜script＞＜/script＞写入大段js？

    <script language="javascript">var script = document.createElement("script" ...

  3. XML文档中的xmlns、xmlns:xsi和xsi:schemaLocation

    文章转载自:https://yq.aliyun.com/articles/40353 相信很多人和我一样,在编写Spring或者Maven或者其他需要用到XML文档的程序时,通常都是将这些XML文档头 ...

  4. Linux 在文档中查找满足条件的行并输出到文件：

    Linux 在文档中查找满足条件的行并输出到文件: 文件名称: dlog.log    输出文件: out.log 1.满足一个条件(包含  “TJ”  )的语句: grep  “TJ”  dlog. ...

  5. C# 在Word文档中生成条形码

    C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...

  6. C# 提取Word文档中的图片

    C# 提取Word文档中的图片 图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现使 ...

  7. 如何使用免费PDF控件从PDF文档中提取文本和图片

             如何使用免费PDF控件从PDF文档中提取文本和图片 概要 现在手头的项目有一个需求是从PDF文档中提取文本和图片,我以前也使用过像iTextSharp, PDFBox 这些免费的PD ...

  8. java使用正则从爬虫爬的txt文档中提取QQ邮箱

    我的需求是从一堆文档中提取出qq邮箱,写了这篇帖子,希望能帮助和我有一样需求的人,谢谢!...... import java.io.BufferedReader; import java.io.Fil ...

  9. [No00005B] word快速插入当前时间&怎样一次性删除文档中的全部链接

    按Alt+Shift+D键来插入系统日期 按Alt+Shift+T键则插入系统当前时间 同时,在插入的时间上右键->编辑域 一次性删除文档中的全部链接: 方法1:一劳永逸法(推荐) 因为链接大多 ...

随机推荐

  1. hawq创建filespace,tablespace,database,table

    使用HAWQ   在HAWQ的使用上跟Greenplum基本就一样一样的了.比如:   1. 创建表空间 #选创建filespace,生成配置文件 [gpadmin@master ~]$ hawq f ...

  2. ProjectEuler654

    我,ycl:BM是什么早就忘了! 毕老爷:那你们可以做一做这道题练练BM板子啊. 传送门 //Achen #include<bits/stdc++.h> #define For(i,a,b ...

  3. swing之UI选择文件

    package gui1; import java.awt.Container; import java.awt.FlowLayout; import java.awt.event.ActionEve ...

  4. 在winform下实现左右布局多窗口界面的方法（一）

    在web页面上我们可以通过frameset,iframe嵌套框架很容易实现各种导航+内容的布局界面,而在winform.WPF中实现其实也很容易,通过本文给大家介绍在winform下实现左右布局多窗口 ...

  5. CF 19E Fairy——树上差分

    题目:http://codeforces.com/contest/19/problem/E 去掉一条边,使无向图变成二分图. 该边应该被所有奇环经过,且不被偶环经过. 因为一条非树边一定只在一个环里. ...

  6. 异常：java.lang.IllegalStateException: No instances found of configserver（里面是一个微服务名）

    今天本地测试代码时出现了个异常,该异常出现的原因是:微服务启动的顺序出现了问题: 应该先启动本地eureka,然后在启动本地配置中心,然后在启动具体的微服务.

  7. C# 常用文件操作

    public class IoHelper { /// <summary> /// 判断文件是否存在 /// </summary> /// <param name=&qu ...

  8. VS编译linux项目生成静态库并在另一个项目中静态链接的方法

    VS2017也推出很久了,在单位的时候写linux的服务端程序只能用vim,这让用惯了IDE的我很难受. 加上想自己撸一套linux上的轮子,决定用VS开工远程编写调试linux程序. 在window ...

  9. mycat 新增分片和字符集

    执行 select * from travelrecord ,分析Debug日志,说明整个执行逻辑,包括连接获取,连接同步信息,数据合并,数据返回,连接释放 新增一个分片表 T_VOTE (ID,PR ...

  10. 类型：NodeJs；问题：默认IE的编码为utf8；结果：IE不能自动选择UTF-8编码解决办法

    在Windows操作系统上使用IE作为浏览器时.常常会发生这样的问题:在浏览使用UTF-8编码的网页时,浏览器无法自动侦测(即没有设定“自动选 择”编码格式时)该页面所用的编码.即使网页已经声明过编码 ...