HTML5新特性 day_06(8.12) WebWorker、SVG矢量图形

最新推荐文章于 2024-04-12 12:54:33 发布

加1床铺盖

最新推荐文章于 2024-04-12 12:54:33 发布

阅读量253

点赞数

分类专栏： HTML5(8.5-8.15) 文章标签： html5 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_70328115/article/details/126817482

版权

本文探讨HTML5中的WebWorker如何在后台异步执行耗时任务，防止主线程阻塞，以及SVG矢量图形的创建与应用。通过实例展示了WebWorker的创建规则和限制，以及SVG在网页中的引入和操作方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`WebWorker`

浏览器中的Javascript属于单线程模型。即在html页面中写的代码都是在主线程中执行。而主线程的主要工作是不间断的绘制浏览器网页的UI。 这样才能保证网页不卡，接收用户的动态操作。所以主线程又名：UI线程。

那么如果在主线程执行过程中，遇到了一些耗时运算（耗时代码），将会阻塞主线程的执行，导致无法绘制UI，页面假死。

<html>
    <head>  </head>
    <body>
        <script>
        	......
            ...耗时代码...
            ......
        </script>
    </body>
</html>

案例：编写一个网页，实现一段耗时代码，感受一下页面假死。

斐波那契数列：

1	1	2	3	5	8	13	21	34	55	89	....

function fb(n){
    return n<3 ? 1 : fb(n-1)+fb(n-2)
}

发现在浏览器中执行这些耗时代码，将会阻塞主线程的执行，导致页面假死。如何解决？

`WebWorker`

HTML5提供了WebWorker用于在网页端使用js启动子线程，webworker可以脱离主线程，在子线程中异步执行某些耗时操作。这样就不会阻塞主线程绘制UI。

所以WebWorker的使用场景在于在网页中异步执行耗时代码，防止阻塞主线程卡死，导致页面崩溃。

最低0.47元/天解锁文章