整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Python与Javascript相互调用超详细讲解(2022年1月最新)

先要明白的是,javascript和python都是解释型语言,它们的运行是需要具体的runtime的。

  • Python: 我们最常安装的Python其实是cpython,就是基于C来运行的。除此之外还有像pypy这样的自己写了解释器的,transcrypt这种转成js之后再利用js的runtime的。基本上,不使用cpython作为python的runtime的最大问题就是通过pypi安装的那些外来包,甚至有一些cpython自己的原生包(像 collections 这种)都用不了。
  • JavaScript: 常见的运行引擎有google的V8,Mozilla的SpiderMonkey等等,这些引擎会把JavaScript代码转换成机器码执行。基于这些基础的运行引擎,我们可以开发支持JS的浏览器(比如Chrome的JS运行引擎就是V8);也可以开发功能更多的JS运行环境,比如Node.js,相当于我们不需要一个浏览器,也可以跑JS代码。有了Node.js,JS包管理也变得方便许多,如果我们想把开发好的Node.js包再给浏览器用,就需要把基于Node.js的源代码编译成浏览器支持的JS代码。

在本文叙述中,假定:

  • 主语言: 最终的主程序所用的语言
  • 副语言: 不是主语言的另一种语言

例如,python调用js,python就是主语言,js是副语言

TL; DR

适用于:

  1. python和javascript的runtime(基本特指cpython[不是cython!]和Node.js)都装好了
  2. 副语言用了一些复杂的包(例如python用了numpy、javascript用了一点Node.js的C++扩展等)
  3. 对运行效率有要求的话:
  4. python与javascript之间的交互不能太多,传递的对象不要太大、太复杂,最好都是可序列化的对象
  5. javascript占的比重不过小。否则,python调js的话,启动Node.js子进程比实际跑程序还慢;js调python的话,因为js跑得快,要花很多时间在等python上。
  6. 因为IPC大概率会用线程同步输入输出,主语言少整啥多进程多、线程之类的并发编程

有库!有库!有库!

python调javascript

  • JSPyBridge : pip install javascript优点:作者还在维护,回issue和更新蛮快的。支持比较新的python和node版本,安装简单基本支持互调用,包括绑定或者传回调函数之类的。缺点 :没有合理的销毁机制, import javascript 即视作连接JS端,会初始化所有要用的线程多线程。如果python主程序想重启对JS的连接,或者主程序用了多进程,想在每个进程都连接一次JS,都很难做到,会容易出错。
  • PyExecJS : pip install PyExecJS ,比较老的技术文章都推的这个包优点: 支持除了Node.js以外的runtime,例如PhantomJS之类的缺点: End of Life,作者停止维护了

javascript调python

(因为与我的项目需求不太符合,所以了解的不太多)

  • JSPyBridge : npm i pythonia
  • node-python-bridge : npm install python-bridge
  • python-shell : npm install python-shell

原理

首先,该方法的前提是两种语言都要有安装好的runtime,且能通过命令行调用runtime运行文件或一串字符脚本。例如,装好cpython后我们可以通过 python a.py 来运行python程序,装好Node.js之后我们可以通过 node a.js 或者 node -e "some script" 等来运行JS程序。

当然,最简单的情况下,如果我们只需要调用一次副语言,也没有啥交互(或者最多只有一次交互),那直接找个方法调用CLI就OK了。把给副语言的输入用stdin或者命令行参数传递,读取命令的输出当作副语言的输出。

例如,python可以用 subprocess.Popensubprocess.callsubprocess.check_output 或者 os.system 之类的,Node.js可以用 child_process 里的方法, exec 或者 fork 之类的。 需要注意的是,如果需要引用其他包,Node.js需要注意在 node_modules 所在的目录下运行指令,python需要注意设置好PYTHONPATH环境变量。

# Need to set the working directory to the directory where `node_modules` resides if necessary
>>> import subprocess
>>> a, b = 1, 2
>>> print(subprocess.check_output(["node", "-e", f"console.log({a}+{b})"]))
b'3\n'
>>> print(subprocess.check_output(["node", "-e", f"console.log({a}+{b})"]).decode('utf-8'))
3
// Need to set PYTHONPATH in advance if necessary
const a = 1;
const b = 2;
const { execSync } = require("child_process");
console.log(execSync(`python -c "print(${a}+${b})"`));
//<Buffer 33 0a>
console.log(execSync(`python -c "print(${a}+${b})"`).toString());
//3
//

如果有复杂的交互,要传递复杂的对象,有的倒还可以序列化,有的根本不能序列化,咋办?

这基本要利用 进程间通信(IPC) ,通常情况下是用 管道(Pipe) 。在 stdinstdoutstderr 三者之中至少挑一个建立管道。

假设我用 stdin 从python向js传数据,用 stderr 接收数据,模式大约会是这样的:

(以下伪代码仅为示意,没有严格测试过,实际使用建议直接用库)

  1. 新建一个副语言(假设为JS)文件 python-bridge.js :该文件不断读取 stdin 并根据发来的信息不同,进行不同的处理;同时如果需要打印信息或者传递object给主语言,将它们适当序列化后写入 stdout 或者 stderrprocess.stdin.on('data', data => { data.split('\n').forEach(line => { // Deal with each line // write message process.stdout.write(message + "\n"); // deliver object, "$j2p" can be any prefix predefined and agreed upon with the Python side // just to tell python side that this is an object needs parsing process.stderr.write("$j2p sendObj "+JSON.stringify(obj)+"\n); }); } process.on('exit', () => { console.debug('** Node exiting'); });
  2. 在python中,用Popen异步打开一个子进程,并将子进程的之中的至少一个,用管道连接。大概类似于:cmd = ["node", "--trace-uncaught", f"{os.path.dirname(__file__)}/python-bridge.js"] kwargs = dict( stdin=subprocess.PIPE, stdout=sys.stdout, stderr=subprocess.PIPE, ) if os.name == 'nt': kwargs['creationflags'] = subprocess.CREATE_NO_WINDOW subproc = subprocess.Popen(cmd, **kwargs)
  3. 在需要调用JS,或者需要给JS传递数据的时候,往 subproc 写入序列化好的信息,写入后需要 flush ,不然可能会先写入缓冲区:subproc.stdin.write(f"$p2j call funcName {json.dumps([arg1, arg2])}".encode()) subproc.stdin.flush() # write immediately, not writing to the buffer of the stream
  4. 对管道化的 stdout / stderr ,新建一个线程,专门负责读取传来的数据并进行处理。是对象的重新转换成对象,是普通信息的直接打印回主进程的 stderr 或者 stdoutdef read_stderr(): while subproc.poll() is None: # when the subprocess is still alive, keep reading line = self.subproc.stderr.readline().decode('utf-8') if line.startswith('$j2p'): # receive special information _, cmd, line = line.split(' ', maxsplit=2) if cmd == 'sendObj': # For example, received an object obj = json.loads(line) else: # otherwise, write to stderr as it is sys.stderr.write(line) stderr_thread = threading.Thread(target=read_stderr, args=(), daemon=True) stderr_thread.start()这里由于我们的 stdout 没有建立管道,所以node那边往 stdout 里打印的东西会直接打印到python的 sys.stdout 里,不用自己处理。
  5. 由于线程是异步进行的,什么时候知道一个函数返回的对象到了呢?答案是用线程同步手段,信号量(Semaphore)、条件(Condition),事件(Event)等等,都可以。以 python的条件 为例:func_name_cv = threading.Condition() # use a flag and a result object in case some function has no result func_name_result_returned = False func_name_result = None def func_name_wrapper(arg1, arg2): # send arguments subproc.stdin.write(f"$p2j call funcName {json.dumps([arg1, arg2])}".encode()) subproc.stdin.flush() # wait for the result with func_name_cv: if not func_name_result_returned: func_name_cv.wait(timeout=10000) # when result finally returned, reset the flag func_name_result_returned = False return func_name_result同时,需要在读stderr的线程 read_stderr 里解除对这个返回值的阻塞。需要注意的是,如果JS端因为意外而退出了, subproc 也会死掉, 这时候也要记得取消主线程中的阻塞def read_stderr(): while subproc.poll() is None: # when the subprocess is still alive, keep reading # Deal with a line line = self.subproc.stderr.readline().decode('utf-8') if line.startswith('$j2p'): # receive special information _, cmd, line = line.split(' ', maxsplit=2) if cmd == 'sendObj': # acquire lock here to ensure the editing of func_name_result is mutex with func_name_cv: # For example, received an object func_name_result = json.loads(line) func_name_result_returned = True # unblock func_name_wrapper when receiving the result func_name_cv.notify() else: # otherwise, write to stderr as it is sys.stderr.write(line) # If subproc is terminated (mainly due to error), still need to unblock func_name_wrapper func_name_cv.notify()当然这是比较简单的版本,由于对JS的调用基本都是线性的,所以可以知道只要得到一个object的返回,那就一定是 func_name_wrapper 对应的结果。如果函数多起来的话,情况会更复杂。
  6. 如果想 取消对JS的连接 ,首先应该先关闭子进程,然后等待读 stdout / stderr 的线程自己自然退出,最后 一定不要忘记关闭管道 。并且 这三步的顺序不能换 ,如果先关了管道,读线程会因为 stdout / stderr 已经关了而出错。subproc.terminate() stderr_thread.join() subproc.stdin.close() subproc.stderr.close()

如果是通过这种原理javascript调用python,方法也差不多,javascript方是Node.js的话,用的是 child_process 里的指令。

优点

  1. 只需要正常装好两方的runtime就能实现交互,运行环境相对比较好配。
  2. 只要python方和javascript方在各自的runtime里正常运行没问题,那么连上之后运行也基本不会有问题。(除非涉及并发)
  3. 对两种语言的所有可用的扩展包基本都能支持。

缺点

  1. 当python与JavaScript交互频繁,且交互的信息都很大的时候,可能会很影响程序效率。因为仅仅通过最多3个管道混合处理普通要打印的信息、python与js交互的对象、函数调用等,通信开销很大。
  2. 要另起一个子进程运行副语言的runtime,会花一定时间和空间开销。

是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。

在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化。

接下来,我想从原理展开讲述,多图,较长,希望能有耐心看完。

让我们返璞归真,从原始的前端开发讲起。上图是一个"可爱"的index.html页面和它的样式文件a.css,用文本编辑器写代码,无需编译,本地预览,确认OK,丢到服务器,等待用户访问。前端就是这么简单,好好玩啊,门槛好低啊,分分钟学会有木有!

然后我们访问页面,看到效果,再查看一下网络请求,200!不错,太™完美了!那么,研发完成。。。。了么?

等等,这还没完呢!对于大公司来说,那些变态的访问量和性能指标,将会让前端一点也不"好玩"。

看看那个a.css的请求吧,如果每次用户访问页面都要加载,是不是很影响性能,很浪费带宽啊,我们希望最好这样:

利用304,让浏览器使用本地缓存。但,这样也就够了吗?不成!304叫协商缓存,这玩意还是要和服务器通信一次,我们的优化级别是变态级,所以必须彻底灭掉这个请求,变成这样:

强制浏览器使用本地缓存(cache-control/expires),不要和服务器通信。好了,请求方面的优化已经达到变态级别,那问题来了:你都不让浏览器发资源请求了,这缓存咋更新?

很好,相信有人想到了办法:通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源。好像这样:

下次上线,把链接地址改成新的版本,就更新资源了不是。OK,问题解决了么?!当然没有!大公司的变态又来了,思考这种情况:

页面引用了3个css,而某次上线只改了其中的a.css,如果所有链接都更新版本,就会导致b.css,c.css的缓存也失效,那岂不是又有浪费了?!

重新开启变态模式,我们不难发现,要解决这种问题,必须让url的修改与文件内容关联,也就是说,只有文件内容变化,才会导致相应url的变更,从而实现文件级别的精确缓存控制。

什么东西与文件内容相关呢?我们会很自然的联想到利用 数据摘要要算法 对文件求摘要信息,摘要信息与文件内容一一对应,就有了一种可以精确到单个文件粒度的缓存控制依据了。好了,我们把url改成带摘要信息的:

这回再有文件修改,就只更新那个文件对应的url了,想到这里貌似很完美了。你觉得这就够了么?大公司告诉你:图样图森破!

唉~~~~,让我喘口气

现代互联网企业,为了进一步提升网站性能,会把静态资源和动态网页分集群部署,静态资源会被部署到CDN节点上,网页中引用的资源也会变成对应的部署路径:

好了,当我要更新静态资源的时候,同时也会更新html中的引用吧,就好像这样:

这次发布,同时改了页面结构和样式,也更新了静态资源对应的url地址,现在要发布代码上线,亲爱的前端研发同学,你来告诉我,咱们是先上线页面,还是先上线静态资源?

  1. 先部署页面,再部署资源:在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。
  2. 先部署资源,再部署页面:在部署时间间隔之内,有旧版本资源本地缓存的用户访问网站,由于请求的页面是旧版本的,资源引用没有改变,浏览器将直接使用本地缓存,这种情况下页面展现正常;但没有本地缓存或者缓存过期的用户访问网站,就会出现旧版本页面加载新版本资源的情况,导致页面执行错误,但当页面完成部署,这部分用户再次访问页面又会恢复正常了。 好的,上面一坨分析想说的就是:先部署谁都不成!都会导致部署过程中发生页面错乱的问题。所以,访问量不大的项目,可以让研发同学苦逼一把,等到半夜偷偷上线,先上静态资源,再部署页面,看起来问题少一些。

但是,大公司超变态,没有这样的"绝对低峰期",只有"相对低峰期"。So,为了稳定的服务,还得继续追求极致啊!

这个奇葩问题,起源于资源的 覆盖式发布,用 待发布资源 覆盖 已发布资源,就有这种问题。解决它也好办,就是实现 非覆盖式发布。

看上图,用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。上线过程中,先全量部署静态资源,再灰度部署页面,整个问题就比较完美的解决了。

所以,大公司的静态资源优化方案,基本上要实现这么几个东西:

  • 配置超长时间的本地缓存 —— 节省带宽,提高性能
  • 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
  • 静态资源CDN部署 —— 优化网络请求
  • 更资源发布路径实现非覆盖式发布 —— 平滑升级

全套做下来,就是相对比较完整的静态资源缓存控制方案了,而且,还要注意的是,静态资源的缓存控制要求在 前端所有静态资源加载的位置都要做这样的处理 。是的,所有!什么js、css自不必说,还要包括js、css文件中引用的资源路径,由于涉及到摘要信息,引用资源的摘要信息也会引起引用文件本身的内容改变,从而形成级联的摘要变化,大概示意图就是:

好了,目前我们快速的学习了一下前端工程中关于静态资源缓存要面临的优化和部署问题,新的问题又来了:这™让工程师怎么写码啊!!!

要解释优化与工程的结合处理思路,又会扯出一堆有关模块化开发、资源加载、请求合并、前端框架等等的工程问题,以上只是开了个头,解决方案才是精髓,但要说的太多太多,有空再慢慢展开吧。

总之,前端性能优化绝逼是一个工程问题!

以上不是我YY的,可以观察 百度 或者 facebook 的页面以及静态资源源代码,查看它们的资源引用路径处理,以及网络请中静态资源的缓存控制部分。再次赞叹facebook的前端工程建设水平,跪舔了。

建议前端工程师多多关注前端工程领域,也许有人会觉得自己的产品很小,不用这么变态,但很有可能说不定某天你就需要做出这样的改变了。而且,如果我们能把事情做得更极致,为什么不去做呢?

另外,也不要觉得这些是运维或者后端工程师要解决的问题。如果由其他角色来解决,大家总是把自己不关心的问题丢给别人,那么前端工程师的开发过程将受到极大的限制,这种情况甚至在某些大公司都不少见!

yHTML 是个快速 HTML 解析器,使用线程来实现一个类似纯 C99库,无任何外部依赖。

MyHTML 当前版本是 1.0.1,扩展了一个 MyCSS 开源库。MyCSS 是个快速的 CSS 解析器,GitHub 地址:

MyHTML 主要特性:

  • 异步解析,构建树和指数

  • 和 HTML5 规范完全一致

  • 两个 API – 高和低水平

  • 操作元素:添加,修改,删除和其他

  • 操作元素属性:添加,修改,删除和其他

  • 支持 39 种字符编码 encoding.spec.whatwg.org

  • 支持字符编码检测

  • 支持单模解析

  • 支持无 POSIX 线程构建

  • 支持片段解析

  • 支持 parsing by chunks

  • 无外部依赖

  • C99 支持

  • 通过了所有 html5lib-tests

扩展库

  • MyCSS— Fast C/C++ CSS Parser (Cascading Style Sheets Parser)

支持的 InputStream 编码

X_USER_DEFINED, UTF_8, UTF_16LE, UTF_16BE, BIG5, EUC_KR, GB18030, IBM866, ISO_8859_10, ISO_8859_13, ISO_8859_14, ISO_8859_15, ISO_8859_16, ISO_8859_2, ISO_8859_3, ISO_8859_4, ISO_8859_5, ISO_8859_6, ISO_8859_7, ISO_8859_8, KOI8_R, KOI8_U, MACINTOSH, WINDOWS_1250, WINDOWS_1251, WINDOWS_1252, WINDOWS_1253, WINDOWS_1254, WINDOWS_1255, WINDOWS_1256, WINDOWS_1257, WINDOWS_1258, WINDOWS_874, X_MAC_CYRILLIC, ISO_2022_JP, GBK, SHIFT_JIS, EUC_JP, ISO_8859_8_I

支持 UTF-8 编码

可检测的字符编码

UTF-8, UTF-16LE, UTF16BE 和 russian windows-1251, koi8-r, iso-8859-5, x-mac-cyrillic, ibm866

构建和安装

Make

make
  • MyHTML_OPTIMIZATION_LEVEL=-O2set compiler optimization level. Default: -O2

  • MyHTML_BUILD_WITHOUT_THREADS=YESbuild without POSIX Threads. Default: NO

示例

make MyHTML_BUILD_WITHOUT_THREADS=NO
cp lib/* /usr/local/lib cp -r include/* /usr/local/include

CMake

在 myhtml/project 目录:

cmake .make sudo make install
  • MyHTML_OPTIMIZATION_LEVEL=-O2set compiler optimization level. Default: -O2

  • CMAKE_INSTALL_LIBDIR=libset path to install created library. Default: lib

  • MyHTML_BUILD_SHARED=ONbuild shared library. Default: ON

  • MyHTML_BUILD_STATIC=ONbuild static library. Default: ON

  • MyHTML_INSTALL_HEADER=OFFinstall header files. Default OFF

  • MyHTML_BUILD_WITHOUT_THREADS=YESbuild without POSIX Threads. Default: NO

  • MyHTML_EXTERN_MALLOC=my_malloc_funcset extern malloc function. Default: UNDEFINED

  • MyHTML_EXTERN_REALLOC=my_realloc_funcset extern realloc function. Default: UNDEFINED

  • MyHTML_EXTERN_CALLOC=my_calloc_funcset extern calloc function. Default: UNDEFINED

  • MyHTML_EXTERN_FREE=my_free_funcset extern free function. Default: UNDEFINED

示例

cmake . -DCMAKE_INSTALL_LIBDIR=lib64 -DMyHTML_INSTALL_HEADER=ON

程序构建示例

构建共享库

gcc -Wall -Werror -O2 -lmyhtml your_program.c -o your_program

构建静态库

gcc -Wall -Werror -O2 your_program.c /path/to/libmyhtml_static.a -o your_program

其他语言绑定

简单示例

#include <stdio.h>#include <stdlib.h>#include <string.h>#include <myhtml/api.h>int main(int argc, const char * argv[]) { char html = "<div><span>HTML</span></div>"; // basic init myhtml_t* myhtml = myhtml_create; myhtml_init(myhtml, MyHTML_OPTIONS_DEFAULT, 1, 0); // first tree init  myhtml_tree_t* tree = myhtml_tree_create; myhtml_tree_init(tree, myhtml); // parse html myhtml_parse(tree, MyHTML_ENCODING_UTF_8, html, strlen(html)); // release resources myhtml_tree_destroy(tree); myhtml_destroy(myhtml); return 0; }

MyHTML 遵循 LGPL 开源授权协议.

微信订阅号:开源派 (opensourcepie)

↓点击阅读原文,查看相关链接