"爱说说"技术原理:前端Javascript优化技巧(四)

简介:

上一节:爱说说技术原理:前后台参数约定及逻辑代码 中,讲解了“爱说说”的后台简单的逻辑处理代码。

 

本节,看一下前端的逻辑及优化事项[爱说说http://speak.cyqdata.com/ ]

 

前言说明:

1:前端没有使用JQ,采用原生的XmlHttp做为异步请求。

2:前端代码就不多贴了,直接查看页面源文件就能看到所有的代码了。

 

以下讲一下“爱说说”在这个过程中优化过的注意事项:

[PS:事隔这么久,好多都忘了,只能靠点回忆代码来写了]

 

一:基础优化

 

1:避免直接用控件循环加载html,而用变量组合html,最后一次给控件的innerHTML赋值:

不良用法:for(i in json.data){$('div').innerHTML+=json.data[i].Name;}

正规用法:var html;for(i in json.data){html+=json.data[i].Name;}$('div').innerHTML=html;

 

2:定义的对象或变量,用完后,赋null值:

var a;.....使用a.....a=null;//用完赋null值。

 

二:逻辑优化

 

1:客户端基本请求策略:

复制代码

1:首次请求,加载1页数据40条消息,后面可以点击显示更多,每次40条消息。

消息显示难点:40条中可能包含回复,而回复的主留言可能在40之外,因此,对于回复,如果找不到父ID,即主留言,临时存储到数组中,等用户点击更多时,再看看有没有父ID存在,有就挂下去补充,没有继续存储等待更多...如果重复的说。

2:定时请求,请求从消息的尾步开始,每次请求后拿取maxID,下次根据maxID请求后续内容。

复制代码

 

2:客户端基本优化策略

 

1:代码重用,函数封装,优化调用

 

2:定时器的策略,优化请求资源

复制代码
 function getNewMsgCallBack(result,callByTimer)
 {
    loadCallBack(result,callByTimer);
    if(callByTimer)//系统定时器
    {
        IdleTimes++;//设置空闲次数
        switch(IdleTimes)
        {
            case 8://1分钟没发言,将会16秒刷新一次
            case 16://3分钟没发言[又过了16*8秒],将会32秒刷新一次
            case 24://7分钟没发言[又过了32*8秒],将会64秒刷新一次
                handleTime=handleTime*2;//定时器时间加倍
                clearTmer();//取消刷新
                timer();//开始新的计时刷新
                break;
            case 75://1小时没反应,自动刷新。
                location.href=location.href;
            break;
        }
    }
    else
    {
        IdleTimes=0;//用户发表信息,恢复定时器
        if(handleTime!=8000)
        {
             handleTime=8000;//定时器时间还原
             clearTmer();//取消刷新
             timer();//开始新的计时刷新
        }
    }
 }
复制代码

PS:从这段代码看,策略是对于不聊天的人群,采用步步拉大请求时间,节省服务器请求资源。

 

3:聊天策略,优化加载,聊天流畅

复制代码

原因:如果在打字的时候,刚好遇到消息回来并加载显示的过程,界面会变的相当的卡。

因此策略是:聊天时,停止消息加载,发布消息后,恢复消息加载。

具体:

光标定位到打字框时,设置标识

停止加载-》存储未加载的对象到数组中[到下次请求时一起显示]-》发表留言[恢复标识]

复制代码

 

4:小技巧避开“点击”,引发音乐切换

原因:<a href="javascript:xxx()"...的方式的点击会引起iframe 的音乐链接重新加载,从而音乐自动切换了。

解决:<a href="###" onclick="xxx()"...换成这种方式即可以了。

 

5:适当避开快速聊天,限制“发布”按钮

发布消息时,将“发布”按钮置不可用,等下次消息回来时,再恢复“发布”按钮的可用状态,因此两次聊天的时间间隔是“1-8”秒之间。

 

本节就介绍到了,其它的不容易想,感兴趣的自行研究了。

 

相关文章:

目录
打赏
0
0
0
0
11
分享
相关文章
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
188 69
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
86 3
JS代码的一些常用优化写法
JS代码的一些常用优化写法
41 0
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
170 70
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
213 11
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
133 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
341 62

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问