Утечка памяти при динамическом обновлении содержимого
с использованием srcdoc в JavaScript</h1> <p> Html. Цифровое Кемерово </p> <p class="skiplink"><a href="#start_here">Перейти к содержимому</a></p> </div> </div> </div> <div class="navbar" role="navigation"> <div class="inner"> <ul id="nav-main" class="nav-main linklist" role="menubar"> <li id="quick-links" class="quick-links dropdown-container responsive-menu hidden" data-skip-responsive="true"> <a href="#" class="dropdown-trigger"> <i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Меню</span> </a> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents" role="menu"> <li class="separator"></li> </ul> </div> </li> </ul> <ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar"> <li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList"> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope><a itemprop="item" href="./" accesskey="h" data-navbar-reference="index"><i class="icon fa-home fa-fw"></i><span itemprop="name">Форум программистов</span></a><meta itemprop="position" content="1" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope data-forum-id="25"><a itemprop="item" href="./viewforum.php?f=25"><span itemprop="name">Кемерово-IT</span></a><meta itemprop="position" content="2" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope data-forum-id="41"><a itemprop="item" href="./viewforum.php?f=41"><span itemprop="name">Html</span></a><meta itemprop="position" content="3" /></span> </li> <li class="right rightside"><select onchange="document.location.href = this.options[this.selectedIndex].value;"><option value="-1">Создать новую тему без регистрации в...</option><option value="./posting.php?mode=post&f=25" disabled="disabled" class="disabled-option">Кемерово-IT</option><option value="./posting.php?mode=post&f=33" disabled="disabled" class="disabled-option"> Javascript</option><option value="./posting.php?mode=post&f=17" disabled="disabled" class="disabled-option"> C#</option><option value="./posting.php?mode=post&f=16" disabled="disabled" class="disabled-option"> JAVA</option><option value="./posting.php?mode=post&f=38" disabled="disabled" class="disabled-option"> Elasticsearch aggregation</option><option value="./posting.php?mode=post&f=39" disabled="disabled" class="disabled-option"> Python</option><option value="./posting.php?mode=post&f=9" disabled="disabled" class="disabled-option"> Php</option><option value="./posting.php?mode=post&f=40" disabled="disabled" class="disabled-option"> Android</option><option value="./posting.php?mode=post&f=41" disabled="disabled" class="disabled-option"> Html</option><option value="./posting.php?mode=post&f=42" disabled="disabled" class="disabled-option"> Jquery</option><option value="./posting.php?mode=post&f=43" disabled="disabled" class="disabled-option"> C++</option><option value="./posting.php?mode=post&f=45" disabled="disabled" class="disabled-option"> IOS</option><option value="./posting.php?mode=post&f=44" disabled="disabled" class="disabled-option"> CSS</option><option value="./posting.php?mode=post&f=7" disabled="disabled" class="disabled-option"> Excel</option><option value="./posting.php?mode=post&f=48" disabled="disabled" class="disabled-option"> Linux</option><option value="./posting.php?mode=post&f=49" disabled="disabled" class="disabled-option"> Apache</option><option value="./posting.php?mode=post&f=11" disabled="disabled" class="disabled-option"> MySql</option><option value="./posting.php?mode=post&f=28" disabled="disabled" class="disabled-option">Детский мир</option><option value="./posting.php?mode=post&f=26" disabled="disabled" class="disabled-option">Для души</option><option value="./posting.php?mode=post&f=13" disabled="disabled" class="disabled-option"> Музыкальные инструменты даром</option><option value="./posting.php?mode=post&f=19" disabled="disabled" class="disabled-option"> Печатная продукция даром</option><option value="./posting.php?mode=post&f=32" disabled="disabled" class="disabled-option">Внешняя красота и здоровье</option><option value="./posting.php?mode=post&f=18" disabled="disabled" class="disabled-option"> Одежда и обувь для взрослых даром</option><option value="./posting.php?mode=post&f=20" disabled="disabled" class="disabled-option"> Товары для здоровья</option><option value="./posting.php?mode=post&f=34" disabled="disabled" class="disabled-option"> Физкультура и спорт</option><option value="./posting.php?mode=post&f=8" disabled="disabled" class="disabled-option">Техника - даром!</option><option value="./posting.php?mode=post&f=14" disabled="disabled" class="disabled-option"> Автомобилистам</option><option value="./posting.php?mode=post&f=27" disabled="disabled" class="disabled-option"> Компьютерная техника</option><option value="./posting.php?mode=post&f=31" disabled="disabled" class="disabled-option"> Плиты: газовые и электрические</option><option value="./posting.php?mode=post&f=23" disabled="disabled" class="disabled-option"> Холодильники</option><option value="./posting.php?mode=post&f=21" disabled="disabled" class="disabled-option"> Стиральные машины</option><option value="./posting.php?mode=post&f=22" disabled="disabled" class="disabled-option"> Телевизоры</option><option value="./posting.php?mode=post&f=30" disabled="disabled" class="disabled-option"> Телефоны, смартфоны, плашеты</option><option value="./posting.php?mode=post&f=24" disabled="disabled" class="disabled-option"> Швейные машинки</option><option value="./posting.php?mode=post&f=10" disabled="disabled" class="disabled-option"> Прочая электроника и техника</option><option value="./posting.php?mode=post&f=35" disabled="disabled" class="disabled-option"> Фототехника</option><option value="./posting.php?mode=post&f=29" disabled="disabled" class="disabled-option">Ремонт и интерьер</option><option value="./posting.php?mode=post&f=15" disabled="disabled" class="disabled-option"> Стройматериалы, инструмент</option><option value="./posting.php?mode=post&f=12" disabled="disabled" class="disabled-option"> Мебель и предметы интерьера даром</option><option value="./posting.php?mode=post&f=47" disabled="disabled" class="disabled-option"> Cантехника</option><option value="./posting.php?mode=post&f=1" disabled="disabled" class="disabled-option">Другие темы</option><option value="./posting.php?mode=post&f=6" disabled="disabled" class="disabled-option"> Разное даром</option><option value="./posting.php?mode=post&f=36" disabled="disabled" class="disabled-option"> Давай меняться!</option><option value="./posting.php?mode=post&f=37" disabled="disabled" class="disabled-option"> Отдам\возьму за копеечку</option><option value="./posting.php?mode=post&f=46" disabled="disabled" class="disabled-option"> Работа и подработка в Кемерове</option><option value="./posting.php?mode=post&f=2" disabled="disabled" class="disabled-option"> Давай с тобой поговорим...</option></select></li> </ul> </div> </div> </div> <div class="phpbb-ads" style="" data-phpbb-ads-id="2"> <div id="ad3090-658a71-10612" class="ad3090-658a71"></div> </div> <a id="start_here" class="anchor"></a> <div id="page-body" class="page-body" role="main"> <h2 class="topic-title"><a href="./viewtopic.php?t=232748">Утечка памяти при динамическом обновлении содержимого <iframe> с использованием srcdoc в JavaScript</a> ⇐ <font size = "2"><a href="./viewforum.php?f=41">Html</a> </font></h2> <!-- NOTE: remove the style="display: none" when you want to have the forum description on the topic body --> <div style="display: none !important;">Программисты Html<br /></div> <div class="action-bar bar-top"> <div class="pagination"> 1 сообщение • Страница <strong>1</strong> из <strong>1</strong> </div> </div> <div id="qr_posts"> <div class="post-container"> <div id="p241340" class="post has-profile bg2"> <div class="inner"> <dl class="postprofile" id="profile241340"> <dt class="no-profile-rank no-avatar"> <div class="avatar-container"> </div> <strong><span class="username">Anonymous</span></strong> </dt> </dl> <div class="postbody"> <div id="post_content241340"> <a href="./viewtopic.php?p=241340#p241340">Утечка памяти при динамическом обновлении содержимого <iframe> с использованием srcdoc в JavaScript</a> <p class="author"> <span><i class="icon fa-file fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">Сообщение</span></span> <span class="responsive-hide"> <strong><span class="username">Anonymous</span></strong> » </span><time datetime="2025-01-21T16:34:46+00:00">21 янв 2025, 19:34</time> </p> <div class="content">У нас возникают утечки памяти в веб-приложении, где мы динамически обновляем элементы новым HTML-содержимым с помощью свойства srcdoc. Эта проблема становится очевидной после длительного использования, особенно когда содержимое внутри файла часто меняется. Проблема усугубляется с наибольшим разнообразием HTML-контента. Если разнообразие контента слишком велико, это приведет к постоянному использованию памяти.<br> Наше приложение использует два элемента в каждом контейнере, переключаясь между ними, чтобы обеспечить плавный переход. Один обновляется новым содержимым с помощью srcdoc, и после загрузки мы переключаем его видимость на текущий активный файл . Ранее активные затем очищаются и скрываются.<br> Однако со временем этот подход может вызвать утечку памяти (например, Google Chrome, Edge, Opera). Использование памяти продолжает увеличиваться даже после очистки неиспользуемой памяти. Firefox, похоже, не страдает от утечки памяти, однако видео в HTML-файлах постепенно замедляется.<br> <strong class="text-strong">Вопросы</strong>:<ul> <li>Какой рекомендуемый способ динамического обновления контента без утечек памяти в современных браузерах?</li> <li>Существует ли более эффективный шаблон управления и очистки ресурсы при использовании srcdoc?</li> </ul> <strong class="text-strong">Текущая реализация:</strong><br> Вот логика обновления свойства srcdoc и обработки события загрузки: <div class="codebox"><p>Код: <a href="#" onclick="selectCode(this); return false;">Выделить всё</a></p><pre><code>if (received_data.html) { var inactiveIframe = document.getElementById(iframeIds.inactiveIframe); // Update the srcdoc of the inactive iframe, which triggers content loading inactiveIframe.srcdoc = received_data.html; // Handle the iframe size if provided if (received_data.width && received_data.height) { inactiveIframe.style.width = received_data.width + "px"; inactiveIframe.style.height = received_data.height + "px"; inactiveIframe.parentNode.style.height = received_data.height + "px"; inactiveIframe.parentNode.parentNode.style.height = received_data.height + "px"; } // Set up the onload event handler to switch iframes after the new content has loaded inactiveIframe.onload = async function() { await switchIframe(iframeIds); // Optionally, remove the event listener after the switch inactiveIframe.onload = null; }; validateResources(received_data.html); } </code></pre></div> Функция switchIframe отвечает за замену активных и неактивных iframe: <div class="codebox"><p>Код: <a href="#" onclick="selectCode(this); return false;">Выделить всё</a></p><pre><code>function switchIframe(iframeIds) { // Swap the active and inactive iframe IDs let temp = iframeIds.activeIframe; iframeIds.activeIframe = iframeIds.inactiveIframe; iframeIds.inactiveIframe = temp; // Hide the previously active iframe const inactiveIframeElement = document.getElementById(iframeIds.inactiveIframe); inactiveIframeElement.style.zIndex = '999997'; inactiveIframeElement.style.opacity = '0'; // Clear the content of the inactive iframe inactiveIframeElement.srcdoc = ''; let frameDoc = inactiveIframeElement.contentDocument || inactiveIframeElement.contentWindow.document; if (frameDoc) { frameDoc.documentElement.innerHTML = ''; } // Remove event listeners inactiveIframeElement.onload = null; // Show the new active iframe const activeIframeElement = document.getElementById(iframeIds.activeIframe); activeIframeElement.style.zIndex = '999998'; activeIframeElement.style.opacity = '1'; } </code></pre></div> <strong class="text-strong">Результат</strong>: использование памяти со временем достигает максимального значения.<br> <strong class="text-strong">Испробованы альтернативные подходы:</strong> <br> Мы пробовали разные стратегии, чтобы избежать утечек памяти, но ни одна из них не увенчалась успехом: <ul> <li>Восстановите : Вместо повторно используя inactive, мы удалили его из DOM и повторно добавили новый с тот же идентификатор:</li> </ul> <div class="codebox"><p>Код: <a href="#" onclick="selectCode(this); return false;">Выделить всё</a></p><pre><code>const inactiveIframeElement = document.getElementById(iframeIds.inactiveIframe); inactiveIframeElement.srcdoc = ''; inactiveIframeElement.parentElement.innerHTML = ` `; </code></pre></div> <strong class="text-strong">Результат</strong>: использование памяти со временем достигает максимального значения. <ul> <li>Очистка HTML с помощью InnerHTML: Очищено содержимое с помощью InnerHTML, как показано ниже:</li> </ul> <div class="codebox"><p>Код: <a href="#" onclick="selectCode(this); return false;">Выделить всё</a></p><pre><code>let frameDoc = inactiveIframeElement.contentDocument || inactiveIframeElement.contentWindow.document; if (frameDoc) { frameDoc.documentElement.innerHTML = ''; } </code></pre></div> <strong class="text-strong">Результат</strong>: использование памяти со временем достигает максимального значения. <br> <br> Подробнее здесь: <a href="https://stackoverflow.com/questions/79374893/memory-leak-when-dynamically-updating-iframe-content-using-srcdoc-in-javascrip" class="exlinks" rel="nofollow" target="_blank">https://stackoverflow.com/questions/793 ... -javascrip</a></div> </div> </div> <div class="back2top"> <a href="#top" class="top" title="Вернуться к началу"> <i class="icon fa-chevron-circle-up fa-fw icon-gray" aria-hidden="true"></i> <span class="sr-only">Вернуться к началу</span> </a> </div> </div> </div> <pre id="qr_author_p241340" style="display: none;" data-id="1">Anonymous</pre> </div></div> <div id="qr_temp_container" style="display: none;"></div> <div class="action-bar bar-bottom"> <div class="pagination"> 1 сообщение • Страница <strong>1</strong> из <strong>1</strong> </div> </div> <script> var quickreply = {}; // Special features for QuickReply - settings. quickreply.special = { hideSubject: false}; // Special features for QuickReply - functions. quickreply.special.functions = {}; </script> <div class="action-bar actions-jump"> <p class="jumpbox-return"> <a href="./viewforum.php?f=41" class="left-box arrow-left" accesskey="r"> <i class="icon fa-angle-left fa-fw icon-black" aria-hidden="true"></i><span>Вернуться в «Html»</span> </a> </p> <div class="jumpbox dropdown-container dropdown-container-right dropdown-up dropdown-left dropdown-button-control" id="jumpbox"> <span title="Перейти" class="button button-secondary dropdown-trigger dropdown-select"> <span>Перейти</span> <span class="caret"><i class="icon fa-sort-down fa-fw" aria-hidden="true"></i></span> </span> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents"> <li><a href="./viewforum.php?f=25" class="jumpbox-forum-link"> <span> Кемерово-IT</span></a></li> <li><a href="./viewforum.php?f=33" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Javascript</span></a></li> <li><a href="./viewforum.php?f=17" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ C#</span></a></li> <li><a href="./viewforum.php?f=16" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ JAVA</span></a></li> <li><a href="./viewforum.php?f=38" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Elasticsearch aggregation</span></a></li> <li><a href="./viewforum.php?f=39" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Python</span></a></li> <li><a href="./viewforum.php?f=9" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Php</span></a></li> <li><a href="./viewforum.php?f=40" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Android</span></a></li> <li><a href="./viewforum.php?f=41" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Html</span></a></li> <li><a href="./viewforum.php?f=42" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Jquery</span></a></li> <li><a href="./viewforum.php?f=43" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ C++</span></a></li> <li><a href="./viewforum.php?f=45" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ IOS</span></a></li> <li><a href="./viewforum.php?f=44" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ CSS</span></a></li> <li><a href="./viewforum.php?f=7" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Excel</span></a></li> <li><a href="./viewforum.php?f=48" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Linux</span></a></li> <li><a href="./viewforum.php?f=49" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Apache</span></a></li> <li><a href="./viewforum.php?f=11" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ MySql</span></a></li> <li><a href="./viewforum.php?f=28" class="jumpbox-forum-link"> <span> Детский мир</span></a></li> <li><a href="./viewforum.php?f=26" class="jumpbox-forum-link"> <span> Для души</span></a></li> <li><a href="./viewforum.php?f=13" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Музыкальные инструменты даром</span></a></li> <li><a href="./viewforum.php?f=19" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Печатная продукция даром</span></a></li> <li><a href="./viewforum.php?f=32" class="jumpbox-forum-link"> <span> Внешняя красота и здоровье</span></a></li> <li><a href="./viewforum.php?f=18" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Одежда и обувь для взрослых даром</span></a></li> <li><a href="./viewforum.php?f=20" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Товары для здоровья</span></a></li> <li><a href="./viewforum.php?f=34" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Физкультура и спорт</span></a></li> <li><a href="./viewforum.php?f=8" class="jumpbox-forum-link"> <span> Техника - даром!</span></a></li> <li><a href="./viewforum.php?f=14" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Автомобилистам</span></a></li> <li><a href="./viewforum.php?f=27" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Компьютерная техника</span></a></li> <li><a href="./viewforum.php?f=31" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Плиты: газовые и электрические</span></a></li> <li><a href="./viewforum.php?f=23" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Холодильники</span></a></li> <li><a href="./viewforum.php?f=21" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Стиральные машины</span></a></li> <li><a href="./viewforum.php?f=22" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Телевизоры</span></a></li> <li><a href="./viewforum.php?f=30" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Телефоны, смартфоны, плашеты</span></a></li> <li><a href="./viewforum.php?f=24" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Швейные машинки</span></a></li> <li><a href="./viewforum.php?f=10" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Прочая электроника и техника</span></a></li> <li><a href="./viewforum.php?f=35" class="jumpbox-sub-link"><span class="spacer"></span><span class="spacer"></span> <span>↳ Фототехника</span></a></li> <li><a href="./viewforum.php?f=29" class="jumpbox-forum-link"> <span> Ремонт и интерьер</span></a></li> <li><a href="./viewforum.php?f=15" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Стройматериалы, инструмент</span></a></li> <li><a href="./viewforum.php?f=12" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Мебель и предметы интерьера даром</span></a></li> <li><a href="./viewforum.php?f=47" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Cантехника</span></a></li> <li><a href="./viewforum.php?f=1" class="jumpbox-forum-link"> <span> Другие темы</span></a></li> <li><a href="./viewforum.php?f=6" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Разное даром</span></a></li> <li><a href="./viewforum.php?f=36" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Давай меняться!</span></a></li> <li><a href="./viewforum.php?f=37" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Отдам\возьму за копеечку</span></a></li> <li><a href="./viewforum.php?f=46" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Работа и подработка в Кемерове</span></a></li> <li><a href="./viewforum.php?f=2" class="jumpbox-sub-link"><span class="spacer"></span> <span>↳ Давай с тобой поговорим...</span></a></li> </ul> </div> </div> </div> </div> <div class="phpbb-ads" style="clear: both;" data-phpbb-ads-id="1"> <div id="frame" style="width: 320px;margin: auto;z-index: 99998;height: auto"> <iframe data-aa='2306896' src='//ad.a-ads.com/2306896/?size=320x100' style='border:0; padding:0; width:320px; height:100px; overflow:hidden;display: block;margin: auto'>
