Skip to content

鼓励作者:欢迎打赏犒劳

Web Worker 和 Web Socket

HTML5 有两个新特性,Web Worker 和 Web Socket

Web Worker

Web Worker 允许 Web 应用程序创建后台线程来执行耗时的任务,而不会阻塞主线程的执行,它有以下特点:

  • 独立线程运行:浏览器提供一个子线程,可单独执行,不会阻塞主线程的执行
  • 通信机制:Web Worker 与主线程之间通过消息传递的方式通信。主线程可以向 Worker 发送数据,Worker 也可以向主线程发送数据
  • 数据隔离:Web Worker 运行在独立的线程,不能访问 DOM 等主线程专有的资源,可以避免 Worker 对主线程造成干扰
  • 种类:HTML5 标准定义了两种 Web Worker,分别是 Dedicated Worker 和 Shared Worker。前者仅能被创建它的页面使用,后者可以被多个页面共享

应用场景:

  • 图像处理和数据分析:耗时的计算任务放在 Worker 中执行,保持主线程的流畅
  • 网路请求:使用 Worker 执行网络请求,避免阻塞主线程
  • 离线缓存和数据存储:Worker 可以在后台执行数据的缓存和持久化操作

Web Socket

Web Socket 是一种网络通信协议,它提供了浏览器与服务器之间的双向通讯通道,相比传统的 HTTP 协议,Web Socket 具有以下特点:

  • 持久连接
  • 双向通信
  • 实时性

应用场景:实时聊天、实时推送、协同编辑、游戏和物联网

总结

Web Worker 作用于浏览器,名为 Web 工人,它是为了让页面渲染更流畅而出的一个特性,把复杂的计算、耗时的网络请求放在 Worker 线程上,避免长时间的卡顿。当数据计算、请求有结果后给主线程,主线程拿到数据后直接渲染即可

Web Socket 作用于客户端(浏览器端)和服务器端,没 Socket 之前客户端只能请求服务端,服务端只能接受客户端的请求。有了 Socket 之后,服务端可以请求客户端,实现双向通讯