【javascript】javascript学习之js脚本的解析步骤
将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脚本的解析步骤的更多相关文章
- 不支持javascript的浏览器将JS脚本显示为页面内容
不支持javascript的浏览器将JS脚本显示为页面内容.为了防止这种情况发生,您可以使用这样的HTML注释标记:<html ><体><script type=“tex ...
- 学习 Node.js 的 6 个步骤
第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...
- javascript中如何使用js脚本模拟"request"获取url后参数值呢？
转自:猫猫小屋--js获取url后参数信息 摘要: 下文讲述javascript中使用js代码获取url地址后面的参数值的方法分享,如下所示: 实现思路: 使用正则表达式对参数值进行匹配,获取参数后的 ...
- 百度统计的JS脚本原理解析
一句话:在你的网站上加载百度统计的脚本,这个脚本会收集你的本地信息,然后发送给百度统计网站 https://blog.csdn.net/iqzq123/article/details/8877645 ...
- JavaScript学习03 JS函数
JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...
- JavaScript 基础学习（二）js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
随机推荐
- 解决VS2010中工具箱里没有WPM
我前段时间要用到MS的WPM,但苦于找不到解决不了,无奈重装后一样的情况我的win7 旗舰版版+VS2010旗舰版.在控制面板里找到多媒体重新关闭并从新打开,就OK啦..记得要重启哦...
- 获取vmware虚拟机模板
在我们通过克隆虚机,需要用到虚机模板.在数据中心的目录下面有文件夹.模板和虚拟机,那么这里需要做的是根据类型做递归查询. private void GetTemplate() { System.Tex ...
- 相当郁闷的问题，TabHost选项卡标签图标始终不出现？
在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1&quo ...
- 13种PDF转图片的案列
Acrobat.dllc#PDFPDFRender4NET.dllpdf转图片 GitHub Clone Adress : https://github.com/stone0090/OfficeToo ...
- 微信开发之c#下获取jssdk的access_token
获取access_token是调用微信JS接口的基础,只有得到了它才能得到我们需要的jsapi_ticket并生成签名,然后注入配置信息config. 微信官方文档我就不多做介绍,反正我是踩了不少坑. ...
- HTML5 开发APP 第一章
当今天下,移动端基本上是安卓和苹果的天下,基本上没微软什么事,作为微软忠实的支持者,也要顺势而变. 但安卓和IOS 开发是两个完全不同的世界,有没有一种技术,开发完以后可以运行在任意终端呢,答案是有 ...
- Oracle彻底卸载
Oracle彻底卸载 卸载:oracle卸载1.删除注册表:打开注册表:regedit 打开路径: <找注册表 :开始->运行->regedit> HKEY_LOCAL_MAC ...
- 爆款AR游戏如何打造？网易杨鹏以《悠梦》为例详解前沿技术
本文来自网易云社区. 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. 网易 ...
- nowcoder(牛客网)OI测试赛2 解题报告
qwq听说是一场普及组难度的比赛,所以我就兴高采烈地过来了qwq 然后发现题目确实不难qwq.....但是因为蒟蒻我太蒻了,考的还是很差啦qwq orz那些AK的dalao们qwq 赛后闲来无事,弄一 ...
- kvm虚拟机磁盘文件读取小结
kvm虚拟机磁盘挂载还真不是一帆风顺的.xen虚拟化默认就raw格式的磁盘,可以直接挂载,kvm如果采用raw也可以直接挂载,与xen磁盘挂载方式一致. 1.kvm虚拟化相比xen虚拟化来说,工具与方 ...