一、WebWorker
浏览器中的Javascript属于单线程模型。即在html页面中写的代码都是在主线程中执行。而主线程的主要工作是不间断的绘制浏览器网页的UI。 这样才能保证网页不卡，接收用户的动态操作。所以主线程又名：UI线程。
那么如果在主线程执行过程中，遇到了一些耗时运算（耗时代码），将会阻塞主线程的执行，导致无法绘制UI，页面假死。
案例：编写一个网页，实现一段耗时代码，感受一下页面假死。
发现在浏览器中执行这些耗时代码，将会阻塞主线程的执行，导致页面假死。如何解决？
WebWorker
HTML5提供了WebWorker用于在网页端使用js启动子线程，webworker可以脱离主线程，在子线程中异步执行某些耗时操作。这样就不会阻塞主线程绘制UI。
所以WebWorker的使用场景在于在网页中异步执行耗时代码，防止阻塞主线程卡死，导致页面崩溃。
如何使用？
-
新建一个
js文件， 将耗时代码写在该文件中，该文件将会WebWorker加载，在工作线程中异步执行。 -
在
html的js主线程中，创建WebWorker对象，启动WebWorker异步执行耗时代码。
new Worker()意味着创建一个Worker对象，每一个Worker对象都会管理一条子线程。所以一定要注意：new Worker()不要执行太频繁。创建过多worker依然会浪费很多机器资源。
WebWorker的基本使用规则
-
在页面初始化时，创建一个
worker，并且定义worker都需要做什么（方法）。 -
在合适的时间点，给
worker发消息，worker接收消息后，按照要求执行耗时任务。 -
在worker中通过
onmessage接收消息，处理复杂业务逻辑：
使用限制：
在webworker中无法直接操作dom，只可以做一些运算。在任何前端技术中，修改UI的工作永远都是主线程的工作。
如果在worker中希望修改UI，需要向主线程发消息，在主线程中接收，并且处理该消息。主线程有修改UI的能力。
二、SVG
SVG（Scalable Vector Graphics）可伸缩的矢量图形。是一种图像格式。SVG图像的本质实际上是一篇XML文档。该文档中记录绘制图形所需要的参数，当放大、缩小图形时，只需要进行矢量运算后，浏览器重画即可；并非是像素点的放大（马赛克）。
编写一个svg图像
-
新建文件：
circle.svg。通过svg代码绘制一个圆。 -
在网页中引入并显示这个
svg图像。
svg的使用场景与使用方法：
-
使用img引入：
-
使用css background-image引入：
-
直接在html页面中编写svg标签：
-
针对页面中的svg标签，可以使用dom操作：