将javascript代码加入到HTML代码中,即使用<script>标签的方式有两种:直接嵌入页面中和使用外部js文件。

  使用<script>标签嵌入html代码中时,需要指定其类型:type="text/javascript"。不过在html5标准中<script>标签的type默认为"text/javascript",可以省略不写,不过考虑到低版本的兼容问题,一般还是加上比较好。


  嵌入式js代码:

    添加到<script>标签内的内容会从上到下被解释。当解释器处理标签内的代码完毕前,页面的其他内容都不会被浏览器加载或显示,也就是说,在js代码处理执行完毕前,页面加载会被阻塞,直到js代码加载执行完毕。

  引用外部js脚本:

    在<script>标签中,可以使用"src"来引入外部javascript文件,当<script>标签用于引用外部js文件后,标签内的代码将被忽略。

    和嵌入式js代码一样,当浏览器解析到<script>标签时,首先加载外部js文件代码,然后解释器会解释这些代码,在js文件代码被解释完前,浏览器页面加载会被阻塞,直到导入代码加载执行完毕。


  按照惯例,<script>标签一般是写在<head>标签内,这种做法的目的是为了将所有的js文件和css文件的引用都放到一起。不过,由于外引用js代码的加载执行方式,写在<head>内的外部js文件在加载解释完毕前,整个页面是处于阻塞状态的。这样写在<body>内的DOM结构只有在head内的所有外部内容加载解释完毕后才开始加载,这样在用户看来就是空白的页面,而空白页面存在的时间越长,就会给人造成网页加载速度慢的印象。

  要解决这个问题,可以把外部js文件的引入写到<body>中的DOM结构代码之后,这样页面在加载过程中,就会先加载DOM结构再开始加载解释js文件内容,这样空白页面的存在时间就会减少,也就变相的给人一种页面很快打开的感觉。


  延迟脚本defer:

  相应的,如果确实需要将外引用js文件的<script>标签写在<head>中,则可以使用<script>的defer属性。这个属性用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。所以,在<script>中设置defer属性,等于告诉浏览器,先下载,然后延迟执行。不过,defer属性只适用于引用外部js文件,在内嵌js中设置会被忽略。外部脚本会根据延迟的顺序顺序执行。

<script type="text/javascript" src="XXXXX" defer="defer"></script>

  异步脚本async:

  这个属性是HTML5的新属性,类似defer属性,都是改变外部脚本执行行为的属性。标签<script>设置了async后,外部脚本将异步执行,不过无法控制几个外部脚本的执行顺序,所以如果在脚本中有改变DOM的内容,将产生不可预期的错误。  

<script type="text/javascript" src="XXXXX" async="async"></script>

  如此一来,外部脚本的执行就会有三种方法:

    如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行);

    如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行;

    如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本。

【javascript】javascript学习之js脚本的解析步骤的更多相关文章

  1. 不支持javascript的浏览器将JS脚本显示为页面内容

    不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...

  2. 学习 Node.js 的 6 个步骤

    第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...

  3. javascript中如何使用js脚本模拟"request"获取url后参数值呢?

    转自:猫猫小屋--js获取url后参数信息 摘要: 下文讲述javascript中使用js代码获取url地址后面的参数值的方法分享,如下所示: 实现思路: 使用正则表达式对参数值进行匹配,获取参数后的 ...

  4. 百度统计的JS脚本原理解析

    一句话:在你的网站上加载百度统计的脚本,这个脚本会收集你的本地信息,然后发送给百度统计网站 https://blog.csdn.net/iqzq123/article/details/8877645 ...

  5. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  6. JavaScript 基础学习(二)js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  7. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

随机推荐

  1. C和C++中的异常处理

    1.简介 许多的编程新手对异常处理视而不见,程序里很少考虑异常情况.一部分人甚至根本就不考虑,以为程序总是能以正确的途径运行.譬如我们有的程序设计者调用fopen打开一个文件后,立马就开始进行读写操作 ...

  2. Android-隐式意图激活所有应用

    显示意图 与 隐式意图 对比 显示意图不能激活多个组件,只能激活一个组件 隐式意图能激活多个组件 显示意图只能在自身应用激活,不能激活其他应用 隐士意图能在自身应用激活,也能激活其他应用 每个应用程序 ...

  3. arcgis android 10.2.5开发环境配置

    android里要添加arcgis android 的支持,其实本质是添加了jar包,so库,清单文件里申请了权限而已. 插件是为了方便创建arcgis android工程,然后并没有什么卵用. ar ...

  4. T-SQL逻辑查询

    理解T-SQL的逻辑查询顺序是学习SQL Server的基础. T-SQL逻辑执行顺序 (8)    SELECT (9) DISTINCT (11) <TOP_specification> ...

  5. mvc4验证码&输出图像的处理方式

    /// <summary> /// 绘制验证码 /// </summary> /// <returns></returns> public Action ...

  6. 群晖Synology

    简介 群晖是做的最好的一家NAS公司,声称是买软件卖硬件,软件有丰富的功能. 白群晖就是指从正规渠道买软件+硬件,价格昂贵,性价比低. 黑群晖是指自己搭建或购买单独的硬件(可以是电脑主机.可以是其他厂 ...

  7. Webserver asp配置及伪静态设置

    Webserver  IIS asp配置及伪静态设置 一.概述: 在Windows Server 2003系统中,用户可以借助IIS 6.0配置基于ASP.PHP.asp.NET等语言的动态Web网站 ...

  8. oppo手机永久打开USB调试模式

    现象:十分钟不使用就会自动关闭 usb 调试模式,重新打开还得输入验证码,真尼玛烦人. 方法: 数字拨号盘 输入 *#8011#  就可以永久打开.

  9. WEB新手之serialize’s revenge

    最后一道题. 这道题提示比较少,一点也不友好.F12也没有什么线索.无奈之下用御剑扫下后台,发现了一个叫robots的txt文件. 打开robots.txt文件,可以得到一段代码,如下图所示. 审查代 ...

  10. is 与 == 的区别;小数据池; 编码与解码

    1, is 与 == 的区别 ==  比较的是两边的值 is   比较的是两边的地址  id () 2,小数据池(在终端中) 数字小数据池的范围 -5 ~ 256 字符串中如果有特殊字符他们的内存地址 ...