浏览器运行python代码

解决方案主要有两类：

• 编译运行，比如Brython，Skulpt，Transcrypt，即将Python语言编译成JavaScript然后在浏览器网页中运行。
• 在浏览器中内置Python解释器，如Pyodide，PyPy.js。

Brython 和Skulpt 这样的项目是用JavaScript重写了标准的Python解释器，因此，你能够直接在浏览器中运行Python代码。不幸的是，由于它们是由JavaScript启动的完全的新的Python的实现，其不能够与用C写的Python扩展兼容，比如 NumPy 和Pandas。因此，没有数据科学工具。

PyPyJs是在浏览器中JIT编译Python的实现 PyPy的一个可替代品，其使用emscripten。它有潜力能够非常迅速地运行Python代码，原因和PyPy一样。不幸的是，它也像PyPy一样有无法执行C扩展 的问题。所有这些方式使得我们要去重写科学计算工具来获得足够的性能。作为一个经常使用Matplotlib的人，我知道那将占据多少数不清的个人时间:其它的项目已经进行过尝试并停滞不前，而且肯定是会带来许多我们这样的杂凑的创业团队无法处理的工作量。我们因此需要构建一个尽可能地接近标准Python实现的工具，以及大多数据科学家已经使用的科学计算技术栈。

Pyodide，就很强大了，它将Python的科学计算生态搬到浏览器中，比如numpy、scipy、matplotlib等科学计算常用的函数库直接放进浏览器中，而不是常见的比如作为浏览器服务器后端来调用。这样实现的效果就是不需要部署服务器，直接在浏览器中做复杂的函数计算，并反映到网页上。
接下来将详细介绍Pyodide

Pyodide

Pyodide 项目则是通过将现有的 CPython 解释器编译为 WebAssembly 并在浏览器的 JavaScript 环境中运行这个编译出来的二进制文件，带给你一个完全运行在浏览器中的完整的，标准的Python解释器，并具有完整的访问浏览器的Web APIs的能力。

此外，Pyodide 是Mozilla的一个实验性项目，主要解决浏览器中无法进行科学计算的痛点，Pyodide 实现python程序完全在浏览器中运行，而不是在远程内核中执行数据科学计算。这样可以在浏览器中使用python强大的科学计算生态。

但是，Pyodide也伴随着一个巨大的缺点，那就是包体积巨大，在浏览器中第一次访问内含Pyodide的网页时，会下载相应的python包，最基础的pyodide也有22MB大小，更不用说如果有额外的包，比如matplotlib，会更加巨大，导致长时间加载不出来页面；

优势：

• 在Python和JavaScript之间进行交互
• 实时交互可视化，无需像jupyter一样通过网络请求远程内核计算并传输数据，减少网络延迟，本地实时计算并展示
• 类型隐私转换，Pyodide会在许多Python与JavaScript之间的内建数据类型之间进行隐式转换。
  
• 访问Web API和DOM：

from js import document # 将document对象作为一个代理从JavaScript端导入到Python
document.getElementById("myElement")  # 从Python中对其调用方法:

• 多维数组
  在Python中， NumPy 数组是最常用的多维数组的实现。JavaScript具有TypedArrays，其仅含有一个单一的数值类型，但是是一维的，因此需要在其之上构建多维索引。
  由于实际上这些数组可能会非常大，我们不想在语言运行时间拷贝它们。那不仅仅会花相当长的时间，而且在内存中同时保留两个拷贝将会加重浏览器所具有的被限制的内存的负担。
  幸运的是，我们可以不用拷贝来共享数据。多维数组通常是用少量用于描述值类型和数组形状及内存分布的元数据来实现的。数据本身是从元数据中通过指针访问的另一个内存区域。该内存处于一个叫作“WebAssembly堆”的区域，这带来一个优势，因为其可以从JavaScript和Python中同时访问。我们可以简单地在语言之间拷贝元数据(其本身非常小)，并保持指针指向WebAssembly堆中的数据。