本文翻译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. 【数论】卡塔兰数 Catalan

    一.简介 设$h(0)=1$,$h(1)=1$,Catalan数满足递推式 $h(n) = h(0) \ast h(n-1) + h(1)\ast h(n-2) + \cdots + h(n-1)\a ...

  2. MyBatis嵌套查询column传多个参数描述

    代码如下,红色部分为关键代码. 注意parameterType要为java.util.HashMap <resultMap id="baseResultMap" type=& ...

  3. ipad与iphone的屏幕分辨率

    1.ipad分辨率,iphone 6 iPhone设备      尺寸 分辨率                   点iPhone 3和3s  3.5英寸    (320×480)         3 ...

  4. vijos1098:合唱队形

    描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2…,K,他们的身高分别为T1,T2,…, ...

  5. 关于java中getClass()和getSuperClass()的讲解

    为了讲解这个问题,我们先来看一下下面的代码: package com.yonyou.test; import java.util.Date; class Test extends Date{ priv ...

  6. CentOS 7.2 部署Rsync + Lsyncd服务实现文件实时同步/备份 （三）

    配置过程中遇到的错误与查看日志 以下错误是在服务正常开启的情况下发生的,请先查看服务是否正常启动. 一.错误 1. rsync: failed to set times on "." ...

  7. ORACLE——日期时间格式化参数详解 之二

    2.8 DD 指定日期在当月中第几天(范围:1-31) SQL> select to_char(sysdate,'DD YYYY-MM-DD PM hh24:mi:ss ') from dual ...

  8. 偏好设置(Preference)

    一.Preference简介 (1)偏好设置是专门用来保存应用程序的配置信息的, 一般情况不要在偏好设置中保存其他数据.如果利用系统的偏好设置来存储数据, 默认就是存储在Library/Prefere ...

  9. DAY8-python异常处理

    一.什么是异常 异常就是程序运行时发生错误的信号(在程序出现错误时,则会产生一个异常,若程序没有处理它,则会抛出该异常,程序的运行也随之终止),在python中,错误触发的异常如下 而错误分两种 #语 ...

  10. python爬虫实战（1）--爬取糗事百科

    这里利用正则表达式进行匹配,糗事百科是不需要登录的,所以也没必要用到Cookie,另外糗事百科有的段子是附图的,我们把图抓下来图片不便于显示,那么我们就尝试过滤掉有图的段子. 本篇目标 1.抓取糗事百 ...