詳解JavaScript之分解任務(wù)
下面來看,JavaScript中分解任務(wù),供參考。
我們通常將一個(gè)任務(wù)分解成一系列子任務(wù)。如果一個(gè)函數(shù)運(yùn)行時(shí)間太長(zhǎng),那么查看它是否可以分解成一系列能夠短時(shí)間完成的較小的函數(shù)。可將一行代碼簡(jiǎn)單地看作一個(gè)原子任務(wù),多行代碼組合在一起構(gòu)成一個(gè)獨(dú)立任務(wù)。某些函數(shù)可基于函數(shù)調(diào)用進(jìn)行拆分。例如:
- function saveDocument(id){
- openDocument(id)
- writeText(id);
- closeDocument(id);
- updateUI(id);
- }
如果函數(shù)運(yùn)行時(shí)間太長(zhǎng),它可以拆分成一系列更小的步驟,把獨(dú)立方法放在定時(shí)器中調(diào)用。你可以將每個(gè)函數(shù)都放入一個(gè)數(shù)組,然后使用前一節(jié)中提到的數(shù)組處理模式:
- function saveDocument(id){
- var tasks = [openDocument, writeText, closeDocument, updateUI];
- setTimeout(function(){
- var task = tasks.shift();
- task(id);
- if (tasks.length > 0){
- setTimeout(arguments.callee, 25);
- }
- }, 25);
- }
這個(gè)版本將每個(gè)方法放入任務(wù)數(shù)組,然后在每個(gè)定時(shí)器中調(diào)用一個(gè)方法。從根本上說,現(xiàn)在它成為數(shù)組處理模式,只有一點(diǎn)不同:處理函數(shù)就包含在數(shù)組項(xiàng)中。正如前面一節(jié)所討論的,此模式也可封裝重用:
- function multistep(steps, args, callback){
- var tasks = steps.concat();
- setTimeout(function(){
- var task = tasks.shift();
- task.apply(null, args || []);
- if (tasks.length > 0){
- setTimeout(arguments.callee, 25);
- } else {
- callback();
- }
- }, 25);
- }
multistep()函數(shù)接收三個(gè)參數(shù):用于執(zhí)行的函數(shù)數(shù)組,為每個(gè)函數(shù)提供參數(shù)的參數(shù)數(shù)組,當(dāng)處理結(jié)束時(shí)調(diào)用的回調(diào)函數(shù)。函數(shù)用法如下:
- function saveDocument(id){
- var tasks = [openDocument, writeText, closeDocument, updateUI];
- multistep(tasks, [id], function(){
- alert("Save completed!");
- });
- }
注意傳給multistep()的第二個(gè)參數(shù)必須是數(shù)組,它創(chuàng)建時(shí)只包含一個(gè)id。正如數(shù)組處理那樣,使用此函數(shù)的前提條件是:任務(wù)可以異步處理而不影響用戶體驗(yàn)或?qū)е乱蕾嚧a出錯(cuò)。
(一)限時(shí)運(yùn)行代碼
有時(shí)每次只執(zhí)行一個(gè)任務(wù)效率不高。考慮這樣一種情況:處理一個(gè)擁有1'000個(gè)項(xiàng)的數(shù)組,每處理一個(gè)項(xiàng)需要1毫秒。如果每個(gè)定時(shí)器中處理一個(gè)項(xiàng),在兩次處理之間間隔25毫秒,那么處理此數(shù)組的總時(shí)間是(25 + 1) × 1'000 = 26'000 秒,也就是26 秒。如果每批處理50個(gè),每批之間間隔25毫秒會(huì)怎么樣呢?整個(gè)處理過程變成(1'000 / 50) × 25 + 1'000 = 1'500毫秒,也就是1.5秒,而且用戶也不會(huì)察覺界面阻塞,因?yàn)樽铋L(zhǎng)的腳本運(yùn)行只持續(xù)了50毫秒。通常批量處理比每次處理一個(gè)更快。
如果你記住JavaScript可連續(xù)運(yùn)行的最大時(shí)間是100毫秒,那么你可以優(yōu)化先前的模式。我的建議是將這個(gè)數(shù)字削減一半,不要讓任何JavaScript代碼持續(xù)運(yùn)行超過50毫秒,只是為了確保代碼永遠(yuǎn)不會(huì)影響用戶體驗(yàn)。
可通過原生的Date 對(duì)象跟蹤代碼的運(yùn)行時(shí)間。這是大多數(shù)JavaScript分析工具所采用的工作方式:
- var start = +new Date(),
- stop;
- someLongProcess();
- stop = +new Date();
- if(stop-start < 50){
- alert("Just about right.");
- } else {
- alert("Taking too long.");
- }
由于每個(gè)新創(chuàng)建的Data 對(duì)象以當(dāng)前系統(tǒng)時(shí)間初始化,你可以周期性地創(chuàng)建新Data對(duì)象并比較它們的值,以獲取代碼運(yùn)行時(shí)間。加號(hào)(+)將Data 對(duì)象轉(zhuǎn)換為一個(gè)數(shù)字,在后續(xù)的數(shù)學(xué)運(yùn)算中就不必再轉(zhuǎn)換了。這一技術(shù)也可用于優(yōu)化以前的定時(shí)器模板。
processArray()方法通過一個(gè)時(shí)間檢測(cè)機(jī)制,可在每個(gè)定時(shí)器中執(zhí)行多次處理:
- function timedProcessArray(items, process, callback){
- var todo = items.concat();
- setTimeout(function(){
- var start = +new Date();
- do {
- process(todo.shift());
- } while (todo.length > 0 && (+new Date() – start < 50));
- if (todo.length > 0){
- setTimeout(arguments.callee, 25);
- } else {
- callback(items);
- }
- }, 25);
- }
此函數(shù)中添加了一個(gè)do-while循環(huán),它在每個(gè)數(shù)組項(xiàng)處理之后檢測(cè)時(shí)間。定時(shí)器函數(shù)運(yùn)行時(shí)數(shù)組中存放了至少一個(gè)項(xiàng),所以后測(cè)試循環(huán)比前測(cè)試更合理。在Firefox 3中,如果process()是一個(gè)空函數(shù),處理一個(gè)1'000個(gè)項(xiàng)的數(shù)組需要38 – 34毫秒;原始的processArray()函數(shù)處理同一個(gè)數(shù)組需要超過25'000毫秒。這就是定時(shí)任務(wù)的作用,避免將任務(wù)分解成過于碎小的片斷。
(二)定時(shí)器與性能
定時(shí)器使你的JavaScript代碼整體性能表現(xiàn)出巨大差異,但過度使用它們會(huì)對(duì)性能產(chǎn)生負(fù)面影響。使用定時(shí)器序列,同一時(shí)間只有一個(gè)定時(shí)器存在,只有當(dāng)這個(gè)定時(shí)器結(jié)束時(shí)才創(chuàng)建一個(gè)新的定時(shí)器。以這種方式使用定時(shí)器不會(huì)帶來性能問題。
當(dāng)多個(gè)重復(fù)的定時(shí)器被同時(shí)創(chuàng)建會(huì)產(chǎn)生性能問題。因?yàn)橹挥幸粋€(gè)UI線程,所有定時(shí)器競(jìng)爭(zhēng)運(yùn)行時(shí)間。Google Mobile的Neil Thomas 將此問題作為測(cè)量性能的方法進(jìn)行研究,針對(duì)iPhone和Android上運(yùn)行的移動(dòng)Gmail程序。
Thomas發(fā)現(xiàn)低頻率的重復(fù)定時(shí)器——間隔在1 秒或1 秒以上——幾乎不影響整個(gè)網(wǎng)頁(yè)應(yīng)用的響應(yīng)。這種情況下定時(shí)器延遲遠(yuǎn)超過使UI 線程產(chǎn)生瓶頸的值,因此可安全地重復(fù)使用。當(dāng)多個(gè)重復(fù)定時(shí)器使用更高的頻率(間隔在100到200毫秒之間),Thomas發(fā)現(xiàn)移動(dòng)Gmail程序明顯變慢,反應(yīng)較差。
Thomas研究的言外之意是,要在你的網(wǎng)頁(yè)應(yīng)用中限制高頻率重復(fù)定時(shí)器的數(shù)量。同時(shí),Thomas建議創(chuàng)建一個(gè)單獨(dú)的重復(fù)定時(shí)器,每次執(zhí)行多個(gè)操作。
原文地址: http://www.yiiyaa.net/1223
【編輯推薦】