外文翻譯-responsive interfaces響應(yīng)接口

長江大學(xué)工程技術(shù)學(xué)院畢業(yè)設(shè)計（論文）外文翻譯外文題目RESPONSIVEINTERFACES響應(yīng)接口譯文題目響應(yīng)接口系部信息系專業(yè)班級計算機科學(xué)與技術(shù)61002班學(xué)生姓名指導(dǎo)教師/講師輔導(dǎo)教師完成日期2014年4月18日響應(yīng)接口沒有什么比點擊頁面上的東西卻什么也沒發(fā)生更令人感到挫折了。這個問題又回到了原始網(wǎng)頁交互程序和現(xiàn)在已無處不在的提交表單時彈出的“請勿重復(fù)提交”消息上面。用戶自然傾向于重復(fù)嘗試這些不發(fā)生明顯變化的動作,所以確保網(wǎng)頁應(yīng)用程序的響應(yīng)速度也是一個重要的性能關(guān)注點。第一節(jié)介紹了瀏覽器UI線程概念?？偟膩碚f,大多數(shù)瀏覽器有一個單獨的處理進程,它由兩個任務(wù)所共享JAVASCRIPT任務(wù)和用戶界面更新任務(wù)。每個時刻只有其中的一個操作得以執(zhí)行,也就是說當JAVASCRIPT代碼運行時用戶界面不能對輸入產(chǎn)生反應(yīng),反之亦然?；蛘哒f,當JAVASCRIPT運行時,用戶界面就被“鎖定”了。管理好JAVASCRIPT運行時間對網(wǎng)頁應(yīng)用的性能很重要。瀏覽器UI線程JAVASCRIPT和UI更新共享的進程通常被稱作瀏覽器UI線程雖然對所有瀏覽器來說“線程”一詞不一定準確。此UI線程圍繞著一個簡單的隊列系統(tǒng)工作,任務(wù)被保存到隊列中直至進程空閑。一旦空閑,隊列中的下一個任務(wù)將被檢索和運行。這些任務(wù)不是運行JAVASCRIPT代碼,就是執(zhí)行UI更新,包括重繪和重排版在第三章討論過。此進程中最令人感興趣的部分是每次輸入均導(dǎo)致一個或多個任務(wù)被加入隊列。考慮這樣一個簡單的接口按下一個按鈕,然后屏幕上顯示出一個消息當例子中的按鈕被點擊時,它觸發(fā)UI線程創(chuàng)建兩個任務(wù)并添加到隊列中。第一個任務(wù)是按鈕的UI更新,它需要改變外觀以指示出它被按下了,第二個任務(wù)是JAVASCRIPT運行任務(wù),包含HANDLECLICK的代碼,被運行的唯一代碼就是這個方法和所有被它調(diào)用的方法。假設(shè)UI線程空閑,第一個任務(wù)被檢查并運行以更新按鈕外觀,然后JAVASCRIPT任務(wù)被檢查和運行。在運行過程中,HANDLECLICK創(chuàng)建了一個新的元素,并追加在元素上,其效果是引發(fā)另一次UI改變。也就是說在JAVASCRIPT運行過程中,一個新的UI更新任務(wù)被添加在隊列中,當JAVASCRIPT運行完之后,UI還會再更新一次。當所有UI線程任務(wù)執(zhí)行之后,進程進入空閑狀態(tài),并等待更多任務(wù)被添加到隊列中。空閑狀態(tài)是理想的,因為所有用戶操作立刻引發(fā)一次UI更新。如果用戶企圖在任務(wù)運行時與頁面交互,不僅沒有即時的UI更新,而且不會有新的UI更新任務(wù)被創(chuàng)建和加入隊列。事實上,大多數(shù)瀏覽器在JAVASCRIPT運行時停止UI線程隊列中的任務(wù),也就是說JAVASCRIPT任務(wù)必須盡快結(jié)束,以免對用戶體驗造成不良影響。瀏覽器限制瀏覽器在JAVASCRIPT運行時間上采取了限制。這是一個有必要的限制,確保惡意代碼編寫者不能通過無盡的密集操作鎖定用戶瀏覽器或計算機。此類限制有兩個調(diào)用棧尺寸限制第四章討論過和長時間腳本限制。長運行腳本限制有時被稱作長運行腳本定時器或者失控腳本定時器,但其基本思想是瀏覽器記錄一個腳本的運行時間,一旦到達一定限度時就終止它。當此限制到達時,瀏覽器會向用戶顯示一個對話框。有兩種方法測量腳本的運行時間。第一個方法是統(tǒng)計自腳本開始運行以來執(zhí)行過多少語句。此方法意味著腳本在不同的機器上可能會運行不同的時間長度,可用內(nèi)存和CPU速度可以影響一條獨立語句運行所花費的時間。第二種方法是統(tǒng)計腳本運行的總時間。在特定時間內(nèi)可運行的腳本數(shù)量也因用戶機器性能差異而不同,但腳本總是停在固定的時間上。毫不奇怪,每個瀏覽器對長運行腳本檢查方法上略有不同INTERNETEXPLORER,在第4版中,設(shè)置默認限制為5百萬條語句此限制存放在WINDOWS注冊表中,叫做HKEY_CURRENT_USERSOFTWAREMICROSOFTINTERNETEXPLORERSTYLESMAXSCRIPTSTATEMENTSFIREFOX默認限制為10秒鐘,此限制存放在瀏覽器的配置設(shè)置中在地址欄中輸入ABOUTCONFIG鍵名為DOMMAX_SCRIPT_RUN_TIME。SAFARI默認限制為5秒鐘,此設(shè)置不能改變,但你可以關(guān)閉此定時,通過啟動DEVELOP菜單并選擇“禁止失控JAVASCRIPT定時器”。CHROME沒有獨立的長運行腳本限制,替代以依賴它的通用崩潰檢測系統(tǒng)來處理此類實例。OPERA沒有長運行腳本限制,將繼續(xù)運行JAVASCRIPT代碼直至完成,由于OPERA的結(jié)構(gòu),當運行結(jié)束時它并不會導(dǎo)致系統(tǒng)不穩(wěn)定。當瀏覽器的長時間腳本限制被觸發(fā)時,有一個對話框顯示給用戶,而不管頁面上的任何其他錯誤處理代碼。這是一個主要的可用性問題,因為大多數(shù)互聯(lián)網(wǎng)用戶并不精通技術(shù),會被錯誤信息所迷惑,不知道應(yīng)該選擇哪個選項停止腳本或允許它繼續(xù)運行。如果你的腳本在瀏覽器上觸發(fā)了此對話框,意味著腳本只是用太長的時間來完成任務(wù)。它還表明用戶瀏覽器在JAVASCRIPT代碼繼續(xù)運行狀態(tài)下無法響應(yīng)輸入。從開發(fā)者觀點看,沒有辦法改變長運行腳本對話框的外觀,你不能檢測到它,因此不能用它來提示可能出現(xiàn)的問題。顯然,長運行腳本最好的處理辦法首先是避免它們。多久才算“太久”瀏覽器允許腳本繼續(xù)運行直至某個固定的時間,這并不意味著你可以允許它這樣做。事實上,你的JAVASCRIPT代碼持續(xù)運行的總時間應(yīng)當遠小于瀏覽器實施的限制,以創(chuàng)建良好的用戶體驗。BRENDANEICH,JAVASCRIPT的創(chuàng)造者,引用他的話說,“JAVASCRIPT運行了整整幾秒鐘很可能是做錯了什么”如果整整幾秒鐘對JAVASCRIPT運行來說太長了,那么什么是適當?shù)臅r間事實證明,即使一秒鐘對腳本運行來說也太長了。一個單一的JAVASCRIPT操作應(yīng)當使用的總時間最大是100毫秒。這個數(shù)字根據(jù)ROBERTMILLER在1968年的研究。有趣的是,可用性專家JAKOBNIELSEN在他的著作可用性工程MORGANKAUFMANN,1944上注釋說這一數(shù)字并沒有因時間的推移而改變,而且事實上在1991年被XEROXPARC施樂公司的帕洛阿爾托研究中心的研究中重申。NIELSEN指出如果該接口在100毫秒內(nèi)響應(yīng)用戶輸入,用戶認為自己是“直接操作用戶界面中的對象?！背^100毫秒意味著用戶認為自己與接口斷開了。由于UI在JAVASCRIPT運行時無法更新,如果運行時間長于100毫秒,用戶就不能感受到對接口的控制。更復(fù)雜的是有些瀏覽器在JAVASCRIPT運行時不將UI更新放入隊列。例如,如果你在某些JAVASCRIPT代碼運行時點擊按鈕,瀏覽器可能不會將重繪按鈕按下的UI更新任務(wù)放入隊列,也不會放入由這個按鈕啟動的JAVASCRIPT任務(wù)。其結(jié)果是一個無響應(yīng)的UI,表現(xiàn)為“掛起”或“凍結(jié)”。每種瀏覽器的行為大致相同。當腳本執(zhí)行時,UI不隨用戶交互而更新。此時JAVASCRIPT任務(wù)作為用戶交互的結(jié)果被創(chuàng)建被放入隊列,然后當原始JAVASCRIPT任務(wù)完成時隊列中的任務(wù)被執(zhí)行。用戶交互導(dǎo)致的UI更新被自動跳過,因為優(yōu)先考慮的是頁面上的動態(tài)部分。因此,當一個腳本運行時點擊一個按鈕,將看不到它被按下的樣子,即使它的ONCLICK句柄被執(zhí)行了。盡管瀏覽器嘗試在這些情況下做一些符合邏輯的事情,但所有這些行為導(dǎo)致了一個間斷的用戶體驗。因此最好的方法是,通過限制任何JAVASCRIPT任務(wù)在100毫秒或更少時間內(nèi)完成,避免此類情況出現(xiàn)。這種測量應(yīng)當在你要支持的最慢的瀏覽器上執(zhí)行。用定時器讓出時間片盡管你盡了最大努力,還是有一些JAVASCRIPT任務(wù)因為復(fù)雜性原因不能在100毫秒或更少時間內(nèi)完成。這種情況下,理想方法是讓出對UI線程的控制,使UI更新可以進行。讓出控制意味著停止JAVASCRIPT運行,給UI線程機會進行更新,然后再繼續(xù)運行JAVASCRIPT。于是JAVASCRIPT定時器進入了我們的視野。定時器基礎(chǔ)在JAVASCRIPT中使用SETTIMEOUT或SETINTERVAL創(chuàng)建定時器,兩個函數(shù)都接收一樣的參數(shù)一個要執(zhí)行的函數(shù),和一個運行它之前的等待時間單位毫秒。SETTIMEOUT函數(shù)創(chuàng)建一個定時器只運行一次,而SETINTERVAL函數(shù)創(chuàng)建一個周期性重復(fù)運行的定時器。定時器與UI線程交互的方式有助于分解長運行腳本成為較短的片斷。調(diào)用SETTIMEOUT或SETINTERVAL告訴JAVASCRIPT引擎等待一定時間然后將JAVASCRIPT任務(wù)添加到UI隊列中。此代碼將在250毫秒之后,向UI隊列插入一個JAVASCRIPT任務(wù)運行GREETING函數(shù)。在那個點之前,所有其他UI更新和JAVASCRIPT任務(wù)都在運行。請記住,第二個參數(shù)指出什么時候應(yīng)當將任務(wù)添加到UI隊列之中,并不是說那時代碼將被執(zhí)行。這個任務(wù)必須等到隊列中的其他任務(wù)都執(zhí)行之后才能被執(zhí)行。在這個例子中當按鈕被點擊時,它調(diào)用一個方法然后設(shè)置一個定時器。用于修改NOTICE元素顏色的代碼被包含在一個定時器設(shè)備中,將在250毫秒之后添加到隊列。250毫秒從調(diào)用SETTIMEOUT時開始計算,而不是從整個函數(shù)運行結(jié)束時開始計算。如果SETTIMEOUT在時間點N上被調(diào)用,那么運行定時器代碼的JAVASCRIPT任務(wù)將在N250的時刻加入UI隊列。請記住,定時器代碼只有等創(chuàng)建它的函數(shù)運行完成之后,才有可能被執(zhí)行。例如,如果前面的代碼中定時器延時變得更小,然后在創(chuàng)建定時器之后又調(diào)用了另一個函數(shù),定時器代碼有可能在ONCLICK事件處理完成之前加入隊列VARBUTTONDOCUMENTGETELEMENTBYID“MYBUTTON“BUTTONONCLICKFUNCTIONONEMETHODSETTIMEOUTFUNCTIONDOCUMENTGETELEMENTBYID“NOTICE“STYLECOLOR“RED“,50ANOTHERMETHOD如果ANOTHERMETHOD執(zhí)行時間超過50毫秒,那么定時器代碼將在ONCLICK處理完成之前加入到隊列中。其結(jié)果是等ONCLICK處理運行完畢,定時器代碼立即執(zhí)行,而察覺不出其間的延遲。在任何一種情況下,創(chuàng)建一個定時器造成UI線程暫停,如同它從一個任務(wù)切換到下一個任務(wù)。因此,定時器代碼復(fù)位所有相關(guān)的瀏覽器限制,包括長運行腳本時間。此外,調(diào)用棧也在定時器代碼中復(fù)位為零。這一特性使得定時器成為長運行JAVASCRIPT代碼理想的跨瀏覽器解決方案定時器精度JAVASCRIPT定時器延時往往不準確,快慢大約幾毫秒。僅僅因為你指定定時器延時250毫秒,并不意味任務(wù)將在調(diào)用SETTIMEOUT之后精確的250毫秒后加入隊列。所有瀏覽器試圖盡可能準確,但通常會發(fā)生幾毫秒滑移,或快或慢。正因為這個原因,定時器不可用于測量實際時間。在WINDOWS系統(tǒng)上定時器分辨率為15毫秒,也就是說一個值為15的定時器延時將根據(jù)最后一次系統(tǒng)時間刷新而轉(zhuǎn)換為0或者15。設(shè)置定時器延時小于15將在INTERNETEXPLORER中導(dǎo)致瀏覽器鎖定,所以最小值建議為25毫秒實際時間是15或30以確保至少15毫秒延遲。此最小定時器延時也有助于避免其他瀏覽器和其他操作系統(tǒng)上的定時器分辨率問題。大多數(shù)瀏覽器在定時器延時小于10毫秒時表現(xiàn)出差異性。在數(shù)組處理中使用定時器一個常見的長運行腳本就是循環(huán)占用了太長的運行時間。如果你已經(jīng)嘗試了第四章介紹的循環(huán)優(yōu)化技術(shù),但還是不能縮減足夠的運行時間,那么定時器就是你的下一個優(yōu)化步驟。其基本方法是將循環(huán)工作分解到定時器序列中。典型的循環(huán)模式如下FORVARI0,LENITEMSLENGTHI0SETTIMEOUTARGUMENTSCALLEE,25ELSECALLBACKITEMS,25這一模式的基本思想是創(chuàng)建一個原始數(shù)組的克隆,將它作為處理對象。第一次調(diào)用SETTIMEOUT創(chuàng)建一個定時器處理隊列中的第一個項。調(diào)用TODOSHIFT返回它的第一個項然后將它從數(shù)組中刪除。此值作為參數(shù)傳給PROCESS。然后,檢查是否還有更多項需要處理。如果TODO隊列中還有內(nèi)容,那么就再啟動一個定時器。因為下個定時器需要運行相同的代碼,所以第一個參數(shù)傳入ARGUMENTSCALLEE。此值指向當前正在運行的匿名函數(shù)。如果不再有內(nèi)容需要處理,將調(diào)用CALLBACK函數(shù)。此模式與循環(huán)相比需要更多代碼,可將此功能封裝起來。例如FUNCTIONPROCESSARRAYITEMS,PROCESS,CALLBACKVARTODOITEMSCONCAT/CREATEACLONEOFTHEORIGINALSETTIMEOUTFUNCTIONPROCESSTODOSHIFTIFTODOLENGTH0SETTIMEOUTARGUMENTSCALLEE,25ELSECALLBACKITEMS,25PROCESSARRAY函數(shù)以一種可重用的方式實現(xiàn)了先前的模板,并接收三個參數(shù)待處理數(shù)組,對每個項調(diào)用的處理函數(shù),處理結(jié)束時執(zhí)行的回調(diào)函數(shù)。該函數(shù)用法如下VARITEMS123,789,323,778,232,654,219,543,321,160FUNCTIONOUTPUTVALUEVALUECONSOLELOGVALUEPROCESSARRAYITEMS,OUTPUTVALUE,FUNCTIONCONSOLELOG“DONE“此代碼使用PROCESSARRAY方法將數(shù)組值輸出到終端,當所有處理結(jié)束時再打印一條消息。通過將定時器代碼封裝在一個函數(shù)里,它可在多處重用而無需多次實現(xiàn)。分解任務(wù)我們通常將一個任務(wù)分解成一系列子任務(wù)。如果一個函數(shù)運行時間太長,那么查看它是否可以分解成一系列能夠短時間完成的較小的函數(shù)?？蓪⒁恍写a簡單地看作一個原子任務(wù),多行代碼組合在一起構(gòu)成一個獨立任務(wù)。某些函數(shù)可基于函數(shù)調(diào)用進行拆分。例如FUNCTIONSAVEDOCUMENTID/SAVETHEDOCUMENTOPENDOCUMENTIDWRITETEXTIDCLOSEDOCUMENTID/UPDATETHEUITOINDICATESUCCESSUPDATEUIID如果函數(shù)運行時間太長,它可以拆分成一系列更小的步驟,把獨立方法放在定時器中調(diào)用。你可以將每個函數(shù)都放入一個數(shù)組,然后使用前一節(jié)中提到的數(shù)組處理模式FUNCTIONSAVEDOCUMENTIDVARTASKSOPENDOCUMENT,WRITETEXT,CLOSEDOCUMENT,UPDATEUISETTIMEOUTFUNCTION/EXECUTETHENEXTTASKVARTASKTASKSSHIFTTASKID/DETERMINEIFTHERESMOREIFTASKSLENGTH0SETTIMEOUTARGUMENTSCALLEE,25,25這個版本將每個方法放入任務(wù)數(shù)組,然后在每個定時器中調(diào)用一個方法。從根本上說,現(xiàn)在它成為數(shù)組處理模式,只有一點不同處理函數(shù)就包含在數(shù)組項中。正如前面一節(jié)所討論的,此模式也可封裝重用FUNCTIONMULTISTEPSTEPS,ARGS,CALLBACKVARTASKSSTEPSCONCAT/CLONETHEARRAYSETTIMEOUTFUNCTION/EXECUTETHENEXTTASKVARTASKTASKSSHIFTTASKAPPLYNULL,ARGS|/DETERMINEIFTHERESMOREIFTASKSLENGTH0SETTIMEOUTARGUMENTSCALLEE,25ELSECALLBACK,25MULTISTEP函數(shù)接收三個參數(shù)用于執(zhí)行的函數(shù)數(shù)組,為每個函數(shù)提供參數(shù)的參數(shù)數(shù)組,當處理結(jié)束時調(diào)用的回調(diào)函數(shù)。函數(shù)用法如下FUNCTIONSAVEDOCUMENTIDVARTASKSOPENDOCUMENT,WRITETEXT,CLOSEDOCUMENT,UPDATEUIMULTISTEPTASKS,ID,FUNCTIONALERT“SAVECOMPLETED“注意傳給MULTISTEP的第二個參數(shù)必須是數(shù)組,它創(chuàng)建時只包含一個ID。正如數(shù)組處理那樣,使用此函數(shù)的前提條件是任務(wù)可以異步處理而不影響用戶體驗或?qū)е乱蕾嚧a出錯。限時運行代碼有時每次只執(zhí)行一個任務(wù)效率不高?？紤]這樣一種情況處理一個擁有1000個項的數(shù)組,每處理一個項需要1毫秒。如果每個定時器中處理一個項,在兩次處理之間間隔25毫秒,那么處理此數(shù)組的總時間是251100026000毫秒,也就是26秒。如果每批處理50個,每批之間間隔25毫秒會怎么樣呢整個處理過程變成1000/502510001500毫秒,也就是15秒,而且用戶也不會察覺界面阻塞,因為最長的腳本運行只持續(xù)了50毫秒。通常批量處理比每次處理一個更快。如果你記住JAVASCRIPT可連續(xù)運行的最大時間是100毫秒,那么你可以優(yōu)化先前的模式。我的建議是將這個數(shù)字削減一半,不要讓任何JAVASCRIPT代碼持續(xù)運行超過50毫秒,只是為了確保代碼永遠不會影響用戶體驗?？赏ㄟ^原生的DATE對象跟蹤代碼的運行時間。這是大多數(shù)JAVASCRIPT分析工具所采用的工作方式VARSTARTNEWDATE,STOPSOMELONGPROCESSSTOPNEWDATEIFSTOPSTART0ELSECALLBACKITEMS,25此函數(shù)中添加了一個DOWHILE循環(huán),它在每個數(shù)組項處理之后檢測時間。定時器函數(shù)運行時數(shù)組中存放了至少一個項,所以后測試循環(huán)比前測試更合理。在FIREFOX3中,如果PROCESS是一個空函數(shù),處理一個1000個項的數(shù)組需要3834毫秒原始的PROCESSARRAY函數(shù)處理同一個數(shù)組需要超過25000毫秒。這就是定時任務(wù)的作用,避免將任務(wù)分解成過于碎小的片斷。定時器與性能定時器使你的JAVASCRIPT代碼整體性能表現(xiàn)出巨大差異,但過度使用它們會對性能產(chǎn)生負面影響。本節(jié)中的代碼使用定時器序列,同一時間只有一個定時器存在,只有當這個定時器結(jié)束時才創(chuàng)建一個新的定時器。以這種方式使用定時器不會帶來性能問題。當多個重復(fù)的定時器被同時創(chuàng)建會產(chǎn)生性能問題。因為只有一個UI線程,所有定時器競爭運行時間。GOOGLEMOBILE的NEILTHOMAS將此問題作為測量性能的方法進行研究,針對IPHONE和ANDROID上運行的移動GMAIL程序。THOMAS發(fā)現(xiàn)低頻率的重復(fù)定時器間隔在1秒或1秒以上幾乎不影響整個網(wǎng)頁應(yīng)用的響應(yīng)。這種情況下定時器延遲遠超過使UI線程產(chǎn)生瓶頸的值,因此可安全地重復(fù)使用。當多個重復(fù)定時器使用更高的頻率間隔在100到200毫秒之間,THOMAS發(fā)現(xiàn)移動GMAIL程序明顯變慢,反應(yīng)較差。THOMAS研究的言外之意是,要在你的網(wǎng)頁應(yīng)用中限制高頻率重復(fù)定時器的數(shù)量。同時,THOMAS建議創(chuàng)建一個單獨的重復(fù)定時器,每次執(zhí)行多個操作。網(wǎng)頁工人線程自JAVASCRIPT誕生以來,還沒有辦法在瀏覽器UI線程之外運行代碼。網(wǎng)頁工人線程API改變了這種狀況,它引入一個接口,使代碼運行而不占用瀏覽器UI線程的時間。作為最初的HTML5的一部分,網(wǎng)頁工人線程API已經(jīng)分離出去成為獨立的規(guī)范HTTP/WWWW3ORG/TR/WORKERS/。網(wǎng)頁工人線程已經(jīng)被FIREFOX35,CHROME3,和SAFARI4原生實現(xiàn)。網(wǎng)頁工人線程對網(wǎng)頁應(yīng)用來說是一個潛在的巨大性能提升,因為新的工人線程在自己的線程中運行JAVASCRIPT。這意味著,工人線程中的代碼運行不僅不會影響瀏覽器UI,而且也不會影響其它工人線程中運行的代碼。工人線程運行環(huán)境由于網(wǎng)頁工人線程不綁定UI線程,這也意味著它們將不能訪問許多瀏覽器資源。JAVASCRIPT和UI更新共享同一個進程的部分原因是它們之間互訪頻繁,如果這些任務(wù)失控將導(dǎo)致糟糕的用戶體驗。網(wǎng)頁工人線程修改DOM將導(dǎo)致用戶界面出錯,但每個網(wǎng)頁工人線程都有自己的全局運行環(huán)境,只有JAVASCRIPT特性的一個子集可用。工人線程的運行環(huán)境由下列部分組成一個瀏覽器對象,只包含四個屬性APPNAME,APPVERSION,USERAGENT,和PLATFORM一個LOCATION對象和WINDOW里的一樣,只是所有屬性都是只讀的一個SELF對象指向全局工人線程對象一個IMPORTSCRIPTS方法,使工人線程可以加載外部JAVASCRIPT文件所有ECMASCRIPT對象,諸如OBJECT,ARRAY,DATA,等等。XMLHTTPREQUEST構(gòu)造器SETTIMEOUT和SETINTERVAL方法CLOSE方法可立即停止工人線程因為網(wǎng)頁工人線程有不同的全局運行環(huán)境,你不能在JAVASCRIPT代碼中創(chuàng)建。事實上,你需要創(chuàng)建一個完全獨立的JAVASCRIPT文件,包含那些在工人線程中運行的代碼。要創(chuàng)建網(wǎng)頁工人線程,你必須傳入這個JAVASCRIPT文件的URLVARWORKERNEWWORKER“CODEJS“此代碼一旦執(zhí)行,將為指定文件創(chuàng)建一個新線程和一個新的工人線程運行環(huán)境。此文件被異步下載,直到下載并運行完之后才啟動工人線程。工人線程交互工人線程和網(wǎng)頁代碼通過事件接口進行交互。網(wǎng)頁代碼可通過POSTMESSAGE方法向工人線程傳遞數(shù)據(jù),它接收單個參數(shù),即傳遞給工人線程的數(shù)據(jù)。此外,在工人線程中還有ONMESSAGE事件句柄用于接收信息。例如VARWORKERNEWWORKER“CODEJS“WORKERONMESSAGEFUNCTIONEVENTALERTEVENTDATAWORKERPOSTMESSAGE“NICHOLAS“工人線程從MESSAGE事件中接收數(shù)據(jù)。這里定義了一個ONMESSAGE事件句柄,事件對象具有一個DATA屬性存放傳入的數(shù)據(jù)。工人線程可通過它自己的POSTMESSAGE方法將信息返回給頁面。/INSIDECODEJSSELFONMESSAGEFUNCTIONEVENTSELFPOSTMESSAGE“HELLO,“EVENTDATA“最終的字符串結(jié)束于工人線程的ONMESSAGE事件句柄。消息系統(tǒng)是頁面和工人線程之間唯一的交互途徑。只有某些類型的數(shù)據(jù)可以使用POSTMESSAGE傳遞。你可以傳遞原始值STRING,NUMBER,BOOLEAN,NULL和UNDEFINED,也可以傳遞OBJECT和ARRAY的實例,其它類型就不允許了。有效數(shù)據(jù)被序列化,傳入或傳出工人線程,然后反序列化。即使看上去對象直接傳了過去,實例其實是同一個數(shù)據(jù)完全獨立的表述。試圖傳遞一個不支持的數(shù)據(jù)類型將導(dǎo)致JAVASCRIPT錯誤。加載外部文件當工人線程通過IMPORTSCRIPTS方法加載外部JAVASCRIPT文件,它接收一個或多個URL參數(shù),指出要加載的JAVASCRIPT文件網(wǎng)址。工人線程以阻塞方式調(diào)用IMPORTSCRIPTS,直到所有文件加載完成并執(zhí)行之后,腳本才繼續(xù)運行。由于工人線程在UI線程之外運行,這種阻塞不會影響UI響應(yīng)。例如/INSIDECODEJSIMPORTSCRIPTS“FILE1JS“,“FILE2JS“SELFONMESSAGEFUNCTIONEVENTSELFPOSTMESSAGE“HELLO,“EVENTDATA“此代碼第一行包含兩個JAVASCRIPT文件,它們將在工人線程中使用。實際用途網(wǎng)頁工人線程適合于那些純數(shù)據(jù)的,或者與瀏覽器UI沒關(guān)系的長運行腳本。它看起來用處不大,而網(wǎng)頁應(yīng)用程序中通常有一些數(shù)據(jù)處理功能將受益于工人線程,而不是定時器?？紤]這樣一個例子,解析一個很大的JSON字符串JSON解析將在后面第七章討論。假設(shè)數(shù)據(jù)足夠大,至少需要500毫秒才能完成解析任務(wù)。很顯然時間太長了以至于不能允許JAVASCRIPT在客戶端上運行它,因為它會干擾用戶體驗。此任務(wù)難以分解成用于定時器的小段任務(wù),所以工人線程成為理想的解決方案。下面的代碼說明了它在網(wǎng)頁上的應(yīng)用VARWORKERNEWWORKER“JSONPARSERJS“/WHENTHEDATAISAVAILABLE,THISEVENTHANDLERISCALLEDWORKERONMESSAGEFUNCTIONEVENT/THEJSONSTRUCTUREISPASSEDBACKVARJSONDATAEVENTDATA/THEJSONSTRUCTUREISUSEDEVALUATEDATAJSONDATA/PASSINTHELARGEJSONSTRINGTOPARSEWORKERPOSTMESSAGEJSONTEXT工人線程的代碼負責(zé)JSON解析,如下/INSIDEOFJSONPARSERJS/THISEVENTHANDLERISCALLEDWHENJSONDATAISAVAILABLESELFONMESSAGEFUNCTIONEVENT/THEJSONSTRINGCOMESINASEVENTDATAVARJSONTEXTEVENTDATA/PARSETHESTRUCTUREVARJSONDATAJSONPARSEJSONTEXT/SENDBACKTOTHERESULTSSELFPOSTMESSAGEJSONDATA請注意,即使JSONPARSE可能需要500毫秒或更多時間,也沒有必要添加更多代碼來分解處理過程。此處理過程發(fā)生在一個獨立的線程中,所以你可以讓它一直運行完解析過程而不會干擾用戶體驗。頁面使用POSTMESSAGE將一個JSON字符串傳給工人線程。工人線程在它的ONMESSAGE事件句柄中收到這個字符串也就是EVENTDATA,然后開始解析它。完成時所產(chǎn)生的JSON對象通過工人線程的POSTMESSAGE方法傳回頁面。然后此對象便成為頁面ONMESSAGE事件句柄的EVENTDATA。請記住,此工程只能在FIREFOX35和更高版本中運行,而SAFARI4和CHROME3中,頁面和工人線程之間只允許傳遞字符串。解析一個大字符串只是許多受益于網(wǎng)頁工人線程的任務(wù)之一。其它可能受益的任務(wù)如下編/解碼一個大字符串復(fù)雜數(shù)學(xué)運算包括圖像或視頻處理給一個大數(shù)組排序任何超過100毫秒的處理,都應(yīng)當考慮工人線程方案是不是比基于定時器的方案更合適。當然,還要基于瀏覽器是否支持工人線程?？偨Y(jié)JAVASCRIPT和用戶界面更新在同一個進程內(nèi)運行,同一時刻只有其中一個可以運行。這意味著當JAVASCRIPT代碼正在運行時,用戶界面不能響應(yīng)輸入,反之亦然。有效地管理UI線程就是要確保JAVASCRIPT不能運行太長時間,以免影響用戶體驗。最后,請牢記如下幾點JAVASCRIPT運行時間不應(yīng)該超過100毫秒。過長的運行時間導(dǎo)致UI更新出現(xiàn)可察覺的延遲,從而對整體用戶體驗產(chǎn)生負面影響。JAVASCRIPT運行期間,瀏覽器響應(yīng)用戶交互的行為存在差異。無論如何,JAVASCRIPT長時間運行將導(dǎo)致用戶體驗混亂和脫節(jié)。定時器可用于安排代碼推遲執(zhí)行,它使得你可以將長運行腳本分解成一系列較小的任務(wù)。網(wǎng)頁工人線程是新式瀏覽器才支持的特性,它允許你在UI線程之外運行JAVASCRIPT代碼而避免鎖定UI。網(wǎng)頁應(yīng)用程序越復(fù)雜,積極主動地管理UI線程就越顯得重要。沒有什么JAVASCRIPT代碼可以重要到允許影響用戶體驗的程度。RESPONSIVEINTERFACESTHERESNOTHINGMOREFRUSTRATINGTHANCLICKINGSOMETHINGONAWEBPAGEANDHAVINGNOTHINGHAPPENTHISPROBLEMGOESBACKTOTHEORIGINOFTRANSACTIONALWEBAPPLICATIONSANDRESULTEDINTHENOWUBIQUITOUS“PLEASECLICKONLYONCE“MESSAGETHATACCOMPANIESMOSTFORMSUBMISSIONSAUSERSNATURALINCLINATIONISTOREPEATANYACTIONTHATDOESNTRESULTINANOBVIOUSCHANGE,ANDSOENSURINGRESPONSIVENESSINWEBAPPLICATIONSISANIMPORTANTPERFORMANCECONCERNCHAPTER1INTRODUCEDTHEBROWSERUITHREADCONCEPTASARECAP,MOSTBROWSERSHAVEASINGLEPROCESSTHATISSHAREDBETWEENJAVASCRIPTEXECUTIONANDUSERINTERFACEUPDATESONLYONEOFTHESEOPERATIONSCANBEPERFORMEDATATIME,MEANINGTHATTHEUSERINTERFACECANNOTRESPONDTOINPUTWHILEJAVASCRIPTCODEISEXECUTEDANDVICEVERSATHEUSERINTERFACEEFFECTIVELYBECOMES“LOCKED“WHENJAVASCRIPTISEXECUTINGMANAGINGHOWLONGYOURJAVASCRIPTTAKESTOEXECUTEISIMPORTANTTOTHEPERCEIVEDPERFORMANCEOFAWEBAPPLICATIONTHEBROWSERUITHREADTHEPROCESSSHAREDBYJAVASCRIPTANDUSERINTERFACEUPDATESISFREQUENTLYREFERREDTOASTHEBROWSERUITHREADTHOUGHTHETERM“THREAD“ISNOTNECESSARILYACCURATEFORALLBROWSERSTHEUITHREADWORKSONASIMPLEQUEUINGSYSTEMWHERETASKSAREKEPTUNTILTHEPROCESSISIDLEONCEIDLE,THENEXTTASKINTHEQUEUEISRETRIEVEDANDEXECUTEDTHESETASKSAREEITHERJAVASCRIPTCODETOEXECUTEORUIUPDATESTOPERFORM,WHICHINCLUDEREDRAWSANDREFLOWSDISCUSSEDINCHAPTER3PERHAPSTHEMOSTINTERESTINGPARTOFTHISPROCESSISTHATEACHINPUTMAYRESULTINONEORMORETASKSBEINGADDEDTOTHEQUEUECONSIDERASIMPLEINTERFACEWHEREABUTTONCLICKRESULTSINAMESSAGEBEINGDISPLAYEDONTHESCREENWHENTHEBUTTONINTHISEXAMPLEISCLICKED,ITTRIGGERSTHEUITHREADTOCREATEANDADDTWOTASKSTOTHEQUEUETHEFIRSTTASKISAUIUPDATEFORTHEBUTTON,WHICHNEEDSTOCHANGEAPPEARANCETOINDICATEITWASCLICKED,ANDTHESECONDISAJAVASCRIPTEXECUTIONTASKCONTAININGTHECODEFORHANDLECLICK,SOTHATTHEONLYCODEBEINGEXECUTEDISTHISMETHODANDANYTHINGITCALLSASSUMINGTHEUITHREADISIDLE,THEFIRSTTASKISRETRIEVEDANDEXECUTEDTOUPDATETHEBUTTONSAPPEARANCE,ANDTHENTHEJAVASCRIPTTASKISRETRIEVEDANDEXECUTEDDURINGTHECOURSEOFEXECUTION,HANDLECLICKCREATESANEWELEMENTANDAPPENDSITTOTHEELEMENT,EFFECTIVELYMAKINGANOTHERUICHANGETHATMEANSTHATDURINGTHEJAVASCRIPTEXECUTION,ANEWUIUPDATETASKISADDEDTOTHEQUEUESUCHTHATTHEUIISUPDATEDONCEJAVASCRIPTEXECUTIONISCOMPLETEWHENALLUITHREADTASKSHAVEBEENEXECUTED,THEPROCESSBECOMESIDLEANDWAITSFORMORETASKSTOBEADDEDTOTHEQUEUETHEIDLESTATEISIDEALBECAUSEALLUSERACTIONSTHENRESULTINANIMMEDIATEUIUPDATEIFTHEUSERTRIESTOINTERACTWITHTHEPAGEWHILEATASKISBEINGEXECUTED,NOTONLYWILLTHERENOTBEANIMMEDIATEUIUPDATE,BUTANEWTASKFORAUIUPDATEMAYNOTEVENBECREATEDANDQUEUEDINFACT,MOSTBROWSERSSTOPQUEUINGTASKSFORTHEUITHREADWHILEJAVASCRIPTISEXECUTING,WHICHMEANSTHATITISIMPERATIVETOFINISHJAVASCRIPTTASKSASQUICKLYASPOSSIBLESOASNOTTOADVERSELYAFFECTTHEUSERSEXPERIENCEBROWSERLIMITSBROWSERSPLACELIMITSONTHEAMOUNTOFTIMETHATJAVASCRIPTTAKETOEXECUTETHISISANECESSARYLIMITATIONTOENSURETHATMALICIOUSCODERSCANTLOCKUPAUSERSBROWSERORCOMPUTERBYPERFORMINGINTENSIVEOPERATIONSTHATWILLNEVERENDTHEREARETWOSUCHLIMITSTHECALLSTACKSIZELIMITDISCUSSEDINCHAPTER4ANDTHELONGRUNNINGSCRIPTLIMITTHELONGRUNNINGSCRIPTLIMITISSOMETIMESCALLEDTHELONGRUNNINGSCRIPTTIMERORTHERUNAWAYSCRIPTTIMER,BUTTHEBASICIDEAISTHATTHEBROWSERKEEPSTRACKOFHOWLONGASCRIPTHASBEENRUNNINGANDWILLSTOPITONCEACERTAINLIMITISHITWHENTHELIMITISREACHED,ADIALOGISDISPLAYEDTOTHEUSERTHEREARETWOWAYSOFMEASURINGHOWLONGASCRIPTISEXECUTINGTHEFIRSTISTOKEEPTRACKOFHOWMANYSTATEMENTSHAVEBEENEXECUTEDSINCETHESCRIPTBEGANTHISAPPROACHMEANSTHATTHESCRIPTMAYRUNFORDIFFERENTPERIODSOFTIMEONDIFFERENTMACHINES,ASTHEAVAILABLEMEMORYANDCPUSPEEDCANAFFECTHOWLONGITTAKESTOEXECUTEASINGLESTATEMENTTHESECONDAPPROACHISTOTRACKTHETOTALAMOUNTOFTIMETHATTHESCRIPTHASBEENEXECUTINGTHEAMOUNTOFSCRIPTTHATCANBEPROCESSEDWITHINASETAMOUNTOFTIMEALSOVARIESBASEDONTHEUSERSMACHINECAPABILITIES,BUTTHESCRIPTISALWAYSSTOPPEDAFTERASETAMOUNTOFTIMENOTSURPRISINGLY,EACHBROWSERHASASLIGHTLYDIFFERENTAPPROACHTOLONGRUNNINGSCRIPTDETECTIONINTERNETEXPLORER,ASOFVERSION4,SETSADEFAULTLIMITOF5MILLIONSTATEMENTSTHISLIMITISSTOREDINAWINDOWSREGISTRYSETTINGCALLEDHKEY_CURRENT_USERSOFTWAREMICROSOFTINTERNETEXPLORERSTYLESMAXSCRIPTSTATEMENTSFIREFOXHASADEFAULTLIMITOF10SECONDSTHISLIMITISSTOREDINTHEBROWSERSCONFIGURATIONSETTINGSACCESSIBLEBYTYPINGABOUTCONFIGINTHEADDRESSBOXASTHEDOMMAX_SCRIPT_RUN_TIMEKEYSAFARIHASADEFAULTLIMITOF5SECONDSTHISSETTINGCANNOTBEALTERED,BUTYOUCANDISABLETHETIMERBYENABLINGTHEDEVELOPMENUANDSELECTINGDISABLERUNAWAYJAVASCRIPTTIMERCHROMEHASNOSEPARATELONGRUNNINGSCRIPTLIMITANDINSTEADRELIESONITSGENERICCRASHDETECTIONSYSTEMTOHANDLESUCHINSTANCESOPERAHASNOLONGRUNNINGSCRIPTLIMITANDWILLCONTINUETOEXECUTEJAVASCRIPTCODEUNTILITHASFINISHED,THOUGH,DUETOOPERASARCHITECTURE,THISWILLNOTCAUSESYSTEMINSTABILITYWHILETHEEXECUTIONISCOMPLETEDWHENTHEBROWSERSLONGRUNNINGSCRIPTLIMITISREACHED,ADIALOGISDISPLAYEDTOTHEUSER,REGARDLESSOFANYOTHERERRORHANDLINGCODEONTHEPAGETHISISAMAJORUSABILITYISSUEBECAUSEMOSTINTERNETUSERSARENOTTECHNICALLYSAVVYANDWOULDTHEREFOREBECONFUSEDABOUTTHEMEANINGOFTHEERRORMESSAGEASWELLASWHICHOPTIONTOSTOPTHESCRIPTORALLOWITTOCONTINUEISAPPROPRIATEIFYOURSCRIPTTRIGGERSTHISDIALOGINANYBROWSER,ITMEANSTHESCRIPTISSIMPLYTAKINGTOOLONGTOCOMPLETEITSTASKITALSOINDICATESTHATTHEUSERSBROWSERHASBECOMEUNRESPONSIVETOINPUTWHILETHEJAVASCRIPTCODEISCONTINUINGTOEXECUTEFROMADEVELOPERSPOINTOFVIEW,THEREISNOWAYTORECOVERFROMALONGRUNNINGSCRIPTDIALOGSAPPEARANCEYOUCANTDETECTITANDTHEREFORECANTADJUSTTOANYISSUESTHATMIGHTARISEASARESULTCLEARLY,THEBESTWAYTODEALWITHLONGRUNNINGSCRIPTLIMITSISTOAVOIDTHEMINTHEFIRSTPLACEHOWLONGISTOOLONGJUSTBECAUSETHEBROWSERALLOWSASCRIPTTOCONTINUEEXECUTINGUPTOACERTAINNUMBEROFSECONDSDOESNTMEANYOUSHOULDALLOWITDOSOINFACT,THEAMOUNTOFTIMETHATYOURJAVASCRIPTCODEEXECUTESCONTINUOUSLYSHOULDBEMUCHSMALLERTHANTHEBROWSERIMPOSEDLIMITSINORDERTOCREATEAGOODUSEREXPERIENCEBRENDANEICH,CREATOROFJAVASCRIPT,ISQUOTEDASHAVINGONCESAID,“JAVASCRIPTTHATEXECUTESINWHOLESECONDSISPROBABLYDOINGSOMETHINGWRONG“IFWHOLESECONDSARETOOLONGFORJAVASCRIPTTOEXECUTE,WHATISANAPPROPRIATEAMOUNTOFTIMEASITTURNSOUT,EVENONESECONDISTOOLONGFORASCRIPTTOEXECUTETHETOTALAMOUNTOFTIMETHATASINGLEJAVASCRIPTOPERATIONSHOULDTAKEATAMAXIMUMIS100MILLISECONDSTHISNUMBERCOMESFROMRESEARCHCONDUCTEDBYROBERTMILLERIN1968INTERESTINGLY,USABILITYEXPERTJAKOBNIELSENNOTEDINHISBOOKUSABILITYENGINEERINGMORGANKAUFMANN,1994THATTHISNUMBERHASNTCHANGEDOVERTIMEAND,INFACT,WASREAFFIRMEDIN1991BYRESEARCHATXEROXPARCNIELSENSTATESTHATIFTHEINTERFACERESPONDSTOUSERINPUTWITHIN100MILLISECONDS,THEUSERFEELSTHATHEIS“DIRECTLYMANIPULATINGTHEOBJECTSINTHEUSERINTERFACE“ANYAMOUNTOFTIMEMORETHAN100MILLISECONDSMEANSTHEUSERFEELSDISCONNECTEDFROMTHEINTERFACESINCETHEUICANNOTUPDATEWHILEJAVASCRIPTISEXECUTING,THEUSERCANNOTFEELINCONTROLOFTHEINTERFACEIFTHATEXECUTIONTAKESLONGERTHAN100MILLISECONDSAFURTHERCOMPLICATIONISTHATSOMEBROWSERSWONTEVENQUEUEUIUPDATESWHILEJAVASCRIPTISEXECUTINGFOREXAMPLE,IFYOUCLICKABUTTONWHILESOMEJAVASCRIPTCODEISEXECUTING,THEBROWSERMAYNOTQUEU