應(yīng)該IT168寫(xiě)的專稿;http://tech.it168.com/j/2007-09-19/200709191556778.shtml
JavaScript是Widgets應(yīng)用的瓶頸嗎？
在過(guò)去的一年或者現(xiàn)在，互聯(lián)網(wǎng)已經(jīng)顯示出，因Widgets的使用而呈現(xiàn)爆炸式趨勢(shì)。Widget如今已是大行其道，當(dāng)然也少不了“2007年將是Widget年”這樣的呼聲。
少量的幾行JavaScript代碼就可以使自己的Blog面貌煥然一新，這也許就是JavaScript在Blog時(shí)代流行的成功之處。從而，各種Blogging技術(shù)也是層出不窮，你方唱罷我登場(chǎng)。Widgets、共享小工具、訪問(wèn)跟蹤、廣告等等。很多情況下，Blogger們只是為了追求新玩意而在自己的Blog上寫(xiě)上幾行JavaScript代碼，殊不知，許多這樣的小玩意拼在一個(gè)頁(yè)面里的時(shí)候，它們成了頁(yè)面加載的瓶頸。那么，JavaScript成了Web 的瓶頸了嗎？其解決辦法或出路在哪呢？這些正是本文所要探討的內(nèi)容。在本文中，只討論基于Web的Widgets，不涉及其他的桌面Widgets（Desktop Widgets），比如Yahoo和Microsoft的Vista等。
一、 引言
隨著網(wǎng)絡(luò)的發(fā)展，Blogger數(shù)量飛速增長(zhǎng)，很多Blogger都很關(guān)注自己Blog的美化，在這種需求下面，出現(xiàn)了很多提供Wdgets服務(wù)的網(wǎng)站，只要把相應(yīng)的Widgets代碼插入Blog相應(yīng)位置，就可以得到漂亮的效果。
Widgets gallery ：提供很多漂亮Widgets；
Widgetbox：為網(wǎng)站或Blog提供Widgets的服務(wù)；
GoodWidgets：提供在Blog顯示Flickr圖片服務(wù)的Widgets；
…………………..
這樣的信息在網(wǎng)上是一查一大堆。
在物理學(xué)上有種現(xiàn)象叫非線性振動(dòng)。當(dāng)不同的力量相互作用時(shí)，其結(jié)果并非線性的進(jìn)行疊加，而是難以預(yù)測(cè)。而這在軟件行業(yè)也不例外——當(dāng)將許多的組件放堆在一塊的時(shí)候，最后連自己都弄不明白到底想要做什么了。在Blog上，加載了許多Widgets的頁(yè)面，每個(gè)組件都是獨(dú)立的運(yùn)作，以達(dá)到充分的吸引瀏覽者的目的。然而，結(jié)果往往是，這種看似豐富而其實(shí)是雜亂無(wú)章的東西，不但讓瀏覽者很厭惡，同時(shí)，使Blogger也是疲于維護(hù)與整理，最后大家都失望。
二、 Bloggers——受害者
一個(gè)互聯(lián)網(wǎng)Widget最值得描述的，就是迷你式（傻瓜式）的應(yīng)用程序，將功能添加到網(wǎng)頁(yè)、Blog等。如果喜歡某一個(gè)Widget，只要簡(jiǎn)單的復(fù)制和粘貼代碼到網(wǎng)頁(yè)的HTML程序內(nèi)，相片的列表、新聞、視頻、廣告、Mp3播放器以及豐富的計(jì)數(shù)器等就會(huì)出在頁(yè)面相關(guān)的位置！還可以對(duì)它進(jìn)行命名。
Widgets宣稱可以使網(wǎng)站更加的漂亮化。而對(duì)于追求開(kāi)放與個(gè)性化的Blogger而言，這無(wú)疑是天大的福音。于是Blogger們紛紛在自己的Blog上加上了許多漂亮的Wedgets，如Flicker，Twitter，Sphere等等。如下所示：
請(qǐng)將下面的HTML代碼復(fù)制到您的頁(yè)面中：請(qǐng)注意，為了保證即使twitter.com沒(méi)有加載的情況下不影響您的頁(yè)面加載，請(qǐng)從第二行開(kāi)始復(fù)制，即從<script type=”text/javascript”…>開(kāi)始，復(fù)制到頁(yè)面的底部，在</body>中上。
圖1.在Blog上加載Widgets的代碼示意圖
如果對(duì)HTML及Blogging平臺(tái)有一定了解的話，在Blog中加入Widgets是件很容易的事情。只需要將HTML代碼復(fù)制到相關(guān)網(wǎng)頁(yè)的代碼中去。有些時(shí)候，需要將代碼插入到HTML文檔的頭部，但這并沒(méi)有難度。此外，還可以利用一些輔助工具進(jìn)行安裝Widgets，如可以采用Widgetbox平臺(tái)來(lái)進(jìn)行輔助安裝。
安裝Widgets是如此的簡(jiǎn)單，于是Blogger們紛紛來(lái)者不拒，讓Widgets在自己的Blog中遍地開(kāi)花。然而否極泰來(lái)，樂(lè)極生悲，這常常導(dǎo)致頁(yè)面加載的時(shí)候加長(zhǎng)，會(huì)降低網(wǎng)站速度。在比較好的情況下，使用的Widgets 來(lái)自一個(gè)穩(wěn)定快速的服務(wù)器；比較糟糕的是你使用的 Widgets 來(lái)自一個(gè)不穩(wěn)定的服務(wù)器，那對(duì)網(wǎng)站的影響就會(huì)很大。不管是上面兩種情況的那一種，完成網(wǎng)站的加載和渲染都取決于第三方服務(wù)器上的代碼運(yùn)行速度，即使是一個(gè)成熟穩(wěn)定的Widgets，它也需要時(shí)間來(lái)反應(yīng)，這仍然會(huì)造成網(wǎng)站加載速度的減慢。
三、 JavaScript Widgets
實(shí)現(xiàn)Widgets的主流技術(shù)有Flash和JavaScript。Flah Widgets有它自身的問(wèn)題。例如感覺(jué)很笨重，大小不可改變及不能操作DOM模型。當(dāng)然，這并不是僅僅Flash Widgets的缺陷，JavaScript Widgets也難以脫俗。
大多數(shù)使用Widgets 的方式有兩種：Raw 式嵌入或 JavaScript 式嵌入。
raw 式嵌入通常是提供一個(gè) Object/embed代碼，來(lái)直接實(shí)現(xiàn)一個(gè) Flash Widget，這種方法的優(yōu)點(diǎn)是它可以在不允許使用 JavaScript 式嵌入的網(wǎng)站上運(yùn)行；缺點(diǎn)是：許多人不喜歡把 Object/embed 代碼直接放在他們的頁(yè)面上；另外有些Widgets 不是基于Flash 的；最后Widgets 的作者不能對(duì)已嵌入的Widgets 進(jìn)行太大修改變化。
JavaScript 式嵌入使用了腳本，包括遠(yuǎn)程部署代碼進(jìn)入用戶的網(wǎng)站，優(yōu)點(diǎn)是：它更簡(jiǎn)潔也更靈活，它的缺點(diǎn)是：它或多或少的增加了網(wǎng)站加載時(shí)間，而且一旦出現(xiàn)問(wèn)題，網(wǎng)站加載時(shí)間將成倍的增加。
JavaScript從一開(kāi)始就被設(shè)計(jì)成一種輕量級(jí)的便于操作HTML文檔但互操作性最小化的客戶端語(yǔ)言。但從以往技術(shù)發(fā)展的曲線來(lái)看，JavaScript正在向一種Web編程語(yǔ)言發(fā)展。從Ajax到Widgets，JavaScript被應(yīng)用到許多它所適應(yīng)范圍邊際上的項(xiàng)目中去。由于，問(wèn)題就開(kāi)始出現(xiàn)了。
程序員對(duì)JavaScript最大的詬病莫過(guò)于它的單線程模式。JavaScript里是沒(méi)有線程的，當(dāng)然你可以嘗使用setTimeout來(lái)試試（這個(gè)函數(shù)的功能是延時(shí)執(zhí)行某一個(gè)函數(shù)）。但這并不是真正意見(jiàn)上的多線程。這意味著JavaScript中的代碼只能是順序的執(zhí)行，沒(méi)有并發(fā)性（當(dāng)然除了Ajax調(diào)用之外）。于是，當(dāng)任何時(shí)候，一段JavaScript代碼片段在加載或執(zhí)行的時(shí)候，其它什么事情都干不了。這和下圖所示的現(xiàn)象是不是一樣呢？
圖2.JavaScript中的“單線程”
這意味著，一行行額外加載的JavaScript代碼往往導(dǎo)致整個(gè)頁(yè)面加載速度的降低。而這正是在Blog社區(qū)正在發(fā)生著的問(wèn)題。那辦法或是解決出路在哪呢？
四、 JavaScript Widgets能加速嗎？
遺憾的是，世上并沒(méi)有通萬(wàn)病的解藥。至今還沒(méi)在給JavaScript Widgets加速的簡(jiǎn)單而快速的方法。但是一些組織或公司正在嘗試使用一些復(fù)合的技術(shù)來(lái)對(duì)加快頁(yè)面的加載速度。但舊問(wèn)題還沒(méi)解決，這種混合的技術(shù)又帶來(lái)了新的問(wèn)題，可謂一物生一物，雪上加霜。但JavaScript作為客戶編程的一種主流及主要的技術(shù)，在必要從行業(yè)或是領(lǐng)域的角度來(lái)考慮解決這一問(wèn)題的辦法。下面是一些JavaScript設(shè)計(jì)們似乎應(yīng)該考慮的若干建義及設(shè)想：
（1） JavaScript區(qū)分執(zhí)行
經(jīng)常碰到的一個(gè)問(wèn)題是所有的JavaScript都想立即運(yùn)行，獨(dú)木橋人人想過(guò)。那么，我們是不是可以這么設(shè)計(jì)，在頁(yè)面加載的時(shí)候，對(duì)那些不怎么改變頁(yè)面的JavaScript代碼，是不是可以等到頁(yè)面最終加載完后最執(zhí)行呢？這樣，頁(yè)面的可見(jiàn)內(nèi)容就可以快速出來(lái)。但遺憾的是，所有的瀏覽器都沒(méi)在這樣實(shí)現(xiàn)。
（2） 最小化加載時(shí)的代碼
眾所周知，任何頁(yè)面加載時(shí)運(yùn)行的代碼都會(huì)降低頁(yè)面的展現(xiàn)速度。加載時(shí)運(yùn)行的代碼越小，頁(yè)面就越快速出來(lái)。而另一個(gè)相關(guān)的問(wèn)題是，在整個(gè)頁(yè)面查找某些內(nèi)容。這往往容易導(dǎo)致無(wú)回應(yīng)腳本對(duì)話框的出現(xiàn)，任何JavaScript代碼運(yùn)行超過(guò)幾秒鐘(如5秒)就會(huì)發(fā)生這種錯(cuò)誤。而使用timouts來(lái)將很長(zhǎng)的JavaScript代碼分開(kāi)執(zhí)行，也許是一條不二的選擇，當(dāng)然人人認(rèn)為這樣做也會(huì)很痛苦。
（3） 采用不同的URLs來(lái)平衡請(qǐng)求
在比較好的情況下，你使用的Widgets 來(lái)自一個(gè)穩(wěn)定快速的服務(wù)器；比較糟糕的是你使用的Widgets 來(lái)自一個(gè)不穩(wěn)定的服務(wù)器，那對(duì)你的網(wǎng)站的影響就會(huì)很大。一些Widgets一般都給出相同的URL，如 www.mycoolwidget.com。當(dāng)許多的請(qǐng)求者對(duì)同一臺(tái)Widgets服務(wù)器并發(fā)請(qǐng)求時(shí)，服務(wù)器的負(fù)載就成了問(wèn)題。最好的辦法是給出不同的URLs，例如，server1.mycoolwidget.com, server2.mycoolwidget.com等。雖然他們還是指向同一個(gè)域，但長(zhǎng)遠(yuǎn)來(lái)看，這無(wú)疑是一個(gè)化解擁擠的好辦法。
（4） 使用標(biāo)準(zhǔn)類庫(kù)
在軟件行業(yè)最痛苦的事情莫過(guò)于重復(fù)發(fā)明輪子。因?yàn)?/span>JavaScript很容易出錯(cuò)，而又不像Java那樣提供豐富的類庫(kù)，但是像prototype 以其高效性，正在成為標(biāo)準(zhǔn)類庫(kù)。Prototype 1.6剛發(fā)布了。Prototype由于富在經(jīng)驗(yàn)的JavaScript人員開(kāi)發(fā)，因此此類庫(kù)的價(jià)值非常高。
（5） 容器化
如果不知道Widgets誰(shuí)將使用或會(huì)使用在哪，還在哪些其它的Widgets已經(jīng)安裝了，如果沒(méi)有這些信息，使用JavaScript變得比較困難。但JavaScript愛(ài)好者不用悲觀，因?yàn)檫€在很多事情可以做。
如果我們看一看Java 社區(qū)，這樣類似的問(wèn)題已經(jīng)被解決了很多次了。真可謂是相見(jiàn)恨晚。大名鼎鼎的Applets、Servlets及企業(yè)級(jí)JavaBeans，其實(shí)這些東西和Widgets相比，最大的區(qū)別在于，前者被一個(gè)容器來(lái)管理，而Widgets沒(méi)有。這就是問(wèn)題的解決辦法。
容器提供各種基礎(chǔ)的服務(wù)及接口之間的通信。它負(fù)責(zé)處理加載、卸載、回調(diào)、單擊、提示等內(nèi)容，這些開(kāi)發(fā)人員喜愛(ài)而非技術(shù)人員厭惡聽(tīng)到的東西。總的來(lái)說(shuō)，JavaScript需要一個(gè)容器來(lái)將JavaScript的有序變成無(wú)序。
（6） WEDJE
提供一個(gè)Raw 式嵌入還是必要的，因?yàn)椴皇敲總€(gè)網(wǎng)站都允許使用 JavaScript 式嵌入，但是如果Widgets 是使用在人們自己網(wǎng)站或Blog上，JavaScript 式嵌入仍然是一個(gè)更理想方法。所以，為了兼容這兩種方式，設(shè)想一種新的方案：WEDJE（Widget Enabled DOM JavaScript Embedding）。
Standard document.write：大多數(shù)的 JavaScript式嵌入是簡(jiǎn)單的使用 document.write 來(lái)把代碼寫(xiě)入頁(yè)面，問(wèn)題是，如果Widgets 服務(wù)器停了，其余網(wǎng)站就不能運(yùn)行Widgets 了，直到 JavaScript自己停止，很多人誤以為可以對(duì)其使用延遲屬性來(lái)防止這種事情的發(fā)生，但延遲屬性完全阻止了 document.write ，所以它不是一個(gè)好的解決辦法。
延遲 innerHTML 代碼：另外一種JavaScript式嵌入的方法是加入帳號(hào)機(jī)制，增加一個(gè)延遲參數(shù)來(lái)加載JavaScript，在script 加載完后使用 innerHTML 來(lái)寫(xiě)入。這似乎很不錯(cuò)，但在實(shí)際中，不同的瀏覽器的效果都不同。
五、 小論
在過(guò)去的一年或者現(xiàn)在，互聯(lián)網(wǎng)已經(jīng)顯示出，因Widgets的使用而呈現(xiàn)爆炸式狀態(tài)。Widget如今已是大行其道，也有很多關(guān)于“2007年將是Widget年”的呼聲。它首先對(duì)于網(wǎng)站（Widget提供方）的推廣是很有益處的，甚至可以說(shuō)是不二的營(yíng)銷手段。Widgets和JavaScript工具變得越來(lái)越酷及使用更方面時(shí)，想要變得更好時(shí)，卻發(fā)現(xiàn)沒(méi)有基本的基礎(chǔ)性的東西來(lái)支撐。Blog變得越來(lái)越慢了，這得歸咎于越來(lái)越多的Widgets和JavaScript的濫用。而要求Blogger們理解各種Widgets混合使用會(huì)導(dǎo)致的問(wèn)題，這似乎超出了Blogger們的心理防線。
此外，我們需要在發(fā)布Widgets時(shí)，要求按一定標(biāo)準(zhǔn)和準(zhǔn)則。最好的參照軟件行業(yè)中已有的成功經(jīng)驗(yàn)。Java社區(qū)有很多成功且很值得借鑒的經(jīng)驗(yàn)。