1.VuePress

大家看过不少Vue.js及其子项目的文档，一定发现了它们风格完全一致，界面清爽，读起来很舒服，它们都使用了vuepress。

VuePress是尤大为了支持 Vue 及其子项目的文档需求而写的一个静态网站生成工具，广泛用于编写技术文档 ，可以部署在github上做个人博客。

原理：

在构建过程中，会创建应用程序的服务器渲染版本，通过访问每个路由，来渲染相应的 HTML。

其中， 每个 markdown 文件都使用 markdown-it 编译为 HTML，然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue，在需要嵌入动态内容时，这种使用方式非常有用。

十分实用的特性：

• md文件可内嵌vue代码
• 可自定义主题
• 利用service worker做离线缓存
• 多语言支持
• 基于git的最近更新

官方文档： https://vuepress.docschina.org/guide/#%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86-how-it-works

快速搭建： https://segmentfault.com/a/1190000016333850#articleHeader1

2.WebWorker

web worker是运行在后台的jacvascript，利用类似线程的消息传递实现并行，独立于其他脚本，不会影响页面的性能。

web worker能够长时间运行，有理想的启动性能以及理想的内存消耗。

worker 创建后，它可以向它的创建者指定的事件监听函数传递消息，这样该worker生成的所有任务都会接收到这些消息。

webworker有专用线程dedicated worker(单窗口专用)，sharedWorker(可多窗口共享)，以及后来的service worker（目前浏览器支持程度还不高）。

2.1.dedicated worker

使用方法：

worker线程里监听onmessage,

页面线程里创建worker对象：const myworker = new Worker("worker.js")

发送消息：postMessage(msg)

接受消息：onmessage = function(e){const msg = e.data}

msg的数据格式自行定义。

终止worker：myworker.terminate()

例如下面的示例，worker会接收页面上输入的两个数字，计算出乘积后返回结果。

worker.js

onmessage = function(e) {   console.log('Worker: Message received from main script');   let result = e.data[0] * e.data[1];   if (isNaN(result)) {     postMessage('Please write two numbers');   } else {     let workerResult = 'Result: ' + result;     console.log('Worker: Posting message back to main script');     postMessage(workerResult);   } }

index.html里

const first = document.querySelector('#number1'); const second = document.querySelector('#number2'); const result = document.querySelector('.result'); if (window.Worker) {     const myWorker = new Worker("worker.js");      first.onchange = function() {       myWorker.postMessage([first.value, second.value]);       console.log('Message posted to worker');     }      second.onchange = function() {       myWorker.postMessage([first.value, second.value]);       console.log('Message posted to worker');     }      myWorker.onmessage =