标签的位置

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，例如：

 <!DOCTYPE html>

 <html>

 <head>

 <title>Example HTML Page</title>

 <script type="text/javascript" src="example1.js"></script>

 <script type="text/javascript" src="example2.js"></script>

 </head>

 <body>

 <!-- 这里放内容 -->

 </body>

 </html>

这种做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。
可是，在文档的<head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、
解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于
那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟
期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引
用放在<body>元素中页面内容的后面，如下例所示：

 <!DOCTYPE html>

 <html>

 <head>

 <title>Example HTML Page</title>

 </head>

 <body>

 <!-- 这里放内容 -->

 <script type="text/javascript" src="example1.js"></script>

 <script type="text/javascript" src="example2.js"></script>

 </body>

 </html>

这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏
览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

《JavaScript高级程序设计》 读书笔记（一）的更多相关文章

  1. 《html5 从入门到精通》读书笔记（一）

    今天看了<html5 从入门到精通>这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心.html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准 ...

  2. HTML5从入门到精通(明日科技) 中文pdf扫描版

    HTML5从入门到精通(明日科技) 中文pdf扫描版

  3. HTML5从入门到精通（千锋教育）免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  4. Unity Shader入门精要读书笔记（一）序章

    本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...

  5. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...

  6. MySQL数据库应用 从入门到精通 学习笔记

    以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...

  7. Unity Shader入门精要读书笔记（二）UnityShader概述

    第三章<UnityShader概述>的读书笔记: 1.Unity Shader模板提供了几种选择: 标准光照模型(新添加的基于物理的渲染方法) 不含光照的基本的顶点.片元着色器 屏幕后处理 ...

  8. 《html5 从入门到精通》读书笔记（二）

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  9. 《html5 从入门到精通》读书笔记（三）

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  10. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

随机推荐

  1. JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底！

    先看一段有异常的语句 var sound = 'Roar!'; function myOrneryBeast() { this.style.color='green';//window没有style属 ...

  2. 【HDOJ】4418 Time travel

    1. 题目描述K沿着$0,1,2,\cdots,n-1,n-2,n-3,\cdots,1,$的循环节不断地访问$[0, n-1]$个时光结点.某时刻,时光机故障,这导致K必须持续访问时间结点.故障发生 ...

  3. Complete The Pattern #1

    Complete The Pattern #1 Task: You have to write a function pattern which creates the following patte ...

  4. ehcache 分布式集群同步数据实例

    本文使用rmi方式,借鉴百度能搜到的文章,但是均不能做到数据同步,做了些改动完全没问题,更详细说明介绍百度即可.直奔主题,可运行的demo实例! 创建一个maven项目,配置pom pom.xml & ...

  5. Java [leetcode 24]Swap Nodes in Pairs

    题目描述: Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1-& ...

  6. CSS3实现jquery的特效

    实现 “慕课网” 的图片滑过缩放的效果 技术点:css3——   -webkit-transform:scale(1.2); .course-list-img .img_1:hover{ -webki ...

  7. Ejabberd源码解析前奏--调试

    一.日志文件 一个ejabberd节点写两个日志文件:    ejabberd.log ejabberd 服务日志, 由 ejabberd 节点汇报的消息erlang.log Erlang/OTP 系 ...

  8. STL sort()函数

    C++之所以得到这么多人的喜欢,是因为它既具有面向对象的概念,又保持了C语言高效的特点.STL 排序算法同样需要保持高效.因此,对于不同的需求,STL提供的不同的函数,不同的函数,实现的算法又不尽相同 ...

  9. 八、jdk工具之JvisualVM、JvisualVM之一--（visualVM介绍及性能分析示例）

    目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...

  10. A Fast Priority Queue Implementation of the Dijkstra Shortest Path Algorithm

    http://www.codeproject.com/Articles/24816/A-Fast-Priority-Queue-Implementation-of-the-Dijkst http:// ...