1. 知识预备
web API window & Element关联属性和方法
Jquery 常见问题 - https://learn.jquery.com/using-jquery-core/faq/
Jquery核心知识点 - https://learn.jquery.com/using-jquery-core/
菜鸟教程官网地址:www.runoob.com
高效搜索Jquery【疑难】问题
百度/Bing/Stack Overflow
※IE & Chrome调试工具
· 查看元素样式、事件
· 报错及提示
· 数据调试
· js“热”调试(仅Chrome)
· 性能监控
· 查看网络状态/请求、返回的数据
2. 图书馆踩过的大坑(仅供参考)
※事件(un)bind & 快捷键:: 共通化处理最佳
跨浏览器的样式问题
eval() ≈ evil(恶魔) - 耗时且维护困难
实质性注释 - 方便维护加修正
异步调用时, 注意调用顺序
内存泄漏 - ajax大量调用的场合,内存增加严重
渲染优化 - 画面刷新卡顿问题
插件版权 - 哪些可以商业使用
连击问题 - 要不要block
· 实质性Review - 花时间很必要
https://jquery.org/
https://learn.jquery.com/
https://learn.jquery.com/using-jquery-core/
https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-elements-when-i-already-have-a-dom-element/
http://www.runoob.com/jquery/jquery-traversing-descendants.html
https://developer.mozilla.org/zh-CN/docs/Web/API
DLL30 未来6个月的画面CSV出力(tab)-----common.csv.js文件修改
旧版本:window.open(common.gamenId + "/downloadContent?contenttype=text/csv&filename=" + data.filename);
新版本:window.open(common.gamenId + "/downloadContent?tab=" + common.tabNo + "&contenttype=text/csv&filename=" + data.filename);
js百科网站
http://javascript.info/
web API的网站
https://developer.mozilla.org/zh-CN/docs/Web/API
2018/7/13
内存泄漏课题调查总结
1. 再现问题
根据客户提出的问题和证据,重现同样的内存泄漏问题
引申: 需要确定泄漏点
2. 从画面方向调查
画面初期或者操作时,几个部分会初期化,分清这几部分,找出主要泄漏点,制定计划各个解决
引申: 如何确定泄漏点 - 需要工具
3. 调查工具的调查
使用IE与系统资源管理器,无法满足对内存泄漏点的调查,Chrome浏览器开发者工具进入视野
引申: 找到泄漏点以后怎么办 - 需要经验
4. 常见内存泄漏调查
查阅网上大量内存泄漏的总结,总结并进行修改验证
引申: 这些经验如何使用到本项目 - 改善修改方案
5. 修正/改善内存泄漏修改方案
完善第二步中的调查方向和步骤, 从组件、画面初期及Action等角度重新制定修改方案
引申: 这些经验适合本项目吗 - 需要先行实践
6. 执行试修改
使用Chrome工具调查及修改部分内存泄漏代码, 验证及总结问题
引申: 有么有很大的改进 - 需要总结再推广
7. 执行大规模修改
按作业计划进内存泄漏问题修改
引申: 改完以后到底有没有效果 - 需要全方位测试
8. 验证修改结果
验证修改是否达到预期效果
引申: 是不是有继续泄漏的点 - 需要不断改进加修正
9. Chrome&IE开发者工具共使用
部分Action使用2中工具同时判断
引申: 是否需要改进发现泄漏点的技巧
2018/7/19
3. 调查工具的调查
使用IE与系统资源管理器,无法满足对内存泄漏点的调查,Chrome浏览器开发者工具进入视野
引申: 找到泄漏点以后怎么办 - 需要经验
调查使用了2种工具, 谷歌浏览器更加友好一些,但由于谷歌官网需要科学上网(社内无法访问),查资料费事些。
① Chrome DevTools
② IE开发者工具
☢ Chrome DevTools (版本 67.0.3396.99)
使用谷歌开发者工具,可以同时分析网页性能和内存泄漏,主要使用2个Tab: 【Perfomance】 与 【Memory】
【Perfomance】:
此工具可以根据页面渲染过程中内存使用情况、Dom节点数、Document文档计数及JS事件监听计数。
【Memory】
最常使用的分析利器,发现内存泄漏点的详细信息,并给出完整的跟踪栈。
以上2个工具在内存分析中会经常用到, 除了掌握该工具的用法之外,还需要了解工具中出现的专业术语。
比如:
GC根(GC root)是什么?
直接占用内存(Shallow Size)和占用总内存(Retained Size)是什么?
Summary(概要)、Containment(控制)分别能干什么?
这些都是使用工具的前提,详细请查看参考资料。
※参考资料:
https://legacy.gitbook.com/book/leeon/devtools/details
https://www.jianshu.com/p/b8cdcd9bfad8
https://www.jianshu.com/p/504bde348956
https://www.cnblogs.com/qianduanjingying/p/5032998.html
https://stackoverflow.com/questions/15970525/how-to-find-js-memory-leaks
http://anti-code.com/devtools-cheatsheet/
· Chrome DevTools官网
· 操作快捷键
· Chrome DevTools中文手册
· 修复内存问题
· 博客类文章
Chrome DevTools 之 Timeline,快捷性能优化工具
Chrome DevTools 之 Profiles,深度性能优化必备
Chrome开发者工具之JavaScript内存分析
· Stack Overflow
How to find JS Memory Leaks?
※其中有用的回答:
? 闭包相关:http://www.javascriptkit.com/javatutors/closuresleak/
? JavaScript engines:https://coding.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/
? DevTools问答:https://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
需科学上网→ 需科学上网→?Find Leaks:http://gent.ilcore.com/2011/08/finding-memory-leaks.html
? JS Documenthttp://crockford.com/javascript/
? JS Document http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
http://www.javascriptkit.com/javatutors/
※注: 资料中由于版本不同分析工具的名称可能会不一致
【Timeline】 → 【Performance】
【Profiles】 → 【Memory】
☢ IE开发者工具
IE浏览器自带分析工具, 项目并没有深入研究使用方法。
链接:查看官网参考手册 https://docs.microsoft.com/zh-cn/microsoft-edge/devtools-guide/memory#memory-usage-timeline
2018/7/18
4. 常见内存泄漏调查 ※基于IE,但并不限于IE
查阅网上大量内存泄漏的总结,总结并进行修改验证
引申: 这些经验如何使用到本项目 - 改善修改方案
以下为总结结果,了解memory leak概念及JavaScript内存管理机制后(未涉及ECMAScript6),食用更佳。
① 全局变量
② 循环引用
③ 闭包(造成的循环引用)
④ 第三方插件
⑤ FQA
☢ 全局变量
创建全局变量后,如果不手动置空(null或reset),该变量一直会保持在当前window中,直到页面刷新才会被清除掉。
方案一: 避免意外的全局变量,心里要清楚变量的上下文,及何时清空。
方案二: JavaScript 严格模式(use strict) 查看详细
即使用 "use strict" 指令,在严格的条件下运行JavaScript。
☢ 循环引用
从经验来看,基本上所有的内存泄漏最终都回到了循环引用上。
简单来说循环引用的结构如下: 我要查看详细的
☢ 闭包(造成的循环引用)
由于闭包的特性,父函数的变量会一直被引用,在涉及DOM元素引用、事件追加等操作时,很容易造成内存泄漏。
方案一: 无效化DOM元素的引用
方案二: 解绑事件
实践:
参考一. js内存泄露的几种情况
https://blog.csdn.net/li2274221/article/details/25217297
提到:
画面Dom元素事件未清除,而清除或者置空Dom元素,导致该Dom元素依旧残留在内存中
※实质其实就是闭包造成的循环引用。
参考二. Debugging memory leaks in web applications using iframes
https://www.bryntum.com/blog/debugging-memory-leaks-in-web-applications-using-iframes/
提到:
使用多个Iframe时,由于不规范的互相引用造成的内存泄漏
问题点:
综上两点,寻找画面初期化时,大量内存泄漏的原因。
业务画面初期化时,给画面HTML绑定了focus设置相关的事件,再次初期化/画面迁移时,之前画面的HTML元素不会被清除掉,发生内存泄漏。
修改:
画面初期化前,解绑事件绑定,去掉引用。
☢ 第三方插件
在需要废弃或者覆盖使用第三方插件的布局时, 注意调用插件的回调(如destroy),优化代码性能同时避免泄漏
本项目中,在组件初期化时会尝试destroy之前的旧组件,尤其涉及到容器组件需要特别注意,其中包含的组件最好清除掉。
✪ FQA
1. 有没有内存泄漏的讲解网址?
答: 最佳如下,包含了对memory leak的解释,JavaScript对内存管理机制及常见的泄漏点
https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/ http://web.jobbole.com/88463/
IBM https://www.ibm.com/developerworks/cn/web/wa-sieve/#resources
2. 什么是闭包?
答: EN http://jibbering.com/faq/faq_notes/closures.html
CN http://www.runoob.com/js/js-function-closures.html
3. 有没有推荐的JavaScript的书?
答:
《JavaScript忍者秘籍》
《JavaScript语言精粹》
《JavaScript权威指南(第6版)》
??写法(?空?不?0)
, SUM(NVL(HINSYUNYUYOUOSU, 0) + NVL(HINSYUF1, 0) + NVL(HINSYUNIKU, 0)) TOTALCOL
正?写法
, NVL(SUM(HINSYUNYUYOUOSU) + SUM(HINSYUF1) + SUM(HINSYUNIKU), 0)) TOTALCOL
setTimeout(function () { common.modalResize() }, 200);
@Html.Partial("_tabDLL31block", Model.Tab1)
DIL20---------------
$DLL30.find(".Retsu").val() == 0
$(".DEATH").hide();
$("#survival1").attr("style", "display:none");
@Html.Partial("_tabDLL31block", Model)