GPU.js

前幾天在 Hacker News Daily 上看到的專案:「GPU.js - GPU accelerated JavaScript」,對應的 GitHub 頁面在 gpujs/gpu.js 這邊。

看起來是用 WebGL 接進去的,不過他用來 benchmark 的硬體頗暴力啊:

Hardware: Xeon Gold 5217 + 8 x RTX 2080ti

這邊用了八張 2080Ti,如果一張就大約是 1/8 效能的話,看起來好像還好... 一張 2080Ti 跟 Xeon Gold 5217 跑出來差不多?價錢也在同一個範圍區間...

暫時不知道用途...

莎士比亞風格的 UUID

UUID 是個長 128 bits 的數字,轉成 16 進位也有 32 個字要記,對於人類記憶來說不太友善。

前幾天在 Hacker News 上看到的東西,把這 128 bits 的資訊轉成類莎士比亞的句子,相比前面 32 個 16 進位的數字來說好記不少:「uuid-readable」。

Generate Easy to Remember, Readable UUIDs, that are Shakespearean and Grammatically Correct Sentences

給的輸出範例包括了:

Loren Chariot Addy the Titbit of Cholame questioned Cele Garth Alda and 16 windy frogs

Drucill Hubert Lewse the Comer of Avera rejoices Fiann Craggy Florie and 5 hard trouts

Jacquette Brandt John the Pectus of Barnsdall doubted Glenn Gay Gregg and 12 noisy stoats

我不覺得有變簡單啊 XDDD 也許對於英文母語的人來說會簡單一些... 吧?

在瀏覽器內跑 Python

看到「A Python 3 implementation for client-side web programming」這個專案,在瀏覽器裡把 Python 程式碼用 <script type="text/plain"></script> 包起來,然後掛個 js 進去,就可以在瀏覽器裡面跑 Python 操作 DOM:

Brython is designed to replace Javascript as the scripting language for the Web. As such, it is a Python 3 implementation (you can take it for a test drive through a web console), adapted to the HTML5 environment, that is to say with an interface to the DOM objects and events.

另外在 Brython 3.8.9 performance compared to CPython 3.8.0 這頁也有跟 CPython 的比較 (看起來是用 Firefox 測的),其實速度看起來不慢?我猜是 JS 這邊的軍備競賽把整個引擎弄的超快 XDDD

Userscript 內對於 SPA 類的頁面的修改

目前的 userscript 支援這四種啟動時機 (用 @run-at 參數指定):

  • document-start (一開始就跑)
  • document-body (出現 body 後跑)
  • document-end (DOMContentLoaded 時,或是之後跑)
  • document-idle (DOMContentLoaded 後跑)

但對於 SPA 類的頁面來說,即使用到 document-idle,也不保證執行時頁面已經渲染完成,這時候可能是 framework 才正要開始處理頁面的時候。

如果我們的 userscript 想要「等」這些 framework 處理完後再開始跑,其中一種 workaround 是用 setTimeout() 等,但這樣很容易被 side effect 影響,像是電腦慢一點的時候還是會失敗,而如果 setTimeout() 時間拉太長體驗又不好:

setTimeout(() => {
    // ...
}, 1000);

比較好的方式是用 MutationObserver() 聽事件,在每次有新元素插入時判斷是否達成條件,處理完成後再停止聽事件 (避免持續影響效能):

let observer = new MutationObserver(() => {
    // ...
    // observer.disconnect();
});

observer.observe(document.documentElement, {
    attributes: false,
    childList: true,
    subtree: true,
});

有些 library 有把這段包起來,但看了使用方式覺得很複雜 (因為要支援比較多的情境),反而是自己把 MutationObserver() 的概念搞清楚後,用這幾行包起來還比較簡單...

Microsoft 推出的 React Native for Windows + Mac

看到「React Native for Windows + Mac」這個,微軟推出了自己的 porting,以桌面環境的 Windows 與 macOS 為主,另外因為 Windows 10 的關係,也順便把平板與 Xbox 拉進來:

React Native for Windows + Mac brings React Native support for the Windows 10 SDK as well as the MacOS 10.12 SDK. With this, you can use Javascript to build native Windows apps for all devices supported by Windows 10 including PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc., as well as the MacOS desktop and laptop ecosystems.

macOS 的 10.12 是 macOS Sierra,已經是 unsupported 的版本 (到 2019 年九月),所以目前蘋果官方有支援的作業系統都有在這包的範圍內。

Windows 10 SDK 的部份就不知道現在還有在支援的 Windows 8.1 能不能裝了。(看「Windows 10 SDK」這頁有列出 Win32 程式可以,但就不知道這次這包是不是用 UWP 技術...)

本來 javascript 開發 desktop 程式比較常見的是 GitHub 放出來的 Electron,現在等於是微軟多提供了一個選項讓...

jQuery 3.5.0 的修正,補 XSS 漏洞

這次 jQuery 3.5.0 修正了一個安全性漏洞:「jQuery 3.5.0 Released!」,不過實測了一下,不完全算是 jQuery 的自己出的問題,比較像是幫使用者擦屁股。

jQuery 的說明如果看不懂,可以交叉參考「XSS Game」這篇的說明,搜尋 htmlPrefilter 應該就可以看到了。

這次修正的函數是被 html() 用到的 htmlPrefilter(),這個函數會在 3.5.0 之前會把 <tag/> 這樣的元素轉成 <tag></tag>,而 3.5.0 之後會保留本來的形式。

利用這個特性,就可以用這樣的字串來打穿 WAF:

<style><style/><script>alert(1)<\/script>

原因是 WAF 在看到時會以為 <script><style> 內部的 data 而認為不是 XSS 攻擊而穿過 WAF 的檢查,但實際上被 jQuery 展開後變成:

<style><style></style><script>alert(1)<\/script>

而最前面的 <style><style></style> 被當作是一包,後面的 <script> 就成功被拉出來執行了。

這是相同程式碼使用 jQuery 3.4.1 與 jQuery 3.5.0 的差異,我把 alert(1) 改成 document.write(1),比較容易在 JSFiddle 上看出差異:

不過回過來分析,會發現一開始用 html() 才是問題的起點,要修正問題應該要從這邊下手,而不是用 WAF 擋...

JavaScript 的壓縮器 esbuild

esbuild 是個 JavaScript bundler & minifier,在 GitHub 上的副標提到了重點在於速度:

An extremely fast JavaScript bundler and minifier

從壓縮時間可以看出來優勢:

另外從最終的檔案大小也可以看出來,與最小的 rollup + terser 組合沒有差太多:

實際拿個 jQuery 跑看看,可以看出來壓縮的效果還行:

-rw-r--r-- 1 gslin staff  89228 Feb 19 06:03 jquery-3.4.1-esbuild.min.js
-rw-r--r-- 1 gslin staff 280364 May  2  2019 jquery-3.4.1.js
-rw-r--r-- 1 gslin staff  88145 May  2  2019 jquery-3.4.1.min.js

速度主要是透過 Golang 並且平行化運算達到的:

  • It's written in Go, a language that compiles to native code
  • Parsing, printing, and source map generation are all fully parallelized
  • Everything is done in very few passes without expensive data transformations
  • Code is written with speed in mind, and tries to avoid unnecessary allocations

不過作者有提到這個專案畢竟比較新,還沒有被時間磨練過,可能會有些 bug:

This is a hobby project that I wrote over the 2019-2020 winter break. I believe that it's relatively complete and functional. However, it's brand new code and probably has a lot of bugs. It also hasn't yet been used in production by anyone. Use at your own risk.

可以先放一陣子看看,讓一些先賢先烈把比較大的 bug 踩一踩修一修...

HTTP/1.1 與 HTTP/2 的最佳化技巧

這篇在討論,無論是 HTTP/1.1 時代,或是 HTTP/2 時代下 (裡面還包括了 HTTP/2 的 Server Push),各種讓下載速度最佳化的技巧以及造成的複雜度:「Performance testing HTTP/1.1 vs HTTP/2 vs HTTP/2 + Server Push for REST APIs」。

文章裡其中一個提到的是各類「打包」的技巧,也就是 JavaScript 的 bundle,或是 CSS 的 Image sprites,甚至是 API 的合併,像是很多人會考慮的 GraphQL

雖然在 HTTP/2 年代我們常說可以省下來,但這並不代表「打包」在 HTTP/2 情境下沒有效果,只是改善的幅度比較少,所以這個最佳化的技巧比起 HTTP/1.1 年代,可以放到後面一點再做,先把人力放到其他地方。但如果團隊工具已經熟悉打包技巧的話 (可能是以前就已經做好了),其實繼續使用沒有太大問題...

另外是 Server Push 的情境,意外的反而可以提昇不少速度,看起來主要是少了請求的時間,所以快不少。

再來是跨網域時 CORS 的問題,在 Flash 的年代是一個 crossdomain.xml 解決,但現在的解法是多一個 OPTIONS request,反而造成很大的效能問題... 文章裡提到現在看起來有個 Draft 在發展與 Flash 類似的機制:「Origin Policy」。

作者在測試完後得到的結論其實跟蠻多「直覺」相反的:

  • If speed is the overriding requirement, keep using compound documents.
  • If a simpler, elegant API is the most important, having smaller-scoped, many endpoints is definitely viable.
  • Caching only makes a bit of difference.
  • Optimizations benefit the server more than the client.

cdnjs 轉移到 Cloudflare 負責維護

不確定是 cdnjs 還是 CDNJS,因為官方網站是小寫,但 GitHub 上是大寫...

Anyway,cdnjs 本來由社群維護更新 (實際上是透過 bot 更新,但 bot 本身也需要維護),因為人力時間的因素,轉移給 Cloudflare 負責了:「An Update on CDNJS」。

這次也更新了 cdnjs 的 daily request 數量,可以看到現在大約是每天六十億次:

本來 Cloudflare 是站在贊助頻寬的角色提供服務:

Within Cloudflare’s infrastructure there is a set of machines which are responsible for pulling the latest version of the repo periodically. Those machines then become the origin for cdnjs.cloudflare.com, with Cloudflare’s Global Load Balancer automatically handling failures. Cloudflare’s cache automatically stores copies of many of the projects making it possible for us to deliver them quickly from all 195 of our data centers.

但更新的 bot 本身掛了,而且維護者沒時間修:

Unfortunately approximately thirty days ago one of those bots stopped working, preventing updated projects from appearing in CDNJS. The bot's open-source maintainer was not able to invest the time necessary to keep the bot running. After several weeks we were asked by the community and the CDNJS founders to take over maintenance of the CDNJS repo itself.

所以現在則是 Cloudflare 接手維護了:

This means the Cloudflare engineering team is taking responsibility for keeping the contents of github.com/cdnjs/cdnjs up to date, in addition to ensuring it is correctly served on cdnjs.cloudflare.com.

不過裡面也提到了一個問題,就是現在瀏覽器為了安全性,對於不同的站台會有不同的 cache,本來 cdnjs 的設計目的之一被大幅削弱,現在只剩下省頻寬了:

The future value of CDNJS is now in doubt, as web browsers are beginning to use a separate cache for every website you visit. It is currently used on such a wide swath of the web, however, it is unlikely it will be disappearing any time soon.