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.

时间: 2024-10-11 17:30:31

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

cocos2dx lua中异步加载网络图片,可用于显示微信头像

最近在做一个棋牌项目,脚本语言用的lua,登录需要使用微信登录,用户头像用微信账户的头像,微信接口返回的头像是一个url,那么遇到的一个问题就是如何在lua中异步加载这个头像,先在引擎源码里找了下可能会提供这个功能的地方,发现好像没有提供类似功能,那么只能自己动手写.所以我在ImageView这个类里面添加了一个成员方法,其实可以不写在ImageView里,而且我觉得非必需情况下还是不要修改引擎源码的好,因为如果源码改动比较多的话,将来引擎版本升级会比较麻烦.我写在ImageView里纯粹是想偷

高性能网站优化-确保异步加载脚本时保持执行顺序

<高性能网站建设进阶指南> 脚本如果按照常规方式加载,不仅会阻塞页面中其他内容的下载,还会阻塞脚本后面所有元素的渲染.异步加载脚本可以避免这种阻塞现象,从而提高页面加载速度.但是性能的提升是要付出代价的.代码的异步执行可能会出现竞争状态.简单地说就是页面内部的脚本需要的标示符如果是在外部文件中定义的,而当外部文件异步加载的时候,如果没有保证外部文件和内部脚本执行顺序,很有可能会出现未定义标示符的错误 当异步加载的外部脚本与行内脚本之间存在代码依赖时,就需要通过一种保证执行顺序的方法来整合这两个

异步加载脚本和样式

<script>         window.onload = function () {             loadScriptURL('script/head.js')             loadScriptcode('alert("hahaha");');             loadStyleURL('a.css');             var csscode = '#box{background:red}';             loa

异步加载脚本保持执行顺序

首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错. 采用Script Dom技术测试: 代码: <script type="text/javascript"> var scriptElem = document.createElement('script');  scriptElem.src = "js/jquery-2.1.1.js"; document.getElementsByTagName('head')[0].a

浅谈android中异步加载之&quot;取消异步加载&quot;二

首先,我得解释一下为什么我的标题取消异步加载打引号,这是因为可能最后实现效果并不是你自己想象中的那样.大家看取消异步加载,这不是很简单吗?AsyncTask中不是有一个cancel方法吗?直接调用该方法不就行了吗?但是事实上是这样的吗?如果真是这样,我相信我就没有以写这个作为一篇博客的必要了.为什么会有这样的想法呢?实际上源于我上一篇中Demo中的一个BUG,然后解决该BUG,需要去取消异步任务,是怎么样,我们不妨来看看. 首先,还是来一起回顾一下上篇博客中加载进度条Demo吧. AsyncTa

iOS中异步加载数据效率更高

在开发中有得时候虽然也能从服务器返回来数据,但是我们要根据实际情况,加快数据的显示,所以我们使用异步加载数据. 下面我们看一下如何异步加载数据 dispatch_async(dispatch_get_global_queue(0, 0), ^{ //下载数据(这里写的是使用AFNetWorking请求的数据) dispatch_async(dispatch_get_main_queue(), ^{ //更新视图(这里写的是,要把数据显示出来) }); });

WinForm中异步加载数据并使用进度条

在WinForm程序中,有时会因为加载大量数据导致UI界面假死,这种情况对于用户来说是非常不友好的.因此,在加载大量数据的情况下,首先应该将数据加载放在另一线程中进行,这样保证了UI界面的响应:其次可以提供一个进度条使用户明白程序正在加载数据,同时清楚知道目前加载的进度. 实现上述功能的一个简单的方式是利用 System.ComponentModel 中的工具类:BackgroundWorker,它支持取消,进度报告,异常转发,并且实现了 IComponent 接口,意味着可以直接在VS设计器中

iOS UITableView中异步加载图片 - 解决方案

问题背景: 需要在UITableView中的每一行下载图片,之前使用placeholder,下载好后存在cache中. 解决方案: 方案一: 使用SDWebImage:https://github.com/rs/SDWebImage 如何安装及使用在git页面有详细解释,具体使用的代码: #import <SDWebImage/UIImageView+WebCache.h> ... - (UITableViewCell *)tableView:(UITableView *)tableView

关于异步加载的 javascript 不出现在 chrome 开发者工具的 source 中的解决方法

首先,当你看到这篇文章时,我相信你已经是一个中级甚至是高级的前端开发了. 因为异步加载 javascript 这样的做法,在一些中小型项目几乎是看不到的. 而异步加载 javascript 归根到底,是为了性能优化,防止 JS 加载造成页面阻塞. 会注意到性能,说明你已经不再是一个停留在实现层面的前端开发了,而是一个有着更高追求的人. 在此,向所有有追求的人点赞~~~ 昨天为公司的项目做前端优化,其中一项就是做脚本异步加载. 但是奇怪的是,异步加载的 js 出现在 chrome 开发者工具的 n