Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich die Speicher- und Leistungsprobleme von JavaScript vor, einschließlich der Lösung von Problemen wie zu vielen Schaltflächen, dem Löschen von Ereignishandlern usw. Ich hoffe, dass er für alle nützlich sein wird.
Verwandte Empfehlungen: Javascript-Tutorial
2. Sprechen Sie über die Leistungsprobleme von innerHTML?
1. Das negative Lehrmaterial der Verwendung von innerHTML
for(let value of values){
ul.innerHTML += 'let itemsHtml = "";for(let value of values){
itemsHtml += 'ul.innerHTML = Werte. map(value => ; '<li>${value}</li>').join(' ');
3. Wie löst man das Problem zu vieler Schaltflächen? ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');
过多事件处理程序的解决方案是使用事件委托。事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。例如，click事件冒泡到document。这意味着可以为整个页面指定一个onclick事件处理程序，而不是为每个可点击元素分别指定事件处理程序。
这里包含三个列表项，在被点击时应该执行某个操作，通常的方式是指定三个事件处理程序：
let item1 = document.getElementById("girl1");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
console.log("我是比比东！");})item2.addEventListener("click",(event) => {
console.log("我是云韵！");})item3.addEventListener("click",(event) => {
console.log("我是美杜莎！");})相同代码太多，代码过于丑陋了。
使用事件委托，只要给多有元素的共同的祖先节点添加一个事件处理程序，就可以解决丑陋！
let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
let target = event.target;
switch(target.id){
case "girl1":
console.log("我是比比东！");
break;
case "girl2":
console.log("我是云韵！");
break;
case "girl3":
console.log("我是美杜莎！");
break;
}})document对象随时可用，任何时候都可以为它添加一个事件处理程序（不用等待DOMContentLoaded或load事件），通过它处理页面中所有某种类型的事件。这意味着只要页面渲染出可点击的元素，就可以无延迟的起作用。
节省花在设置页面事件程序上的事件。
减少整个页面所需的内存，提升整体性能。
把事件处理程序指定给元素后，在浏览器代码和负责页面交互的JavaScript代码之间就建立了联系。这种联系简历越多，页面性能就越差。除了通过事件委托来限制这种连接之外，还应该及时删除不用的事件处理程序。很多web应用性能不佳都是由于无用的事件处理程序长驻内存导致的。
导致这个问题的原因有两个：
比如通过的DOM方法removeChild()或replaceChild()删除节点。最常见的还是使用innerHTML整体替换页面的某一部分。这时候，被innerHTML删除的元素上如果有事件处理程序，也不会被垃圾收集程序正常清理。
所以，如果在得知某个元素会被删除之前，应手动删除它的事件处理程序，比如btn.onclick = null;//删除事件处理程序
let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length let document.body.appendchild><strong>Dies enthält drei Listenelemente, die beim Klicken eine bestimmte Aktion ausführen sollen. Der übliche Weg besteht darin, drei Ereignishandler anzugeben: </strong><pre class="brush:php;toolbar:false">let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len let document.body.appendchild></len> Mithilfe der Ereignisdelegation können Sie die Hässlichkeit lösen, indem Sie einfach einen Ereignishandler zum gemeinsamen Vorfahrenknoten mehrerer Elemente hinzufügen!
let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i){
let p = document.createElement("p");
document.body.appendChild(p);}btn.onclick = null;//Ereignishandler löschen. Die Ereignisdelegation hilft auch, dieses Problem zu lösen Wenn Sie wissen, dass ein Element durch innerHTML ersetzt werden soll, fügen Sie dem Element keinen Ereignishandler hinzu, sondern fügen Sie ihn einfach einem Knoten einer höheren Ebene hinzu. 🎜🎜🎜2. Das Entladen einer Seite kann auch das Problem verbleibender Referenzen im Speicher verursachen. 🎜🎜🎜Wenn die Ereignishandler nach dem Entladen der Seite nicht bereinigt werden, verbleiben sie weiterhin im Speicher. Danach erhöht sich jedes Mal, wenn der Browser die Seite lädt und entlädt (z. B. durch Vor- oder Zurückblättern oder Aktualisieren), die Anzahl der verbleibenden Objekte im Speicher, da die Ereignishandler nicht wiederverwendet werden. 🎜 Im Allgemeinen ist es am besten, alle Event-Handler im Onunload-Event-Handler zu löschen, bevor die Seite entladen wird. Auch hier zeigt sich der Vorteil der Event-Delegation. Da es nur wenige Event-Handler gibt, kann man sich leicht merken, welche man löschen muss. 🎜let ps = document.getElementsByTagName("p");for(let i = 0;i表达式
let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i表达式①中第一行取得了包含文档中所有<p></p>元素的HTMLCollection。因为这个集合是实时的，所以任何时候只要向页面中添加一个新的<p></p>元素，再查询这个集合就会多一项。因为浏览器不希望保存每次创建的集合，所以就会在每次访问时更新集合。每次循环都会求值i ，这意味着要获取所有<p></p>元素的查询。因为循环体中创建并向文档中添加一个新的<p></p>元素，所以每次循环ps.length的值也会递增。因为两个值都会递增，所以i永远不会等于ps.length，因此表达式①会造成死循环。
而表达式②中，又初始化了一个保存集合长度的变量len，因为len保存着循环开始集合的长度，而这个值不会随集合增大动态增长（for循环中初始化变量处只会初始化一次），所以就可以避免表达式①中出现的无穷循环问题。
如果不想初始化一个变量，也可以使用反向迭代：
表达式
let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i){
let p = document.createElement("p");
document.body.appendChild(p);}Nach dem Login kopieren
七、JavaScript思维导图
相关推荐：javascript教程
Das obige ist der detaillierte Inhalt vonTiefes Verständnis für JavaScript-Speicher- und Leistungsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
