先要明白的是,javascript和python都是解釋型語言,它們的運行是需要具體的runtime的。
在本文敘述中,假定:
例如,python調用js,python就是主語言,js是副語言
適用于:
(因為與我的項目需求不太符合,所以了解的不太多)
首先,該方法的前提是兩種語言都要有安裝好的runtime,且能通過命令行調用runtime運行文件或一串字符腳本。例如,裝好cpython后我們可以通過 python a.py 來運行python程序,裝好Node.js之后我們可以通過 node a.js 或者 node -e "some script" 等來運行JS程序。
當然,最簡單的情況下,如果我們只需要調用一次副語言,也沒有啥交互(或者最多只有一次交互),那直接找個方法調用CLI就OK了。把給副語言的輸入用stdin或者命令行參數傳遞,讀取命令的輸出當作副語言的輸出。
例如,python可以用 subprocess.Popen , subprocess.call , subprocess.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) 。在 stdin , stdout 和 stderr 三者之中至少挑一個建立管道。
假設我用 stdin 從python向js傳數據,用 stderr 接收數據,模式大約會是這樣的:
(以下偽代碼僅為示意,沒有嚴格測試過,實際使用建議直接用庫)
如果是通過這種原理javascript調用python,方法也差不多,javascript方是Node.js的話,用的是 child_process 里的指令。
是一個非常有趣的 非主流前端領域,這個領域要探索的是如何用工程手段解決前端開發和部署優化的綜合問題,入行到現在一直在學習和實踐中。
在我的印象中,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地址,現在要發布代碼上線,親愛的前端研發同學,你來告訴我,咱們是先上線頁面,還是先上線靜態資源?
但是,大公司超變態,沒有這樣的"絕對低峰期",只有"相對低峰期"。So,為了穩定的服務,還得繼續追求極致啊!
這個奇葩問題,起源于資源的 覆蓋式發布,用 待發布資源 覆蓋 已發布資源,就有這種問題。解決它也好辦,就是實現 非覆蓋式發布。
看上圖,用文件的摘要信息來對資源文件進行重命名,把摘要信息放到資源文件發布路徑中,這樣,內容有修改的資源就變成了一個新的文件發布到線上,不會覆蓋已有的資源文件。上線過程中,先全量部署靜態資源,再灰度部署頁面,整個問題就比較完美的解決了。
所以,大公司的靜態資源優化方案,基本上要實現這么幾個東西:
全套做下來,就是相對比較完整的靜態資源緩存控制方案了,而且,還要注意的是,靜態資源的緩存控制要求在 前端所有靜態資源加載的位置都要做這樣的處理 。是的,所有!什么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)
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-16LE, UTF16BE 和 russian windows-1251, koi8-r, iso-8859-5, x-mac-cyrillic, ibm866
Make
make
MyHTML_OPTIMIZATION_LEVEL=-O2
set compiler optimization level. Default: -O2
MyHTML_BUILD_WITHOUT_THREADS=YES
build 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=-O2
set compiler optimization level. Default: -O2
CMAKE_INSTALL_LIBDIR=lib
set path to install created library. Default: lib
MyHTML_BUILD_SHARED=ON
build shared library. Default: ON
MyHTML_BUILD_STATIC=ON
build static library. Default: ON
MyHTML_INSTALL_HEADER=OFF
install header files. Default OFF
MyHTML_BUILD_WITHOUT_THREADS=YES
build without POSIX Threads. Default: NO
MyHTML_EXTERN_MALLOC=my_malloc_func
set extern malloc function. Default: UNDEFINED
MyHTML_EXTERN_REALLOC=my_realloc_func
set extern realloc function. Default: UNDEFINED
MyHTML_EXTERN_CALLOC=my_calloc_func
set extern calloc function. Default: UNDEFINED
MyHTML_EXTERN_FREE=my_free_func
set 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)
↓點擊閱讀原文,查看相關鏈接
*請認真填寫需求信息,我們會在24小時內與您取得聯系。