突發奇想--使用js-dom進行離屏渲染

         這2天,研究單元測試的內容,讀了一遍vitest 和 @vue/test-utils 的文檔,並記錄原理和技巧在公司WIKI上!夜來無事,對電腦在思考如何解釋單元測試的一些概念,爲什麼Nodejs環境中,可以執行組件的代碼,js-dom是什麼,虛擬定時器是什麼呢,

       突然想到,js-dom可以在內存中,把一個vue組件加載爲渲染後的html,那麼我是不是可以啓動一個webWorker進程,對(大型的)Vue組件進行離屏渲染呢?比如我們現在維護的Grid組件,臃腫且卡頓了。假如某個更新邏輯需要400ms,這在主頁面上就是嚴重卡頓,要掉6,7幀。這種情況時,在主Vue中,留置一些Stub位,然後將一些相關屬性傳遞給webWorker,等它返回消息後,直接將對應的html更新到stub樁位上即可!

        這種使用js-dom + webWoker進行離屏渲染,那麼雖然不能讓用戶儘早看到更新結果,但是能避免卡頓,至少頁面主進程是光滑不掉幀的。

       但是經查詢,jsdom 或 happydom都是運行在nodejs環境中,即使是vue的createSSRApp 也是一樣,那麼有沒有在webWork渲染Vue組件的辦法呢?更棘手的是,即使輸出了有效的字符串,如何綁定上事件以及後續的mount等生命週期等邏輯,也就是所謂有“重新注水”!

      於是新的思路是,利用vue的自定義渲染器,寫一組nodeOps方法,它只用於操作字符串,最後輸出字符串。同時記錄mount事件,因爲後續要回放這個事件!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章