资讯专栏INFORMATION COLUMN

《javascript高级程序设计》笔记:script元素属性

since1986 / 1201人阅读

摘要:高级程序设计摘录可选。表示通过属性指定的代码的字符集。这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为。规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于事件执行。

《javascript高级程序设计》摘录:

async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效

charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值, 因此这个属性很少有人用。

defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持这个属性。

language:已废弃。原来用于表示编写代码使用的脚本语言(如 JavaScript、JavaScript1.2 或 VBScript)。大多数浏览器会忽略这个属性,因此也没有必要再用了。

src:可选。表示包含要执行代码的外部文件。

type:可选。可以看成是 language 的替代属性;表示编写代码使用的脚本语言的内容类型(也称为 MIME 类型)。这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为 text/javascript。

MIME类型

百度百科解释:

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式

通俗的将,MIME类型就是告诉浏览器用什么程序解析传递给他的文件,而前端涉及到MIME类型的也就是与后台交互时。http 协议中常见的MIME:参考维基百科

text/plain(纯文本)

text/html(超文本标记语言)

image/png(PNG图像)【PHP中为:image/x-png】

application/x-www-form-urlencoded(使用HTTP的POST方法提交的表单)

DOM 文档的执行顺序

两个属性都是用来设定外部脚本执行的方式,在详细讲解两个属性的区别之前,先看一下DOM文档的加载顺序:

解析HTML结构;

加载外部脚本和样式表文件;

解析并执行脚本代码;

DOM树构建完成;//DOMContentLoaded

加载图片等外部文件;

页面加载完毕;//load

由于浏览器采用至上而下的方式解析,所以会先解析html,直到遇到外部样式和外部脚本。这时会阻塞浏览器的解析,外部样式和外部脚本(在没有async、defer属性下)会并行加载,但是外部样式会阻塞外部脚本的执行(查看css和js的阻塞请点击)。
即:html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析

async 和 defer 对比

async和defer属性决定了js脚本的执行方式,内嵌式的脚本会忽略这两个属性

defer:脚本会被延迟到整个页面都解析完毕后再执行

书中的例子和解释:



    Example HTML Page
    
    


    

在这个例子中,虽然我们把

在以上代码中,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖 非常重要。指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改 DOM。异步脚本一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行

以上内容纯粹式学术的的探讨和老旧代码的维护,不介意做过多的纠结。因为我们都会将css外链放在head元素内,而将js脚本放在文档的最后

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84698.html

相关文章

  • js高级程序设计-DOM-阅读笔记

    摘要:节点层次类型和属性假设我的是一个元素返回至于就是元素的名称节点关系每个节点都有一个属性其中保存着一个对象是一个类数组对象这个对象有属性但不属于对象会随着结构变化而变化因为是类数组所以访问里面的属性可以使用索引也可以使用方法效果是一样的 节点层次 showImg(https://segmentfault.com/img/bVIl1b?w=646&h=407); node类型-dom1 ...

    mating 评论0 收藏0
  • JavaScript高级程序设计笔记:DOM(十)

    摘要:添加节点后,的新增节点父节点及以前的最后一个子节点的关系指针都会相应地得到更新。插入后成为最后一个子节点插入后成为第一个节点插入到最后一个子节点前面接受两个参数,要插入的节点和要替换的节点只移除而非替换节点。 Node类型 nodeType以下是一些重要的nodeType的取值:1: 元素element2: 属性attr3: 文本text8: 注释comments9: 文档docume...

    Pluser 评论0 收藏0
  • javascript高级程序设计(第三版)学习摘录上

    摘要:在这种情况下,函数在停止执行后将返回值。这种用法一般用在需要提前停止函数执行而又不需要返回值的情况下严格模式对函数有一些限制不能把函数命名为或不能把参数命名为或不能出现两个命名参数同名的情况。 把近期看高程这本书做的笔记摘录整理出来了,总归对原生javascript理论有了一个比较全面的的认识,这次把书中的一些知识要点摘录出来了,便于以后查阅的时候有方向,也更有效率!! 第一章、jav...

    leap_frog 评论0 收藏0
  • 谈谈 <script> 标签以及其加载顺序问题,包含 defer & async

    摘要:标签加载顺序如果要谈标签加载顺序问题,首先要谈的就是标签的位置,因为标签的位置对于加载顺序来说有着很重要的影响。例如标签在以上代码中,可能由于下载时间比较长,由于两个标签都是异步执行,互不干扰,因此可能就会先于执行。 谈谈 标签加载顺序的问题 这篇文章比较长,如果你耐心读完了,我会感谢你愿意在这篇文章上花费时间,也希望你有收获。 其实说起,几乎搞前端的都知道他的作用:引入 JavaS...

    alexnevsky 评论0 收藏0

发表评论

0条评论

since1986

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<