重新认识script标签

Magicer 发布于2019-08-20 11:24 / 2162人阅读

摘要：尽管脚本的下载过程中不会相互影响，但页面仍然要等到所有代码下载并完成执行才能继续。

defer和asnyc（只对外部文件有效）

defer 在页面完成解析时执行代码，这个属性表明脚本在执行时不会影响页面的构造，在元素中设置这个属性相当于告诉浏览器立即下载但延迟执行

async 相对于页面其他部分异步执行脚本，一般的script标签都是会阻塞页面执行的，没有加上async属性的标签会阻塞后面的标签的解析。一般用在不需要操作dom元素的脚本上，例如一些统计代码（跟页面执行逻辑无关的，不涉及dom操作的），可以避免因长时间加载而呈现白屏现象

script中有或没有它们的区别

script中没有defer和async，会立刻加载并执行

script中有async没有defer时，会与渲染后续文档元素并行加载，加载完自动执行

script中有defer没有async时，后续文档元素渲染会与脚本文件加载并行，但是执行所有元素解析完成之后，在DOMContentLoaded之前执行

https://segmentfault.com/q/10... 这个回答很棒

但是红宝书中有这样一句话：HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行，但在现实生活中，延迟脚本并不一定按照顺序执行，也不一定会在DOMContentLoaded事件中触发前执行，因此最好只包含一个延迟脚本。因此上图第三点说法有欠缺

未解决问题：所有浏览器都兼容，那么为什么没有看到别人在用呢？

查了一下，网易有在用，浏览器兼容还是有点小问题，and业务需求

script是可以并行下载的，这里应该是指放在head中的script标签，不会阻塞其他script标签，但是仍然会阻塞其他资源下载，例如图片。尽管脚本的下载过程中不会相互影响，但页面仍然要等到所有js代码下载并完成执行才能继续。-- 《高性能的js》

并行下载测试

建议放在body的底部

每个script标签初始化都会阻塞页面渲染，在解析html页面过程中每遇到一个script标签都会因执行脚本而导致一定的延时

尽管单个较大的js文件只请求一次http，但是这样会导致锁死浏览器一段时间，解决方案除了上面所说的defer之外还可以动态创建标签加入head中，可以通过onload事件来监听脚本加载是否完毕，ie下通过readystatechange事件

function loadScript(url, callback) {

    var script = document.createElement("script");

    if ( script.readyState ) { // IE

        script.onreadystatechange = function(){

            if( script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null; // 同时检查两种状态，只要有一种触发就删除事件处理器，避免触发两次
                callback();
            }

        }

    }else{

        script.onload = function(){
            callback();
        }

    }


    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);

}

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

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

preload、prefetch的认识

摘要：和可以用来指定资源是最高优先级的。如果用户进入指定的链接，隐藏的这个页面就会进入马上进入用户的视线。微软最近也宣布会让在上用类似的技术。预加载现在的网络情况虽然很乐观，但是 defer和async 当浏览器碰到 script 脚本的时候：没有 defer 或 async，浏览器会立即加载并执行指定的脚本，立即指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后...

alogy 2019-08-29 17:13 评论0 收藏0
了解Chrome扩展程序开发

摘要：了解扩展程序开发本文大量借鉴图灵电子书扩展及应用开发首发版首先，我尝试来用简单几句话描述一下扩展程序扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。提供了接口，允许扩展对用户的历史进行管理。了解Chrome扩展程序开发本文大量借鉴图灵电子书-Chrome扩展及应用开发（首发版）首先，我尝试来用简单几句话描述一下Chrome扩展程序： Chrome扩展主要用于对浏览器功能的增...

lemanli 2019-08-21 18:46 评论0 收藏0
再谈JavaScript模块化

摘要：应用日益复杂，模块化已经成为一个迫切需求。异步模块加载机制。引用的资源列表太长，懒得回调函数中写一一对应的相关参数假定这里引用的资源有数十个，回调函数的参数必定非常多这就是传说中的简述缘起模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面...

MorePainMoreGain 2019-08-26 10:14 评论0 收藏0
用vuepress搭建一个够自己用的博客

原文博客闲扯很久以前，自己拥有一个用hexo搭建的静态博客网站:ox:，记得当时为了把它搞出来，废了不少劲:anger:，然后后来又断断续续更改过一些配置和样式，但是因为感觉各种麻烦，所以就放在github上积累和很多的尘土:cupid:，到现在也懒得在打扫了（其实是好久不用，有点忘了怎么用了:-1::poop:），前段时间在百度统计上看了看那个静态网站的访问人数，发现已经很久很久没人访问过了...

Forelax 2019-05-27 17:43 评论0 收藏0
用vuepress搭建一个够自己用的博客(带评论功能)

摘要：那么我们如何在博客中实现这个功能呢，其实很简单，首先修改我们的文件介绍正在使用的构造函数附加到根实例的一些选项当前应用的路由实例站点元数据对的判断是防止编译的时候报错然后新建一个的文件取消默认的复制事件作者静水深流原文著作权归作者所有。原文博客闲扯很久以前，自己拥有一个用hexo搭建的静态博客网站，记得当时为了把它搞出来，废了不少劲，然后后来又断断续续更改过一些配置和样式，但是因...

thekingisalwaysluc 2019-08-26 13:55 评论0 收藏0