WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

Running scripts in WebKit

Posted by Tony Gentilcore on Friday, September 17th, 2010 at 10:10 am

WebKit nightly builds now support the HTML5 async and defer script attributes. This makes it easier for web pages to load faster by downloading JavaScript without blocking other elements of the page.

Normally when the parser encounters an external script, parsing is paused, a request is issued to download the script, and parsing is resumed only after the script has fully downloaded and executed.

<script src="myBlockingScript.js"></script>

During the download the browser is blocked from doing other useful work, such as parsing HTML, executing other scripts and performing layout. Although partially mitigated by WebKit’s preload scanner, which speculatively looks ahead for resources to download during the down time, network latency still slows down some pages.

There are many clever techniques for working around this performance bottleneck, but they all involve extra code and browser-specific hacks. Instead, scripts which do not require synchronous execution can now be marked as either async or defer. Here’s how they work.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

Here is an example of an external script which takes 1 second to download followed by an inline script which takes 1 second to execute. We can see that the page loads in about 2 seconds.

Here is the same example, but this time the external script is deferred. Since the second script can execute while the first is downloading, the page now loads about twice as fast.

In addition to upcoming versions of WebKit-based browsers, Firefox has long supported the defer and onload attributes and support for async was added in version 3.6. Internet Explorer has also long supported the defer attribute. While async is not yet supported, support for the onload attribute was added in version 9.

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.

时间: 2015-02-28

WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度的相关文章

使用Jquery在一个jsp页面的一个div中异步加载子页面的问题

问题描述 请先看代码:A页面的代码:<html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="ab.js"></script> </head> <body>&l

异步加载:ControlJS让脚本加载更快的一个模块

文章简介:关于ControlJs的使用和基础讲解. 关于ControlJs一共有三篇文章,这是第一部分.ControlJS是让脚本加载更快的一个模块(a javascript module for making scripts load faster). 三篇文章的结构分别为: 1. async loading2. delayed execution3.overriding document.write关于第一部分的异步加载,这个的关键在于尽快将页面作为html绘制出来,然后再用javascri

JavaScript异步加载浅析_javascript技巧

前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

[Unity3D]异步加载游戏场景与异步加载游戏资源进度条

摘要: 异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel("yourScene"); 这句代码执行完毕后程序会干什么呢??如下 ...     异步任务相信大家应该不会陌生,那么下面介绍一下Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel("yourScene");  这句代码执行

Android之数据存储----使用LoaderManager异步加载数据库

一.各种概念: 1.Loaders: 适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中异步加载数据,一般适用于大量的数据查询,或者需要经常修改并及时展示的数据显示到UI上,这样可以避免查询数据的时候,造成UI主线程的卡顿. 即使是查询SQLite数据库,用Loaders来操作会更加的简便. Loaders有以下特点: 可以适用于Activity和Fragment. 可以提供异步的方式

js异步加载Javascript代码示例详解

当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:  代码如下 复制代码 function getScript(url, success) {     var script = document.createElement('script');     script.src = url;     var head = document.getElementsByTagName('head')[0],     do

Android Loader 异步加载详解一:基础概念

转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70241844 本文出自[赵彦军的博客] Android Loader 异步加载详解一:基础概念 Android Loader 异步加载详解二:探寻Loader内部机制 前言 Android 3.0 中引入了 Loader (加载器),支持轻松在 Activity 或片段中异步加载数据. 加载器具有以下特征: 可用于每个 Activity 和 Fragment. 支持异步加载数据.

JSP中使用EasyUI实现异步加载tree(整合Struts 2)

首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/javascript"> $('#mytree').tree({ url:'treeLoad.action' }); </script> 配置Action <struts> <package name="tree_json" extends=&qu

Android中如何异步加载图片

研究了android从网络上异步加载图像,现总结如下: (1)由于android UI更新支持单一线程原则,所以从网络上取数据并更新到界面上,为了不阻塞主线程首先可能会想到以下方法. 在主线程中new 一个Handler对象,加载图像方法如下所示 private void loadImage(final String url, final int id) { handler.post(new Runnable() { public void run() { Drawable drawable =