第2章 两种调用JS的方法——在HTML中使用JavaScript

摘要:
2、 通过引用外部链编写js文件,然后引用它。您不需要将标记添加到js文件//内部Js代码将被忽略。建议使用第二种方法。延迟加载defer属性的一种方法是使用脚本元素的defer属性。如果您添加:当存在两个defer时,理论上它们将按顺序执行。将noscript代码添加到body元素的最后一部分:<noscript><p>此页面要求浏览器支持(启用)javascript脚本。它可以被认为是js的“行间形式”。
 一. <script>标记

  第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上面)

    <head>...
    <title>demo</title>
    <script type=”text/java script”>
    /*type属性常被忽略掉。脚本默认是js,所以<script type=”text/java script”>可直接简写做<script>*/
    ...
    </scipt>
    </head>

  内嵌js时,可能会涉及一些与html冲突的判断。比如<>之类的操作符。可以通过html实体来替代。如&gt;为>,&lt;为<。

 

 二.引用外链

  写好js文件,然后引用,在js文件中,不需要加入<script>标记。

  

<script type=”text/java script” src=”xxx.js”></script>

  //内部的js代码将被忽略。

  推荐使用第二种方法。具有方便维护,可缓存,标准化等优点。

 

 三. 那么问题来了

  script标记的加载方式是由上到下进行的。在解析器<script>元素对所有js代码求值结束之前,页面中其余的内容都不会被显示。如何改善性能?

  1.defer属性延迟加载

  一个方法是利用script元素的defer属性。表面脚本在不影响页面构造时才会执行(在html内容加载完之后才执行)。如在<head>元素内加入:

<script defer=”defer” arc=”xxx*.js”></script>

  两个defer存在时,理论上是按顺序执行。

 

  2.异步加载

 

   script的另一个属性async与defer相似。要求在不影响页面构造时,立即下载js文件。 

<script defer=”defer” async arc=”xxx*.js”></script>

 

 

  但是当存在两个async时,即便理论上也不能保证二者是顺序加载。

 

 

  3.最好的方式

  把<script>放到html页面内容最后(</body>之前),再外链引用之——这样可以更好快地加载文件。

 

  4.又一个问题

  当浏览器不支持脚本;或者浏览器js脚本被禁用后,如何让页面平稳退化?

  在body元素内最后部分加上noscript代码(这段代码在js正常时不会显示):

 

<noscript>

<p>本页面需要浏览器支持(启用)javascript脚本。</p>

</nosript>

   【补充】

   历史上,js可以被写在html注释中。可以认为是js的“行间形式”。<!--js代码//-->,现在已废弃。

免责声明:文章转载自《第2章 两种调用JS的方法——在HTML中使用JavaScript》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇eslint使用ISD9160学习笔记04_ISD9160音频编码代码分析下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS DOM元素

// 为element增加一个样式名为newClassName的新样式 functionaddClass(element, newClassName) { var value =element.className; element.className = value + " " +newClassName; } var bo...

CSS3(七) 前端预处理技术(Less、Sass、CoffeeScript)

目录 一、Less 1.1、概要 1.2、变量 1.3、解析Less 1.3.1、在线处理 1.3.2、预处理 1.4、混入(Mixins) 1.5、嵌套    1.6、运算 1.7、函数 1.8、继承     1.9、作用域 1.10、注释 二、Sass 2.1、变量 2.2、嵌套 2.3、导入 2.4、mixin 混入 2.5、扩展/继承...

HTML 表单常用的代码元素

表单: 将数据通过浏览器提交到服务器的媒介。<form action="" method="get/post" ></form> get 提交有长度限制 post 提交无长度限制 一般常用post  表单元素:12个 1.文本类1).<input type="text" value=""> - 文本框 在文本框中输入...

Document节点

概述 document节点对象代表整个文档,每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。 document对象有不同的办法可以获取。 正常的网页,直接使用document或window.document。 iframe框架里面的网页,使用ifr...

JS阻止默认行为

如果事件可取消,则取消该事件,而不停止事件的进一步传播。 语法 event.preventDefault(); 案例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ev...

js 里面的 function 与 Function

function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1、new function 与 new Function 的区别   new 运算符在 js 里面是 创建一个自定义的对象的实例 或者是 一个具有构造函数的本地对象的实例。     语法:new constructor [ ( [ arguments ] ) ]   ...