使用Web Worker优化你的Vue应用程序的性能

Getting a Vue app to perform faster and smoother is one of the issues Vue.js software developers face. One way to do that is by offloading some heavy-duty work to another thread and allowing the main thread to handle the UI. But we can only do that with the help of web workers.

让Vue应用执行得更快、更顺畅是Vue.js软件开发者面临的问题之一。其中一个方法是将一些繁重的工作卸载到另一个线程，让主线程来处理UI。但我们只有在Web工作者的帮助下才能做到这一点。

In this article, we will talk about web workers, how to offload a task to a web worker and how to optimize our web application by hooking a web worker into it and the app workflow.

在这篇文章中，我们将讨论网络工作者，如何将任务卸载到网络工作者身上，以及如何通过将网络工作者与应用程序工作流挂钩来优化我们的网络应用。

But first, what is a web worker?

但首先，什么是网络工作者？

Executing scripts on an HTML page can sometimes be something to worry about as the page can become unresponsive depending on how heavy the javascript operations are. A web worker is javascript that runs in the background, not depending on other scripts, without affecting the page’s performance. Meaning you can go about performing normal operations on your site like clicking and basic navigation without experiencing unresponsiveness on the site.

在HTML 页面上执行脚本有时会让人担心，因为页面会变得没有反应，这取决于javascript操作的繁重程度。网络工作者是在后台运行的javascript，不依赖其他脚本，不影响页面的性能。这意味着您可以在网站上进行正常的操作，如点击和基本导航，而不会出现网站无响应的情况。

Starting Project

启动项目

Let’s see how easy it is to offload some of the work that you might be doing today inside your Vue application to a background thread. To do this, we are going to demo this by using the Vue CLI to generate the project, just a barebone project, then we are going to use a web worker to spin up a second thread. And to make that work with a webpack workflow that you might have or that you will have in the project.

让我们看看把你今天可能在Vue应用程序中做的一些工作卸载到后台线程是多么容易。要做到这一点，我们将通过使用Vue CLI来演示这个项目，只是一个骨干项目，然后我们将使用一个网络工作者来启动第二个线程。并使其与你可能有的或你将有的项目中的webpack工作流一起工作。

Once we have scaffolded our project with the Vue CLI, we will use the worker loader, to subscribe to a post message. The message will be sent within the threads, and to make things better we will be using Comlink created by t...