每次执行 translate.execute() 就会创建一个独立的翻译通道

因为一个页面可能会执行多次 translate.execute();

先判断缓存中有没有上次使用的语种，从缓存中取出

缓存指的是 localStorage

如果设置了启用此能力，并且上面第二步，并未获取到指定要翻译为什么语种，那么这里就会生效，自动进行识别本国所使用的语种，并将其赋予要切换为的目标语种，等待后面步骤进行取这里的值进行切换语种

如果未手动设置进行指定本地语种的语言，那么会自动识别。自动识别的依据是根据当前页面所有元素的文本字符，进行语种归类，取出现次数最多的语种，为当前的本地语种

如果不一致，那么就需要进行翻译。

本地语种跟要翻译为的目标语种一样

将本地语种跟要翻译为的目标语种进行比对。

对图片进行翻译

如果未设置要翻译的目标元素有哪些，那么就会翻译整个网页中所有的元素。当然也包含了title等。

如果设置了翻译的元素，那么会只对设置的元素进行翻译，其他未设置的不进行翻译。

针对翻译目标元素进行扫描，取相关文本及属性内的文本，比如 img 标签的alt属性、以及标签的 title 属性、input标签的placeholder属性等等都是包含的。

如果想忽略其中某些元素或标签，可以根据id、class、tag等进行设置忽略项

将本次所扫描的元素节点等自动识别其语种、特殊符号标识、分词分句，将其存入 translate.nodeQueue 中，以七维数组形式存在，等待翻译。

如果网页所在域名，已经有过翻译，那么翻译记录（翻译的词跟句子）会存入localStorage中进行缓存。我们称之为浏览器端的一级缓存。

针对一级缓存中有的词或者句子，在网页打开后会迅速进行翻译，几乎无延迟。在用户感知上，基本感觉不出翻译的动作，因为页面加载完，js也就执行完，不需要网络请求，页面文本就已经被翻译了！

如果你的页面是动态页面，会有一些动态内容显示，那么这部分缓存中没有的单词或句子会单独进行后续的请求服务端接口进行翻译，翻译成功后在进行渲染显示。它只是增量翻译，而之前已经翻译过的，则不会在经过服务端翻译接口。对用户达到极致体验的同时，降低了极大的服务端压力。

经过浏览器缓存层筛掉大量不需要翻译的词跟句子后，将需要进行翻译的词跟句子进行整理，按语种进行组合。

比如英文、简体中文，不同语种的文本会存在于不同的组中，按语种进行分组。

如果要翻译的词或句子浏览器缓存全部命中，全部包含，则不会再发起服务端翻译接口。

将翻译结果加入浏览器的一级缓存

将根据语种进行分组的翻译的词跟句子，按照分组（一个语种一组），进行分别请求服务端翻译接口，有服务端进行翻译。

请求服务端接口，有服务端根据用户当前ip，来识别用户ip所在哪个国家，取出其使用的语种

将识别的语种返回（这个不是百分百能识别的，也不是百分百准确的，可以理解为 99% 的准确度）

将要翻译的数据传输给服务端

返回翻译结果

服务端会有磁盘进行翻译数据的缓存（我们称之为二级缓存。不用内存级，是为了极大降低服务器成本）

如果发现在缓存中存在，则直接将结果返回。

不同的网站，翻译通道不同。网站所有者可以自行注册进行设置翻译通道。默认如果不设置，那就是使用的google的免费通道。

翻译通道包含google、华为云机器翻译、小牛翻译等。

有第三方翻译通道进行翻译。比如使用google对文本进行翻译。

先找缓存

翻译结果返回

如果翻译失败，则将原因返回

翻译成功，将翻译结果先进行缓存，然后在返回给用户

翻译接口成功

翻译接口失败

翻译接口返回翻译失败，则有浏览器控制台打印出失败原因。也就是使用 console.log(...) 来输出失败的原因，以便追踪

创建渲染任务 new translate.renderTask()

将翻译结果进行渲染，完事翻译。

每种语种的翻译都会创建一个单独的渲染任务。这个是跟请求服务端翻译接口时，每种语种会单独进行请求是对应的

当翻译完成后会自动触发执行某个方法，以便来做自定义扩展

作者：管雷鸣      翻译官网  http://translate.zvo.cn      开源仓库：https://gitee.com/mail_osc/translate

结构图源文件：https://gitee.com/mail_osc/translate/blob/master/doc/%E7%BB%93%E6%9E%84%E5%9B%BE-axure7.0.rp