javascript初了解

用户67691027717
65 阅读1分钟

javascript 有三部分组成：

  1. ECMAScript(提供核心语言功能)
  2. 文档对象模型（DOM）,提供访问和操作网页内容的方法和接口。 (最初是用于表示文档结构，后面扩展了dom的事件等)
  3. 浏览器对象模型（BOM）, 提供与浏览器交互的方法和接口。 （主要是跟浏览器窗口相关的，比如： 打开新的浏览器，关闭浏览器窗口，navigation 对象， 分辨率SCREEN 对象，以及xmlHttoRequest , 没有统一的标准 ）

script 标签

<!DOCTYPE html>
<html>
  <head>
    <title>example html page</title>
    <script type="text/javascript" async src='example.js'></script>
    <script type="text/javascript" async src='example.js'></script>
  </head>
  <body>
    <!-- 这里放正文内容 -->
  </body>
</html>

这里建议将<script>放在<head>标签里面，这里做法的目的是为了将所有外部文件的引用放在相同的地方。但是在文档的<head>的标签下放置所有的javascript文件，意味着必须等到全部的javascript代码都被下载、解析、执行完毕才会加载后续的body内容。这样会导致用户进来后，页面长时间的处理空白状态。所以为了避免这种情况，现在的web 应用程序都将javascript引用放在body元素中内容的最后面。如下例所示：

<!DOCTYPE html>
<html>
  <head>
    <title>example html page</title>
  </head>
  <body>
    <!-- 这里放正文内容 -->
    <script type="text/javascript" async src='example.js'></script>
    <script type="text/javascript" async src='example.js'></script>
  </body>
</html>

延迟脚本

<!DOCTYPE html>
<html>
  <head>
    <title>example html page</title>
    <script type="text/javascript" defer='defer' src='example.js'></script>
    <script type="text/javascript" defer='defer' src='example.js'></script>
  </head>
  <body>
    <!-- 这里放正文内容 -->
  </body>
</html>

html4.01 为<script>标签定义了defer属性，这个属性表明脚本在执行时候不影响页面的构造。也就是说，脚本会延迟到这个页面解析完成后再运行。因此在<script>标签中定义defer属性，意味着立即下载，延迟执行。 defer属性只支持外部链接，这里在HTML5明确规定。因此HTML5的实现会忽略嵌入脚本的defer属性。 而且有些浏览器会忽略defer属性， 因此将javascript引用放在body元素中内容的最后面是最佳选择。

异步脚本

HTML5 为<script>标签定义了async属性只适用于外部脚本文件，并告诉浏览器立即下载文件。不同的是，标记为async的脚本不会按他们指定的先后顺序执行。因此，确保两者之间不会互相依赖非常重要。

avatar
文章
阅读
粉丝