資訊專欄INFORMATION COLUMN
摘要：最初，也在使用，并且最初看來(lái)功能安好。和的區(qū)別最大的區(qū)別在于托管于而不是。存在的問(wèn)題在使用中，我們發(fā)現(xiàn)存在的問(wèn)題主要表現(xiàn)在兩方面。使用考慮到的獨(dú)立性，我們?cè)O(shè)計(jì)了一個(gè)來(lái)管理所有，并使用和建立通訊。
在 FoxOne 1.5.1 版更新中，打開(kāi)各個(gè)交易所網(wǎng)頁(yè)的速度得到了巨大提升。
我們分別在不同的網(wǎng)絡(luò)環(huán)境下，測(cè)算了新版 FoxOne 在 Dom 加載和頁(yè)面加載條件下的所需時(shí)間：
可以看到，無(wú)論是 DOM 加載速度還是 Page 加載速度，新方案都有不同程度的提升（從 9% ~ 31%）。我們是怎么做到的呢？
Webview的問(wèn)題FoxOne 的桌面版本使用了 Electron + Electron Builder + Vue 作為技術(shù)棧。Electron 是使用 Web 技術(shù)構(gòu)建桌面 App 的框架，而 Electron Builder 則為 Electron 提供了打包、簽名、跨平臺(tái) CI、自動(dòng)更新的全家桶方案。
我們當(dāng)初選擇 Electron，是因?yàn)?Web 技術(shù)會(huì)為 FoxOne 開(kāi)發(fā)提供了很多便利，但由于 Electron 項(xiàng)目對(duì) Chromuim 的依賴，在 Chromuim 上游的一些問(wèn)題也就無(wú)縫平移到了 Electron。其中的典型就是
webview 可以看作一個(gè)跑在獨(dú)立進(jìn)程中的更安全的 iframe。如果我們需要在 Electron App 中嵌入一個(gè)網(wǎng)頁(yè)（而不是在新窗口中打開(kāi)），把它放在 webview 中是官方建議的標(biāo)準(zhǔn)做法，很多著名桌面軟件也在使用它。
最初，F(xiàn)oxOne 也在使用 webview，并且最初看來(lái)功能安好。但是很快我們就發(fā)現(xiàn)了問(wèn)題：
一、雖然 webview 跑在獨(dú)立進(jìn)程中，但是在 DOM 結(jié)構(gòu)上與 Renderer 進(jìn)程同源，因此渲染 webview 時(shí)會(huì)拖累整個(gè) Renderer 進(jìn)程的 DOM；
二、webview 中存在一些 issues (1,2,3)，這些問(wèn)題我們不能解決，Electron 團(tuán)隊(duì)也不能解決——甚至，考慮到 webview 在 Chromuim 中狹窄的應(yīng)用范圍，可能 Chromuim 團(tuán)隊(duì)也沒(méi)打算解決。
針對(duì)以上問(wèn)題，我們決定使用browserview 來(lái)代替 webview。
browserview 和 webview 的區(qū)別最大的區(qū)別在于 browserview 托管于 main process 而不是 renderer。這非常類(lèi)似于 Chrome 中對(duì)頁(yè)面的處理方式，因此可以獲得很高的頁(yè)面響應(yīng)速度。
當(dāng)然，因?yàn)閺拇?GUI 分屬于兩個(gè) process，所以代價(jià)是我們必須在處理 GUI 布局時(shí)對(duì) browserview 多帶帶處理。
browserview 存在的問(wèn)題在使用中，我們發(fā)現(xiàn) browserview 存在的問(wèn)題主要表現(xiàn)在兩方面。
browserview 缺少 webview 豐富的 API。使用 browserview，你將無(wú)法使用插件，預(yù)加載腳本，截圖等能力
browserview 不活動(dòng)在 renderer 進(jìn)程，因此無(wú)法使用舒服的 CSS 來(lái)控制布局。
對(duì)于第一點(diǎn)，我們?cè)趯?shí)現(xiàn)中選擇直接操作 webContents，來(lái)獲取失去的方法和屬性。對(duì)于第二點(diǎn)，我們?cè)O(shè)計(jì)了專門(mén)的 browserview manager 來(lái)控制 browserview 的布局外在表現(xiàn)。
使用 browserview考慮到 browserview 的獨(dú)立性，我們?cè)O(shè)計(jì)了一個(gè) browserview manager 來(lái)管理所有 browserviews，并使用 ipcMain 和 ipcRenderer 建立通訊。
當(dāng)用戶在客戶端進(jìn)行操作（如前進(jìn)、后退、刷新、切換頁(yè)等）時(shí)，對(duì)應(yīng)的指令通過(guò) Electron event 機(jī)制傳達(dá)到 browserview manager，然后讓 browserview manager 操作 browserview 和其中的 webcontents 執(zhí)行指令。
結(jié)語(yǔ)雖然 browserview 在 Electron 中依然是一個(gè)實(shí)驗(yàn)性功能，API 也不完備，缺乏 script preload 等 webview 擁有的機(jī)制。但如果你需要在 App 中嵌入外部網(wǎng)頁(yè)，在合適的 trade-off 下，使用 browserview 不失一個(gè)好選擇。
招聘時(shí)間～FoxOne 是一個(gè)技術(shù)導(dǎo)向的創(chuàng)新團(tuán)隊(duì)。我們正在圍繞基礎(chǔ)研究和產(chǎn)品化，尋覓正確的區(qū)塊鏈技術(shù)應(yīng)用方向。而現(xiàn)在，改變世界需要有你同行。
我們正在招聘前端工程師、移動(dòng)端工程師、爬蟲(chóng)工程師、Golang 研發(fā)工程師、社群產(chǎn)品運(yùn)營(yíng)。歡迎青睞 FoxOne 的優(yōu)秀人才加入我們。
請(qǐng)留意我們的招聘郵箱為 jobs@fox.one。謝謝大家閱讀。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107671.html
摘要：發(fā)布本周正式發(fā)布，包含了一系列的特性提升與問(wèn)題修復(fù)，同時(shí)也在不斷致力于將打造地更為輕巧與高性能。當(dāng)然，姜振勇老師還會(huì)介紹的多種服務(wù)，包括大數(shù)據(jù)網(wǎng)絡(luò)和安全，展現(xiàn)彈性安全和高可擴(kuò)展性的全方位能力。 showImg(http://upload-images.jianshu.io/upload_images/1647496-2ce7598e6987d9af.jpg?imageMogr2/aut...
摘要：前端日?qǐng)?bào)精選流式分頁(yè)方案探索異步流程控制掘金虛擬內(nèi)部是如何工作的眾成翻譯移動(dòng)端圖片上傳旋轉(zhuǎn)壓縮的解決方案源碼分析整體流程支持中文譯升級(jí)指南掘金第期理解前端現(xiàn)狀答題救不了前端新人掘金進(jìn)階系列文件上傳下載數(shù)組操作大全 2017-06-30 前端日?qǐng)?bào) 精選 流式分頁(yè)方案探索異步流程控制 - 掘金虛擬DOM內(nèi)部是如何工作的? - 眾成翻譯移動(dòng)端圖片上傳旋轉(zhuǎn)、壓縮的解決方案 · Issue #1...
摘要：最少化請(qǐng)求用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括圖片，樣式，腳本，等等，減少這些資源的下載請(qǐng)求數(shù)目，便成了讓網(wǎng)頁(yè)提速的關(guān)鍵。但需要提的是，中對(duì)請(qǐng)求的長(zhǎng)度限制在字節(jié)以內(nèi)參考，所以如果超過(guò)這個(gè)長(zhǎng)度，只能使用請(qǐng)求。 前端工程師常常被提起網(wǎng)站性能，如何讓網(wǎng)站訪問(wèn)更快等問(wèn)題，本文就做個(gè)總結(jié)。 最少化HTTP請(qǐng)求 用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)80%的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括...
摘要：最少化請(qǐng)求用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括圖片，樣式，腳本，等等，減少這些資源的下載請(qǐng)求數(shù)目，便成了讓網(wǎng)頁(yè)提速的關(guān)鍵。但需要提的是，中對(duì)請(qǐng)求的長(zhǎng)度限制在字節(jié)以內(nèi)參考，所以如果超過(guò)這個(gè)長(zhǎng)度，只能使用請(qǐng)求。 前端工程師常常被提起網(wǎng)站性能，如何讓網(wǎng)站訪問(wèn)更快等問(wèn)題，本文就做個(gè)總結(jié)。 最少化HTTP請(qǐng)求 用戶在瀏覽網(wǎng)頁(yè)時(shí)，超過(guò)80%的時(shí)間都是在請(qǐng)求下載網(wǎng)頁(yè)資源，包括...
摘要：為了能使不同的進(jìn)程互相訪問(wèn)資源并進(jìn)行協(xié)調(diào)工作，才有了進(jìn)程間通信。此時(shí)，就需要與渲染進(jìn)程通信了。發(fā)消息，渲染進(jìn)程收消息內(nèi)部使用來(lái)發(fā)消息。 作者：鐘離，酷家樂(lè)PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...
閱讀 3136·2023-04-26 00:40
閱讀 2497·2021-09-27 13:47
閱讀 4532·2021-09-07 10:22
閱讀 3032·2021-09-06 15:02
閱讀 3381·2021-09-04 16:45
閱讀 2574·2021-08-11 10:23
閱讀 3668·2021-07-26 23:38
閱讀 2960·2019-08-30 15:54
