基于互联网医院项目前端性能优化实践

作     者：罗嵩 

作者单位：北京邮电大学 

学位级别：硕士

导师姓名：佘春东

授予年度：2022年

学科分类：12[管理学] 1204[管理学-公共管理] 120402[管理学-社会医学与卫生事业管理(可授管理学、医学学位)] 1004[医学-公共卫生与预防医学(可授医学、理学学位)] 08[工学] 080402[工学-测试计量技术及仪器] 0804[工学-仪器科学与技术] 10[医学] 

主      题：内存泄露 前端 性能优化 互联网 

摘      要：随着新冠疫情的爆发,医院需要接诊的患者数量大幅度上升,对相关医疗系统产生了极大的压力。由于新冠病毒具有很强的传染性,导致部分群众在患病之后不敢去医院查看,不能得到及时的就医。在这种情况下,互联网医院进入了高速发展时期,在很大程度上缓解了实体医院的压力。随着Web互联网技术的发展,人们对于Web站点的需求不仅仅只是一个功能完善的网页,而是需要在此基础上获得快速、高水平的服务和体验。有相关研究表明,当页面加载时间在5秒以上的,大约50%的用户会选择退出当前页面。因此对于线上医院来说,为了更好的提升用户体验,留住更多的用户,就必须要更加关注Web站点的性能问题,提升Web站点的性能。首先,本文对互联网医院项目的设计与实践做了简单的介绍。该项目以React作为前端开发框架,实现了登录注册模块、个人中心模块、智能导诊模块以及在线问诊模块等丰富的功能。其次,结合相关Web前端工作机制以及互联网医院项目运行过程中出现的问题,找出当前项目中存在的两个性能问题:页面加载性能问题和内存泄露问题。对于页面加载性能问题,主要体现为页面加载时间过长。在对该问题进行深入调研与探索之后,提出图片懒加载、路由懒加载以及服务端渲染技术等性能优化方案,提高首页加载速度;对于内存泄露问题,主要体现为运行过程中内存使用大幅增长。本文提出开发一款专门针对于当前泄露问题特点的检测插件,在项目运行之前对源代码进行检测,避免再次出现相似的内存泄露问题。最后,将这些性能优化方案应用于互联网医院项目中,分别对其进行优化前后的测试,将测试结果以表格或柱状图的形式将数据进行可视化展示。对于页面加载性能问题,应用服务端渲染、图片懒加载以及路由懒加载等优化方案之后,优化后在5秒之内的首屏加载时间相比于优化前提高了 26%;对于内存泄露问题,经过内存泄露插件的检测,避免了由于内存泄露导致内存使用大幅增长的问题。