Vue项目的性能优化之路,性能优化项目的总结

XCel 项目统计:Electron 与 Vue 的属性优化

2017/03/01 · 基本功技术 ·
JavascriptVue项目的性能优化之路,性能优化项目的总结。,
算法

本文小编: 伯乐在线 –
刘健超-J.c
。未经作者许可,禁止转发!
欢迎插足伯乐在线 专栏撰稿人。

XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel
数据清洗工具,其经过可视化的主意让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不光跨平台(windows 7+、Mac 和
Linux),而且足够利用 Electron 多进度职分处理等功能,使其属性非凡。

落地页: ✨✨✨
品种地址: ✨✨✨

Vue笔记六:Vue项目标属性优化之路

本身近年也每每面试外包同事。面试的时候,总会有个难题,“你说一下性质优化的手腕”。百分之八十的人都会说,压缩js和css之类的。明显那么些都是必须做的,而且早已根本不是关键的特性优化的关键点。要是你只会说那么些,只好表达您是个过时的前端工程师。

特性优化进程中,我们须要面对的更加多是DMS解析进度,服务器缓存和浏览器缓存机制。

在质量优化项目中,我只是一个支援参与的角色,但也恰恰给了自家从外表参看项目周转的火候,须求优化的体系现已是运作了6年的老系统,数据平昔没有做过分开,涉及全库查询等致命的优化难题。此外此次项目标COO也希望对优化办事拓展率领,造成走了成百上千弯路,同时由于垂直数据库技术欠缺,从外表找了协作伙伴举行深切质量优化琢磨。
总的说来那些种类虽小,但有所了复杂项目的各地方的情节,我也将会对这几个体系展开初步的分析。

在品质优化项目中,我只是一个声援参加的角色,但也恰恰给了自家从外表参看项目周转的火候,须求优化的种类现已是运作了6年的老系统,数据一贯没有做过分开,涉及全库查询等致命的优化难题。其余此次项目标小业主也期待对优化办事拓展辅导,造成走了诸多弯路,同时由于垂直数据库技术欠缺,从外表找了同盟伙伴举办深远品质优化商量。
一句话来说那个项目虽小,但持有了复杂项目标各方面的情节,我也将会对这么些项目进展起初的辨析。

品类背景

用户商量的定量探究和轻量级数据处理中,均需对数码进行清洗处理,以剔除分外数据,保险数据结果的信度和效度。近期因调研数据和轻量级数据的多变性,对轻量级数据清洗往往利用人工清洗,缺少统一、标准的清洗流程,但对于调研和轻量级的数据往往是急需保险数据稳定性的,因而,在对数码进行清洗时最为有标准的洗涤方式。

gzip压缩

在装有的web前端项目,静态资源为主都坐落cdn上,gzip的削减是分外要求的,它直接改动了js文件的高低,收缩两到三倍。

参考加速nginx:
开启gzip和缓存,nginx的gzip配置格外简单,在您对号入座的域名底下,添加底下的配备,重启服务即可。gzip_comp_level的值超出2的时候并不强烈,指出安装在1要么2以内。

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

基础方向

基本功方向

特性一览

  • 按照 Electron 研发并封装成为原生应用,用户体验出色;
  • 可视化操作 Excel 数据,帮忙文件的导入导出;
  • 抱有单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选格局,并且可通过“且”、“或”和“编组”的措施随机组合。

服务器缓存

为了增加服务器获取数据的进度,nginx缓存着静态资源是格外要求的。若是是测试服务器对html应该不设置缓存,而js等静态资源环境因为文件底部会添加一个hash值,那足以有效达成缓存的控制。

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
  access_log   off; 
  expires      30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  access_log   off;
  expires      24h;
}
location ~* ^.+\.(html|htm)$ {
  expires      1h;
}

SQL优化

先是要做的就是找出执行慢的SQL或业务模块,调查SQL的工作逻辑是还是不是留存可优化的半空中。

  1. 我们先做的是基于业务部分提交的缓缓业务,查询相应的SQL,并在测试环境中效仿运行,并记录生产环境和测试环境执行响应SQL的岁月
  2. 将最有代表性的SQL(常用业务)的实践布置列出,并查阅索引的举办处境。在此次项目中,发现执行安排没有举行设定的目录,这几个关键难题也是优化的要害方向。

SQL优化

率先要做的就是找出执行慢的SQL或工作模块,调查SQL的作业逻辑是还是不是留存可优化的空间。

  1. 咱俩先做的是基于业务部分提交的慢性业务,查询相应的SQL,并在测试环境中效仿运行,并记录生产环境和测试环境执行响应SQL的岁月
  2. 将最有代表性的SQL(常用业务)的实践安插列出,并查阅索引的实行情状。在本次项目中,发现实施计划没有履行设定的目录,那些关键难题也是优化的根本方向。

    ### 调整表分区

    表分区平素是数据库优化的基本点首选。按照工作将表依照一定的字段或特定规则举办分区,可以大大升级数据库的性质。但须求注意,分区表将影响多少的插入功能,与建立目录相同,在创建表分区的经过中要分析利弊。

    ### 数据量的加码对质量费用的影响

    序列中存在测试环境与生产条件,其数据量级别分裂,环境安排也分裂,就会导致执行同一的SQL或工作取得相反的结果,故在性质优化的早期,要至少满意数据量的协同,这样可以兑现所有相同标准的相比较。
    在类型中的系统,将特定表的多少调整为同一时,执行成效基本相同,这就证实:

  3. 质量不是造成SQL执行慢的瓶颈

  4. 数据量的充实会造成缓存的充实,同时作用变换与缓存大小有关,并且和命中率有关。

    ### 读写分离

    出于系统的事体数据量过大,且按照要求要满意无条件限制的查询,那样就决然造成全表扫描。为了可以查询作用,必须要落到实处读写分离,在事情时间范围只举办读操作(对查询时限要求较低),非业务时间将数据开展协同。

    关于业主

    此次项目标老董娘,技术官员对技术要求极为苛刻,当然那也是为了项目可以顺利举行的要求条件,怎么样才能适合那样的客户,时限火速迭代,快捷反馈?在档次初期,大家也走了成百上千弯路。

  1. 平素的合乎只好让自己成为无头苍蝇
  2. 当现身信任危害的时候,建立信任可能早就是不可以挽回的作业
  3. 关系频率要把握清楚,埋头苦干也要抬头看路

如上是我们在于业务关联和处分时现身的难点,当然难点的源流也出在始发大家对品种知晓不精通。

思路与落成

依照用研组的必要,利用 Electron 和 Vue 的特点对该工具进行支付。

浏览器缓存

浏览器缓存是经过html的头文件中的meta来控制。http-equiv是一个特意针对http的头文件,能够向浏览器传回一些一蹴而就的信息。与之相应的content,是逐一参数的变量值。

调动表分区

表分区一贯是数据库优化的第一首选。根据作业将表依据一定的字段或特定规则举行分区,可以大大升级数据库的习性。但需要专注,分区表将影响多少的插入作用,与建立目录相同,在确立表分区的历程中要分析利弊。

技巧选型

  • Electron:桌面端跨平台框架,为 Web
    提供了原生接口的权力。打包后的次第包容 Windows 7 及以上、Mac、Linux
    的 32 / 64 位系统。详情>>
  • Vue 全家桶:Vue
    拥有数量驱动视图的性状,适合重数据交互的接纳。详情>>
  • js-xlsx:兼容各个电子表格格式的解析器和生成器。纯 JavaScript
    达成,适用于 Node.js 和 Web
    前端。详情>>

HTTP 1.0

在HTTP1.0中通过Pragma控制页面缓存,能够设置为Pragmano-cache。在不让浏览器或中等缓存服务器缓存页面的事态下,寻常设置的值为no-cache,然则那么些值不那样有限支持,常常还助长Expires置为0来完毕目标。Expires可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输获取新的页面音信。PS:内容必须选拔GMT的时刻格式。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

数据量的增多对品质费用的震慑

序列中存在测试环境与生产条件,其数据量级别差异,环境部署也分裂,就会造成执行同一的SQL或工作取得相反的结果,故在性质优化的先前时期,要起码满足数据量的联手,那样可以完结所有相同标准的对照。
在品种中的系统,将特定表的多寡调整为同一时,执行效能基本相同,那就表达:

  1. 属性不是促成SQL执行慢的瓶颈
  2. 数据量的加码会促成缓存的加码,同时效能变换与缓存大小有关,并且和命中率有关。

完毕思路

  1. 因此 js-xlsx 将 Excel 文件分析为 JSON 数据
  2. 依照筛选标准对 JSON 数据举行筛选过滤
  3. 将过滤后的 JSON 数据转换成 js-xlsx 指定的数据结构
  4. 动用 js-xlsx 对转移后的多寡生成 Excel 文件

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

HTTP 1.1

在HTTP1.1中通过Cache-Control操纵页面缓存,可以安装为no-cacheprivateno-storemax-agemust-revalidate等,默认为private。

<meta http-equiv="Cache-Control" content="no-cache">
  • public 浏览器和缓存服务器都足以缓存页面音讯
  • private
    对于单个用户的成套或部分响应新闻,无法被共享缓存处理。那允许服务器仅仅描述当用户的片段响应信息,此响应音信对于其余用户的请求无效
  • no-cache 浏览器和缓存服务器都不应该缓存页面音讯
  • no-store
    请求和响应的音讯都不应该被贮存在对方的磁盘系统中,不使用缓存
  • must-revalidate
    对于客户机的每趟请求,代理服务器必须想服务器验证缓存是还是不是过时
  • max-age 客户机可以吸纳生存期不超出指定时间(以秒为单位)的响应
  • min-fresh 客户机可以接到响应时间低于当前岁月累加指定时间的响应

读写分离

是因为系统的事务数据量过大,且按照须要要满意无条件限制的询问,那样就决然造成全表扫描。为了可以查询功能,必须求促成读写分离,在事情时间限定只举行读操作(对查询时限要求较低),非业务时间将数据举行联合。

相关技术

如果对某项技术比较通晓,则可略读/跳过。

Last-Modified和Etags

Last-Modified服务器端文件响应头,描述最终修改时间。当浏览器再度开展呼吁时,会向服务器传送If-Modified-Since报头,询问时间点之后资源是或不是被修改过,从而区分200和304的请求状态码,304则选拔浏览器缓存。

Etags分化的是,ETag是基于实体内容生成一段hash字符串,是标识资源的情况。它由服务端爆发来判定文件是或不是有创新。

参考资料:

  • HTTP缓存深远举办
  • 操纵缓存,不再让您蓝瘦香菇

关于业主

这一次项目标业主,技术官员对技术必要极为苛刻,当然那也是为了项目可以顺利进行的需求条件,怎样才能适合那样的客户,时限快速迭代,连忙反馈?在品种初期,大家也走了诸多弯路。

  1. 一贯的契合只好让自己成为无头苍蝇
  2. 当出现信任危害的时候,建立信任可能早已是不可能挽回的事体
  3. 调换频率要把握清楚,埋头苦干也要抬头看路

上述是我们在于业务关联和料理时出现的题材,当然难题的源头也出在起来大家对品种知晓不知晓。

Electron

JS分包

前面说的两有些都足以说是偏后端的活,如果的确在此从前端方面考虑,大家恐怕会含有出手。正因为vue的脚手架搭建的品类,webpack的配置当中就包涵了压缩js,css和html的滑坡。所以,当大家的单页面越做越大的情形下,主要的一步就是包蕴。

vue官方称gzip压缩后唯有20kb,不过你平凡的打包格局也有100kb,再加上你协调的逻辑代码,全部包的体积也挺大的。直接影响首屏页面加载的频率。上面介绍一下三种含有的办法:

  • external 把包排除,使用cdn资源
  • dll 打包

Electron 是什么?

Electron 是一个得以用 JavaScript、HTML 和 CSS
创设桌面应用程序的。这几个应用程序能打包到 Mac、Windows 和 Linux
系统上运行,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 都是 Web
    语言,它们是组成网站的一片段,浏览器(如
    Chrome)理解如何将这个代码转为可视化图像。
  • Electron 是一个库:Electron
    对底层代码举行抽象和打包,让开发者能在此之上打造项目。

vue,vuex和vue-router

在webpack配置文件中external设置,把那多少个场用包排除那一个操作,首倘诺把那多少个包从vendor.js分开。

说到底当然必要在html标签上添加上额外cdn的link或者script。

何以它如此重大?

常备来说,每个操作系统的桌面应用都由各自的原生语言举办编辑,那代表必要3 个企业分别为该使用编写相应版本。而 Electron 则允许你用 Web
语言编写一次即可。

  • 原生(操作系统)语言:用于支付主流操作系统应用的原生语言的呼应关系(一大半状态下):Mac
    对应 Objective C、Linux 对应 C、Windows 对应 C++。

DLL打包

那种打包形式越发引用webpack官方的DllPluginDllReferencePlugin。DllPlugin会生成一个dll包的代码指纹manifest,管理额外的卷入。而在档次转移的长河中,DllReferencePlugin会参考manifest的内容去打包。额外生成的js文件应当被放置在vue项目标文本当中的static文件夹底下,以便于代码计划。

参考PaicFE/vue-multi中的配置文件webpack.dll.config.js的写法。

发表评论

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

网站地图xml地图