Non-blocking JavaScript 的問題 - IE 的 window.onload 事件

标签: non blocking javascript | 发表时间:2011-02-17 08:24 | 作者:(author unknown) Kejun
出处:http://josephj.com/

很讚的 Non-blocking JavaScript

前陣子將網站的所有 JavaScript 採用 Non-blocking 的方式做載入,整個介面 rendering 的時間減少很多,是我們想要的效果:

(function(){
  var scriptEl   = document.createElement("script");
  scriptEl.src   = "foo.js";
  scriptEl.type  = "text/javascript";
  scriptEl.async = true;
  document.getElementsByTagName("head")[0].appendChild(scriptEl);
}());

IE 獨有的鬼打牆問題

但是今天在 IE 發現了一個蠻嚴重的問題:「假設用 Non-blocking 的方式在 head 載入某 JavaScript ,而此 JavaScript 有指定 window 的 load 的事件處理函式,會發現它常常沒有被觸發。

IE 對 window.onload 的時間觸發點與其他瀏覽器不同

Nicholas C. Zakas 的 The truth about non-blocking JavaScript 有提到:

These three techniques for non-blocking JavaScript ensure that the downloading of the resource doesn’t block either rendering or the download of other resources on the page during page load. The little-known or understood aspect of all three approaches is that they are all defined to block the load event. That means adding scripts using any of these techniques during page load will delay execution of the window.onload event handler until all scripts have executed. All browsers obey this behavior except for Internet Explorer (even through version 9).

中文的意思是,Non-blocking 的所有方法都會對 onload 事件造成延遲、必須要等到指定的 JavaScript 讀取完畢才會真正執行,但 IE 是唯一的例外。所以在 IE 當網頁實際讀取完畢(onload)的時間點早於 JavaScript 被執行的時間點時,JavaScript 中所撰寫的 window load 事件就不會生效了...

範例網頁:除了 IE,其他瀏覽器都會跳出 alert 訊息。

所衍生的問題

看起來,似乎我們只要避免去綁 window 的 load 事件即可,但是現在的 JavaScript 函式庫大多有做一些偵測,例如我們想要當某個 div 內容讀取完畢時就做某些動作,此時便使用 YUI 的 contentready 事件,但是 contentready 事件又會去檢查 window 的 load 事件,如果剛好又滿足前段所提的條件時,我們這個 contentready 就永遠不會被觸發

目前只能先改用不會檢查 load 的 available 方法來達成,也在 YUI Forum 提出了這個問題。希望大家能夠幫我想想有沒有其他好解法。

相关 [non blocking javascript] 推荐:

Non-blocking JavaScript 的問題 - IE 的 window.onload 事件

- Kejun - 這樣做就對了!
很讚的 Non-blocking JavaScript. 前陣子將網站的所有 JavaScript 採用 Non-blocking 的方式做載入,整個介面 rendering 的時間減少很多,是我們想要的效果:. 但是今天在 IE 發現了一個蠻嚴重的問題:「假設用 Non-blocking 的方式在 head 載入某 JavaScript ,而此 JavaScript 有指定 window 的 load 的事件處理函式,會發現它常常沒有被觸發.

Api Blocking

- - xiaobaoqiu Blog
4.RateLimiter实现限流. 接口限流是保证系统稳定性的三大法宝之一(缓存, 限流, 降级).. 本文使用三种方式实现Api限流, 并提供了一个用Spring实现的Api限流的简单Demo, Demo的git地址: https://github.com/xiaobaoqiu/api-blocking.

Jmeter以non-gui模式进行分布式测试 - qianyiliushang

- - 博客园_首页
由于Jmeter是一个纯JAVA的应用,用GUI模式运行压力测试时,对客户端的资源消耗是相当惊人的,所以在进行正式的压测时一定要使用non-gui模式运行,如果并发数很高或者客户端的硬件资源比较一般的话,还可以以server模式用多个client进行分布式测试. 一直有朋友问我这个分布式测试要怎么用,我就结合官方文档和自己的实际经验来谈一谈.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex's Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客
  注:本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文.   如果三年前你问我应该学什么语言,我会告诉你是Ruby.   如果你现在想学一门语言的话,你应该学习JavaScript..   我认为,每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.

javascript 贪食蛇

- Xin - 博客园-首页原创精华区
我的程序用javascript与Html中的table结合,实现的简单的贪食蛇游戏,游戏的主要特点,可调整蛇移动速度,可调整蛇移动范围,碰壁、咬到身体则“Game Over. 游戏并不完善,只是实现了主要的功用,有设计不合理的地方,欢迎您感大家提意见.        实现方法:由javascript语言中的setInterval方法驱动整个游戏程序,设置“nowDirection”即蛇的当前移动方向为全局变量,由setInterval方法定时获取蛇的移动方向,由document.onkeydown()捕捉当前按键(上、下、左、右)以修改nowDirection,这样就可以用方向按键控制蛇周期时间的定向移动.

你不懂Javascript

- 英建 - 黑客志
过去几年我注意到技术圈一个很奇怪的现象,有太多程序员将那些他们只是有过非常浅显的了解,但其实根本就不懂的技术写到他们的简历中,这个现象几乎每种语言都有,但这其中最严重的就要数Javascript了. 出现这种状况的一个很大的原因就是现如今几乎每个开发者的工作都或多或少要依赖于Javascript,但大多数人并不真的理解这门语言,他们常用的学习方式是复制粘贴,使用这种方式,你永远不会真正学会这门语言,而只能得到一个你已经懂了的假象.