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的使用场景在于在网页中异步执行耗时代码，防止阻塞主线程卡死，导致页面崩溃。
如何使用？
新建一个
js文件， 将耗时代码写在该文件中，该文件将会WebWorker加载，在工作线程中异步执行。在
html的js主线程中，创建WebWorker对象，启动WebWorker异步执行耗时代码。let worker = new Worker('worker.js路径')
new Worker()意味着创建一个Worker对象，每一个Worker对象都会管理一条子线程。所以一定要注意：new Worker()不要执行太频繁。创建过多worker依然会浪费很多机器资源。
WebWorker的基本使用规则
在页面初始化时，创建一个
worker，并且定义worker都需要做什么（方法）。let worker = new Worker('./worker.js')在合适的时间点，给
worker发消息，worker接收消息后，按照要求执行耗时任务。worker.postMessage(45)在worker中通过
onmessage接收消息，处理复杂业务逻辑：//worker.js 监听消息到来 worker将会把数据封装到event对象中传过来 onmessage = (event)=>{ // event.data 获取传来的数据 }
使用限制：
在webworker中无法直接操作dom，只可以做一些运算。在任何前端技术中，修改UI的工作永远都是主线程的工作。
如果在worker中希望修改UI，需要向主线程发消息，在主线程中接收，并且处理该消息。主线程有修改UI的能力。
SVG
SVG（Scalable Vector Graphics）可伸缩的矢量图形。是一种图像格式。SVG图像的本质实际上是一篇XML文档。该文档中记录绘制图形所需要的参数，当放大、缩小图形时，只需要进行矢量运算后，浏览器重画即可；并非是像素点的放大（马赛克）。
编写一个svg图像
新建文件：
circle.svg。通过svg代码绘制一个圆。在网页中引入并显示这个
svg图像。<img src="./circle.svg">
svg的使用场景与使用方法：
使用img引入：
<img src="circle.svg">使用css background-image引入：
<div style="background-image:url('./circle.svg')"></div>直接在html页面中编写svg标签：
<html> <body> <svg style="wdith:x; height:xx;"> <circle id="c"/> <rect></rect> </svg> <script> let c = document.getElementById('c') c.r = 100 // 修改圆半径 c.onclick = function(){ } </script> </body> </html>针对页面中的svg标签，可以使用dom操作：
<script> let c = document.getElementById('c') c.onclick = function(){ // alert('点击了圆') c.style.fill = 'red' c.setAttribute('r', '50') // 设置dom对象的属性 } </script>
ECharts
ECharts是一款非常优秀的基于JS的图形图表库。