浏览器调试html js,Web Worker介绍、js调试及浏览器兼容实现

最新推荐文章于 2024-12-25 01:11:37 发布

孙建华2008

最新推荐文章于 2024-12-25 01:11:37 发布

阅读量692

点赞数

文章标签：浏览器调试html js

本文介绍了Web Worker的由来、工作原理、创建与通信方式，以及浏览器兼容性实现。通过示例展示了如何在不同的浏览器环境中使用Web Worker，强调了其在处理复杂计算时避免阻塞主线程的优势。同时，文章提到了Chrome浏览器的Worker调试工具，并分享了一个封装好的Web Worker模块，以简化开发者的工作并解决兼容性问题。

摘要由CSDN通过智能技术生成

这几天主要围绕webworker的实现来了。所以也下了点功夫，主要是对webworker的介绍/实现原理/调试几个方面进行了不算深入的了解，并最终成功封装了自己的跨浏览器webworker模块。虽然还比较粗糙，但是已经具备了基本功能，可以让使用者不用关心浏览器的兼容问题，不妨试一下。下面就我最近对webworker的理解做一下梳理。

一、Web Worker的由来

众所周知，javascript的运行都是在单线程中完成的，没有多线程的概念，顶多也就是一个异步加载和setTimeout或者setInterval的使用来模拟。至于具体浏览器内部是如何运作的可以看看jQuery作者John Resig对浏览器的运行时工作的分析文章，具体请移步到http://ejohn.org/blog/how-javascript-timers-work/观摩学习。那重点是今后有没有一个开辟多线程工作的可能呢？比如将一些复杂计算比如3D或者数据处理放到一个线程，webUI和事件的处理放在一个线程，更或者其他的监控放一个线程等等。HTML5肩负救世主的使命，理所应当的必须完成这个光荣的任务，为我们带来一线生机–Web Worker。2008年提出HTML5草案开始到现在其差不多已经定型到能够在独立的运行时环境(不同于页面主线程运行时)中运行，并且通过消息机制完成主线程了worker线程之间的数据通信。

二、Web Worker介绍

Web Worker的创建是在主线程当中通过传入文件的url来实现的。如下所示：

返回的webworker对象，该对象可以完成与worker线程的通信，主要通过webworker.postMessage()向线程发送消息，通过webworker.onmessage=function(evt){}来监听worker线程发送到主线程的消息&