本文翻译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. 【java规则引擎】之Drools引擎中模拟ReteooStatefulSession内部设计结构

    该片文章只是抽取drools中java代码实现的一些代码结构,帮助我们理解drools是如何实现rete算法的. 该部分只是抽取ReteooStatefulSession工作过程中的代码架构 利用了多 ...

  2. Python函数-delattr()

    delattr(object, name) 作用: 删除object对象名为name的属性. 参数object:对象. 参数name:属性名称字符串. >>> class Perso ...

  3. Linux动态gif图的录制

    Linux动态gif图的录制 Linux动态gif图的录制 byzanz的安装与使用 recordmydesktop再convert成gif 参考资料 前几天写了两篇博客vim的配置和Vim的自动代码 ...

  4. BZOJ4198：[NOI2015]荷马史诗

    浅谈\(Huffman\)树:https://www.cnblogs.com/AKMer/p/10300870.html 题目传送门:https://lydsy.com/JudgeOnline/pro ...

  5. 蘑菇街 IM 项目 TeamTalk

    源码 https://github.com/mogujie/TeamTalk 试用 http://tt.mogu.io/

  6. 蓝桥杯 算法训练 ALGO-156 表达式计算

    算法训练 表达式计算   时间限制:1.0s   内存限制:256.0MB 问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输 ...

  7. C++11 auto和decltype推导规则

    VS2015下测试: decltype: class Foo {}; int &func_int_r(void) { int i = 0; return i; }; int && ...

  8. Git学习笔记（一）Git初识及基本操作

    详细完整教程:官方文档,廖神Git教程,武sir 一.什么是Git? 定义:Git是分布式版本控制系统. 1.1什么是版本控制 我们可以回想以下,在我们上学毕业要写论文或是准备一份演讲稿的时候,都会用 ...

  9. typescript相关知识点总结

    本文讲解typescript语法 由于js语法本身的混乱,再加上目前框架的割据,导致typescript用起来没有一致性,本文尽量总结实际开发中可能会用到的知识点 目录 数据类型 类型断言 duck ...

  10. PowerDesigner中批量替换name和code的脚本

    无论是cdm还是pdm都可以批量替换.处理.可在Tool-Execute commands-Edit/Run script中编辑运行脚本: 下面的脚本是批量将CDM中实体的用Code替换掉Name O ...