需要了解关于Web Workers的7件事-html教程-PHP中文网

　介绍

　　Web Workers允许你在后台运行JavaScript代码，而不会阻止web用户界面。Web Workers可以提高网页的整体性能，还可以增强用户体验。Web Workers有两种风格 ——专用Web Workers和共享Web Workers。本文讨论了你所需要知道的Web worker的七个关键方面，帮助你决定在应用程序中使用它们的话。

　1.Web Workers允许你在后台运行JavaScript代码

　　通常，你在Web页面中编写的JavaScript代码在与用户界面相同的线程中执行。这就是为什么当你点击一个会触发漫长处理过程的按钮，网页的用户界面会冻结。除非处理完成，否则你就无法工作于用户界面。Web worker允许你在后台执行JavaScript，以便用户界面保持响应，即使同时正在执行某些脚本。执行脚本的后台线程通常称为worker thread或worker。你可以生成尽可能多的worker，只要你想。你还可以将数据传递到正在worker thread中执行的脚本，并在完成时将值返回到主线程。然而，Web Workers有一些限制，如下所示：

Web Workers无法从web页面访问DOM元素。
Web Workers无法从web页面访问全局变量和JavaScript函数。
Web Workers不能调用alert()或confirm()函数。
不能在Web Workers中访问诸如窗口，文档和parent这样的对象。

　　但是，你可以使用setTimeout()，setInterval()等函数。你也可以使用XMLHttpRequest对象向服务器发出Ajax请求。

　2.Web Workers有两种类型

　　Web Workers有两种类型：专用Web Workers和共享Web Workers。专用Web Workers随同创建它们的网页一起存在和死亡。这意味着在网页中创建的专用Web Workers无法通过多个网页访问。另一方面，共享Web Workers在多个网页之间是共享的。Worker类代表专用Web Workers，而SharedWorker类代表共享Web Workers。

　　在许多情况下，专用Web Workers就可以满足你的需求。这是因为通常你需要在worker thread中执行一个网页的特定脚本。然而，有时，你需要在worker thread中执行一个脚本，并且这个worker thread对多个网页通用。在这种情况下，创建许多专用Web Workers，每个页面一个，还不如使用共享Web Workers。由一个网页创建的共享web worker仍然可用于其他网页。只有当所有到它的连接被关闭，才能毁坏它。共享Web Workers比专用Web Workers更复杂一点。

　3.Worker对象代表专用Web Worker

　　现在，你了解了Web Workers的基础知识，让我们看看如何使用专用Web Workers。下面讨论的示例假设你已使用喜欢的开发工具创建了一个Web应用程序，并且还在其Script文件夹中添加了jQuery和Modernizr库。将HTML页面添加到web应用程序，然后键入以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery-2.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.webworkers)
            {
                alert("This browser doesn&#39;t support Web Workers!");
                return;
            }
            $("#btnStart").click(function () {
                var worker = new Worker("scripts/lengthytask.js");
                worker.addEventListener("message", function (evt) {
                    alert(evt.data);
                },false);
                worker.postMessage(10000);
            });
        });

    </script>
</head>
<body>
    <form>
        <input type="button" id="btnStart" value="Start Processing" />
    </form>
</body>
</html>

登录后复制

　　上面的HTML页面包含一个触发一些JavaScript处理的按钮（btnStart）。请注意，该网页引用了Modernizr和jQuery库。

热门教程

更多>