菜单

XCel 项目计算:Electron 与 Vue 的质量优化

2019年10月4日 - 金沙前端

开垦体验怎么样?

基于 Electron 的支付就好像在支付网页,并且能够无缝地 使用
Node
。或然说:在创设贰个 Node 应用的还要,通过 HTML 和 CSS
创设分界面。别的,你只需为三个浏览器(最新的
Chrome
)举办规划(即无需思考宽容性等)。

强大的 GPU 加速

将拼接的字符串插入 DOM
后,出现了别的三个难题:滚动会很卡。猜度那是渲染难题,究竟 34
万个单元格同期设有于分界面中。

添加 transform: translate3d(0, 0, 0) / translateZ(0) 属性运转 GPU
渲染,就可以减轻这么些渲染品质难题。再一次惊讶该属性的强劲。

新生,思虑到客商并无需查看全数数目,只需出示部分数据让客户展开参谋就能够。大家对此只渲染前
30/50 行数据。那样就能够升高客商体验,也能尤其优化品质。

性情一览

品质优化

下边谈谈『品质优化』,这一部分关联到运转功能内部存款和储蓄器占用量
注:以下内容均基于 Excel 样例文件(数据量为:1911 行 x 180
列)得出的结论。

至于作者:刘健超-J.c

金沙国际平台 1

前端,在路上…
个人主页 ·
我的稿子 ·
19 ·
    

金沙国际平台 2

js-xlsx

该库辅助各类原子钟格格式的解析与转移。它由 JavaScript 完结,适用于前者和
Node。详情>>

前段时间协助读入的格式有(不断更新):

辅助写出的格式有:

此时此刻该库提供的 sheet_to_json 方法能将读入的 Excel 数据转为 JSON
格式。而对于导出操作,大家须要为 js-xlsx 提供钦命的 JSON 格式。

更加的多关于 Excel 在 JavaScript
中拍卖的学识可查阅凹凸实验室的《Node读写Excel文件研究执行》。但该小说存在两处难题(均在
js-xlsx 实战的导出表格部分):

  1. 浮动尾部时,Excel 的列音讯轻易地经过 String.fromCharCode(65+j)
    生成。当列大于 26 时会现身难点。这几个标题会在末端章节中提交技术方案;
  2. 转换到 worksheet
    须求的组织处,出现逻辑性错误,并且会促成惨痛的天性难点。逻辑难点在此不汇报,大家看看品质难题:
    随着 ECMAScript 的不断更新,JavaScript
    变得更其强有力和易用。即使如此,我们依旧要完毕『物尽所用』,而不要『大材小用』,不然可能会博得“反效果”。这里导致质量难题的难为
    Object.assign()
    方法,该方式能够把自由几个源对象的可枚举属性拷贝至目的对象,并回到指标对象。由于该办法自身的贯彻机制,会在此案例中发出多量的冗余操作。在该案例中,单元格消息是独一的,所以直接通过
    forEach 为二个空对象赋值就可以。提高 N
    倍质量的还要,也把逻辑性错误消除了。

原来的:

JavaScript

var result = 某数组.reduce((prev, next) => Object.assign({}, prev,
{[next.position]: {v: next.v}}), {});

1
2
var result = 某数组.reduce((prev, next) => Object.assign({}, prev, {[next.position]: {v: next.v}}), {});
 

改为:

JavaScript

var result = 某数组.forEach((v, i) => data[v.position]= {v: v.v})

1
2
var result = 某数组.forEach((v, i) => data[v.position]= {v: v.v})
 

施行是查验真理的独一规范

在明白上述知识后,下边就谈谈在该品种实践中总括出来的手艺、难点和首要

它由哪些组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地作用的
API(如张开文件窗口、文告、Logo等)。

金沙国际平台 3

汇成一句话

Electron 应用就像 Node 应用,它也凭仗三个 package.json
文件。该公文定义了哪个文件作为主进程,并据此让 Electron
知道从何运维应用。然后主进度能创设渲染进度,并能使用 IPC
让双方间实行新闻传递。

金沙国际平台 4

迄今,Electron
的根底部分介绍达成。该有的是依赖我在此之前翻译的一篇小说《Essential
Electron》,译文可点击
这里。


手艺选型

斜分水岭

如图:金沙国际平台 5

分水岭能够由此 ::after/::before 伪类元素达成一条直线,然后通过
transform:rotate();
旋转特定角度落成。但这种实现的二个标题是:由于宽度是不定的,因而须求经过
JavaScript 运算手艺博得可信赖的对角分水岭。

由此,这里能够透过 CSS 线性渐变
linear-gradient(to top right, transparent, transparent calc(50% - .5px), #d3d6db calc(50% - .5px), #d3d6db calc(50% + .5px), transparent calc(50% + .5px))
实现。无论宽高如何变,仍旧妥妥地自适应。

内部存款和储蓄器占有量过大

消除了实行功效和渲染难题后,开采也存在内部存款和储蓄器占用量过大的主题材料。那时候推断是以下多少个原因:

  1. 三大耗费时间操作均放置在 background process
    管理。在简报传递数据的进度中,由于不是分享内部存款和储蓄器(因为 IPC 是根据Socket
    的),导致现身多份数据别本(在写这篇文章时才有了那相对方便的答案)。
  2. Vuex
    是以多少个大局单例的情势实行田间管理,但它会是否对数码做了有个别封装,而招致品质的损耗呢?
  3. 由于 JavaScript
    近年来不持有积极回收财富的力量,所以只能积极对闲置对象设置为
    null,然后等待 GC 回收。

鉴于 Chromium 采取多进程架构,因而会涉嫌到进度间通讯难题。Browser
进度在起步 Render 进度的历程中会建构一个以 UNIX Socket 为根基的 IPC
通道。有了 IPC 通道之后,接下去 Browser 进度与 Render
进程就以新闻的方式开展通讯。大家将这种新闻称为 IPC
音讯,以界别于线程音讯循环中的新闻。
——《Chromium的IPC音信发送、接收和散发机制深入分析》

概念:为了轻巧精晓,以下『Excel 数据』均指 Excel 的全方位使得单元格转为
JSON 格式后的数量。

最轻易管理的确凿是第三点,手动将不再须求的变量及时安装为
null,但效果并不显著。

后来,通过操作系统的『活动监视器』(Windows
上是任务管理器)对该工具的每阶段(打开时、导入文本时、筛选时和导出时)实行简要的内存分析,得到以下报告:

—————- S:报告分水线 —————-
经观察,首要耗内部存款和储蓄器的是页面渲染进度。上面通过截图评释:
PID 15243 是主进度
PID 15246 是页面渲染进程
PID 15248 是 background 渲染进度

a、第叁回开发银行程序时(第 4 行是主进度;第 1 行是页面渲染进度;第 3 行是
background 渲染进度 )

金沙国际平台 6

b、导入文本(第 5 行是主进度;第 2 行是页面渲染进度;第 4 行是
background 渲染进程 )
金沙国际平台 7

c、筛选数据(第 4 行是主进度;第 1 行是页面渲染进度;第 3 行是
background 渲染进程 )
金沙国际平台 8

是因为 JavaScript 近日不具有积极回收财富的功用,所以不得不积极将目的设置为
null,然后等待 GC 回收。

于是,经过一段时间等待后,内部存款和储蓄器占用如下:
d、一段时间后(第 4 行是主进度;第 1 行是页面渲染进度;第 3 行是
background 渲染进度 )
金沙国际平台 9

由上述可得,页面渲染进度由于页面成分和 Vue 等 UI
相关财富是固定的,占用内存异常的大且不可能回收。主进度占用财富也不可能获得很好释放,临时不理解开始和结果,而
background 渲染进度则较好地放走财富。

—————- E:报告分界线 —————-

依附报告,开头得出的下结论是 Vue 和电视发表时占用财富非常大。

基于该工具的莫过于行使场景:Excel
数据只在『导入』和『过滤后』五个等级必要体现,况兼呈现的是经过
JavaScript 拼接的 HTML 字符串所组成的 DOM 而已。由此将表格数据放置在
Vuex 中,有一些滥用能源的质疑。

另外,在 background process 中也可以有存有一份 Excel
数据别本。因而,索性只在 background process 存储一份 Excel
数据,然后每当数据变动时,通过 IPC 让 background process 再次来到拼接好的
HTML
字符串就能够。那样一来,内存占领量马上下落比较多。另外,那也是贰个一举多得的优化:

  1. 字符串拼接操作也转移到了
    background process,页面渲染进度进一步回退耗费时间的操作;
  2. 内部存款和储蓄器据有量大大减小,响应速度也得到了进步。

实际,那也可以有一点点像 Vuex 的『全局单例方式管理』,一份数据就好。

理之当然,对于 Excel 的骨干音讯,如行列数、SheetName、标题组等均如故保留在
Vuex。

优化后的内部存款和储蓄器据有量如下图。与上述报告的第三张图比较(同一品级),内部存款和储蓄器据有量下落了
44.419%: 金沙国际平台 10
除此以外,对于无需响应的多寡,可透过 Object.freeze()
冻结起来。那也是一种优化手段。但该工具最近并不曾动用到。

时至明天,优化部分也阐述完成了!


该工具近日是开源的,应接大家使用或引入给用研组等有亟待的人。

你们的反映(可提交 issues /
pull
request)能让这么些工朴施厚用和效应上不断完善。

最后,感谢 LV
在产品规划、界面设计和优化上的暴力支撑。全文完!

打赏协助本身写出越多好小说,感谢!

打赏作者

Vue 全家桶

该工具使用了 Vue、Vuex、Vuex-router。在工具基本定型阶段,由 1.x 进级到了
2.x。

Electron 是什么?

Electron 是二个得以用 JavaScript、HTML 和 CSS
构建桌面应用程序的金沙国际赌场手机版,。那么些应用程序能打包到 Mac、Windows 和 Linux
系统上运维,也能上架到 Mac 和 Windows 的 App Store。

Excel 的列调换

JavaScript

// 将盛传的当然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。
function getCharCol(n) { let temCol = ”, s = ”, m = 0 while (n >=
0) { m = n % 26 + 1 s = String.fromCharCode(m + 64) + s n = (n – m) / 26
} return s }

1
2
3
4
5
6
7
8
9
10
11
12
13
// 将传入的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。
function getCharCol(n) {
  let temCol = ”,
    s = ”,
    m = 0
  while (n >= 0) {
    m = n % 26 + 1
    s = String.fromCharCode(m + 64) + s
    n = (n – m) / 26
  }
  return s
}
 

JavaScript

// 将盛传的26进制转变为自然数。映射关系:[A-Z] ->[0-25]。
function getNumCol(s) { if (金沙国际平台,!s) return 0 let n = 0 for (let i = s.length

1
2
3
4
5
6
7
8
9
10
11
12
// 将传入的26进制转换为自然数。映射关系:[A-Z] ->[0-25]。
function getNumCol(s) {
  if (!s) return 0
  let n = 0
  for (let i = s.length – 1, j = 1; i >= 0; i–, j *= 26) {
    let c = s[i].toUpperCase()
    if (c < ‘A’ || c > ‘Z’) return 0
    n += (c.charCodeAt() – 64) * j
  }
  return n – 1
}
 

把它们想象成这么

Chrome(或其余浏览器)的每种标签页(tab)及其页面,就好比 Electron
中的多少个独自渲染进度。即便关闭全部标签页,Chrome 依旧存在。那好比
Electron 的主进度,能开荒新的窗口或关闭那一个利用。

注:在 Chrome
浏览器中,三个标签页(tab)中的页面(即除去浏览器本人部分,如寻觅框、工具栏等)正是一个渲染进度。

金沙国际平台 11

怎么在渲染进程调用原生弹框?

在渲染进程中调用原本专项于主进程中的 API (如弹框)的法子有二种:

  1. IPC 通信模块:先在主进度通过 ipcMain 举办监听,然后在渲染进度经过
    ipcRenderer 举行接触;
  2. remote 模块:该模块为渲染进度和主进度之间提供了飞跃的报纸发表格局。

对于第二种形式,在渲染进度中,运转以下代码就可以:

JavaScript

const remote = require(‘electron’).remote remote.dialog.showMessageBox({
type: ‘question’, buttons: [‘不告诉你’, ‘未有梦想’], defaultId: 0,
title: ‘XCel’, message: ‘你的只求是怎么着?’ }

1
2
3
4
5
6
7
8
9
10
const remote = require(‘electron’).remote
 
remote.dialog.showMessageBox({
  type: ‘question’,
  buttons: [‘不告诉你’, ‘没有梦想’],
  defaultId: 0,
  title: ‘XCel’,
  message: ‘你的梦想是什么?’
}
 

缘何它如此重要?

常备来说,各个操作系统的桌面应用都由个别的原生语言举办编写制定,那代表必要3 个团队分别为该接纳编写相应版本。而 Electron 则允许你用 Web
语言编写一次就能够。

多进程!!!

前边说道,JavaScript
天生单线程,尽管再快,对于数据量异常的大时,也会油然则生拒绝响应的主题材料。由此供给Web Worker 或左近的方案去化解。

在此间我不选拔 Web worker 的缘由有如下几点:

  1. 有另外越来越好的代替方案:一个主进程能制造四个渲染进度,通过 IPC
    就能够进展多少交互;
  2. Electron 不协助 Web
    Worker!(当然,恐怕会在新本子援助,最新音讯请关怀官方)

Electron 作者在 2014.11.7 在《state of web worker support?》 issue
中恢复生机了以下这一段:

Node integration doesn’t work in web workers, and there is no plan to
do. Workers in Chromium are implemented by starting a new thread, and
Node is not thread safe. Back in past we had tried to add node
integration to web workers in Atom, but it crashed too easily so we
gave up on it.

由此,大家最后利用了创建一个新的渲染进程 background process
进行拍卖数量。由 Electron 章节可见,每种 Electron
渲染进度是单独的,由此它们不会相互影响。但这也带来了二个难题:它们不能够相互通信?

错!上面有 3 种艺术进行电视发表:

  1. Storage
    API:对某些标签页的
    localStorage/sessionStorage 对象开展增加和删除改时,其余标签页能透过
    window.storage 事件监听到。
  2. IndexedDB:IndexedDB
    是叁个为了能够在客商端存款和储蓄可观数额的结构化数据,何况在这几个多少上应用索引进行高质量检索的
    API。
  3. 因而主进度作为中间转播站:设主分界面包车型地铁渲染进度是 A,background process
    是 B,那么 A 先将 Excel 数据传递到主进度,然后主进度再倒车到 B。B
    管理完后再原路重临,具体如下图。当然,也能够将数据存款和储蓄在主进程中,然后在几个渲染进度中使用
    remote 模块来访谈它。

该工具选拔了第两种方法的首先种情景:
金沙国际平台 12

1、主页面渲染进程 A 的代码如下:

JavaScript

//① ipcRenderer.send(‘filter-start’, { filterTagList:
this.filterTagList, filterWay: this.filterWay, curActiveSheetName:
this.activeSheet.name }) // ⑥ 在某处接收 filter-response 事件
ipcRenderer.on(“filter-response”, (arg) => { // 得随地理数据 })

1
2
3
4
5
6
7
8
9
10
11
12
//①
ipcRenderer.send(‘filter-start’, {
    filterTagList: this.filterTagList,
    filterWay: this.filterWay,
    curActiveSheetName: this.activeSheet.name
})
 
// ⑥ 在某处接收 filter-response 事件
ipcRenderer.on("filter-response", (arg) => {
    // 得到处理数据
})
 

2、作为中间转播站的主进度的代码如下:

JavaScript

//② ipcMain.on(“filter-start”, (event, arg) => { // webContents
用于渲染和决定 web page
backgroundWindow.webContents.send(“filter-start”, arg) }) // ⑤
用于吸收接纳再次来到事件 ipcMain.on(“filter-response”, (event, arg) => {
mainWindow.webContents.send(“filter-response”, arg) })

1
2
3
4
5
6
7
8
9
10
11
//②
ipcMain.on("filter-start", (event, arg) => {
    // webContents 用于渲染和控制 web page
    backgroundWindow.webContents.send("filter-start", arg)
})
 
// ⑤ 用于接收返回事件
ipcMain.on("filter-response", (event, arg) => {
    mainWindow.webContents.send("filter-response", arg)
})
 

3、管理繁重数据的 background process 渲染进度 B 的代码如下:

JavaScript

// ③ ipcRenderer.on(‘filter-start’, (event, arg) => { // 进行演算 …
// ④ 运算完结后,再通过 IPC 原路再次回到。主进度和渲染进度 A
也要建设构造相应的监听事件 ipcRenderer.send(‘filter-response’, { filRow:
tempFilRow }) })

1
2
3
4
5
6
7
8
9
10
11
// ③
ipcRenderer.on(‘filter-start’, (event, arg) => {
    // 进行运算
    …
 
    // ④ 运算完毕后,再通过 IPC 原路返回。主进程和渲染进程 A 也要建立相应的监听事件
    ipcRenderer.send(‘filter-response’, {
        filRow: tempFilRow
    })
})
 

迄今结束,大家将『读取文件』、『过滤数据』和『导出文件』三大耗费时间的数据操作均转移到了
background process 中处理。

那边,大家只开创了七个
background process,假若想要做得更极端,大家能够新建『CPU 线程数- 1 』
个的 background process
同不时候对数码开展管理,然后在主进程对拍卖后数据进行拼接,最终再将拼接后的数目重临到主页面包车型客车渲染进度。那样就能够充裕榨干
CPU 了。当然,在此小编不会展开这些优化。

决不为了优化而优化,不然因小失大。 —— 某网民

CSS、JavaScript 和 Electron 相关的学识和技能

打赏援救自个儿写出越来越多好小说,多谢!

任选一种支付办法

金沙国际平台 13
金沙国际平台 14

1 赞 2 收藏
评论

更临近原生应用

金沙js777,Electron
的多少个劣点是:就算你的选取是一个简约的石英表,但它也不得不包蕴完整的功底设备(如
Chromium、Node
等)。由此,平日景况下,打包后的前后相继起码会落得几十兆(依据系统项目进行转移)。当您的施用越复杂,就越能够忽略文件体积难题。

驾驭,页面的渲染难免会导致『白屏』,并且这里运用了 Vue
那类框架,情形就越是倒霉了。别的,Electron
应用也幸免不了『先打开浏览器,再渲染页面』的步子。上边提供三种艺术来缓慢消除这种景色,以让程序更近乎原生应用。

  1. 点名 BrowserWindow 的背景颜色;
  2. 先掩饰窗口,直到页面加载后再展现;
  3. 保留窗口的尺码和职位,以让程序后一次被展开时,依然保留的一模一样大小和出现在平等的岗位上。

对此第一点,若使用的背景不是驼色(#fff)的,那么可钦点窗口的背景颜色与其同一,以制止渲染后的突变。

JavaScript

mainWindow = new BrowserWindow({ title: ‘XCel’, backgroundColor:
‘#f5f5f5’, };

1
2
3
4
5
mainWindow = new BrowserWindow({
    title: ‘XCel’,
    backgroundColor: ‘#f5f5f5’,
};
 

对此第二点,由于 Electron
本质是三个浏览器,必要加载非网页部分的财富。因而,我们得以先掩盖窗口。

JavaScript

var mainWindow = new BrowserWindow({ title: ‘ElectronApp’, show: false,
};

1
2
3
4
5
var mainWindow = new BrowserWindow({
    title: ‘ElectronApp’,
    show: false,
};
 

等到渲染进程开头渲染页面包车型地铁那一刻,在 ready-to-show
的回调函数中显得窗口。

JavaScript

mainWindow.on(‘ready-to-show’, function() { mainWindow.show();
mainWindow.focus(); });

1
2
3
4
5
mainWindow.on(‘ready-to-show’, function() {
    mainWindow.show();
    mainWindow.focus();
});
 

对此第三点,小编并不曾兑现,原因如下:

  1. 客户常常是基于那时的情况对前后相继的尺码和职位实行调度,即视情状而定。
  2. 以上是小编个人臆测,重借使本身懒。

其完毕模式,可参看《4 must-know tips for building cross platform
Electron
apps》。

交互通信

是因为主进度和渲染进度各自担当分裂的义务,而对于供给共同完毕的天职,它们供给互相通信。IPC就为此而生,它提供了经过间的简报。但它只可以在主进度与渲染进程之间传递新闻(即渲染进度之间无法拓宽直接通信)。

金沙国际平台 15

为 Electron 应用生成 Windows 安装包

通过 electron-builder 可直接生成常见的
MacOS 安装包,但它生成的 Windows 的安装包却略显简洁(默许选项时)。

金沙国际平台 16
Mac 常见的设置格局,将“左侧的运用图标”拖拽到“右边的 Applications”就能够

透过 electron-builder 生成的 Windows 安装包与大家在 Windows
上海高校规模的软件安装分界面不太一样,它没有设置向导和点击“下一步”的开关,唯有一个安装时的
gif 动画(暗许的 gif 动画如下图,当然你也得以钦点特定的 gif
动画),由此也就关门了客商选拔设置路线等权利。

金沙国际平台 17
Windows 安装时 暗中认可展现的 gif
动画

假定你想为打包后的 Electron 应用(即经过
electron-packager/electron-builder
生成的,可直接运营的次序目录)生成具备一点击“下一步”开关和可让客商指虞诩装路线的大范围安装包,能够品尝
NSIS 程序,具体可看那篇教程 《[教學]只要10分鐘學會使用 NSIS
包裝您的桌面軟體–安裝程式打包。完全免費。》。

注:electron-builder
也提供了变化安装包的配备项,实际查看>>。

NSIS(Nullsoft Scriptable Install System)是二个开源的 Windows
系统下安装程序制作程序。它提供了设置、卸载、系统装置、文件解压缩等成效。正如其名字所陈说的那样,NSIS
是因而它的脚本语言来汇报安装程序的表现和逻辑的。NSIS
的脚本语言和遍布的编制程序语言有左近的构造和语法,但它是为安装程序那类应用所安顿的。

由来,CSS、JavaScript 和 Electron 相关的学识和技艺部分演说罢结。


自动更新

若是 Electron
应用尚未提供自动更新效能,那么就象征用户想感受新开荒的意义或用上修复
Bug
后的新本子,只可以靠客商自个儿主动地去官网下载,这无疑是糟糕的体验。Electron
提供的 autoUpdater
模块可达成自动更新功效,该模块提供了第三方框架
Squirrel 的接口,但 Electron 如今只内置了
Squirrel.Mac,且它与
Squirrel.Windows(须求拾叁分引进)的管理情势也不相同(在客商端与劳务器端两地方)。因而只要对该模块不熟稔,管理起来会绝相比较麻烦。具体能够参照小编的另一篇译文《Electron
自动更新的总体教程(Windows 和
OSX)》。

此时此刻 Electron 的 autoUpdater 模块不扶助 Linux 系统。

除此以外,XCel 近年来并从未使用 autoUpdater 模块达成自动更新功用,而是利用
Electron 的
DownloadItem
模块完结,而服务器端则使用了 Nuts。

为啥采用 Vue

对于我来讲:

Vue 1.x -> Vue 2.0 的本子迁移用
vue-migration-helper
就能够深入分析出超越二分一内需转移的地点。

网三月有广大有关 Vue 的教程,故在此不再赘言。至此,Vue 部分介绍完成。


支撑周围的编纂成效,如粘贴和复制

Electron 应用在 MacOS
中默许不帮助『复制』『粘贴』等分布编辑成效,由此要求为 MacOS
显式地设置复制粘贴等编写制定作用的菜单栏,并为此设置相应的迅速键。

JavaScript

// darwin 就是 MacOS if (process.platform === ‘darwin’) { var template =
[{ label: ‘FromScratch’, submenu: [{ label: ‘Quit’, accelerator:
‘CmdOrCtrl+Q’, click: function() { app.quit(); } }] }, { label: ‘Edit’,
submenu: [{ label: ‘Undo’, accelerator: ‘CmdOrCtrl+Z’, selector:
‘undo:’ }, { label: ‘Redo’, accelerator: ‘Shift+CmdOrCtrl+Z’, selector:
‘redo:’ }, { type: ‘separator’ }, { label: ‘Cut’, accelerator:
‘CmdOrCtrl+X’, selector: ‘cut:’ }, { label: ‘Copy’, accelerator:
‘CmdOrCtrl+C’, selector: ‘copy:’ }, { label: ‘Paste’, accelerator:
‘CmdOrCtrl+V’, selector: ‘paste:’ }, { label: ‘Select All’, accelerator:
‘CmdOrCtrl+A’, selector: ‘selectAll:’ }] }]; var osxMenu =
menu.buildFromTemplate(template); menu.setApplicationMenu(osxMenu); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// darwin 就是 MacOS
if (process.platform === ‘darwin’) {
    var template = [{
      label: ‘FromScratch’,
      submenu: [{
        label: ‘Quit’,
        accelerator: ‘CmdOrCtrl+Q’,
        click: function() { app.quit(); }
      }]
    }, {
      label: ‘Edit’,
      submenu: [{
        label: ‘Undo’,
        accelerator: ‘CmdOrCtrl+Z’,
        selector: ‘undo:’
      }, {
        label: ‘Redo’,
        accelerator: ‘Shift+CmdOrCtrl+Z’,
        selector: ‘redo:’
      }, {
        type: ‘separator’
      }, {
        label: ‘Cut’,
        accelerator: ‘CmdOrCtrl+X’,
        selector: ‘cut:’
      }, {
        label: ‘Copy’,
        accelerator: ‘CmdOrCtrl+C’,
        selector: ‘copy:’
      }, {
        label: ‘Paste’,
        accelerator: ‘CmdOrCtrl+V’,
        selector: ‘paste:’
      }, {
        label: ‘Select All’,
        accelerator: ‘CmdOrCtrl+A’,
        selector: ‘selectAll:’
      }]
    }];
    var osxMenu = menu.buildFromTemplate(template);
    menu.setApplicationMenu(osxMenu);
}
 

回想关闭 Vuex 的严加形式

除此以外,由于投机学艺不精和疏于,忘记在生育条件关闭 Vuex
的『严酷情势』。

Vuex 的严加格局要在生产遭受中关闭,否则会对 state 树实行三个深阅览(deep
watch),发生不要求的属性损耗。或然在数据量少时,不会小心到那一个标题。

恢复那时候的情状:导入 Excel 数据后,再开展交互(涉及 Vuex
的读写操作),须求等几秒才会响应,而直白通过纯 DOM
监听的事件则无此难题。因而,推断出是 Vuex 难点。

JavaScript

const store = new Vuex.Store({ // … strict: process.env.NODE_ENV !==
‘production’ })

1
2
3
4
5
const store = new Vuex.Store({
  // …
  strict: process.env.NODE_ENV !== ‘production’
})
 

完毕思路

  1. 通过 js-xlsx 将 Excel 文件剖判为 JSON 数据
  2. 基于筛选标准对 JSON 数据开展筛选过滤
  3. 将过滤后的 JSON 数据转变到 js-xlsx 钦点的数据结构
  4. 使用 js-xlsx 对转移后的数据生成 Excel 文件

纸上得来终觉浅,绝知那件事要躬行

XCel 项目计算:Electron 与 Vue 的性质优化

2017/03/01 · 基本功手艺 ·
Javascript,
算法

正文小编: 伯乐在线 –
刘健超-J.c
。未经笔者许可,制止转发!
接待加入伯乐在线 专栏撰稿人。

XCEL 是由京东客户体验设计部凹凸实验室推出的三个 Excel
数据洗刷工具,其经过可视化的章程让顾客轻易地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不止跨平台(windows 7+、Mac 和
Linux),何况充裕利用 Electron 多进度任务管理等作用,使其性质特出。

落地页: ✨✨✨
花色地址: ✨✨✨

系列背景

客户讨论的定量钻探和轻量级数据管理中,均需对数据开展保洁管理,以剔除至极数据,保险数据结果的信度和效度。最近因调查研讨数据和轻量级数据的多变性,对轻量级数据洗刷往往利用人工洗涤,缺乏统一、标准的清洗流程,但对此科研和轻量级的数量往往是急需保障数据牢固性的,由此,在对数码进行保洁时最棒有规范的清洗方式。

为 DOM 的 File 对象扩展了 path 属性

Electron 为 File 对象额外增了 path
属性,该属性可获取文件在文件系统上的诚实路线。因而,你可以选取 Node
扬威耀武。应用场景有:拖拽文件后,通过 Node 提供的 File API
读取文件等。

高亮 table 的列

Excel 单元格采取 table 标签突显。在 Excel
中,被入选的单元格会高亮相应的『行』和『列』,以提醒客商。在该采用中也是有做相应的管理,横向高亮选择
tr:hover 实现,而纵向呢?这里所运用的两个技术是:

若是 HTML 结构如下:

JavaScript

div.container table tr td

1
2
3
4
5
div.container
  table
    tr
      td
 

CSS 代码如下:

JavaScript

.container { overflow:hidden; } td { position: relative; }
td:hover::after { position: absolute; left: 0; right: 0; top: -1个亿px;
// 小指标完毕,可是是负的😭 bottom: -1个亿px; z-index: -1; //
防止遮住自身和同列 td 的内容、border 等 }

1
2
3
4
5
6
7
8
9
10
11
.container { overflow:hidden; }
td { position: relative; }
td:hover::after {
  position: absolute;
  left: 0;
  right: 0;
  top: -1个亿px; // 小目标达成,不过是负的😭
  bottom: -1个亿px;
  z-index: -1; // 避免遮住自身和同列 td 的内容、border 等
}
 

渲染进程

渲染进度是采取的四个浏览器窗口。与主进程区别,它能存在多个(注:叁个Electron
应用只可以存在一个主进度)并且相互独立(它也能是隐藏的)。主窗口平日被命名叫
index.html。它们如同超人的 HTML 文件,但 Electron 赋予了它们完整的
Node API。由此,那也是它与浏览器的不相同。

金沙国际平台 18

Vue 质量真的好?

Vue 一向标榜着本人品质杰出,但当数据量上涨到一定量级时(如 1915 x 180 ≈
34 万个数据单元),会油然则生严重的质量难点(未做相应优化的前提下)。

如直接通过列表渲染 v-for 渲染数据时,会招致程序卡死。
答:通过翻看有关资料可得, v-for
在第一渲染时,须求对各样子项进行初叶化(如数据绑定等操作,以便具有越来越快的翻新速度),那对于数据量一点都不小时,无疑会促成严重的质量难点。

当下,小编想开了三种缓慢解决思路:

  1. Vue 是数码驱动视图的,对数据分段 push,就要二个壮大的任务分割为 N
    份。
  2. 友善拼接 HTML 字符串,再经过 innerHTML 壹回性插入。

末尾,作者选择了第二条,理由是:

  1. 品质最棒,因为每一遍实践多少过滤时,Vue 都要进行 diff,质量不好。
  2. 更切合当下应用的供给:纯展现且无需动画过渡等。
  3. 落到实处更简约

将原先繁重的 DOM 操作(Vue)调换为 JavaScript
的拼接字符串后,品质获得了十分大升级(不会招致程序卡死而渲染不出视图)。这种优化措施难道不就是Vue、React
等框架化解的主题材料之一吧?只可是框架考虑的场馆更广,有些地方须要我们和煦依照实际情况张开优化而已。

在浏览器个中,JavaScript 的演算在今世的引擎中非常的慢,但 DOM
自个儿是不行缓慢的事物。当您调用原生 DOM API 的时候,浏览器必要在
JavaScript 引擎的语境下去接触原生的 DOM
的完毕,那些历程有一定的习性损耗。所以,本质的勘测是,要把耗费时间的操作尽量放在纯粹的总结中去做,保障最终总结出来的内需实际接触实际
DOM 的操作是最少的。 —— 《Vue
2.0——渐进式前端实施方案》

当然,由于 JavaScript
天生单线程,尽管奉行数速度再快,也难免会导致页面有短暂的日子不容客户的输入。此时可由此Web Worker 或其它措施缓慢解决,那也将是咱们继续讲到的难点。

也可以有网络好朋友提供了优化大批量列表的不二等秘书技:。但在此案例中我并未采纳此形式。

思路与落实

据书上说用研组的急需,利用 Electron 和 Vue 的风味对该工具实行支付。

Electron

实行成效和渲染的优化

有关手艺

假设对某项本事相比较精通,则可略读/跳过。

七个进度(注重)

Electron
有二种进度:『主进度』和『渲染进度』。部分模块只可以在两岸之一上运维,而有一点则无界定。主进度愈来愈多地担任幕后剧中人物,而渲染进度则是应用程序的次第窗口。

注:可经过职责管理器(PC)/活动监视器(Mac)查看进度的相关音讯。

主进程

主进程,平常是一个命名字为 main.js 的公文,该公文是每一种 Electron
应用的入口。它决定了动用的生命周期(从张开到关门)。它不仅可以调用原生成分,也能创立新的(三个)渲染进程。另外,Node
API 是停放当中的。

金沙国际平台 19

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图