What can I use with Web Workers?

问题

I have a few questions about web workers

Does the worker have access to storage? E.g. indexedDB/webSQL and local storage of the file the worker was initiated from?
How can i include a file in a worker? I have a functions.js which has alot of quick app related functions and it really wont make sense to copy paste the file's contents in a worker only to have two different places up update my functions.
Can I have a DOM inside a worker? like load an audio file in a temp audio tag to read its duration and if it is playable or not. Not access dom of parent page, but have a DOM in the worker itself.
If the answers to any of the question is negative then how can/should it be done manually?

This is for a chrome app so I have access to the latest Chrome APIs and I don't need to care about backward compatibility.

回答1:

There is no DOM access of any kind from a web worker - period. ALL DOM manipulation must be done from the main JS thread. Web Workers can only communicate with the main thread via messaging.

This previous SO question tells you that web workers cannot access local storage, something that was easily found with a Google search.

That same thread has a list of what web workers can access.

It is unclear what you mean by "include a file in a worker". You can import scripts. I don't know what else you're asking about. You can use an ajax call to fetch data if that will help you with your audio file.

This sounds to me like you need to do some basic research about what you can and can't do with web workers (as there is a TON written about it on the web) and then come back with a lot more specific questions that incorporate that knowledge.

There are no hacks for web workers that let you do more than you are supposed to be able to do.

You can do work in the main JS thread and do it in little chunks with setTimeout if you have a lot of work to do and want to keep the main UI as responsive as possible. This is a very old design pattern that goes back to the days before threading was available or easy to use. It involves designing your work such that it can be done in little pieces with state stored in some persistent object and then you can repeatedly do small amounts of work and then return back, only to pick up the next piece of work on the next timer tick.

回答2:

You can load a javascript library. See this example:

<body>
    <button>Start</button>
    <div id="output"></div>
    <script id="worker_1" type="text/js-worker">
        importScripts(base_url + '/worker_lib2.js');

        function run(event) {
            var msg = event.data;
            this.postMessage({ answer: hello(event.data.name)});
        }

        this.addEventListener('message', run, false);
    </script>

    <script>
        var base_url = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
        var array = ['var base_url = "' + base_url + '";' + $('#worker_1').html()];
        var blob = new Blob(array, {type: "text/javascript"});

        $('button').click(function() {
            var url = window.URL.createObjectURL(blob);
            console.log(url);
            var worker = new Worker(url);
            worker.addEventListener('message', function(event) {
                $('#output').html(event.data.answer);
            }, false);
            worker.postMessage({
                name: 'Steve'
            });
        });
    </script>
</body>

With the library worker_lib2.js containing the hello function.

function hello(msg) {
    return 'Hello... ' + msg;
}

来源：https://stackoverflow.com/questions/7495227/what-can-i-use-with-web-workers

标签

javascript

html5

google-chrome

google-chrome-extension

web-worker