2014-05-09 31 views
2

我創建了一個單頁面瀏覽網站,其中包含用於iPad和其他平板電腦的AngularJs和jQuery。我使用的是AngularJs,因爲它是我們客戶的要求,但不知道AngularJs的理念,我決定用jQuery控制點擊事件(我知道這是一個大錯誤)。angularjs和jquery在手機上的表現

問題是,以這種方式將兩個庫混合在一起似乎會在移動設備上導致很多性能問題。我需要同時加載和操作動畫數百個div(這是一個POS應用程序)和我想知道如果實現指令而不是使用jQuery事件會使我的性能提升。如果沒有,我真的不明白爲什麼我應該制定指令。

在此先感謝!

+0

嘗試使用CSS代替動畫,無論您身在何處。另外,angular和jquery聽起來像是一個單頁面應用程序的矯枉過正。你確定你需要它嗎?如果不是的話,爲什麼不告訴那些說「我們會用Angular來做所有事情」的人,這是一個壞主意? – Automatico

+0

我認爲指令可以幫助你..你可以隔離你的控制和可能的問題的事實也可以讓你單獨改進它們。 – Dalorzo

+0

角度本身很重。我不太瞭解它,但我不希望它在移動設備上順利運行。具體而言,$ watch需要重新評估每個觸及$ scope的用戶操作的深度拷貝監視值,這往往會產生大量不必要的計算。另外,動畫本身可能是一個問題。使用CSS可能會有所幫助。 – Frax

回答

4

因此,我通過幾件事情改善了這個問題。首先,減少角元素的數量大大提高了性能。其次,我用jquery-animate-enhanced爲我的動作動畫,這也提高了翻譯!第三我使用animate.css爲我的淡入淡出動畫,這是偉大的。

我仍然試圖通過視圖回收來改善性能,類似於iOS或Android,但我發現ng-repeat對此並不滿意。所以,我可能不得不實施指令。

謝謝!

1

提高性能:

我經歷過這種情況,我完善我的SPA Web的應用程序的性能,最好的辦法是儘可能地代替了jQuery使用本地JavaScript。

舉例來說,我代替我

$(element).html("This is some text")element.innerHTML="This is some text"

$(document).on('scroll',element,callbackFuntions)element.addEventListener('scroll',callbackFunction,{passive:true})

請注意,在我的長卷{passive:true}參數甚至聽衆,傳遞此,令我難以置信的增加了滾動體驗,並幫助我擺脫了滾動滯後。

理由使用指令:

當你要在DOM中創建特定的元素和之前沒有它,當運行一個腳本有可能是時間。這是指令幫助很多的時候。