iT邦幫忙

0

網頁啟動外接讀卡機效能問題

  • 分享至 

  • xImage

專案是金融方面的網站,某個前端功能會需要插入usb讀卡機啟動一個第三方介面(需事先安裝元件)
流程大概是頁面內按下按鈕 > 呼叫元件 > 開啟元件視窗 > 插入usb讀卡機 > 登入元件 > 開始操作元件上的功能

這個元件提供一個js檔,裡面有各種api來接收或呼叫相關功能,
現在的問題是當我啟動這個第三方元件,整個頁面的資源就會被他佔住無法操作,即使是以非同步的方式處理也一樣,猜測因為是在同一個頁面去呼叫這個元件的api,在元件沒結束前都會卡著。

開啟的介面可以正常操作,直到操作結束關閉元件回傳結果後網頁就會正常。

頁面需要接收元件傳回的成功或失敗結果並呈現出來

想請問如何改善效能,例如開啟元件後網頁效能不會被佔住的做法,或是這種功能一般應該怎麼處理比較好,另外專案是以react開發的前後端分離網站,感謝

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2022-05-31 09:31:23 檢舉
這種弄個 loading circle 擋住就好了吧。
通常這個也是用在處理身分認證/簽證等關鍵事務,要鎖定也蠻正常的。
卡蹦 iT邦新手 5 級 ‧ 2022-05-31 11:09:24 檢舉
了解 所以 這種元件會鎖住整個網頁不讓操作是正常現象 好像蠻合理的 不然還能操作亂點的話就跑去別的頁面了
卡蹦 iT邦新手 5 級 ‧ 2022-05-31 11:18:57 檢舉
只是說如果想要在背後做一些js的話也會被卡著,因為元件沒有提供倒數計時的功能 專案有個需求需要讓他在特定秒數自動關閉,本來想利用settimeout來做,但是因為卡著就沒辦法了
froce iT邦大師 1 級 ‧ 2022-05-31 14:49:10 檢舉
> 這種元件會鎖住整個網頁不讓操作是正常現象
不是,現在這種元件設計通常都是做成 web service,js 打 http request 到本機,基本上應該也是異步。卡住通常是元件的問題譬如說是用activeX等舊的元件。這是要看元件如何設計才能知道和解決。

但這個問題的確不大是因為我上面說的,其實這些都會是必經的關卡如簽證、登入等,都是需要處理完才能進行下一步的,所以同步異步差異不大,想辦法騙過使用者就行了。
卡蹦 iT邦新手 5 級 ‧ 2022-05-31 15:17:20 檢舉
好的,經過你的說明在這種元件上有粗淺的了解,感謝回復
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答