سوال در مورد Operator های (=+ و +) در استفاده با innerHTML

Question

سلام. من هر دو حالت رو برای innerHTML تست کردم هم با =+ و هم با + و هیچ کدوم موقع Load تصویر از روی CDN تفاوتی با هم نداشت. در صورتی که Disable Cache رو از تب Network فعال باشه که در هر دو حالت تصویر رو مجددا از روی CDN میگیره و در صورتی که Disable Cache غیر فعال باشه تصویر رو از روی Cache می خونه و هیچ فرقی نداشت. کد زیر. من دو تا دستور رو به صورت دستی داخل Console زدم و با محدودیت سرعت روی 1 مگ چک کردم و بدون محدودیت سرعت هم چک کردم در هر دو حالت تنیجه یکی بود. اگر سرعت اینترنت پایینی داشته باشید مثلا 1 مگ بر ثانیه این تصویر در حدود 5 مگابایت حجم داره که لود شدنش رو توی مرورگر با چشم میبنید و بعد از اون تاخیر هایی که زدم هر دو دستور جدا جدا اجرا میشه و در هر دو دستور مجددا تصویر لود میشه.

میشه یک مثال برای این مورد بزنید. من متوجه نشدم منظورتون به این شکل بود یا نه.

<!doctype HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML and CSS</title>
    </head>

    <body>
        <div id="image">
            <img src="https://www.learningcontainer.com/wp-content/uploads/2020/08/Sample-Image-file-Download.png">
        </div>

        <script>
            let div = document.querySelector('#image');
            setTimeout(() => {
                div.innerHTML = div.innerHTML + '<hr>';
                console.log('OK');
            }, 15000);

            setTimeout(() => {
                div.innerHTML += '<hr>';
                console.log('OK');
            }, 30000);
        </script>
    </body>
</html>

جاوااسکریپت

قاسمی

17 مهر 00

Answer 1

حذف شده

سلام.

واسه تست این موضوع، مثال ساده تر استفاده از input هست.

وقتی داخل input چیزی تایپ کنیم و صفحه مجدد generate بشه، مقدار داخل input پاک میشه.

کد HTML:

<input type="text" placeholder="ابتدا چیزی تایپ کنید">
<button id="btn1">click1</button>

<hr>

<input type="text" placeholder="ابتدا چیزی تایپ کنید">
<button id="btn2">click2</button>

کد JS:

document.querySelector('#btn1').addEventListener("click", function(){ 
	document.body.innerHTML += '<p>test1</p>';
});


document.querySelector('#btn2').addEventListener("click", function(){ 
	document.body.innerHTML = document.body.innerHTML + '<p>test2</p>';
});


document.querySelector('#btn2').setAttribute("onclick","document.body.innerHTML = document.body.innerHTML + '<p>test3</p>';");

نکته ی دیگه برای اینکه تست بگیرم، وقتی مثلا روی click۱ کلیک میکنید، دکمه ی کلیک با توجه به addEventListener هایی که تعریف کردیم، کار نمیکنه چون DOM دوباره generate شده. خودتون تست کنید متوجه حرفم میشید که در حالتهای مختلف چطور اجرا میشن.(نکته: click۲ هر بار کلیک بشه باتوجه به دستور setAttribute کار میکنه و مقدار test۳ اضافه میشه و اگر کامنتش کنید، اگر روی یک دکمه کلیک بشه، دیگه هیچکدوم کار نمیکنه.)

نهایتا با توجه به تستهایی که گرفتم تفاوتی ندیدم. در منابع هم چیزی ذکر نشده بود(یا من پیدا نکردم) و بنچمارک هم از دو دستور گرفتم، تقریبا برابر بود.

برای تست اینجا کلیک کنید.

راستی یه سری بنچمارک هم دیدم، بهترین حالت استفاده از innerHTML که نسبت به بقیه ی کدها میتونه سریعتر عمل کنه، به اینصورته که ابتدا html رو تولید کنیم(داخل یک متغیر append کنیم) و بعد به innerHTML بدیم:

var element = document.getElementById('testdiv');
var html;
for (var c = 0; c < iterations; c++) {
    html += "test " + c;
}
element.innerHTML = html;

توسط

محسن موحد

18 مهر 00

سوال در مورد Operator های (=+ و +) در استفاده با innerHTML

سوالات مرتبط