javascript优化_如何通过使用服务人员来优化JavaScript应用-CSDN博客

javascript优化

Every now and then we hear about optimizing something. There are different kinds of optimizations we can do to make our apps faster and more efficient, or to save time or memory. This article will cover one of those methods — service workers.

时不时地我们听到关于优化某些东西的信息。我们可以进行多种优化，以使我们的应用程序更快，更高效，或节省时间或内存。本文将介绍这些方法之一- 服务 工作者。

TL; DR (TL;DR)

This tutorial explains what a service worker is and how to use it, in JavaScript. There is a code example at the end of it. If you want to skip the reading, here is the Git repo and here you may see a live demo.

本教程用JavaScript解释了什么是服务工作者以及如何使用它。在其末尾有一个代码示例。如果你想跳过阅读，这里是Git的回购，在这里你可以看到现场演示。

理论 (The Theory)

Let’s see first what a worker is this 👀 and what service can we use it for 🤓.

让我们首先看到AW orker这是👀和有何ervice我们可以用它来🤓。

The service worker is a simple script. It's JavaScript code, that your browser runs in the background, separate from a web page.

服务人员是一个简单的脚本。这是JavaScript代码，您的浏览器在后台运行，与网页分开。

It’s very convenient to use service workers for features that don’t need a web page or user interaction. One of the most common uses is intercepting and handling network requests. This includes managing a cache of responses.

将服务工作者用于不需要网页或用户交互的功能非常方便。最常见的用途之一是拦截和处理网络请求。这包括管理响应的缓存。

The following is a simple example of how to include a service worker in your application.

以下是一个简单的示例，说明如何在您的应用程序中包括服务工作者。

Usually, in the entry point of your app, you add this code:

通常，在应用程序的入口点，添加以下代码：

if ('serviceWorker' in navigator) {  
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js');  
    });
}

This way of using service workers is a little bit improved than the basic one. The basic method involves directly calling the register() method inside the if statement. In this case, we use the window load event to register the service worker after the page has finished loading. After doing this, you need to add your service worker code in the service-worker.js file. At this point, you might want to take a look at my service worker file.

这种使用服务人员的方式比基本方式有所改进。基本方法涉及直接在if语句内部调用register ()方法。在这种情况下，我们使用window load事件在页面完成加载后注册服务工作者。完成此操作后，您需要在service-worker.js文件中添加服务工作者代码。此时，您可能想看一下我的服务工作者文件。

All major browsers support Service Workers now, and you can start using them right away.

所有主要的浏览器现在都支持Service Worker，您可以立即开始使用它们。

这个例子 (The Example)

Enough theory, let’s build a real example app that will leverage the service workers feature.

有足够的理论，让我们构建一个真正的示例应用程序，以利用服务工作者功能。

Let’s imagine we are building an app that needs to load a big chunk of data. It could be, for example, a nice, big full-screen image we display on the front page. Or it could be a big video clip we have to wait to load. This is an ideal use case for a service worker to shine. Let’s see how. 👀

假设我们正在构建一个需要加载大量数据的应用程序。例如，它可能是我们在首页上显示的漂亮的大全屏图像。或者它可能是一个大视频剪辑，我们必须等待加载。对于服务人员来说，这是一个理想的用例。让我们看看如何。 👀

In our specific case, we will use the clock time to show the benefit of using service workers. What I mean is, that we will build a simple app, showing the time. It will have a nice, big button for fetching a nice, big image. And it will provide the user with an option to choose to use or not a service worker.

在我们的特定情况下，我们将使用时钟时间来展示使用服务工作者的好处。我的意思是，我们将构建一个简单的应用程序来显示时间。它将具有一个漂亮的大按钮，用于获取漂亮的大图像。并且它将为用户提供选择使用还是不使用服务人员的选项。

Here is a screenshot of how it looks:

这是它的外观的屏幕截图：

What this app demonstrates is, that when fetching the image (by clicking the button, wow!) with an active service worker — we don’t get blocked UI (user interface, i.e. fields, buttons, 🐛). If you choose not to use the service worker, you will get a frozen UI for a certain period of time. When the work completes and the main thread frees itself, it will unfreeze the UI.

该应用程序演示的是，当与活动的服务工作者一起获取图像时(通过单击按钮，哇！)，我们不会遇到阻塞的UI(用户界面，即字段，按钮，🐛)。如果您选择不使用服务工作者，则将在一段时间内获得冻结的UI。当工作完成并且主线程释放自身时，它将解冻UI。

If you don’t want to clone and run the code yourself, jump straight to the live demo.

如果您不想自己克隆并运行代码，请直接跳至实时演示。

结论 (Conclusion)

This demo of service workers in action shows us the advantage we get from using them. Especially when you are trying to build responsive and robust JavaScript applications. No user wants to end up in a frozen page for an unknown time, as no developer should want that for his application’s users. Keeping in mind the above, service workers are a *must* now. And we should not neglect them.

这次服务工人的演示向我们展示了使用他们所获得的好处。尤其是当您尝试构建响应式且功能强大JavaScript应用程序时。没有用户希望在冻结的页面中停留一个未知的时间，因为没有开发人员应该为其应用程序的用户提供该功能。牢记上述，服务工作者现在是*必须*。我们不应该忽视他们。

🔥 Thanks for reading! 🔥

🔥感谢您的阅读！ 🔥