封面图片

编程

实践教程:前端小程序性能优化

最近给政府部门做了一个小程序,上线前的几次培训都发现小程序出现白屏,打不开的情况。刚开始以为是静态资源大,网络带宽不足,导致下载慢引起的。


发现问题

首先,我们联系云服务器商获取了网络流量数据,确实有出现流量高峰,最高也只有100Mbps左右。猜测带宽可能还不是瓶颈。

问题复现,我们使用JMeter模拟用户请求,开始的时候设置了200用户,2秒创建完成,循环50次。然后请求前端页面,发现会出现一些502的错误,这个时候意识到问题产生的大概原因了。不过还需要进一步进行验证。

502的意思代表网关不可用,有可能是服务器的连接不够了,或者服务器因为负载太高停止响应了。

然后登录到Nginx服务器,发现Nginx服务器没有做性能优化,Nginx的配置也没有做性能优化,全部使用的是默认配置。查看Linux服务器文件最大打开数,还是默认值1024,这下基本确定问题所在。接下来就是对服务器性能进行一些调优了。

性能优化

  1. 服务器优化 服务器优化,我们主要就是把文件最大打开数设定成了65535。至于为什么要设定服务器的最大文件打开数,大家可以去看我的这篇文章。网络编程:什么是Socket、TCP和HTTP,其中有一部分讲到了为什么要设置文件最大打开数。

  2. Nginx优化 Nginx代理的是前端静态文件,主要是js,css,html等文件。我们在这块的优化主要包括,设定Nginx的工作线程数为cpu核心数的两倍、对静态资源启动gzip压缩。

做完如上优化后,再重新对小程序做了压测,800用户并发,可以正常打开页面,打开速度还比之前快了。

总结

小程序的开发不是在原有项目范畴内,属于突然新增的内容,开发周期很短,因为之前团队也没有小程序的开发经验,都是现学现卖。当时主要关注点都是在功能实现上,对于性能和并发这块从来没有考虑过,在项目部署时,也没有去做相关的优化。直到系统培训时,使用的人数增多后,才发现性能的问题。当有这一次经历后,之后遇到相似的场景,应对就会更加从容了吧。

从容应对离不开之前的积累与持续的学习。

突然想起了不知道在哪看到的贝索斯关于压力的言论,“压力来源于我们对问题的逃避,压力焦虑的本质是你的行动力不足”。

2023年10月16日
在初学者眼中,世界充满了可能;专家眼中,世界大都已经既定。--铃木俊隆