由於臉書應用程式的需要,與Google合作在Chrome瀏覽器加入isInputPending API,這是第一個將中斷概念用於網頁使用者輸入的API,讓開發者可以呼叫該API,調度網頁上的JavaScript工作,改善佇列延遲,讓使用者體驗更順暢,這個實驗性的API將在Chrome 74中開始提供。

瀏覽器上存在快速載入頁面和快速回應事件的兩難,當網站需要使用JavaScript程式碼,其快速載入頁面的方法,便是不被中斷的執行完整個程式碼區塊,但是這樣會讓頁面無法即時回應使用者的輸入,因為網頁瀏覽器的JavaScript引擎通常為單執行緒,也就是說在頁面同時只能執行一項操作,在頁面載入的時候,當使用者點擊了某些內容,則這些內容會被先儲存在佇列中,待程式碼區塊執行完畢,才會處理佇列裡的工作。

而臉書為了達到權衡回應使用者輸入以及載入頁面的效率,將JavaScript分解成數個小程式碼區塊,當頁面載入時,會先執行一部分JavaScript,並將控制權交還給瀏覽器,待瀏覽器檢查輸入事件佇列,獲取頁面需要的資訊,接著才跳回來繼續執行JavaScript。也就是說當頁面想要更即時的回應使用者,JavaScript程式碼區塊就必須被切割的更小,但太多小區塊的程式碼,又會影響頁面載入時間。

為了徹底解決這個必須在兩者間權衡的難題,因此臉書提出了一個實驗性API提案,與Chrome團隊進行合作,在Chrome 74中加入isInputPending API試用版本,提供開發人員更靈活地調度JavaScript工作的手段。開發者可以在執行JavaScript工作的時候,使用isInputPending來決定是否要將控制權交還給瀏覽器,臉書提到,只要使用得當,isInputPending可以在幾乎不影響效能的情況下,完全消除快速載入和快速回應事件之間的權衡難題。

當瀏覽器有需要處理的輸入事件,則isInputPending()會回傳true,這個函式在不輸入任何參數的情況下,將檢查所有類型的事件,也可以手動指定檢查的事件,以個別檢查滑鼠游標、滾輪、觸控或是DOM UI等事件。

臉書表示,新加入的isInputPending API代表了臉書開發新網頁標準的方法,並對開源網頁瀏覽器進行貢獻,這個API還會被整合到React的並行模式中,讓開發者得以開箱即用,接下來臉書會繼續與Chrome合作其他的排程API。


Advertisement

更多 iThome相關內容