可擴充向量圖形

Paul Bakaus
Paul Bakaus

Svgomg 螢幕截圖

摘要

SVGOMG:適用於 SVGO 的漂亮、材質感、響應式前端。

我們喜歡什麼?

SVGOMG 是由我們自己的 Jake Archibald 建構,幾乎是使用網路技術編寫的完全回應式且功能強大的工具的完美範例。這款應用程式採用精美的 Material Design 外觀,ServiceWorker 可確保應用程式快速載入且可離線使用,並在行動裝置上提供流暢的轉場效果。

可能的改善做法

我們唯一的疑慮是,由於主要 UI 缺少,初始使用者體驗令人困惑。除此之外,你做得很好!

與 Jake Archibald 的問答時間

為什麼要使用網路?

懶惰。完全懶惰。我不是開發 Windows 原生應用程式的專家,也不是 OSX 原生應用程式的專家,也不是創建 iOS、Android、Windows Phone 或 Linux 原生應用程式的專家。不過,我可以處理網頁,而且這項技能可讓我一次建構可在所有平台上運作的內容。

開發期間有哪些做法非常有效?

我對這項服務的效能非常滿意。我會確保網頁在 JS 可用之前就會轉譯。事實上,只需 5k 的 HTML 和一些內嵌 CSS 和 SVG,即可進行第一次轉譯。主要指令碼和 CSS 都會在背景中載入。也就是說,即使在 3G 網路和空快取的情況下,網站仍可在 1.5 秒內載入,其中大部分時間都是 DNS 和 SSL。

開場畫面非常簡單,因此在 5K 畫質下執行這項操作並不困難。許多網站都需要等待 JS 完成第一次轉譯,這讓我感到很困擾,有些網站甚至需要 JS 在轉譯前提出更多要求。這會將 3G 算繪時間推向 10 秒,而我知道自己不會接受這種情況。

主要 JS 為 15k,但不包含剖析和縮減 SVG 的部分,這些部分會在背景中以額外階段載入。這麼做很棒,因為互動內容會快速載入,使用者不會注意到額外載入作業。如果使用者在該指令碼可用之前選取 SVG,則該指令碼的載入時間似乎會算入處理時間。

我還使用了 ServiceWorker,讓整個應用程式可離線運作。離線工作是一項很酷的功能,但我主要使用這項功能是為了提升效能。無論使用者連線速度如何,後續造訪 SVGOMG 時幾乎都能即時算繪。考量到行動裝置連線品質的差異,這項功能實在非常實用!

如果您可以使用任何 API 改善應用程式,您會選擇哪一個?

我使用 Babel,以便日後使用 JavaScript 相關內容。希望這些功能能夠在平台上原生運作。具體來說,包括異步/等待、箭頭函式、引數預設值和結構重組。

我必須使用程式庫將輸出內容壓縮成 gzip 格式,以便找出壓縮後的大小。使用程式庫來處理這項作業相當麻煩,因為該程式碼已在瀏覽器中用於 HTTP 相關作業,只是沒有對應的 API。理想情況下,應為某種轉換串流,這樣我才能計算輸出內容的大小,而不需要將整個內容儲存在記憶體中。