שיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר

[dovid]

מה מביא אותך לחשוב ככה?

[WWW]

@dovid אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

מה מביא אותך לחשוב ככה?

[dovid]

אתה מחליף את הקטע הראשון בשני.
אנו מדברים על DOMMutationObserver, שעליו הוא כותב שהוא פחות נתמך בכל הדפדפנים, וזה כבר לא רלוונטי עכ"פ בודאי שלא לך.

[WWW]

@dovid טוב, מודה, כדבריך.

אבל התחביר הרבה יותר קל עם הספרייה שלו.

אני לא כ"כ מבין בזה, אבל בDOMMutationObserver זה לא מאזין לכל האלמנטים המתווספים?

כי בזה אני חושב שזה מאזין רק לסלקטור הזה.

[dovid]

@WWW אתה זה שצודק, לא חשבתי על זה. ייתכן מאוד שאכן MutationObserver פחות יעיל במקרה שיודעים את הclass ולא מדובר בהרבה מופעים.

[WWW]

@dovid אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

@WWW אתה זה שצודק, לא חשבתי על זה. ייתכן מאוד שאכן MutationObserver פחות יעיל במקרה שיודעים את הclass ולא מדובר בהרבה מופעים.

אני חושב שזה הפרש ענק.

בג'מייל לדוגמה, חיפשתי משהו שיעבוד רק על זה, כי אם לא, זה ממש בזבוז.

[dovid]

@WWW לא חושב. לדעתי זה לא הפרש ענק ויש מצב שאפילו השני יעיל יותר.
אתה רוצה לבדוק? אבל בשביל זה צריך שתיתן לי את מלוא האלמנט (תעתיק ושים פה), כי לפי סלקטור זה יהיה בדיקה לא הוגנת.

[WWW]

@dovid אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

אתה רוצה לבדוק? אבל בשביל זה צריך שתיתן לי את מלוא האלמנט (תעתיק ושים פה), כי לפי סלקטור זה יהיה בדיקה לא הוגנת.

לא הבנתי.
מה הכוונה?

[WWW]

@dovid
לזה התכוונת:

<div class="mt-signature" contenteditable="false" g_editable="false">
        <table border="0" cellpadding="8" cellspacing="0" contenteditable="false" g_editable="false" data-signature-template="senderNotified" style="user-select: none;">
            <tbody><tr>
                <td>
                    <a href="https://mailtrack.io?utm_source=gmail&amp;utm_medium=signature&amp;utm_campaign=signaturevirality5&amp;" class="mt-no-pointer-events" style="text-decoration:none;" data-mt-detrack-inspected="true">
                        <img src="https://s3.amazonaws.com/mailtrack-signature/sender_notified.gif" alt="Mailtrack" class="mt-no-pointer-events" width="32" height="32" g_editable="false">
                    </a>
                </td>
                <td>
                    <span style="color:#777">Sender notified by</span> <br>
                    <a href="https://mailtrack.io?utm_source=gmail&amp;utm_medium=signature&amp;utm_campaign=signaturevirality5&amp;" class="mt-install mt-no-pointer-events" style="color:#4374F7" data-mt-detrack-inspected="true">Mailtrack</a>
                    <span style="color: transparent; font-size: 0; user-select: none">11.09.19, 23:13:52</span>
                </td>
                <td>
                    <div class="mt-remove-signature-button" g_editable="false">
        <a href="#" style="text-decoration:none;" class="mt-remove" data-mt-detrack-inspected="true"><em>×</em><span>REMOVE</span></a>
    </div>
                </td>
            </tr>
        </tbody></table>
    </div>

?

[dovid]

const config = { attributes: false, childList: true, subtree: true };

const observer = new MutationObserver(
    function(mutationsList) {
        for(let mutation of mutationsList)
            for(let el of mutation.addedNodes)
                if(el.tagName == "DIV" && el.getAttribute("class") == "mt-signature")
                    el.remove()
    }
);

observer.observe(document, config);

[WWW]

@dovid נו... זה יותר יעיל?

קודם כל אני רואה שאני צודק שזה בודק את כל האלמנטים המתווספים.
אז זה כבר תלוי כמה אלמנטים מתווספים בדף.

אני חושב שבג'ימייל יחסית הרבה.

[dovid]

@WWW כן זה יכול להיות יעיל יותר. כמו שיכול להיות שלולאה של אלפי פעמים 1+1 מהירה מפעם אחת console.log.

[WWW]

@dovid אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

כמו שיכול להיות שלולאה של אלפי פעמים 1+1 מהירה מפעם אחת console.log.

התכוונת הפוך?

[dovid]

@WWW מה אתה חושב? אתה חושב שconole.log מהיר יותר? חשבת פעם מה עובר על המחשב כשאתה עושה console.log? אתה לא תישן בלילה...

[WWW]

@dovid אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

@WWW מה אתה חושב? אתה חושב שconole.log מהיר יותר? חשבת פעם מה עובר על המחשב כשאתה עושה console.log? אתה לא תישן בלילה...

גם כשהקונסול סגור??
אל תגיד לי!

[WWW]

@dovid OK, אבל הדוגמה שהבאת הפוכה,
כי בעצם בשיטה שלי אני משתמש במשהו יקר יותר, רק משתמש בו פחות פעמים.
ובשיטה שלך אתה משתמש במשהו זול, אבל הרבה פעמים.

[yossiz]

@WWW דרך אגב, השיטה שלך גם מריץ פונקציה על כל הרצת אנימציה (לא רק של הסלקטור הזה) אם הבנתי נכון.

[dovid]

@yossiz נכון אבל ברוב האתרים ואני מניח שגם בג'מייל יש ללא ספק פחות אנימציות ממספר האלמנטים בהפרש רב.

[dovid]

@WWW אמר בשיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר:

@dovid OK, אבל הדוגמה שהבאת הפוכה,
כי בעצם בשיטה שלי אני משתמש במשהו יקר יותר, רק משתמש בו פחות פעמים.
ובשיטה שלך אתה משתמש במשהו זול, אבל הרבה פעמים.

למה זה הפוך? המשל הוא הלולאה של ה1+1 היא ריבוי של פעולה זולה, ביחס לconsole.log.
אמרתי שעל אותה דרך אולי הMutationObserver הוא אולי מרבה פעולות אבל אולי זולות ביחס לאירוע על האנימציה.

[dovid]

ואל תתחיל לפחד לעשות console.log אנחנו סתם בהשוואות יחסיות תיאורטיות, מעבר לזה הכל טוב ויעיל...