简述Web Worker和 WebSocket的作用?

Web Worker

Web Worker 是 HTML5 引入的一个多线程工具,它允许我们创建一个独立于主线程运行的工作线程,用于执行一些耗时的计算操作。这样可以避免因为复杂的计算任务阻塞主线程,从而影响用户界面的响应。

例如,如果你正在制作一个涉及复杂图形处理或者大量计算的web应用,你可能会发现这样的操作会让浏览器变得非常卡顿,因为JavaScript是单线程的,这些计算操作会阻塞用户界面的渲染。这时,你就可以用Web Worker来在后台执行这些操作,避免阻塞主线程。

let worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);
worker.postMessage('Hello World'); 

在这个例子中,’worker.js’是一个单独的JavaScript文件,它在自己的线程中运行。主线程通过’postMessage’方法向worker发送数据,然后通过监听’message’事件来接收worker返回的数据。

WebSocket

WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通信的协议。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在很多实时应用中,例如聊天应用、多人在线游戏、实时交易系统等,都需要服务器能够主动向客户端推送数据,这就需要用到WebSocket。

let socket = new WebSocket("ws://localhost:8080/socket");

socket.onopen = function(event) {
  socket.send("Hello Server");
};

socket.onmessage = function(event) {
  console.log(event.data);
};

在这个例子中,我们创建了一个新的WebSocket连接,然后在连接打开后向服务器发送数据,同时监听服务器返回的数据。

发表评论

后才能评论