Đặt vấn đề
Thỉnh thoảng, bạn sẽ lâm vào tình cảnh buộc phải tạo ra những component cực nặng trong việc create và render, nguyên nhân chủ yếu là nó phải thực hiện nhiều logic quá phức tạp. Tôi (tác giả) cũng không ngoại lệ.
Tôi đã làm ra một trang sử dụng có sử dụng StoryBlok, họ có một tính năng cực kỳ ngon đó là tạo ra một rich-text field để những người quản lý nội dung có thể sử dụng để định dạng văn bản như text, list, images, quote blocks, in đậm, in nghiêng…
Khi bạn get nội dung của rich-text từ StoryBlok API sẽ thấy nó có cấu trúc riêng của nó. Để render data đó thành HTML, bạn phải gọi hàm richTextResolver.render(content) từ storyblok-js-client.
Ví dụ nếu gói gọn chức năng này vào một component RichText.vue thì về cơ bản sẽ như này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>contentHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"content"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> computed<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">contentHtml</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$storyapi<span class="token punctuation">.</span>richTextResolver<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
Code trông khá đơn giản nhỉ, có vẻ không có gì lạ lẫm lắm, nhưng lại có 1 điều khá bất ngờ.
Có vẻ như việc render tỏ ra rất nặng nề, dễ nhận thấy nhất là khi render nhiều components như thế này với một lượng nội dung kha khá.
Bây giờ tưởng tượng tình huống như sau: Bạn có 1 list các rich-text component ở trên page và một dropdown để filter hiển thị theo tiêu chí nào. Khi thay đổi trên dropdown filter, bạn fetch lại tất cả nội dung và cái list sẽ được render lại.
Đây là lúc bạn nhận rõ sự nặng nề của richTextResolver.render, cái dropdown bị lag khi đóng lại sau khi bạn select.
Nguyên nhân là mặc định JavaScript thực thi các lệnh trên main thread, which is UI-blocking.
Vấn đề đã ngộ, Vậy có cách cứu chữa nào ko?
Giải quyết vấn đề
Dễ thôi: Sử dụng Web Worker cho việc render rich-text.
Web Workers chạy trong một Thread riêng biệt, quan trọng hơn là chúng ko UI-blocking, rất phù hợp cho case của chúng ta.
Note: Tôi không đi sâu vào Web Workers, bạn có thể xem thêm documents của nó.
Hãy luôn nhớ rằng web workers có context riêng của nó, và mặc định chúng ta không thể access vào các contexts khác bên ngoài, nhưng chúng ta lại cần access storyblok-js-client module. Để làm được điều này, Webpack có 1 giải pháp là worker-loader.
Đầu tiên, cài đặt trước:
1 2 3 4 | npm install -D worker-loader # or yarn add worker-loader |
Nếu bạn dùng Nuxt.js, chúng ta sẽ config nó trong nuxt.config.js như sau:
1 2 3 4 5 6 7 8 9 | build<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">extend</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> <span class="token punctuation">{</span> isDev<span class="token punctuation">,</span> isClient <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> config<span class="token punctuation">.</span>module<span class="token punctuation">.</span>rules<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> test<span class="token punctuation">:</span> <span class="token regex">/.worker.js$/</span><span class="token punctuation">,</span> use<span class="token punctuation">:</span> <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"worker-loader"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Với cấu hình này, tất cả các file *.worker.js đều sẽ được xử lý và load bởi worker-loader.
Bây giờ thử tạo render-html.worker.js
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> StoryblokClient <span class="token keyword">from</span> <span class="token string">"storyblok-js-client"</span><span class="token punctuation">;</span> <span class="token keyword">let</span> storyClient <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">StoryblokClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// When the parent theard requires it, render the HTML</span> self<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> result <span class="token operator">=</span> storyClient<span class="token punctuation">.</span>richTextResolver<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> self<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Đó là một cách làm cơ bản của worker. Bạn cần phải lắng nghe sự kiện message – cách mà worker giao tiếp với Vue.js app. Từ đó bạn có thể lấy data từ event, render nó bằng storyblok-js-client và gửi về lại kết quả self.postMessage.
Bây giờ cần sửa component RichText.vue một xíu để sử dụng worker.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>contentHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">import</span> Worker <span class="token keyword">from</span> <span class="token string">"./render-html.worker.js"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> worker <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> props<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"content"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> contentHtml<span class="token punctuation">:</span> <span class="token string">""</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Update the state with the processed HTML content</span> worker<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>contentHtml <span class="token operator">=</span> data<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Call the worker to render the content</span> worker<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> |
Kết quả
Hẳn là bạn tò mò về kết quả hiệu năng sẽ được cải thiện bao nhiêu sau khi sử dụng worker, chắc chắn rồi. Chúng ta sẽ thử đo đạc 1 tí để performace thêm ý nghĩa.
Thật ra bạn nên đọc trước bài này: learn and undestand how to meassure performance in Vue.js components để đảm bản là bạn hiểu rõ hơn về việc test bên dưới.
Tôi đã mmeassure component bằng medium-size (6x throttle) trên máy mac của tôi.
Kết quả là: Thời gian render nhanh hơn 20.65x lần và thời gian patch nhanh hơn 1.39x, con số cũng ấn tượng nhỉ.
Nếu bạn chưa biết
rendervàpatchnghĩa là gì thì bài viết này có giải thích qua.
Và đó là tip của hôm nay.
See you next month =))
Bài viết được lược dịch từ https://vuedose.tips, cảm ơn bạn đã đọc bài viết.