不写代码,把网站速度优化 10 倍~~
背景
两年前的 2020 年 3 月份,力扣(LeetCode 中国版)推出了「每日一题」活动。力扣网站上每天公布一道题目,吸引大家一起做题和讨论。
当时我因为疫情原因居家,足不出户。作为力扣爱好者,我正在想着自己组织「每日一题」打卡活动呢!
虽然第一反应是「哎呀,我想做的事情被力扣给做了!」。但是经过我老婆的点拨,我明白没有必要跟力扣竞争搞同样的「每日一题」的活动,应该发挥自己的特长,围绕着「力扣每日一题」活动搞社群。
于是当天晚上我就建立了一个「力扣每日一题打卡」小群,开始拉周围的好朋友进来凑数。在群里,大家可以一起讨论今天的力扣每日一题解法,并且互相监督打卡。
怎么检查群友打卡情况呢?
我调研了一下类似的打卡群,都需要在力扣上打卡完成之后发截图、再人肉统计。
群内人数很快到了 50 人,如果人肉统计每天的打卡情况,那多累啊!
可我们是程序员啊! 遇到难题,咱们就开发个项目呗!
于是,我花了个周末,开发出来了「每日一题打卡网站」。地址是: ojeveryday.com
网站利用爬虫技术,统计所有成员是否完成了今天的题目。也就是说,成员只要在力扣上做完题目,这个打卡网站过会就把成员的状态更新为「已打卡」。
完全自动化,不需要额外操作!懒到极致!
网站上线两年了,现在是什么情况呢?
加入人数已经 3626 人;
建了 6 个打卡监督群;
产出一份开源算法刷题模板:AlgoWiki
包括本公众号最初也是为了打卡组织而创办的。
可是,最近发现打卡网站的打开速度实在是太慢太慢了,每次打开都需要漫长的等待。
通过 Chrome 的排查工具看一下,发现每次打开网页竟然需要 15 秒!
据研究,网民打开一个网站最长能忍受的打开时间是 6~8 秒;如果超过 12 秒,99%的用户都会直接关闭网页,不再等待。
网页打开的最佳时间是 2 秒!
所以,这网站到了不得不优化的时候了!拿起键盘干!
分析
网站加载慢的原因在哪呢?
通过对打开网站时的请求分析,我发现耗时比较长的操作在于「静态资源」和「后台接口」,都占据了 2 秒以上。
竟然还有一些静态资源请求失败了。。
所以思路就围绕着「优化静态资源加载速度」和「优化后台接口」两方面展开。
优化静态资源加载速度
首先看下静态资源怎么访问的。
耗时最久的 angular-1.2.10.js
是放在渣渣服务器上的,没有上CDN
。所以虽然访问成功,但是很慢。
而请求失败的jquery.dataTables.min.css
,虽然放在了CDN
上,但是是国外的 CDN
。访问失败应该可以理解吧!
所以,对于「静态资源」的优化,我采用的办法是把这些资源都放到国内CDN
。
随着云计算技术的普及,云服务器、CDN
这些服务其实都是触手可得,而且价格很便宜的。
我采用的某云的对象存储服务:
新建对象存储时,选择权限设置为「私有写,公有读」。
把网站中用到的静态资源使用厂商提供的上传工具上传到对象存储上。
再打开 CDN
加速。
当读取资源的时候,使用CDN
加速域名就可以了。
再打开网站看看静态资源加载速度如何:
以前这些耗时大户,现在访问时间基本在 60 ms 以内。
之前耗时最久的 angular-1.2.10.js
,访问时间从4.04s
,变成了 37ms
,加速了 100 倍!
之前访问失败的jquery.dataTables.min.css
和 jquery.dataTables.min.js
,现在不仅能正常访问,而且加载时间只需要 20ms
左右!
飞一般的感觉!
还能更快吗?
一个网站的静态资源,基本上很少有变化。浏览器会帮我们缓存静态资源。
当第一次打开网页的时候,所有资源都要从服务端获取。
但是当「刷新」或者关闭网页后间隔不长的时间「再次打开」时,静态资源是从磁盘/内存的缓存中读取的,因此速度极快是 0ms
。
至此「静态资源」优化完成。
接口加速
后台接口需要几秒钟才能返回结果,为什么这么慢呢?
看一下首页请求的这 4 个接口,分别是**「统计信息」、「打卡列表」、「更新时间」、「今日题目」**。其中「统计信息」、「打卡列表」两个接口耗时最长达到了 4 秒。
这两个接口都是带有参数的 date=2022-03-18
,即请求的今天的数据!
而后台接口只是把请求转成了 SQL
查询,所以怀疑是数据库的问题!
我的数据库采用的是某云厂商的云端 MySQL。
登录上去看一下,啊,果然没配索引!!
这个表的总行数多少呢?
竟然有 174 万行数据!!
也就是说,每次接口调用都需要从 174 万行数据中,筛选出日期是今天的所有打卡信息,再执行统计。
如果没有索引,那么就得遍历啊,时间复杂度是 O(N)O(N)O(N) !
在网站最开始上线的时候,数据比较少,因此接口访问速度挺快的。而现在数据已经有了上百万行,所以 SQL
执行的时间需要几秒钟。
既然知道问题在哪了,其实优化也就很简单了,加上索引就 OK 了,而且可以直接在界面上操作。
这里我对「日期」、「用户名」、「是否已打卡」这 3 列建立索引,索引方式是 BTREE
。
网站后台的接口代码是不需要任何修改的。
让我们再刷新下网页,看下现在的接口访问耗时:
之前耗时最长的「统计信息」接口 summary
的耗时从 4.04s
变成了 125ms
,速度提升了 32 倍!
另一个耗时很长的「打卡列表」接口 page
的耗时从 3.89s
变成了 101ms
,速度提升了 38 倍!
可见,索引对 SQL
执行速度的提升是非常大的!
最后
经过我上面的两处优化之后,现在打开网站的速度保持在 2s
以内!已经达到了「网页最佳打开时间」。
比如下面截图中显示1.6s
网页加载完成,而以前需要15s
,四舍五入,网站速度提高了 10 倍~~
总结一下,我主要做了两个优化:静态资源上传 CDN
、后端数据库加索引,分别提高了网页静态资源加载速度和后台接口影响速度。
CDN
、缓存、索引等都是计算机的基础概念,这次网站优化是对这些概念的简单理解与应用。
美团有句老话,叫做「苦练基本功」。
万丈高楼平地起,苦练基本功就是在打地基。
最后唠叨一句,由于我的小破站访问量不大,所以按量付费的 CDN
费用很低。如果你的网站流量比较大,还是要评估一下成本。
想加入力扣打卡监督群的朋友可以点击 http://www.ojeveryday.com/#/submit,填写个人 LeetCode 的主页地址。我会拉你进群。
图片来源:
Unsplash, Digital Ocean
不写代码,把网站速度优化 10 倍~~相关推荐
- WordPress网站速度优化教程
网站访问速度是影响网站访客流量的重要因素,几秒内打不开网站会导致很多访客的流失,因此在WordPress程序中网站速度优化尤为重要. 当然服务器地区和配置也会影响访问速度 服务器速度:国内>香港 ...
- netty系列之:一个价值上亿的网站速度优化方案
文章目录 简介 本文的目标 支持多个图片服务 http2处理器 处理页面和图像 价值上亿的速度优化方案 总结 简介 其实软件界最赚钱的不是写代码的,写代码的只能叫马龙,高级点的叫做程序员,都是苦力活. ...
- 网站速度优化的一些方法
一. 优化网站程序,改用CSS跟DIV,不用Table 虽然说DIV与CSS搭配是非常主流的编程语言,这跟它们体积小且加载速度快这两个优点密不可分.现在很多主流的网站与CMS都是采用的这个模式,目 ...
- 写了 15 年代码,总结出提升 10 倍效率的三件事
[译者注]本文作者 Matt Watson 已经写了超过 15 年的代码,也由此总结出了提升 10 倍效率的三件事.Matt 表示,一个 10 倍效率的开发人员很快就知道了他们需要做什么,要问什么问题 ...
- 记录一次wordpress网站速度优化过程,看我如何有效提升wordpress加载打开速度
如何提升wordpress站点速度 简介 分析 具体优化步骤 总结 简介 共读书房是国内非常有影响力的一家线下阅读品牌,共读书房官方网站采用了wordpress进行了二次开发,有兴趣的同学可以点击测试 ...
- 撸代码速度提升10倍的技巧,收藏慢慢看!!!【内含福利】
今天带大家提升一下写代码的速度,idea 是我们用的最多的开发工具,这个工具有个特别的牛逼的功能:live template. 这个功能掌握之后,撸代码的速度至少翻两番. 先带大家见识一下这玩意的威力 ...
- 优化:一种将grid-search速度提升10倍的方法
Python 2.7 IDE Pychrm 5.0.3 sci-kit learn 0.18.1 前言 抖了个机灵,不要来打我,这是没有理论依据证明的,只是模型测试出来的确有效,并且等待时间下降(约) ...
- 使用Apache Spark让MySQL查询速度提升10倍以上
作者:Alexander Rubin 链接:http://coyee.com/article/11012-how-apache-spark-makes-your-slow-mysql-queries- ...
- 面试官:如果让你设计一个消息中间件,如何将其网络通信性能优化10倍以上?【石杉的架构笔记】...
目录 1.客户端与服务端的交互 2.频繁网络通信带来的性能低下问题 3.batch机制:多条消息打包成一个batch 4.request机制:多个batch打包成一个request " 这篇 ...
- matlab用i3怎么,i3处理器-matalb速度差不多10倍DSP-C语言
某项目,完全相同的算法,分别用matlab和C语言实现,DSP+C语言仅接收部分20S一次,matlab在i3上面收发一次能达到2S.真是惨不忍睹,干脆弄两台三四年前的笔记本来做算了 c实现得太差吧 ...
最新文章
- 数据库基础笔记(MySQL)3 —— 基础操作
- jQuery EasyUI使用教程之使用标记创建树形菜单
- wordpress ajax 调用wpdb_莫名其妙的调用Roboto字体又莫名其妙的恢复的过程
- 以下哪个不是python中的关键字-以下不是python中的关键字
- 后台开发经典书籍--大型分布式网站架构设计与实践
- GAN背后的理论依据,以及为什么只使用GAN网络容易产生
- Dubbo-HelloWorld
- oracle的分支语句,oracle中的分支与循环语句
- php 远程连接 sqlserver,Linux下PHP远程连接SqlServer数据库
- 一切问题的解决都离不开人
- python defaultdict 递归_在Python中使用defaultdict初始化字典以及应用方法
- Logisim新手入门实验
- java支付管理有源码_一款java版可接入微信、支付宝的三方支付系统项目
- Bluno 是干什么的?- 云物联戒烟设备的可选原型之一
- CellCtrl控件完美破解研究
- Ilasm.exe和Ildasm.exe的简单使用
- 从Android运行时出发,打造我们的脱壳神器
- 杂记(git标签,echo命令,ps命令,gdb调试)
- 预充电电路工作原理_电动汽车电控系统预充电原理
- 一.微信公众号迁移流程 openid转换
热门文章
- java excel 水印_Java 添加Excel水印
- [转]Unity开发之-Unity入门简介(近万字攻略)
- 如何免费编辑PDF文档?
- 为什么局域网需要https加密?如何选择内网SSL证书?
- Python反转链表
- 个人信息安全规范----9、个人信息保护政策模板
- MinGW编译windows可以调试的ffmpeg4.4
- java中object转数组_在Java中将Object []数组转换为int []数组?
- PDM系统与PLM系统
- 黑群晖DSM7.1.0物理机安装教程