本文翻译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-CentOS7 安装VMware Workstation 12

    转自:http://blog.csdn.net/aoshilang2249/article/details/48656107 1.下载VMware 衔接地址 http://www.vmware.com ...

  2. python发短信功能

    http://www.cnblogs.com/martianShu/p/5847289.html

  3. FS系统开发设计（思维导图）

      FS系统开发设计(思维导图) 最近做了一个小系统,公司应急,要对各个部门进行费用成本核算分摊,做运维,苦于无奈,简简单单的设计了一下,模仿用友ERP软件,首先对DB进行了初步设计,总体如下: 未完 ...

  4. bootstrap 多色表格

    有时候需要用到多色显示不同类型的表格 用bootstrap的样式即可 <tr class="active"> <tr class="success&qu ...

  5. Angular5学习笔记 - 创建组件（四）

    一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...

  6. (转)NHibernate之Generator主键生成方式

    本文转载自:http://www.cnblogs.com/lemon-love/archive/2010/03/10/1683058.html (1) assigned主键由外部程序负责生成,无需NH ...

  7. 【转】LTE基本架构

    这篇文章主要介绍LTE的最基础的架构,包括LTE网络的构成,每一个网络实体的作用以及LTE网络协议栈,最后还包括对一个LTE数据流的模型的说明. LTE网络参考模型 这是一张非常有名的LTE架构图,从 ...

  8. java代码。继承。。。很戳我的心啊。。不太懂。super的真正用法

    总结: package com.addd; //构造方法不能被继承,只能是调用 //属性不能被继承,方法可以 //关于继承练习啊 class fjdsk { String name; int age; ...

  9. 第三章 Java内存模型（下）

    锁的内存语义 中所周知,锁可以让临界区互斥执行.这里将介绍锁的另一个同样重要但常常被忽视的功能:锁的内存语义 锁的释放-获取建立的happens-before关系 锁是Java并发编程中最重要的同步机 ...

  10. EmguCV3.0几个控件的使用

    值方图(Histogram)是一种统计图数据,在影像处理中最常被用来统计一张图像或是感兴趣(ROI)区域的色彩分布,在这边本人使用的EmguCV 2.4.0版的内建值方图工具只有被包含在WinForm ...