JavaScript异步编程(二) 异步的脚本加载

异步的脚本加载

问题:

<head>标签里的大脚本会滞压所有页面渲染工作,使页面在脚本加载完毕前一直处于白屏;

<body>标签末尾的大脚本使用户只能看到静态页面,原本应进行渲染的地方却是空的;

解决方案:

对脚本分而治之;

负责让页面更好看、更好用的脚本立即加载,可稍后再加载的脚本稍后再加载。

HTML5的async/defer属性

?<script标签>

经典型和非阻塞型

理想情况下,脚本的加载应该与文档的加载同时进行,并且不影响DOM的渲染。

这样,一旦文档就绪就可以运行脚本,因为已经按照<script>标签次序加载了相应脚本。

大多数浏览器支持一个简单的解决方案:

在<head>标签里放入延迟脚本

<script defer src = “deferredScript.js”>

defer属性:马上开始加载该脚本,但是请等到文档就绪且正在运行的defer脚本结束后再运行它。

不足:并非所有浏览器都支持defer;因此,使用defer应将所有延迟脚本代码都封装在例如jQuery的$(document).ready中。

脚本的完全并行化

async属性

脚本会以任意次序运行,只要JavaScript引擎可用就立即运行,无论文档就绪与否。

→ 对于独立的脚本,异步脚本是性能提升的好方法;

同时支持defer和async的浏览器中,如果脚本属性defer和aysnc都用了的时候,async会覆盖掉defer。

可编程的脚本加载

浏览器API层面的方法:

生成Ajax请求并用eval函数处理响应;

向DOM插入<script>标签。

yepnope的条件加载

yepnope是一个简单轻量级的脚本加载库,其设计目标是服务于最常见的动态脚本加载。

yepnope({

load: ‘XX.js’,

callback: function() {

}

});

时间: 2024-10-26 05:33:14

JavaScript异步编程(二) 异步的脚本加载的相关文章

JavaScript学习--Item26 异步的脚本加载

先来看这行代码: <script src = "allMyClientSideCode.js"></script> 这有点儿--不怎么样."这该放在哪儿?"开发人员会奇怪,"靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?"这两种做法都会让富脚本站点的下场很凄惨.<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于"白屏死机&

你不知道的JavaScript--Item26 异步的脚本加载

先来看这行代码: <script src = "allMyClientSideCode.js"></script> 这有点儿--不怎么样."这该放在哪儿?"开发人员会奇怪,"靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?"这两种做法都会让富脚本站点的下场很凄惨.<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于"白屏死机&

JavaScript异步编程设计快速响应的网络应用

JavaScript已然成为了多媒体.多任务.多内核网络世界中的一种单线程语言.其利用事件模型处理异步触发任务的行为成就了JavaScript作为开发语言的利器.如何深入理解和掌握JavaScript异步编程变得尤为重要!!!<JavaScript异步编程设计快速响应的网络应用>提供了一些方法和灵感. 一.深入理解JavaScript事件 1. 事件的调度 JavaScript事件处理器在线程空闲之前不会运行(空闲时运行). var start = new Date(); setTimeout

JavaScript 异步编程

JavaScript 异步编程 第一章 深入理解JavaScript事件 1. javascirpt一般是单线程执行,setTimeout 和 setInterval 仅当cpu空闲时执行. var start = new Date; setTimeout(function(){ var end = new Date; console.log('Time elapsed:', end - start, 'ms'); }, 500); while (new Date - start < 1000)

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

【Hight Performance Javascript】——脚本加载和运行

脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析.翻译页面. 浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行代码,这又要占用一些时间.此过程中,页面解析和用户交互是被完全阻塞的. 将脚本放在底部 合并脚本减少个数 延迟脚本(defer) <script src="file1.js" defer></s

Javascript异步编程之二回调函数

上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以自行google一下. 传统的同步函数需要返回一个结果的话都是通过return语句实现,例如: function foo() { var a = 3, b = 2; return a+b; } var c = foo(); console.log(c); //5 就是说后面的代码console.lo

JavaScript异步编程(一) 深入理解JavaScript事件

JavaScript异步编程 深入理解JavaScript事件 ?事件的调度 JavaScript事件处理器在线程空闲之前不会运行 线程的阻塞 var start = new Date(); // setTimeout和setInterval的计时精度比期望值差 setTimeout(function(){ var end = new Date(); console.log('Time elapsed', end - start, 'ms'); }, 500); while(new Date -

探索Javascript异步编程

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入.大家需要根据自己的情况选择一个适于自己的方法. 笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题. JavaScript 异步编程简介 回调函数和异步执行 所谓的异步指的是函数的调