這到底怎么跑起來的？！
周末好，各位，我是軒轅。
前幾天我看到了一則IT圈的新聞：Anaconda推出PyScript：在 HTML 嵌入Python代碼
瀏覽器前端里面可以寫Python了?。?！
原來不止JavaScript可以撬動后端的蛋糕（Node.JS），Python也可以去前端示示威啊。
眾所周知，瀏覽器能識別的代碼主要是三大類，也就是前端開發(fā)三件套：HTML+CSS+JavaScript。
那它是怎么能執(zhí)行Python的呢？是要安裝什么插件工具之類的嗎，如果是那樣就沒意思了，因為沒安裝的人就運行不了。
然而當我點擊官網的install按鈕的時候，發(fā)現官網也皮了一下：
什么也不用安裝，直接就能用！
這一下吸引了我的注意，趕緊去搗鼓了一下看看是怎么一回事。
根據GitHub上的介紹，先來看一個最簡單的helloworld網頁：
<html>
??<head>
????<link?rel="stylesheet"?href="https://pyscript.net/alpha/pyscript.css"?/>
????<script?defer?src="https://pyscript.net/alpha/pyscript.js">script>
??head>
??<body>?
????<py-script>?
??????print('Hello,?World!')?
????py-script>?body>
html>
python的代碼放置在
Python代碼還真的執(zhí)行了！
還可以import系統(tǒng)庫和使用函數：
<html>
??<head>
????<link?rel="stylesheet"?href="https://pyscript.net/alpha/pyscript.css"?/>
????<script?defer?src="https://pyscript.net/alpha/pyscript.js">script>
??head>
??<body>?
???<py-script>?
??import?time
??def?print_time():
???print('time?now:?%s'?%?time.strftime("%Y-%m-%d?%H:%M:%S",?time.localtime()))
??print('hello')
??print_time()
?py-script>?body>
html>
依舊可以正常執(zhí)行：
如果Python代碼寫的有錯誤，也可以在瀏覽器的控制臺窗口查看：
需要注意的是，Python是依靠縮緊對齊來組織代碼塊的，和HTML混寫的時候一定要注意縮緊，空格和tab要分清楚，一個不小心報錯了，薅光頭發(fā)可能也找不到原因。
試用了發(fā)現是針不戳，接下來就來探究一下，瀏覽器到底怎么執(zhí)行這些Python代碼的？
我們知道，Python是一門解釋執(zhí)行的語言，它的執(zhí)行離不開解釋器。我們最常用的就是CPython解釋器，除此之外還有Jython解釋器、IronPython解釋器等一些其他的解釋器。
既然瀏覽器能執(zhí)行Python代碼，必然也有一個解釋器，但瀏覽器自身是沒有的，這不在W3C的標準之中，那它在哪里？
上面代碼中的
難道這個JS文件就是Python的解釋器？用JavaScript寫了一個Python解釋器？
JavaScript本身就是解釋執(zhí)行了，用它再寫Python解釋器，那Python執(zhí)行速度不得多慢?。繎摬粫沁@樣。
通過查看瀏覽器的網絡窗口，發(fā)現渲染這個HTML文件的時候，還下載了一堆的東西：
Pyodide是個什么東西？這引起了我的注意。
根據官方的介紹，Pyodide內部包含了一個編譯成 WebAssembly 的 CPython 3.8 解釋器。
真相來了，上面HTML中的Python代碼是它在負責執(zhí)行的。
那WebAssembly又是什么？
根據官方網站的定義：
WebAssembly 是基于棧式虛擬機的二進制指令集，可以作為編程語言的編譯目標，能夠部署在 web 客戶端和服務端的應用中。
讀起來有些拗口。
Assembly是匯編的意思，WebAssembly從字面意義上來理解，就是Web領域的匯編語言。
WebAssembly 于 2019 年成為萬維網聯盟（W3C）的推薦標準，是繼 HTML，CSS 和 JavaScript 之后，Web 領域的第四種語言。
那這玩意兒到底是干啥的？讓我們去給瀏覽器寫匯編？
當然不是，不同于傳統(tǒng)的Web前端三件套，我們并不是要去手寫這個Web版的匯編語言，而是提供了一種指令集標準，其他語言可以編譯成這個匯編語言指令集，讓瀏覽器去執(zhí)行。
還是不明白？別急，我舉個例子。
像C/C++這類編程語言，它既可以運行在x86架構的CPU上，也可以運行在ARM架構的CPU上，這是因為有不同的編譯器將C/C++源代碼按照x86指令集或者ARM指令集，編譯出對應的二進制程序。
現在又來一套指令集叫WebAssembly，瀏覽器可以執(zhí)行它。只要使用對應的編譯器，將C/C++按照WebAssembly指令集編譯出程序，瀏覽器就能運行C/C++編寫的程序了。
所以，理論上來說，只要其他編程語言按照WebAssembly指令集的規(guī)范編譯，瀏覽器就能執(zhí)行這些編程語言的程序了！
目前已經有了C/C++ 、Rust、ts、C#、Go、Kotlin、Swift等等語言的工具鏈，可以把這些語言的源代碼編譯成WebAssembly了。
就問你，牛不牛？
在caniuse網站上查詢一下目前瀏覽器對WebAssembly的支持情況，可以看到，基本上主流的瀏覽器都已經支持了：
回到上面的Pyodide，它里面就有一個WebAssembly的Python解釋器，可以來解釋執(zhí)行HTML中的python代碼。
按照這個思路，以后說不定還有