2015-04-15 37 views
0

我的應用程序中有一個購物車,它目前適用於我,儘管我的同事遇到的問題是它太「慢」。我一直在想一個更好的方法來實現它,使其更快,更高效。用Laravel和Angular構建購物車

目前,這是我的網頁的加載:

  1. 產品/票務頁面加載。
  2. AJAX函數從服務器獲取產品/票據並顯示在頁面上。

每個產品都有這樣的購買按鈕:

<button ng-click="buyTicket(id)" class="btn">Buy Ticket</button> 

這是buyticket如何工作的:

我通過產品/車票的標識,以我的功能。

  1. AJAX函數發佈id到服務器。
  2. 服務器運行數據庫查詢以基於id檢索產品/票證信息。
  3. 產品/票據信息被保存到「購物車」表中。
  4. AJAX函數返回數據「真」作爲響應。
  5. 我播了這個:

    $ rootScope。$ broadcast('TICKET_ADDED',true);

  6. 車指令收聽廣播,使一個AJAX調用服務器,以獲得購物車數據:

    $範圍在$( 'TICKET_ADDED',函數(響應){$ scope.loadCart(); 。 })

  7. 返回的數據被分配給一個數組並顯示在購物車中。

每個用戶購物車由長25

隨機生成的字符串,它是我的車是如何工作的,現在確定,我想一個更快,更好的方式來做到這一點吧。

編輯:(使用調試工具欄來獲得這些統計數據)

當頁面加載: 查詢號運行:1個 內存使用:12.25 MB 申請時間:1.04s 號AJAX請求:3

當點擊買門票功能: 查詢號運行:5 內存使用:12.75 MB 請求持續時間:934.41毫秒 AJAX請求數:2

+0

所以你的同事認爲它太慢了,但你認爲它很好? – wvdz

+1

介紹緩存,客戶端和服務器端。在Angular $ http中,甚至有一些cache = true的設置可以直接使用。 – wvdz

+0

@popovitsj緩存?你能解釋一下嗎? – user3718908

回答

1

您使用的方法很好,只是您可能沒有使用過緩存。使用緩存&你將獲得一個很好的速度。同時在Google Speed Insights上檢查您的服務器響應時間,速度等。它會告訴你如何使它更具事實性。希望能幫助到你。

VJ

+0

緩存?我知道它是什麼,但我不熟悉它的實現。 – user3718908

+0

更新了我的帖子,請查看。 – user3718908

1

您可以通過引入緩存,無論是服務器端和客戶端提高性能。

服務器端緩存:而不是每次都進行數據庫查詢,將對象保存在內存中一段時間​​。你可以爲一個對象定義一個'生存時間',如果該對象已經'過期',你重新查詢數據庫。

可能有很多庫支持這種功能,但我只是自己構建它,因爲它並不那麼複雜。最棘手的部分是確保當多個線程試圖修改您的緩存對象集合時沒有任何問題。

使用角度時客戶端緩存是一件輕而易舉的事情。這是從$http文檔:

要啓用緩存,請求配置緩存屬性設置爲 真(使用默認緩存),或自定義緩存對象( $ cacheFactory建)。啓用緩存時,$ http將來自服務器的響應 存儲在指定的緩存中。下一次發出相同請求 時,響應將從緩存中提供,而不會向服務器發送 請求。