浏览器script标签加载顺序

作者: KeKeMars | 来源:发表于2015-12-11 17:39 被阅读389次
  • script标签(不带defer或async属性)的会阻止文档渲染。相关脚本会立即下载并执行。
  • document.currentScript可以获得当前正在运行的脚本(Chrome 29+, FF4+)
  • 脚本顺序在默认情况下和script标签出现的顺序一致

async属性

由脚本插入的script标签默认是async的。对內联脚本设置async属性是没有意义的,也不产生其他效果。其包含的脚本总是立即执行的。

defer属性

带有defer属性的脚本,同样会推迟脚本的执行,并且不会阻止文档解析。
defer属性是会确保脚本在文档解析完毕后执行的——即使这个脚本在文档解析过程中就已经下载完毕变成可执行的状态,浏览器也会推迟这个脚本的执行,直到文档解析完毕,并在DOMContentLoaded之前。

带有defer的脚本彼此之间,能保证其执行顺序。

  • 仅有async属性,脚本会异步执行
  • 仅有defer属性,脚本会在文档解析完毕后执行
  • 两个属性都没有,脚本会被同步下载并执行,期间会阻塞文档解析
  • 被延迟的脚本进行document.write写入时, 由于document已经关闭, 所以 document.write 没有效果

参考: Script标签和脚本执行顺序 - 文档加载 - 面向浏览器编程

相关文章

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

  • 浏览器script标签加载顺序

    script标签(不带defer或async属性)的会阻止文档渲染。相关脚本会立即下载并执行。 document....

  • 浏览器渲染机制 /CSS控制多行省略号

    前端HTML浏览器渲染顺序,HTML代码自上而下进行解析加载。 先解析head标签中的代码。遇到script时,浏...

  • JavaScript文档的加载过程

    1.浏览器在加载一个界面的时候, 是按照从上至下的顺序加载的 2.如果将script标签写在head标签中, 那么...

  • requireJS的使用

    由于浏览器的是单线程的,在加载script标签时会打断,模块的加载.同时,模块间的依赖需要按顺序加载才能正常执行....

  • script标签的async和defer

    script标签用于加载脚本与执行脚本,直接使用script脚本的话,HTML会按照顺序来加载并执行脚本,在脚本加...

  • 模块加载标准

    熟悉模块加载标准之后 浏览器 html 文本插入非常多 script 标签时,异步加载这些标签,使页面响应速度变快...

  • JavaScript之文档的加载

    浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在...

  • Review JavaScript

    红宝书 综合 script加载js会阻塞渲染,标签中 fefer 指异步加载js,在文档load之后按顺序执行。a...

  • JS编写位置

    button标签中的onclick a标签的超链接 script标签 此方法会在浏览器加载完之后马上出现。 外部文...

网友评论

  • brucecham:「由脚本插入的script标签默认是async的。对內联脚本设置async属性是没有意义的」
    这句话实验过吗?需要验证才行

本文标题:浏览器script标签加载顺序

本文链接:https://www.haomeiwen.com/subject/wymyhttx.html