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

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

2017/03/01 · 基础技术 ·
Javascript,
算法

正文小编: 伯乐在线 –
刘健超-J.c
。未经小编许可,禁止转发!
迎接插手伯乐在线 专栏作者。

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

XCEL 基于 Electron 和 Vue 2.x,它不光跨平台(windows 7+、Mac 和
Linux),而且丰硕利用 Electron 多进度义务处理等功用,使其性质非凡。

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

Vue笔记六:Vue项目标品质优化之路

自家多年来也时常面试外包同事。面试的时候,总会有个难题,“你说一下品质优化的手法”。百分之八十的人都会说,压缩js和css之类的。分明这一个都是必须做的,而且已经根本不是最重要的性质优化的关键点。若是您只会说这个,只好注解你是个过时的前端工程师。

品质优化过程中,大家必要面对的越来越多是DMS解析进程,服务器缓存和浏览器缓存机制。

在性质优化项目中,我只是一个协助参预的角色,但也刚好给了本人从表面参看项目周转的空子,必要优化的系列现已是运行了6年的老系统,数据一直不曾做过分开,涉及全库查询等致命的优化难点。其余此次项目的业主也希望对优化办事展开引导,造成走了累累弯路,同时鉴于垂直数据库技术欠缺,从外表找了协作伙伴举行长远品质优化商讨。
一言以蔽之那几个类型虽小,但具有了复杂项目标各方面的内容,我也将会对那么些类型展开早先的分析。

在性质优化项目中,我只是一个援救参预的角色,但也正好给了本人从表面参看项目周转的机遇,必要优化的种类现已是运行了6年的老系统,数据一直不曾做过分开,涉及全库查询等致命的优化难题。别的此次项目标业主也可望对优化办事开展指导,造成走了无数弯路,同时鉴于垂直数据库技术欠缺,从外表找了合营伙伴进行深切质量优化探究。
简单来讲这一个类型虽小,但有所了复杂项目标各省点的内容,我也将会对那些种类展开起初的解析。

项目背景

用户研讨的定量商量和轻量级数据处理中,均需对数据开展保洁处理,以剔除极度数据,有限支撑数据结果的信度和效度。如今因调研数据和轻量级数据的多变性,对轻量级数据清洗往往采纳人工清洗,缺乏统一、标准的清洗流程,但对此调研和轻量级的数据往往是内需有限支撑数据稳定性的,由此,在对数据开展保洁时然则有标准的涤荡方法。

gzip压缩

在颇具的web前端项目,静态资源中央都坐落cdn上,gzip的滑坡是尤其须求的,它平素改动了js文件的尺寸,裁减两到三倍。

性能优化项目的总结,Vue项目的性能优化之路。参考加速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的写法。

相关文章

发表评论

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

*
*
Website