WebWorker,EventSource,Ajax,WebSocket,WebRTC共同构成网络生态中主要的部分,WebWoker多线程的出现,使得Javascript更容易实现异步编程,特别是在耗时任务使得Javascript更加健壮。
一.支持多线程和本地数据存储
支持LocalStorage数据存储
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setAppCacheMaxSize(1024*1024*25);
String appCachePath = ctx.getApplicationContext().getCacheDir().getAbsolutePath();
webview.getSettings().setAppCachePath(appCachePath);
webview.getSettings().setAllowFileAccess(true);
webview.getSettings().setAppCacheEnabled(true);
2.支持多线程(Wokers与ShareWorker API)
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
settings.setAllowContentAccess(true);
settings.setAllowFileAccessFromFileURLs(true);
二.实现多线程
1.实现workers.js子线程
var i=0;
function timedCount()
{
i=i+1;
self.postMessage(i);
setTimeout("timedCount()",500);
}
self.onmessage = function(event) {
var method = event.data.method;
var args = event.data.args;
self.postMessage({method: method, reply: args });
};
timedCount();
在html5中实现WebWorker的调用该
<script type="text/javascript" >
if(!!window.Worker&& typeof(Worker)!=="undefined")
{
window.worker = new Worker("./workers.js");
window.worker.onmessage = function (event)
{
console.dir(event.data);
document.querySelector('#span_title').innerHtml = event;
};
worker.onerror(function(event) {
console.log(event);
});
}else{
alert('不支持 Web Worker');
}
window.onbeforeunload = function()
{
window.worker.terminate();
}
</script>
2.当然,同一个页面也能实现主线程与子线程通信
重点:<script id="worker" type="app/worker"></script>
<!DOCTYPE html>
<body>
<script id="worker" type="app/worker">
addEventListener('message', function() {
postMessage('Work done!');
}, false);
</script>
<script type="text/javascript">
(function() {
var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);
worker.postMessage('');
})();
</script>
</body>
</html>
3.再来看看ShareWorker
ShareWorker表示创建一个线程,能被其他同源同域的窗口,iframe都能访问,这也就是类似Java中的多线程中的资源共享,当然这里应该不会出现同步问题。
<!DOCTYPE HTML>
<title>Shared workers: demo 1</title>
<pre id="log">Log:</pre>
<script>
var worker = new SharedWorker('workers.js',"com.my.share.webwoker"); //提供第二个参数,参数一致才能被共享
var log = document.getElementById('log');
worker.port.onmessage = function(e) { // note: not worker.onmessage!
log.textContent += '\n' + e.data;
}
</script>
当然,还有ServiceWorker,这里就不介绍了
http://javascript.ruanyifeng.com/htmlapi/webworker.html#toc7
----------------------------------------------------------------------------------------------------------------------
三.文件上传
----------------------------------------------------------------------------------------------------------------------