本文翻译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. Linux终端录屏与播放 script 命令

    本文由Suzzz原创,发布于 http://www.cnblogs.com/Suzzz/p/4107700.html ,转载请保留此声明. 有时候可能想要记录在终端的所有操作包括输出等,将来作为视频播 ...

  2. POJ3468：A Simple Problem with Integers

    浅谈分块:https://www.cnblogs.com/AKMer/p/10369816.html 题目传送门:http://poj.org/problem?id=3468 分块裸题.对于每个块记录 ...

  3. 关于本地模块安装入maven仓库出现的异常

    Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.5.9.RELEASE:repackage (de ...

  4. bae3.0第三步 添加默认管理后台模块和mysql库

    1.创建数据库 先在本地的mysql数据库中创建数据库db_blog,执行python manage.py syncdb来创建表. 然后将数据库中的表导入到bae上的数据库中.2.配置数据库 修改项目 ...

  5. el表达式对js方法的传值

    我常用于在jsp页面遍历集合和分页中的页面跳转事件. jsp: <!-- 引入jstl --> <%@ taglib prefix="c" uri="h ...

  6. Oracle 静默安装 oracle 12c

    [oracle@local12cdg app]$ id oracleuid=501(oracle) gid=501(oinstall) groups=501(oinstall),502(dba)[or ...

  7. 跨数据文件删除flashback database

    Oracle flashback database的使用有一些限制,其中最主要的是flashback database不支持跨数据文件删除闪回和不支持跨数据文件shrink闪回.对于已经删除的数据文件 ...

  8. Solaris与Windows Active Directory集成

    通过Solaris与Active Directory的集成,Solaris可以使用Windows 2003 R2/ 2008 Active Directory来进行用户登录验证.以下是简要配置过程. ...

  9. jackson 进行json与java对象转换 之二

    主要用于测试学习用jackson包实现json.对象.Map之间的转换. 1.准备测试用的Java类 (1)Link类 package test; /** * Description: 联系方式,被u ...

  10. leetcode319

    public class Solution { public int BulbSwitch(int n) { var x = Math.Sqrt(n); var y = Convert.ToInt32 ...