摘要：最初，也在使用，并且最初看来功能安好。和的区别最大的区别在于托管于而不是。存在的问题在使用中，我们发现存在的问题主要表现在两方面。使用考虑到的独立性，我们设计了一个来管理所有，并使用和建立通讯。
在 FoxOne 1.5.1 版更新中，打开各个交易所网页的速度得到了巨大提升。
我们分别在不同的网络环境下，测算了新版 FoxOne 在 Dom 加载和页面加载条件下的所需时间：
可以看到，无论是 DOM 加载速度还是 Page 加载速度，新方案都有不同程度的提升（从 9% ~ 31%）。我们是怎么做到的呢？
Webview的问题FoxOne 的桌面版本使用了 Electron + Electron Builder + Vue 作为技术栈。Electron 是使用 Web 技术构建桌面 App 的框架，而 Electron Builder 则为 Electron 提供了打包、签名、跨平台 CI、自动更新的全家桶方案。
我们当初选择 Electron，是因为 Web 技术会为 FoxOne 开发提供了很多便利，但由于 Electron 项目对 Chromuim 的依赖，在 Chromuim 上游的一些问题也就无缝平移到了 Electron。其中的典型就是
webview 可以看作一个跑在独立进程中的更安全的 iframe。如果我们需要在 Electron App 中嵌入一个网页（而不是在新窗口中打开），把它放在 webview 中是官方建议的标准做法，很多著名桌面软件也在使用它。
最初，FoxOne 也在使用 webview，并且最初看来功能安好。但是很快我们就发现了问题：
一、虽然 webview 跑在独立进程中，但是在 DOM 结构上与 Renderer 进程同源，因此渲染 webview 时会拖累整个 Renderer 进程的 DOM；
二、webview 中存在一些 issues (1,2,3)，这些问题我们不能解决，Electron 团队也不能解决——甚至，考虑到 webview 在 Chromuim 中狭窄的应用范围，可能 Chromuim 团队也没打算解决。
针对以上问题，我们决定使用browserview 来代替 webview。
browserview 和 webview 的区别最大的区别在于 browserview 托管于 main process 而不是 renderer。这非常类似于 Chrome 中对页面的处理方式，因此可以获得很高的页面响应速度。
当然，因为从此 GUI 分属于两个 process，所以代价是我们必须在处理 GUI 布局时对 browserview 多带带处理。
browserview 存在的问题在使用中，我们发现 browserview 存在的问题主要表现在两方面。
browserview 缺少 webview 丰富的 API。使用 browserview，你将无法使用插件，预加载脚本，截图等能力
browserview 不活动在 renderer 进程，因此无法使用舒服的 CSS 来控制布局。
对于第一点，我们在实现中选择直接操作 webContents，来获取失去的方法和属性。对于第二点，我们设计了专门的 browserview manager 来控制 browserview 的布局外在表现。
使用 browserview考虑到 browserview 的独立性，我们设计了一个 browserview manager 来管理所有 browserviews，并使用 ipcMain 和 ipcRenderer 建立通讯。
当用户在客户端进行操作（如前进、后退、刷新、切换页等）时，对应的指令通过 Electron event 机制传达到 browserview manager，然后让 browserview manager 操作 browserview 和其中的 webcontents 执行指令。
结语虽然 browserview 在 Electron 中依然是一个实验性功能，API 也不完备，缺乏 script preload 等 webview 拥有的机制。但如果你需要在 App 中嵌入外部网页，在合适的 trade-off 下，使用 browserview 不失一个好选择。
招聘时间～FoxOne 是一个技术导向的创新团队。我们正在围绕基础研究和产品化，寻觅正确的区块链技术应用方向。而现在，改变世界需要有你同行。
我们正在招聘前端工程师、移动端工程师、爬虫工程师、Golang 研发工程师、社群产品运营。欢迎青睐 FoxOne 的优秀人才加入我们。
请留意我们的招聘邮箱为 jobs@fox.one。谢谢大家阅读。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107671.html
摘要：发布本周正式发布，包含了一系列的特性提升与问题修复，同时也在不断致力于将打造地更为轻巧与高性能。当然，姜振勇老师还会介绍的多种服务，包括大数据网络和安全，展现弹性安全和高可扩展性的全方位能力。 showImg(http://upload-images.jianshu.io/upload_images/1647496-2ce7598e6987d9af.jpg?imageMogr2/aut...
摘要：前端日报精选流式分页方案探索异步流程控制掘金虚拟内部是如何工作的众成翻译移动端图片上传旋转压缩的解决方案源码分析整体流程支持中文译升级指南掘金第期理解前端现状答题救不了前端新人掘金进阶系列文件上传下载数组操作大全 2017-06-30 前端日报 精选 流式分页方案探索异步流程控制 - 掘金虚拟DOM内部是如何工作的? - 众成翻译移动端图片上传旋转、压缩的解决方案 · Issue #1...
摘要：最少化请求用户在浏览网页时，超过的时间都是在请求下载网页资源，包括图片，样式，脚本，等等，减少这些资源的下载请求数目，便成了让网页提速的关键。但需要提的是，中对请求的长度限制在字节以内参考，所以如果超过这个长度，只能使用请求。 前端工程师常常被提起网站性能，如何让网站访问更快等问题，本文就做个总结。 最少化HTTP请求 用户在浏览网页时，超过80%的时间都是在请求下载网页资源，包括...
摘要：最少化请求用户在浏览网页时，超过的时间都是在请求下载网页资源，包括图片，样式，脚本，等等，减少这些资源的下载请求数目，便成了让网页提速的关键。但需要提的是，中对请求的长度限制在字节以内参考，所以如果超过这个长度，只能使用请求。 前端工程师常常被提起网站性能，如何让网站访问更快等问题，本文就做个总结。 最少化HTTP请求 用户在浏览网页时，超过80%的时间都是在请求下载网页资源，包括...
摘要：为了能使不同的进程互相访问资源并进行协调工作，才有了进程间通信。此时，就需要与渲染进程通信了。发消息，渲染进程收消息内部使用来发消息。 作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-jin-cheng-tong-xin/酷家...
阅读 3058·2023-04-26 00:40
阅读 2396·2021-09-27 13:47
阅读 4220·2021-09-07 10:22
阅读 2968·2021-09-06 15:02
阅读 3311·2021-09-04 16:45
阅读 2492·2021-08-11 10:23
阅读 3600·2021-07-26 23:38
阅读 2902·2019-08-30 15:54
