学习笔记 - 2018年10月第二周 - MySQL优化 & 前端优化

MYSQL优化

表结构

  1. 字段的数据类型:不同数据类型的储存和检索方式不同,所以选择合理的数据类型,比如人类的年龄,用tinyint比用integer来得节省资源。

  2. 数据类型的长度:数据库最后总是要放到储存盘上,不管是磁盘还是固态硬盘,所以字段的长度也影响硬盘的I/O操作,字段长,对应的I/O时间也长,所以要选择合理的数据类型长度,比如手机号0211234567选择12位长度就够了,没必要选256

SQL语句优化

MySQL性能优化其中很重要的就是SQL语句的优化,比如使用index

分表

当数据库变得庞大的时候(比如超过200万条数据),就可以考虑分表了

数据库参数配置

合理的配置数据库服务系统,可以有效提升数据库性能,比如最大连接数,数据库占用内存等配置。mysql的这些参数都有默认配置,但是默认配置不一定是最适合的,需要根据程序的特性和硬件状况对配置进行调整。

主从复制,读写分离

只有一台MySQL服务器无法支持大并发,所以遇到同时间访问暴增的情况,一台服务器处理不过来,所以增加MySQL服务器也是一种有效的增强性能方式。
可以配置主从复制,CUD走Master服务器,R走Slaver服务器,这样就把压力分散开了。

增加缓存

用Redis, Memcache,elasticsearch等缓存层,可以减少数据库的连接。

升级硬件

土豪做法,当上面的几个方式都用过但是性能依旧有瓶颈的时候,就花钱升级硬件吧。更牛逼的CPU,更大的内存,更大的网络带宽。


MySQL军规

核心军规

  1. 尽量不在数据库做运算
  2. 控制表单数据量,纯INT不超过10M条,含Char不超过5M条
  3. 保持数据表slim
  4. 平衡范式和冗余
  5. 拒绝大SQL, 复杂事物,大批量任务

字段类军规

  1. 用好数值字段,尽量简化字段位数
  2. 把字符转化为数字
  3. 优先使用Enum或者set
  4. 避免使用null字段
  5. 少用并拆分Text/blog
  6. 不在数据库中存图片

索引类军规

  1. 谨慎合理添加索引
  2. 字符字段必须建立前缀索引
  3. 不在索引列做运算
  4. 自增列或者全局ID做InnoDB主键
  5. 尽量不用外键

SQL类军规

  1. SQL尽可能简单
  2. 保持事物连接短小
  3. 尽可能避免使用SP/Trigger/Function
  4. 尽可能不要用Select *
  5. 改写Or为IN()
  6. 改写Or为Union
  7. 避免负向查询和%前缀模糊查询
  8. Count不要使用在可null的字段上
  9. 减少count(*)
  10. Limit高效分页
  11. 用Union ALL替代Union
  12. 分解链接,保证高并发
  13. Group by去除排序
  14. 同数据类型的列值比较
  15. load Data导入数据,比Insert快20倍
  16. 打散大批量更新,尽量凌晨操作

约定类军规

  1. 隔离线上线下
  2. 禁止未经DBA认证的子查询
  3. 永远不在程序段显式加锁
  4. 同意字符集为UTF-8,统一命名规范

前端优化

背景

最近IEMALL项目稳步向前推进,主体功能不断迭代优化,进而开始把注意力转移一部分到前端的优化 - 如何能在不影响功能的基础上,最大程度提升用户体验。

首屏优化

作为用户的第一印象,首页的载入速度至关重要, 特别是可视区域,尽可能的缩短这个步骤的耗时。能让用户满意度大幅提升,下面我粗糙对比了一下我们当前项目和某相似竞争产品之间的首页载入时间。

竞争对手的首页载入速度

我们的首页载入速度

列个表来对比一下具体区别(A = 竞品; B = 我们)

A B
服务器位置 澳大利亚 香港
首页载入时间 54.6s 19.17s
DOM载入时间 2.21s 2.17s
接口数 0 11
图片数 55 36
js数 8 5
css数 3 2
总大小 20.7M 1.1MB

可以直观看出,我们的首页还是有优势的。其中首屏60%以上的大小都是由图片构成的,所以图片加载至关重要,A在首页直接载入了所有图片,包括那些需要翻页五六次的产品图,而我们采取了懒加载 - 仅仅当用户下拉至预设位置才开始载入新图片。
再来看每张图片的大小, 同样是用来显示商品的thumbnail图,A的平均图片大小是381km, B的平均图片大小是48.5kb.

第三方按需加载

在这个项目中,我们用的是vant-ui框架,根据按需加载的原则,我们避免使用下方的方式

1
import vant from 'vant-ui'

这种全部引入的方式会导致js文件过大,取而代之的,可以只在每个组件里引入它对应需要用的ui控件

1
import {swipe, Sku, ImagePreview, Tag, Toast} from 'vant'

路由懒加载

路由懒加载也叫做延迟加载,随用随载,vue这类的SPA程序,如果没用路由懒加载,会导致webpack打包出来的体积略大,这样用户在首次加载网页的时候,需要下载的东西过大,导致屏幕留白时间过长,影响用户体验,进而导致客源流失。

vue官方也推荐使用路由懒加载的方式优化项目

https://router.vuejs.org/guide/advanced/lazy-loading.html#grouping-components-in-the-same-chunk