一文詳解如何在瀏覽器前端運行Python程序
前言
在傳統(tǒng)的 Web 開發(fā)中，Python 通常更多地被用作服務(wù)器端語言（如 Django、Flask 等），而在瀏覽器端（前端）通常使用 JavaScript 來操作 DOM、進行事件處理等。不過，隨著 WebAssembly 技術(shù)的發(fā)展和一些 Python-to-JavaScript 轉(zhuǎn)譯方案的出現(xiàn)，我們已經(jīng)可以在前端直接運行（或間接編譯）Python 代碼。
下面將詳細介紹在前端運行 Python 程序的多種主要方式、它們的優(yōu)點和局限性，并附帶一些示例或基本使用思路。
一、直接在瀏覽器運行 Python：基于 WebAssembly 的 Pyodide
1. 什么是 Pyodide
Pyodide 是基于 WebAssembly 的一個完整 Python 解釋器項目，它將 CPython（Python 的官方解釋器）編譯成了可以在瀏覽器環(huán)境（或者其它 WebAssembly 運行環(huán)境）里執(zhí)行的版本。換句話說，你不需要安裝任何插件，只要瀏覽器支持 WebAssembly，你就可以在前端環(huán)境里運行幾乎完整的 Python。
2. Pyodide 的主要特點
- 兼容性好：幾乎完整移植了 CPython，包括標(biāo)準(zhǔn)庫和部分第三方庫的支持（如 NumPy、Pandas 等）。
- 易集成：官方提供了一個
pyodide.js（或pyodide.mjs），前端只要將其引入即可使用。 - WebAssembly 性能：相較于純 JavaScript 解釋 Python 的方案，Pyodide 的性能更好。
3. 如何使用 Pyodide
引入 pyodide.js從官方的 CDN 或者本地托管，引入 Pyodide 腳本：
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
提示：版本號可能會不斷更新，可以去 Pyodide Releases 查看最新版本。
初始化 Pyodide 環(huán)境
<script> async function initPyodide() { // 加載 Pyodide let pyodide = await loadPyodide(); // 在這里就可以使用 pyodide.runPython 執(zhí)行 Python 代碼了 let result = pyodide.runPython(\` import sys sys.version \`); console.log("Python version:", result); } initPyodide(); </script>執(zhí)行 Python 代碼
pyodide.runPython(code)可以直接執(zhí)行一段 Python 代碼字符串，并返回最后一行表達式的值（如果有）。pyodide.globals可以獲取當(dāng)前 Python 解釋器中全局作用域的變量。- 除了執(zhí)行簡單的腳本外，還可以加載第三方庫（部分純 Python 庫已經(jīng)預(yù)編譯到 Pyodide 里）。
示例：
<script> async function initPyodide() { let pyodide = await loadPyodide(); // 安裝 / 加載一些包 await pyodide.loadPackage("micropip"); // micropip 可以安裝更多的 Python 包，但需要兼容 WASM，如 pyodide.org 中提到的包 // 運行簡單的 Python 代碼 let code = \` import math def compute_circle_area(r): return math.pi * (r ** 2) area = compute_circle_area(5) \`; pyodide.runPython(code); let area = pyodide.globals.get("area"); console.log("Circle area:", area); } initPyodide(); </script>
4. 優(yōu)缺點
- 優(yōu)點：
- 幾乎完整地支持 Python 生態(tài)，能夠直接使用很多 Python 包，尤其是科學(xué)計算相關(guān)。
- 依賴 WebAssembly，高度還原 CPython 功能，運行效率相對其他純 JS 解釋器更高。
- 缺點：
- 體積較大，需要加載編譯好的 Python 解釋器和相關(guān)包，初次加載可能會比較耗時。
- 并非所有 Python 包都能在 Pyodide 中使用，一些依賴本地 C/C++ 擴展的庫需要專門移植。
二、Brython：將 Python 作為瀏覽器腳本語言
1. 什么是 Brython
Brython 是一款用 JavaScript 實現(xiàn)的 Python 解釋器，它的目標(biāo)是讓 Python 可以取代前端開發(fā)中 JavaScript 的地位。它提供了一個運行時環(huán)境，使用純 JavaScript 解釋 Python 語法，并且封裝了一系列 DOM 操作、瀏覽器接口等，使得你可以像寫 JavaScript 一樣來操作瀏覽器對象。
2. Brython 的使用
- 引入 Brython
<script src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/brython@3.11.0/brython_stdlib.js"></script>
- HTML 標(biāo)記與啟動在
<body>標(biāo)簽中添加onload="brython()"或者用 JavaScript 的方式在 DOM 加載后初始化 Brython：<body onload="brython()"> ... </body>
- 在
<script type="text/python">中編寫 PythonBrython 允許我們直接在 HTML 文件中使用<script type="text/python">標(biāo)簽來書寫前端 Python 代碼，如：這里<script type="text/python"> from browser import document, alert def greet(ev): alert("Hello from Brython!") document["mybutton"].bind("click", greet) </script>document["mybutton"]與 JavaScript 中的document.getElementById("mybutton")類似。
3. 優(yōu)缺點
- 優(yōu)點：
- 使用非常簡單，直接
<script type="text/python">就能寫代碼。 - 對 DOM 操作進行了一定的封裝，可以讓 Python 代碼操作瀏覽器 API。
- 代碼體積相對 Pyodide 更小（畢竟沒有完整移植 CPython）。
- 使用非常簡單，直接
- 缺點：
- Brython 并不包含完整的 Python 標(biāo)準(zhǔn)庫實現(xiàn)，某些場景下功能有限。
- 由于是純 JavaScript 解釋，需要考慮性能影響，復(fù)雜運算性能可能遠低于 WebAssembly 方案。
- 一些 Python 第三方庫可能無法直接使用，或需要依賴特定的 Polyfill。
三、Transcrypt：Python 轉(zhuǎn)譯成 JavaScript
1. 什么是 Transcrypt
Transcrypt 是一個將 Python 代碼編譯成高質(zhì)量、可讀性較高的 JavaScript 代碼的工具?？梢栽陂_發(fā)階段用 Python 編寫邏輯，然后通過 Transcrypt 將其編譯成 JavaScript，最終在瀏覽器端運行的還是 JavaScript。
2. 工作流程
- 安裝 Transcrypt：
pip install transcrypt
- 使用 Transcrypt 編譯 Python 文件：
transcrypt -b -m myscript.py
-b表示在瀏覽器模式下編譯（browser）。-m表示生成映射文件（source map）。
- 編譯完成后，會生成一個
__javascript__文件夾，里面有myscript.js以及依賴文件。 - 在 HTML 中引入編譯后的 JS 文件：
<script src="__javascript__/myscript.js"></script>
- 這樣，就可以在瀏覽器端使用轉(zhuǎn)換后的 JS 邏輯。
3. 優(yōu)缺點
- 優(yōu)點：
- 保持了 Python 語法的開發(fā)體驗。
- 得到的 JavaScript 體積相對較小，且沒有額外的運行時依賴。
- 編譯后的速度與 JavaScript 本身類似（畢竟最終產(chǎn)物是 JS）。
- 缺點：
- 并不是在瀏覽器里直接執(zhí)行 Python，而是將 Python 轉(zhuǎn)譯成 JS，某種程度上要對 Python 語法有一定限制。
- 對于 Python 的某些動態(tài)特性和部分庫支持不完美。
四、Skulpt、RapydScript 等其他方案
除上述方案外，還有一些項目也能幫助在前端運行（或近似運行）Python：
Skulpt
- 純 JavaScript 實現(xiàn)的 Python 解釋器。
- 支持 Python 語法的子集，適用于教學(xué)或簡單腳本場景。
- 不支持完整標(biāo)準(zhǔn)庫。
RapydScript
- 一種 Python-like 語法，編譯成高效的 JavaScript。
- 更接近于一種獨立的語言，兼具 Python 與 JavaScript 的特性。
Trinket、Replit 等在線平臺
- 通過遠程服務(wù)器或 WebAssembly 內(nèi)嵌的方式，在網(wǎng)頁里直接運行 Python 代碼。
- 適合教學(xué)、演示或小型項目試驗。
五、適合不同場景的選擇建議
如果你希望在瀏覽器端完整運行 Python 并使用科學(xué)計算庫（如 NumPy、Pandas 等）
- Pyodide 是首選方案，但要注意加載速度、兼容性以及內(nèi)存使用。
如果你想在前端用 Python 語法來操作 DOM，替代部分 JavaScript 功能
- Brython 可以嘗試，不過要注意第三方庫的支持以及性能。
如果你的核心需求仍然是將 Python 邏輯轉(zhuǎn)成最終的 JavaScript
- Transcrypt 可以幫助你在保持 Python 開發(fā)體驗的同時，得到優(yōu)化后的純 JS 代碼。
如果你是教學(xué)或簡單的 Python 腳本交互
- Skulpt、Trinket 這類項目或在線平臺可以快速上手，但功能相對有限。
六、總結(jié)
在瀏覽器里運行 Python 不再是遙不可及的想法，隨著 WebAssembly 的普及和多種 Python-to-JavaScript 解決方案的出現(xiàn)，前端與 Python 生態(tài)之間的融合將越來越緊密。選擇具體方案時，需要綜合考慮：
- 是否需要大量使用 Python 第三方庫？
- 對性能與包體積的要求如何？
- 是否需要調(diào)用瀏覽器的 DOM 或 Web API？
- 是否只是教學(xué)、實驗，還是要應(yīng)用到生產(chǎn)環(huán)境？
無論是直接基于 WebAssembly 的 Pyodide、JavaScript 實現(xiàn)的 Brython，還是把 Python 編譯/轉(zhuǎn)譯為 JavaScript 的 Transcrypt，都是在不同場景下可選的思路。未來，隨著 Web 技術(shù)的進一步發(fā)展，前端與 Python 的結(jié)合也會更容易、更高效。希望以上介紹能幫助你更好地理解和選擇前端運行 Python 的最佳方式。
到此這篇關(guān)于如何在瀏覽器前端運行Python程序的文章就介紹到這了,更多相關(guān)瀏覽器前端運行Python程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python實現(xiàn)修改文件創(chuàng)建時間(支持任意時間修改)
這篇文章主要為大家詳細介紹了如何使用Python實現(xiàn)修改文件創(chuàng)建時間,可以支持任意時間修改,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下2025-07-07
當(dāng)我們用python進行數(shù)據(jù)處理時會遇到很多缺失值，對缺失值我們需要進行刪除或者填補，本文主要介紹了pandas中NaN缺失值的處理方法，感興趣的可以了解一下2021-05-05
基于Python實現(xiàn)簡單的人臉識別系統(tǒng)
這篇文章主要介紹了如何通過Python實現(xiàn)一個簡單的人臉識別系統(tǒng)，文中的示例代碼講解詳細，對我們學(xué)習(xí)Python有一定的幫助，感興趣的可以跟隨小編一起試一試2022-01-01
如何將Python字符串轉(zhuǎn)換為JSON的實現(xiàn)方法
在本教程中，你將學(xué)習(xí)JSON的基礎(chǔ)知識，它是什么，常用在哪里以及它的語法，還將看到如何在Python中將字符串轉(zhuǎn)換為JSON，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
本篇文章主要介紹了詳解Python讀取配置文件模塊ConfigParser，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Python實現(xiàn)將JSON格式文件導(dǎo)入redis
這篇文章主要為大家詳細介紹了Python實現(xiàn)將JSON格式文件導(dǎo)入redis的多種方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01
在數(shù)據(jù)可視化領(lǐng)域,詞云圖是一種非常直觀且受歡迎的展示文本數(shù)據(jù)中關(guān)鍵詞頻率的方式,Python 中的wordcloud庫提供了一種簡單而強大的方法來生成詞云圖,本文就給大家介紹了使用Python生成詞云圖的詳細指南,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Python ORM編程基礎(chǔ),結(jié)合實例形式分析了Python ORM編程相關(guān)概念、原理以及緩存、數(shù)據(jù)庫操作相關(guān)使用技巧,需要的朋友可以參考下2020-02-02
Python面向?qū)ο蟪绦蛟O(shè)計示例小結(jié)
這篇文章主要介紹了Python面向?qū)ο蟪绦蛟O(shè)計,結(jié)合實例形式總結(jié)分析了Python面向?qū)ο蟪绦蛟O(shè)計中比較常見的類定義、實例化、繼承、私有變量等相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2019-01-01
一文總結(jié)學(xué)習(xí)Python的14張思維導(dǎo)圖
一文總結(jié)學(xué)習(xí)Python的14張思維導(dǎo)圖，本文涵蓋了Python編程的核心知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10