专栏首页javascript艺术script标签加快加载速度

script标签加快加载速度

script标签加快加载速度

对于script元素,新增async属性与defer属性,他们的作用都是加快页面的加载速度,使脚本代码的读取不再妨碍页面上其他元素的加载。

script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。

现在大家习惯于在页面中引用各种的第三方脚本,如果第三方服务商出现了一些小问题,比如延迟之类的,就会使得页面白屏。 好在script提供了两种方式来解决上述问题,asyncdefer,这两个属性使得script都不会阻塞DOM的渲染。 但既然会存在两个属性,那么就说明,这两个属性之间肯定是有差异的。

defer

如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染; 如果有多个设置了deferscript标签存在,则会按照顺序执行所有的scriptdefer脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。

我们做了一个测试页面,页面中包含了两个script标签的加载,给他们都加上defer标识。 P.S. 为了更直观,我们给script1.js添加了1s的延迟,给script2.js添加了2s的延迟。

下图是页面加载的过程&script脚本的输出顺序。 不难看出,虽然script1加载用时虽然比script2短,但因为defer的限制,所以Ta只能等前边的脚本执行完毕后才能执行。

async

async的设置,会使得script脚本异步的加载并在允许的情况下执行 async的执行,并不会按着script在页面中的顺序来执行,而是谁先加载完谁执行。

我们修改测试页面如下:

遂得到了如下的结果,页面加载时长上,并没有什么变化,毕竟都是异步加载的脚本。 但是我们可以看到一个小细节,DOMContentLoaded事件的触发并不受async脚本加载的影响,在脚本加载完之前,就已经触发了DOMContentLoaded

我们接着修改测试页面。加载一个没有延迟的script脚本,使得脚本可以即时的加载完毕。 我们要测试一下,如果async脚本加载的足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async的描述“在允许的情况下执行”的论证)。 同时为了保证测试的稳定性,我们在script脚本引入的后边添加了数千个空的div节点,用来延长文档的渲染时间。

执行结果不出所料,如果给async一定的时间,是有可能在DOMContentLoaded事件之前就执行的。

P.S. 从上图中左上角的火焰图中,我们也能看到,出现了多段的蓝色(更新:晚上写的时候懵了,紫色的才是渲染,蓝色的是解析)文档渲染。以及下边Console的顺序。 说明的确,async的执行是加载完成就会去执行,而不像defer那样要等待所有的脚本加载完后按照顺序执行。

画几张图简要说明

网上有了不少这种类似的图,但是基本都是拿一个script就举例的 未免太过寒酸,so咱们来一个豪华版,来画一下多个脚本加载时的甘特图 就像近年来各大手机厂商,出新机都喜欢来一个X+X plus

拿四个不同的颜色来标明各自代表的含义

普通script

文档解析的过程中,如果遇到script脚本,就会停止页面的渲染进行下载(但是并不会影响后续的解析,解析和渲染是两码事儿)。 资源的下载是在解析过程中进行的,虽说script1脚本会很快的加载完毕,但是他前边的script2并没有加载&执行,所以他只能处于一个挂起的状态,等待script2执行完毕后再执行。 当这两个脚本都执行完毕后,才会继续渲染页面。

defer

文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析&渲染完毕后。 会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。

async

async脚本会在加载完毕后执行。 async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的

推荐的应用场景

defer

如果你的脚本代码依赖于页面中的DOM元素(文档是否渲染完毕),或者被其他脚本文件依赖。 例:

  1. 评论框
  2. 代码语法高亮
  3. polyfill.js

async

如果你的脚本并不关心页面中的DOM元素(文档是否渲染完毕),并且也不会产生其他脚本需要的数据。

转载至博客:https://www.cnblogs.com/jiasm/p/7683930.html

一件事无论太晚或者太早,都不会阻拦你成为你想成为的那个人,这个过程没有时间的期限,只要你想,随时都可以开始。from 《返老还童》

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 创建script、link标签,预加载js/css方法createStaticResourceElement(CSRE)

    # 代码 create-static-resource.js /** * Created by Capricorncd 2017-09-25 * https...

    IMWeb前端团队
  • 创建script、link标签,预加载js/css方法createStaticResourceElement(CSRE)

    IMWeb前端团队
  • Nuxt项目给script标签添加crossorigin属性

    最近给项目添加一个错误日志上报的功能,由于使用的是第三方的服务,导致上报的错误信息都是Script error.。文档上写的很清楚,要处理这个问题只需要两步:添...

    kai666666
  • JavaScript加载速度

    闲花手札
  • 用video标签流式加载

    浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频。 这个过程是浏览器来加载video的。

    smy
  • Web 加载速度优化清单,让你的网站快上加快

    网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页。时间...

    王图思睿
  • 微信小程序 加载 HTML 标签

    最近写项目中遇到一个问题,后台接口返回数据时有html标签,小程序如何加载html标签格式的字符串呢?小程序有跳转外连接的功能可以直接跳转到一个h5页面。具体使...

    honey缘木鱼
  • Android fragment 标签加载过程分析

    在上一篇文章中我们介绍了 AsyncLayoutInflater 使用的注意事项及改进方案。

    用户2898788
  • WordPress加速技巧总结-如何使您的WordPress网站加载速度快

    网站优化网站加速一直是一个持久的话题,及时今天我们的网络宽带速度越来越好了,但是对于速度的追求是无止境的,文章来源:https://zouaw.com/

    wordpress建站吧
  • 加快ssh连接速度

    明哥的运维笔记
  • 用手动创建新的script标签的方式,实现JavaScript脚本的异步加载

    代码第四行里新建一个script标签页,在第8行的回调函数onreadystatechange里,根据属性readyState判断当前标签页的状态,如果为loa...

    Jerry Wang
  • 加快C++代码的编译速度方法【转载】

    C++代码一直以其运行时的高性能高调面对世人, 但是说起编译速度,却只有低调的份了。比如我现在工作的源代码,哪怕使用Incredibuild调动近百台机子,一个...

  • 使用 gzip 以及 cdn 加快前端载入速度

    还记得在 Angular 2 Component 中使用第三方 JS 库这篇文章里说有个新项目用了 Angular2 么?这篇文章还是跟这个项目有关,为了减少每...

    Alan Zhang
  • 设置国内的源加快R包下载速度

    R语言在使用 install.packages() 安装package的时候,默认会在官方的源(https://cran.rstudio.com/)搜索R包,然...

    阿凡亮
  • Spring bean 标签加载、解析过程分析

    java404
  • 这样优化和加速你的wordpress网站,快速提升网站的访问加载速度

    这样优化和加速你的wordpress网站,快速提升访问加载速度,最近发现很多的站长对一些基础的知识懂得不多,导致自己wordpress网站非常的慢非常的卡,几乎...

    wordpress建站吧
  • 如何通过预加载器提升网页加载速度

    预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

    wangxl
  • 如何通过预加载器提升网页加载速度

    预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了...

    葡萄城控件
  • 加速Github的访问及下载速度

    国内访问github的速度一直被广大网友及开发者所诟病,为了缓解这一现象,本文介绍几种方式加速,由于中国开发者人群越来越大,github也被微软收购,相信这个问...

    caoayu

扫码关注云+社区

领取腾讯云代金券