HTML最新标准HTML5总结(必看)

2020-04-25 08:07:43易采站长站整理

HTML5 Web Workers

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能(JS多线程工作解决方案)。

Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。

优势:异步执行复杂计算,不影响页面的展示

 如下为一个求和的代码示例:

JavaScript Code复制内容到剪贴板

<script>   

var w;   

  

function startWorker() {   

    if (typeof (Worker) !== "undefined") {   

        if (typeof (w) == "undefined") {   

           w = new Worker("rs/demo_workers.js");   

        }   

        w.onmessage = function(event) {   

           document.getElementById("result").innerHTML = event.data;   

        };   

    } else {   

        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers…";   

    }   

}   

  

function stopWorker() {   

    w.terminate();   

}   

</script>  

demo_workers.js文件,其中的postMessage() 方法 ,用于向 HTML 页面传回一段消息。

JavaScript Code复制内容到剪贴板

var i=0;   

  

function timedCount()   

{   

    i=i+1;   

    postMessage(i);   

    setTimeout("timedCount()",500);   

}   

  

timedCount();  

Tips:

1.不能跨域加载JS

2.worker内代码不能访问DOM

HTML 5 服务器发送事件

传统的网页都是浏览器向服务器“查询”数据,但是很多场合,最有效的方式是服务器向浏览器“发送”数据。比如,每当收到新的电子邮件,服务器就向浏览器发送一个“通知”,这要比浏览器按时向服务器查询(polpng)更有效率。