JavaScript无阻塞加载和defer、async详解

无阻塞加载

把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就是说可以同时下载js文件，但是还是按先后顺序执行文件的。

下载是异步的没问题，但是每个javascript执行的时候还是同步的，就是先出现的script标签一定是先执行，即使是并行下载它是最后一个下载完成的，除非标有defer的script标签。任何javascript在执行的时候都会中断当前html文档解析，自然会阻止页面渲染。

javascript加载是不会影响已经渲染的页面，但是会中断html文档解析，浏览器会在javascript执行以后决定当前文档是否需要进行重新渲染或者文档重排。所以即使javascript放到最后面也会使浏览器暂停，但不影响之前已经解析出来的dom文档，此时对于用户来说是可操作的。

javascript下载完毕之后会立即执行，所有的javascript执行都会阻塞浏览器的其他行为，例如阻塞其他javascript的执行、其他的http请求的执行以及页面的解析和渲染。（html文档中外部js的下载也会阻塞浏览器的行为，但通过创建script元素动态js的下载不会，可能是认为动态的js不会改变页面效果，所以允许资源并行下载。）

图示动态脚本的下载

UI线程会根据页面里资源（资源是指css文件，图片等等）书写的先后顺序来加载资源，加载资源也就是使用http请求获取资源，像css外部文件，html文件以及图片等资源http请求处理完毕也就意味着资源加载结束，但是像外部的javascript文件的加载则不同，它的加载过程被分为两步，第一步和加载css文件和图片一样，就是执行一个http请求下载外部的js文件，但是javascript完成http操作后并不意味操作完毕，UI线程接着会执行它。js脚本的下载和执行必须是一个完整的操作，是不能被割裂的。动态js的下载不会阻塞，但执行一定会会。

浏览器为了提升用户体验，加快UI线程的执行是一个无法回避的问题，但是拆分js的下载和执行是不可行的，如是乎浏览器换了种方式，这个方式也就是在同一个时间能下载多个资源。

将常用的，稳定的静态资源统一放在一个静态资源服务器上，由统一的域名对外提供，这个域名要和主体请求的域名不一样，原理是因为浏览器只通过域名来限制连接的个数，如果一个页面里有两个不同的域的，那么并行的http请求个数也会变成两倍。有度，对DNS解析要开销，所以2个最佳。

将所有外部js代码分为UI初始化代码和其他代码，UI初始化代码是在页面加载时候执行的代码。让那些不会用于页面初始化展示的js代码的加载和执行操作通过onload事件在浏览器忙指示结束后触发，即让那些和页面加载无关的js脚本在onload方法里执行

无阻塞加载脚本的核心技术就是动态的创建script的dom节点，而且可以跨域访问。

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

script.type="text/javascript";

script.src="file.js";

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

动态脚本元素，就是说 <script> 标签不是写死在HTML中的，而是由现有的脚本生成的，因为 <script> 标签也是DOM元素的一种，而JavaScript是可以通过DOM API操作DOM的。动态脚本只有在新建的script元素被添加到html文档时开始下载，下载完立即执行。

无阻塞脚本的好处就是不会阻塞UI的执行，也不会影响其他同步js代码的执行，不无阻塞脚本改变了脚本的加载顺序，所以在使用无阻塞脚本时候一定要更加注意脚本之间的依赖关系，保证整个页面的脚本都能正常执行。

使用无阻塞脚本了，代码置于head标签还是html文档底部也就无关紧要了。

页面加载的总时间不是衡量页面加载快捷的标准，页面同步阻塞加载的时间才是衡量页面加载效率的准确标准，非阻塞脚本加载可能会增加整个页面加载的时间，但是它可以减少页面阻塞加载的时间。

脚本的异步执行，会产生前后依赖的问题。在脚本加载执行完毕后，非ie浏览器会触发该 <script> 元素的 onload 事件，ie浏览器下有onreadystatechange事件，我们可以将回调放到这个事件中处理。

每当浏览器解析到<script>标签（无论内嵌还是外链）时，浏览器会优先下载、解析并执行该标签中的javaScript代码，而阻塞其后所有页面内容的下载和渲染。（也就是说外部js的下载也会阻塞别的线程，目前有少部分浏览器支持并行下载js）

无阻塞加载脚本技术的核心就是：动态下载js脚本的时候，不会阻塞UI线程的执行。动态脚本为什么不阻塞ui线程？可能是因为浏览器认为动态资源不会影响页面渲染。

让script延迟和异步的两个属性：defer和async

js脚本会改变文档输入流的内容，所以执行js时会暂停页面的渲染。对于内联脚本没什么问题，因为脚本和html文档被同时加载了。但对于外部引入的脚本，脚本的下载（取决于网速）也会阻塞浏览器文档的解析和渲染，甚至会阻塞有些浏览器下载别的资源（目前有些浏览器已经实现并行下载）。所以出现defer和async属性，优化页面的显示。

defer（延迟）是html4.0中定义的，该属性使得浏览器能延迟脚本的下载，等document文档载入和解析完成后，按照他们在文档中出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body底部的效果，会在document的DOMContentLoaded事件之前执行。

将脚本放在body底部比给脚本增加defer属性让脚本延迟加载更好。

async（异步）是HTML5新增的属性，该属性的作用是让浏览器能并行下载脚本且不阻塞浏览器的文档解析和渲染，下载完成后脚本立即执行，可能无序执行，取决于下载完成的时间）

若浏览器同时支持上述两种属性且script标签同时具有这两种属性，则async属性会优于defer生效。

在不支持async属性的浏览器里，可以通过动态创建script元素并插入文档中，实现脚本的异步载入和执行：

requirejs就是使用这个方法实现的。

赞 (0)

相关推荐

  • JavaScript中使用Async实现异步控制

    async官方DOC 介绍 node安装 npm install async --save 使用 var async = require('async') js文件 github.com/caolan/asyn- async提供了很多函数用于异步流程控制,下面是async核心的几个函数,完整的函数请看async官方DOC async.map(['file1','file2','file3'], fs.stat, function(err, results) { // results is now

  • 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 关于Javascript中defer和async的区别总结

    关于Javascript中defer和async的区别总结

    首先来看看这三句话: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. <script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • 理解javascript async的用法

    写在前面 本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的async,也会与大家分享下本人对于thunk库与co库的理解.实现的效果:顺序读取出a.txt与b.txt,将读出的内容拼接成为一个字符串. 同步读取 const readTwoFile = () => { const f1 = fs.readFileSync('./a.txt'), f2 = fs.readFileSync('./b.txt'); return Buffer.concat([f1, f2]).

  • Javascript中的async awai的用法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享async / await是如何工作的,阅读本文前,希望你具备Promise.generator.yield等ES6的相关知识. 在详细介绍async / await之前,先回顾下目前在ES6中比较好的异步处理办法.下面的例子中数据请求用Node.js中的request模块,数据接口采用Github v3

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • JavaScript无阻塞加载和defer、async详解

    JavaScript无阻塞加载和defer、async详解

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时

  • Javascript无阻塞加载具体方式

    看了<高性能JavaScript>的读书笔记 几个原则: 1.将脚本放在底部 <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面. <script>放在</body>前. 2.成组脚本 由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能.适用于内联脚本和外部脚本. 3.非阻塞脚本 等页面完成加载后,再加载js代码.也就是,在window.load事件发出后开始下

  • JavaScript图片懒加载的优化方法详解

    JavaScript图片懒加载的优化方法详解

    目录 一.方法一 二.方法二 InterSectionObserver 总结 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li>

  • 重写document.write实现无阻塞加载js广告(补充)

    无阻塞加载javascript,对于页面性能优化有很大的作用,这样能有效的减少js对页面加载的阻塞.特别是一些广告js文件,由于广告内容有可能是富媒体,更是很可能成为你页面加载提速的瓶颈,高性能javascript告诉我们,同学,提升你的网页速度,就无阻塞地加载JS吧. 于是便有一下代码出现. (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.

  • 用js的document.write输出的广告无阻塞加载的方法

    用js的document.write输出的广告无阻塞加载的方法

    一.广告代码分析 很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接. 复制代码 代码如下: <script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script> 这个java

  • 无阻塞加载js,防止因js加载不了影响页面显示的问题

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

  • JavaScript懒加载与预加载原理与实现详解

    目录 1.懒加载 1.1.什么是懒加载 1.2.为什么要使用懒加载 1.3.懒加载的优点 1.4.懒加载的原理 1.5.懒加载的实现步骤 1.6.懒加载的实现方式 2.预加载 2.1.什么是预加载 2.2.为什么要使用预加载 2.3.实现预加载的方法 1.懒加载 1.1.什么是懒加载 懒加载也可以叫做延迟加载,当访问一个页面的时候,先把img元素伙食其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样只需要请求一次,俗称占位图): 只有当图片出现在浏览器的可视区域内时,才这只图片真正

  • Vue首页界面加载优化实现方法详解

    Vue首页界面加载优化实现方法详解

    目录 1.路由懒加载 2.js 资源异步加载 3.图片懒加载 4.组件分包懒加载-在视口才加载 1.路由懒加载 问题: 项目在打包时会将首页与其他页面的资源打包到同一个资源文件,造成首页加载的资源文件过大. 解决方法: 路由懒加载:打包时会将每个路由页面拆分成单独的 js 资源,同时跳转到对应页面才会加载对应路由的 js 资源. { path: "/about", name: "about", component: () => import(/* webpac

  • umi插件开发仿dumi项目加载markdown文件实现详解

    目录 引言 为什么不能直接展示markdown chainWebpack webpack loader 实现过程 新建插件 新建loader 新建测试文档 运行项目 解决文件加载类型错误 webpack ruletype 解决错误 引言 前面章节中我们已经顺利将tsx组件转换为页面展示,但是目前提供的功能和umi的约定式路由功能差不多,接下来我们将实现将markdown文件转换为页面展示. 为什么不能直接展示markdown 我们前面所使用的页面写法都是react组件式写法,umi通过webpa

  • linecache模块加载和缓存文件内容详解

    linecache模块 接触到linecache这个模块是因为前两天读attrs源码的时候看到内部代码引用了这个模块来模拟一个假文件,带着一脸疑问顺便读了一下这个模块的源码,发现其实也就那么回事儿,代码不多,在这总结一下. linecache模块可以读取文件并将文件内容缓存起来,方便后面多次读取.这个模块原本被设计用来读取Python模块的源代码,所以当一个文件名不在指定路径下的时候,模块会通过搜索路径(search path)来尝试读取文件. 接口 linecache模块的__all__参数其

随机推荐