近期在项目中发现如下一个问题
项目中有个提交现场事件的功能,该功能主要是在web客户端保存现场数据(主要有截屏,终端日志等信息)然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢,大概要等10到20秒的时间浏览器才能操作,期间页面不响应事件。
根据客户描述分析了下的代码流程,很简单,主要通过OCX控件截屏,在将前端的日志等文件使用OCX控件打包,在将之转换为base64码,最后当然是使用ajax异步进行提交(使用prototype框架ajax方法)了。验证过程也很简单主要是各个认为有性能缺陷的点都插入了时间点日志,并且使用了各种型号的zip包(主要验证数据量大对报文提交的影响)进行提交。
分析后发现OCX截屏用时最短,ocx打包和转换base64码根据zip包的大小,也就是说zip包越大耗时越长(一般在1-3秒之间,5秒基本是50,60M的数据了),最后发现用时最长的居然是prototype的提交(排除服务器响应时间,即是说收到请求处理后的时间可忽略不计,tip已验证过基本在毫秒级),prototype的ajax方法提交居然用了10多秒钟(本次测试最大zip包的时间)。当然肯定要跟踪下该ajax方法哪里损耗时间了,最后一通跟踪,发现prototype方法的ajax提交会对请求参数进行处理进行各种转换操作,prototype的toQueryParams方法对输入参数执行了decodeURIComponent方法,
在调用prototype的ajax方法时,已经对参数串执行了encodeURIComponent方法,后续prototype对参数串转换为键值对映射时又执行了解码操作,因为涉及的解码字符串比较大,js脚本一直处于执行中因此导致后面浏览器进入处理假死状态。
后面解决的办法也很简单,自己重新写了一个原生的ajax请求方法,不在对参数进行处理,调整修改后测试验证了下,时间一下少了4分之三,基本本次测试的最大包提交也在3,4秒之间,本次分析就差不多结束了。
分享到:
相关推荐
Ajax(Asynchronous ...总结,Ajax作为网页开发中的重要技术,极大地提高了用户体验,理解并熟练掌握Ajax的使用,是每个前端开发者必备的技能。通过不断实践和学习,我们可以利用Ajax构建更加高效、流畅的Web应用。
在现代Web应用中,我们经常需要通过Ajax向服务器发送大量数据,例如用户填写的表单信息、图片数据等。然而,当数据量过大时,POST请求可能会遇到HTTP限制,导致请求失败或者性能下降。为了解决这个问题,可以采用...
在表单提交时,利用`fc-ajax`进行无刷新提交,实现用户友好的交互。 ### 结语 `fc-ajax`作为一款优秀的JavaScript AJAX库,其简洁的API和强大的功能,使得它在前端开发中有着广泛的应用。通过深入理解并熟练掌握`...
《C#实现的网上考试系统详解》 ...然而,随着技术的不断进步,未来网上考试系统还有很大的发展空间,如引入人工智能进行个性化出题,或是结合大数据进行教学分析,都将使此类系统更加智能化和人性化。
这些参数可以通过URL查询字符串、表单提交或Ajax请求等方式传递。 六、优化技巧 1. 分页缓存:对频繁访问的分页数据进行缓存,减少数据库查询。 2. 数据预加载:考虑用户滚动习惯,预先加载临近页面数据,提升用户...
分页是处理大数据集合时常用的一种策略,它可以提高网页加载速度,避免一次性加载大量数据导致的性能问题。在JAVAWeb中,实现分页通常涉及以下步骤: 1. **数据库查询**:首先,根据当前页码和每页显示的数据量,...
在实现过程中,系统采用了AJAX技术,实现了无刷新的用户体验,如在选择题目、提交答案等操作时,页面无需刷新即可完成更新。同时,为了保证系统的安全性,采用了HTTPS协议,对用户数据进行加密传输,防止数据被窃取...
该项目着重于数据的收集,可能涉及到Ajax异步请求、HTML表单提交等方式,使得用户可以在前端页面上方便地上传或输入数据。Flask通过request对象可以获取到这些数据,包括POST请求中的表单数据和GET请求中的URL参数...
当用户更改参数并提交时,AJAX会向服务器发送请求,服务器响应新的报告内容,然后更新页面的特定部分,而不是整个页面。 5. **模板引擎**:如Handlebars、Jinja2或EJS,这些工具可以帮助我们设计动态HTML模板,将...
存储过程概述:存储过程是一组为了完成特定功能的SQL语句集,它存储在数据库中,可以通过指定名称和参数进行调用。 索引概述:索引用于加速数据库表中数据的检索。 必背的SQL语句:包括数据查询语句SELECT、数据...
- **示例:** 如果有一个员工表,每次查询都需要全表扫描,而如果对该表的常用查询字段建立索引,则可以极大提高查询效率。 ### 5. 处理大数据的方法 - **分页查询:** 通过对数据进行分页处理,减少单次查询的...
10. **性能优化**:如果脚本需要处理大量数据,可能需要考虑如何优化请求频率,比如使用分批请求、缓存策略或者使用流(Stream)处理大数据。 综上所述,fetch-products-n-offers项目提供了学习和实践JavaScript...