基于作文检索和赏析系统的前端性能优化实践
发布时间：2021-06-27 07:14
随着时代的发展,科技的进步,互联网越来越成为人们生活中不可或缺的一部分。各式各样的Web应用层出不穷,争奇斗艳,营造了一种良性的竞争氛围。各家公司都争相把速度最快,性能最好的产品展示给客户,都不约而同的将提高Web应用的性能和用户满意度作为核心竞争力。在此基础上要想提高用户的满意度,需要结合用户的反馈对Web应用的性能进行优化。资料显示当页面的首屏加载时间超过5秒后,大约超过50%的访问用户会因等待时间太久而选择跳出页面,可见页面的加载速度会直接影响用户的去留。并且,若一款Web应用没有良好的易用性,就容易让用户在使用过程中产生各种困惑,从而会给用户体验带来负面影响,降低用户的使用意愿。本文以优化作文浏览和赏析系统的性能和提高用户满意度为目标,研究如何在前端职责范围内,提高页面加载速度和易用性。首先,本文对原作文检索和赏析系统的设计和实现做了概要叙述。该系统基于Vue.js框架进行开发,主要实现了作文检索、作文阅读和作文赏析等功能。方便用户在广泛的作文素材中快速地查找到目标内容,并且有利于用户在阅读作文的过程中将自己独到的见解记录并保存下来,以便复习查看,进而利于用户提高写作能力。然后...
【文章来源】：华中师范大学湖北省 211工程院校 教育部直属院校
【文章页数】：77 页
【学位级别】：硕士
【部分图文】：
图２．１利用Ｎｏｄｅ中间层进行服务端渲染??由图２．１可知本文利用Ｎｏｄｅ作为中间层，Ｎｏｄｅ中间层收到客户端发来的ＨＴＭＬ??
＾?、碩士学位论之??ＭＡＳ?Ｉ?！?Ｒ＇Ｓ?ｒｎｉ．ｓｉｓ??将Ｄａｔａ?Ｂｉｎｇｉｎｇｓ和ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ这两个监听器绑定了起来。当Ｖｉｅｗ层的视图发生??变化时，Ｖｕｅ将会通过ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ来监听并改变Ｍｏｄｅｌ层的数据。反之，当Ｍｏｄｅｌ??层的数据发生改变时，Ｖｕｅ也将会通过Ｄａｔａ?Ｂｉｎｇｉｎｇｓ来监听并改变Ｖｉｅｗ层的展示。??这样便实现了一个双向数据绑定的功能，也是Ｖｕｅ．ｊｓ数据驱动的原理所在，具体的??Ｖｕｅ数据驱动的概念模型如图２．２所示。??／?ＶｉｅｗＭｏｄｅｌ?／???—ＤＯ．Ｍ?Ｌｉｓｔｅｎｅｒｓ?—?？??Ｖｉｅｗ?：?．二、?——＾??７?？?Ｄａｔａ?Ｂｉｎｇｉｎｇｓ?Ｖ＾＾Ｍｏｄｅｌ＾＾／??．?１?１??ＤＯＭ?Ｖｕｅ?Ｐｌａｉｎ?ＪａｖａＳｃｒｉｐｔ?Ｏｂｊｅｃｔｓ??图２．２?Ｖｕｅ数据驱动的概念模型??结合Ｖｕｅ．ｊｓ的特性和作文检索和赏析项目特点，本文将Ｖｕｅ．ｊｓ作为前端开发框??架，利用Ｖｕｅ．ｊｓ技术解决前端数据绑定问题，极大地简化了?Ｗｅｂ前端开发流程并使??开发难度降低；配套使用Ｅｌｅｍｅｎｔ作为ＵＩ组件库，统一了前端开发的样式，使呈现??出来的前端界面更加美观、舒适。??２．４?Ｗｅｂｐａｃｋ??Ｗｅｂｐａｃｋ通常被称为前端各种资源的打包和加载工具［２２］。Ｗｅｂｐａｃｋ也可以被叫??做模块打包器，其具体功能是将项目的结构进行分析，以便于将ＪａｖａＳｃｒｉｐｔ代码模块??找到，并将一些其它的拓展性语言找到，如Ｓｃｓｓ，接着把以上资源打包成合适的形??式提供给浏览器来使用。本作文检索和赏析项目中Ｗｅｂｐａ
建、配置、??开发和部署工作大大简化［２５］。其中，内嵌的Ｔｏｍａｃｔ容器使得单一?ＪＡＲ包的部署和管??理都变得非常方便，还可利用其来监控项目，提高了监控的效率［２６］；配套使用非关??系型数据库ＭｏｎｇｏＤＢ来对数据进行存储和操作，确保数据的安全性和可靠性并且保??证自动故障恢复［２７］；还利用Ｅｌａｓｔｉｃ?Ｓｅａｒｃｈ实现全文搜索和结构化搜索１２８］，使得本项??目的搜索具有近实时、高性能、分布式和零配置的优点，使搜索的效率得到有效提??升。本作文检索和赏析系统的技术架构图如图３．１所示。??？Ｒ＊項Ｈ的技犬桨构设汁??醒灘一一＾ｓｐｉｎａＢｏｏｔ??—??；?（?？——一一?＾??！?ＨＴＭＬ．?ｊ?嚷祕你里啦有??Ａ??ｉ?存＇ｒ??讓?／?１?；??＼?Ｊ?／??ｉ?Ｓ?＾?一＾、?１?Ｊ?ｘｅｄｉｓＭ??Ｍ?＼?！??绥存运??：录?＼?Ｉ?Ｊ?ｓｐｒｉｒａｊ＾Ｗ?＾?ｃｃｉｎｔｒｏ＾??．??一＿?Ｃ?￣￣＾?赛函鈐?＞?知＊?仁?ＭｏｎｓｒｏＤＢ??＞?ｍｙｒｎ？＼＾ｍ?－４１—?ｍ?虿接懸??Ｉ?．?核學玄?ｊ?ｒ?ｉ??一?—?１?Ｊ?：｜?一??；??￣￣￣?—??图３．１作文检索和阋读系统技术架构图??原作文检索和赏析系统整体的系统架构由用户层、前端页面层、数据库层和业??务逻辑层这四层组成。??用户层：用户访问浏览器上展示出来的界面，可以和系统中的数据进行交互。??前端页面层：将本系统前端页面的程序打包后放在服务器上运行。服务器能在??同一时间段内将消息发送给不同的用户，通过这种方式实现了用户和的前端页
【参考文献】：
期刊论文
[1]手机界面视觉设计易用性发展趋势[J]. 叶琪. 设计. 2020(05)
[2]基于SpringBoot和Vue框架的教代会提案系统的设计与实现[J]. 颜治平. 科技创新与应用. 2020(03)
[3]vue.js前端应用技术分析[J]. 李广宏. 中国新通信. 2019(20)
[4]一种大规模MongoDB集群监控方案的设计与实现[J]. 李云婷,张海明,黎建辉. 科研信息化技术与应用. 2019(04)
[5]黑盒测试在环境质量监测系统测试中的应用[J]. 宋丽. 电子技术与软件工程. 2019(12)
[6]基于Vue.js的移动应用可视化平台的研究[J]. 冯传波,彭章友,张钟浩. 工业控制计算机. 2019(05)
[7]基于Node.js和JS的前后端分离实现[J]. 张鹏飞,王乾,胡晓冬,杨明浩,崔明旺. 软件. 2019(04)
[8]高并发Web应用系统的性能优化分析与研究[J]. 王伟,谭松荣. 现代信息科技. 2019(03)
[9]2018中国产业互联网发展白皮书[J]. 顾文彬,刘浩然. 互联网经济. 2019(Z1)
[10]基于Nodejs实现web端实时在线监测[J]. 韩利峰,李嘉曾,黄文博,吴丽梅. 仪器仪表用户. 2018(10)
硕士论文
[1]基于Diff算法的Web前端性能优化及评估[D]. 曹帅.北京邮电大学 2019
[2]基于携程旅行APP特卖汇项目的前端优化设计与实现[D]. 郭慧敏.华中科技大学 2018
[3]基于美团点评拼团项目的前端优化实践[D]. 冀乃彬.南京大学 2018
[4]基于Bigpipe与Node.js的Web框架的设计与实现[D]. 刘灿.北京邮电大学 2018
[5]基于MVVM模式的响应式轻量级前端组件设计与实现[D]. 彭显雯.华中科技大学 2017
本文编号：3252390
【文章来源】：华中师范大学湖北省 211工程院校 教育部直属院校
【文章页数】：77 页
【学位级别】：硕士
【部分图文】：
图２．１利用Ｎｏｄｅ中间层进行服务端渲染??由图２．１可知本文利用Ｎｏｄｅ作为中间层，Ｎｏｄｅ中间层收到客户端发来的ＨＴＭＬ??
＾?、碩士学位论之??ＭＡＳ?Ｉ?！?Ｒ＇Ｓ?ｒｎｉ．ｓｉｓ??将Ｄａｔａ?Ｂｉｎｇｉｎｇｓ和ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ这两个监听器绑定了起来。当Ｖｉｅｗ层的视图发生??变化时，Ｖｕｅ将会通过ＤＯＭ?Ｌｉｓｔｅｎｅｒｓ来监听并改变Ｍｏｄｅｌ层的数据。反之，当Ｍｏｄｅｌ??层的数据发生改变时，Ｖｕｅ也将会通过Ｄａｔａ?Ｂｉｎｇｉｎｇｓ来监听并改变Ｖｉｅｗ层的展示。??这样便实现了一个双向数据绑定的功能，也是Ｖｕｅ．ｊｓ数据驱动的原理所在，具体的??Ｖｕｅ数据驱动的概念模型如图２．２所示。??／?ＶｉｅｗＭｏｄｅｌ?／???—ＤＯ．Ｍ?Ｌｉｓｔｅｎｅｒｓ?—?？??Ｖｉｅｗ?：?．二、?——＾??７?？?Ｄａｔａ?Ｂｉｎｇｉｎｇｓ?Ｖ＾＾Ｍｏｄｅｌ＾＾／??．?１?１??ＤＯＭ?Ｖｕｅ?Ｐｌａｉｎ?ＪａｖａＳｃｒｉｐｔ?Ｏｂｊｅｃｔｓ??图２．２?Ｖｕｅ数据驱动的概念模型??结合Ｖｕｅ．ｊｓ的特性和作文检索和赏析项目特点，本文将Ｖｕｅ．ｊｓ作为前端开发框??架，利用Ｖｕｅ．ｊｓ技术解决前端数据绑定问题，极大地简化了?Ｗｅｂ前端开发流程并使??开发难度降低；配套使用Ｅｌｅｍｅｎｔ作为ＵＩ组件库，统一了前端开发的样式，使呈现??出来的前端界面更加美观、舒适。??２．４?Ｗｅｂｐａｃｋ??Ｗｅｂｐａｃｋ通常被称为前端各种资源的打包和加载工具［２２］。Ｗｅｂｐａｃｋ也可以被叫??做模块打包器，其具体功能是将项目的结构进行分析，以便于将ＪａｖａＳｃｒｉｐｔ代码模块??找到，并将一些其它的拓展性语言找到，如Ｓｃｓｓ，接着把以上资源打包成合适的形??式提供给浏览器来使用。本作文检索和赏析项目中Ｗｅｂｐａ
建、配置、??开发和部署工作大大简化［２５］。其中，内嵌的Ｔｏｍａｃｔ容器使得单一?ＪＡＲ包的部署和管??理都变得非常方便，还可利用其来监控项目，提高了监控的效率［２６］；配套使用非关??系型数据库ＭｏｎｇｏＤＢ来对数据进行存储和操作，确保数据的安全性和可靠性并且保??证自动故障恢复［２７］；还利用Ｅｌａｓｔｉｃ?Ｓｅａｒｃｈ实现全文搜索和结构化搜索１２８］，使得本项??目的搜索具有近实时、高性能、分布式和零配置的优点，使搜索的效率得到有效提??升。本作文检索和赏析系统的技术架构图如图３．１所示。??？Ｒ＊項Ｈ的技犬桨构设汁??醒灘一一＾ｓｐｉｎａＢｏｏｔ??—??；?（?？——一一?＾??！?ＨＴＭＬ．?ｊ?嚷祕你里啦有??Ａ??ｉ?存＇ｒ??讓?／?１?；??＼?Ｊ?／??ｉ?Ｓ?＾?一＾、?１?Ｊ?ｘｅｄｉｓＭ??Ｍ?＼?！??绥存运??：录?＼?Ｉ?Ｊ?ｓｐｒｉｒａｊ＾Ｗ?＾?ｃｃｉｎｔｒｏ＾??．??一＿?Ｃ?￣￣＾?赛函鈐?＞?知＊?仁?ＭｏｎｓｒｏＤＢ??＞?ｍｙｒｎ？＼＾ｍ?－４１—?ｍ?虿接懸??Ｉ?．?核學玄?ｊ?ｒ?ｉ??一?—?１?Ｊ?：｜?一??；??￣￣￣?—??图３．１作文检索和阋读系统技术架构图??原作文检索和赏析系统整体的系统架构由用户层、前端页面层、数据库层和业??务逻辑层这四层组成。??用户层：用户访问浏览器上展示出来的界面，可以和系统中的数据进行交互。??前端页面层：将本系统前端页面的程序打包后放在服务器上运行。服务器能在??同一时间段内将消息发送给不同的用户，通过这种方式实现了用户和的前端页
【参考文献】：
期刊论文
[1]手机界面视觉设计易用性发展趋势[J]. 叶琪. 设计. 2020(05)
[2]基于SpringBoot和Vue框架的教代会提案系统的设计与实现[J]. 颜治平. 科技创新与应用. 2020(03)
[3]vue.js前端应用技术分析[J]. 李广宏. 中国新通信. 2019(20)
[4]一种大规模MongoDB集群监控方案的设计与实现[J]. 李云婷,张海明,黎建辉. 科研信息化技术与应用. 2019(04)
[5]黑盒测试在环境质量监测系统测试中的应用[J]. 宋丽. 电子技术与软件工程. 2019(12)
[6]基于Vue.js的移动应用可视化平台的研究[J]. 冯传波,彭章友,张钟浩. 工业控制计算机. 2019(05)
[7]基于Node.js和JS的前后端分离实现[J]. 张鹏飞,王乾,胡晓冬,杨明浩,崔明旺. 软件. 2019(04)
[8]高并发Web应用系统的性能优化分析与研究[J]. 王伟,谭松荣. 现代信息科技. 2019(03)
[9]2018中国产业互联网发展白皮书[J]. 顾文彬,刘浩然. 互联网经济. 2019(Z1)
[10]基于Nodejs实现web端实时在线监测[J]. 韩利峰,李嘉曾,黄文博,吴丽梅. 仪器仪表用户. 2018(10)
硕士论文
[1]基于Diff算法的Web前端性能优化及评估[D]. 曹帅.北京邮电大学 2019
[2]基于携程旅行APP特卖汇项目的前端优化设计与实现[D]. 郭慧敏.华中科技大学 2018
[3]基于美团点评拼团项目的前端优化实践[D]. 冀乃彬.南京大学 2018
[4]基于Bigpipe与Node.js的Web框架的设计与实现[D]. 刘灿.北京邮电大学 2018
[5]基于MVVM模式的响应式轻量级前端组件设计与实现[D]. 彭显雯.华中科技大学 2017
本文编号：3252390
本文链接：https://www.wllwen.com/guanlilunwen/ydhl/3252390.html
