前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >这到底怎么跑起来的?!

这到底怎么跑起来的?!

作者头像
轩辕之风
发布2022-05-17 14:56:53
3610
发布2022-05-17 14:56:53
举报
文章被收录于专栏:编程技术宇宙编程技术宇宙

周末好,各位,我是轩辕。

前几天我看到了一则IT圈的新闻:Anaconda推出PyScript:在 HTML 嵌入Python代码

浏览器前端里面可以写Python了!!!

原来不止JavaScript可以撬动后端的蛋糕(Node.JS),Python也可以去前端示示威啊。

众所周知,浏览器能识别的代码主要是三大类,也就是前端开发三件套:HTML+CSS+JavaScript

那它是怎么能执行Python的呢?是要安装什么插件工具之类的吗,如果是那样就没意思了,因为没安装的人就运行不了。

然而当我点击官网的install按钮的时候,发现官网也皮了一下:

什么也不用安装,直接就能用!

这一下吸引了我的注意,赶紧去捣鼓了一下看看是怎么一回事。

根据GitHub上的介绍,先来看一个最简单的helloworld网页:

代码语言:javascript
复制
<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的代码放置在<py-script>标签里面,写好后保存为HTML文件,直接双击打开,这是我在chrome中打开的效果:

Python代码还真的执行了!

还可以import系统库和使用函数:

代码语言:javascript
复制
<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>

依旧可以正常执行:

如果Python代码写的有错误,也可以在浏览器的控制台窗口查看:

需要注意的是,Python是依靠缩紧对齐来组织代码块的,和HTML混写的时候一定要注意缩紧,空格和tab要分清楚,一个不小心报错了,薅光头发可能也找不到原因。

试用了发现是针不戳,接下来就来探究一下,浏览器到底怎么执行这些Python代码的?

我们知道,Python是一门解释执行的语言,它的执行离不开解释器。我们最常用的就是CPython解释器,除此之外还有Jython解释器、IronPython解释器等一些其他的解释器。

既然浏览器能执行Python代码,必然也有一个解释器,但浏览器自身是没有的,这不在W3C的标准之中,那它在哪里?

上面代码中的<py-script>很明显不是HTML标准中的标签,扫遍整个HTML文件,注意看<header>标签中那两个引入的东西:

难道这个JS文件就是Python的解释器?用JavaScript写了一个Python解释器?

JavaScript本身就是解释执行了,用它再写Python解释器,那Python执行速度不得多慢啊?应该不会是这样。

通过查看浏览器的网络窗口,发现渲染这个HTML文件的时候,还下载了一堆的东西:

Pyodide是个什么东西?这引起了我的注意。

根据官方的介绍,Pyodide内部包含了一个编译成 WebAssembly 的 CPython 3.8 解释器。

真相来了,上面HTML中的Python代码是它在负责执行的。

那WebAssembly又是什么?

根据官方网站的定义:

WebAssembly 是基于栈式虚拟机的二进制指令集,可以作为编程语言的编译目标,能够部署在 web 客户端和服务端的应用中。

读起来有些拗口。

Assembly是汇编的意思,WebAssembly从字面意义上来理解,就是Web领域的汇编语言。

WebAssembly 于 2019 年成为万维网联盟(W3C)的推荐标准,是继 HTML,CSS 和 JavaScript 之后,Web 领域的第四种语言。

那这玩意儿到底是干啥的?让我们去给浏览器写汇编?

当然不是,不同于传统的Web前端三件套,我们并不是要去手写这个Web版的汇编语言,而是提供了一种指令集标准,其他语言可以编译成这个汇编语言指令集,让浏览器去执行。

还是不明白?别急,我举个例子。

像C/C++这类编程语言,它既可以运行在x86架构的CPU上,也可以运行在ARM架构的CPU上,这是因为有不同的编译器将C/C++源代码按照x86指令集或者ARM指令集,编译出对应的二进制程序。

现在又来一套指令集叫WebAssembly,浏览器可以执行它。只要使用对应的编译器,将C/C++按照WebAssembly指令集编译出程序,浏览器就能运行C/C++编写的程序了。

所以,理论上来说,只要其他编程语言按照WebAssembly指令集的规范编译,浏览器就能执行这些编程语言的程序了!

目前已经有了C/C++ 、Rust、ts、C#、Go、Kotlin、Swift等等语言的工具链,可以把这些语言的源代码编译成WebAssembly了。

就问你,牛不牛?

在caniuse网站上查询一下目前浏览器对WebAssembly的支持情况,可以看到,基本上主流的浏览器都已经支持了:

回到上面的Pyodide,它里面就有一个WebAssembly的Python解释器,可以来解释执行HTML中的python代码。

按照这个思路,以后说不定还有<cpp-script>、<go-script>也未可知啊!

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程技术宇宙 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档