Web加速器：Loder v1.0 發布 ?

NusterCache 發布于2019-08-26 11:34 / 3001人閱讀

摘要：是一個輕量級加載器，通過合理地聲明資源任務依賴關系，以最高效形式執行加載，提供強大的性能追蹤，持續優化性能瓶頸。使用微核啟動器，快速啟動應用，利用在加載執行同時，展示交互發起鑒權初始數據請求等，最大化利用設備能力提高頁面渲染性能。

Loder是一個輕量級加載器，通過合理地聲明資源任務依賴關系，以最高效形式執行Web加載，提供強大的性能追蹤，持續優化性能瓶頸。

目前線性粗放式的Web資源加載模式，尤其在條件有限的移動端，很大程度限制了頁面加載體驗。費很大勁把腳本體積降下來，卻得到極其有限的性能收益。使用微核啟動器Loder，快速啟動應用，利用在Bundle加載執行同時，展示Loading交互、發起鑒權、初始數據請求等，最大化利用設備能力提高頁面渲染性能。

Loder具備以下特性：

Dead Simple API

聲明式依賴，極簡的資源任務管理

極致加載，所有資源任務都以最適合時刻加載

輕量體積(1.4kb Gziped), 極速啟動應用

幾乎無需修改邏輯，簡單幾步即可加速應用至極致！

應用示例

舉個栗子，應用會在運行前先把所需腳本準備妥當，之后會順序執行鑒權、授權、獲取數據、渲染。大多數的Web都會通過類似的模式去加載渲染。流程大致如下：

看似一種很直觀的方式卻很粗放，性能優化非常考驗我們對資源任務加載的業務邏輯、依賴、順序的理解，精細化運營這些過程，Web性能可以得到意想不到地提升。我們可以大致整理一下應用的資源任務加載過程：

應用啟動

依賴[ "首屏數據", "應用鑒權", "應用 Bundle 加載&執行"]

啟動應用

應用鑒權

依賴[ "加載鑒權 SDK", "獲得用戶 ID" ]

發起鑒權請求

首屏數據

依賴[ "請求客戶端 axios" ]

發起多個請求

可以看到，有一部分資源任務是可以正交進行的，這就是我們充分利用瀏覽器特性提高性能的關鍵。但是，如此繁瑣的加載，維護起來并不容易。Loder提供極簡的API，通過聲明式注冊資源和任務，即能以最優形式進行Web加載，以上述應用啟動流程來舉例：

啟動應用前鑒權

// 資源注冊 —— 鑒權SDK
loder.add("authSDK", loder.loadScript("http://sample.com/sdk.js"))

// 任務注冊 —— 獲取用戶id
loder.add(
  "userId",
  () =>
    new Promise(resolve => {
      resolve("id")
    })
)

// 任務注冊 —— 鑒權
loder.task(
  "auth", ["authSDK", "userId"],
  () => new Promise(resolve => {
    // do auth
    resolve("success")
  })
)

加載首屏數據

// 資源注冊 —— 請求客戶端
loader.add("axios", () => import("axios"))

// 資源注冊 —— 首屏數據
loder.task(
  "fpData", ["axios"],
  () => new Promise(resolve => {
    const axios = loder.get("axios")
    return axios("http://sample.com/userData.json")
  })
)

啟動應用

// 資源注冊 —— JS Bundle
loder.add("createAppFn", () => import("./createAppFn"))

// 任務聲明 —— 應用啟動
loder.task("bootstrap", ["auth", "fpData"])

// 一切就緒，執行加載
loder.run("bootstrap", async () => {
  const create = await loder.echo("createAppFn")
  create("Awesome Time")
})

通過非常的簡單聲明，Loder不僅僅將PageLoaded性能提升至極致，甚至可以利用首屏數據請求期間，去加載應用所需的資源腳本，以及花費大量時間執行的Bundle。

Loder vs SSR

除了高效加載、極簡API、無業務入侵性外，Loder作為一個客戶端加載器，具備更多天然的優勢：

特性方案	Loder	SSR
Server 支持	不需要	需要維護額外 SSR 服務器
Server 壓力	低，正常使用 CDN 方案	高，每次請求需 Server 支持
Client	無需改動業務邏輯	client-ssr 兩套版本
通用性	任何支持 JS 瀏覽器	簡單頁面，如客戶端鑒權情況不支持
首屏渲染時間	快，無需浪費接口請求時間	極快，一次請求可獲取首屏內容
頁面空白時間	快速啟動，極大減少空白時間	大數據查詢接口，空白時間較長
可交互時長	短，腳本加載完成即可交互	中，ssr 后依舊需要完全加載 bundle

最后

Loder作為一個Web極致性能加載器，驅動Web高效加載渲染，通過性能跟蹤輔助發現&優化性能瓶頸，也促使我們去思考如何組織Web的加載時序。

Links

Landing page: http://loder-docs.scoii.com

GPU云服務器云服務器 linux全能運行環境 v1.0 云服務器管理系統v1.0 Loder 發布web項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107130.html

谷歌發布Kubernetes v1.0，容器生態前景明媚

摘要：與此同時，谷歌聯合基金會及其他合作伙伴共同成立了基金會，并將作為首個編入管理體系的開源項目，助力容器技術生態的發展進步。年月谷歌宣布開源。年月容器引擎啟動，谷歌宣布中支持容器及服務，并以為構架。 7月22日Google正式對外發布 Kubernetes v 1.0，意味著這個開源容器編排系統可以正式在生產環境使用。與此同時，谷歌聯合linux基金會及其他合作伙伴共同成立了CNCF基金會...

Mertens 2019-06-28 14:58 評論0 收藏0
從零開始的webpack生活-0x009：FilesLoader裝載文件

摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結尾的文件，都將使用這個來處理命中后使用的加載器查看結果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護和美觀更多配置，可以查閱關于部分。 0x001 概述上一章講的是DLL加速編譯，這一章開始講loader相關的部分，但是關于plugin的部分善未完結，因為即將要講的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 評論0 收藏0
En-Tan-Mo（ETM）項目周報（5月3日~5月9日）

摘要：經過三次全球公測，在穩定性方面已達到主網上線標準。在此基礎上，研發團隊將進一步改進，在中加入一種恢復回退機制，能極大提升共識機制與主網的穩定性。由此，在發生節點故障網絡故障或數據庫錯誤等極端情況時，主網都能夠快速恢復。 showImg(https://segmentfault.com/img/bVbtKHf); 項目進展 Highlight：共識機制UPoS v1.5 穩定性全面提升 ...

vibiu 2019-08-16 18:04 評論0 收藏0
webpack v2升級踩坑筆記

摘要：從再到目前當紅明星，前端模塊打包技術日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關于的特征，可以查看知乎如何評價新引入的代碼優化技術的討論。從Grunt->gulp->webpack,再到目前當紅明星rollup，前端模塊打包技術日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

JayChen 2019-08-20 17:59 評論0 收藏0