Benchmark: querySelector vs getElementById + closest + querySelector

HTML Preparation code:
<div id="test">
    <removal-reason-form class="mb-0" enctype="application/json" method="post" action="/svc/shreddit/mod/removal-reason">
        <faceplate-modal class="max-w-[540px] w-[90v w] z-30" data-faceplate-dialog-previous-shadow="rgba(0, 0, 0, 0.3) 0px 2px 15px 0px" style="box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 15px 0px, 0 0 0 max(100vw, 100vh) var(--color-scrim);" open="">
            <div slot="closeButton">
                <!--?lit$148389113$--><button rpl="" class="
button-small px-[calc(var(--rem10)-var(--button-border-width,0px))]
button-secondary


icon
items-center justify-center
button inline-flex " type="button">
                    <!--?lit$148389113$-->
                    <!----><span class="flex items-center justify-center">
                        <!--?lit$148389113$--><span class="flex">
                            <!--?lit$148389113$--><svg rpl="" fill="currentColor" height="16" icon-name="close" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg">
                                <!--?lit$148389113$-->
                                <!--?lit$148389113$-->
                                <path d="M11.273 10l5.363-5.363a.9.9 0 10-1.273-1.273L10 8.727 4.637 3.364a.9.9 0 10-1.273 1.273L8.727 10l-5.363 5.363a.9.9 0 101.274 1.273L10 11.273l5.363 5.363a.897.897 0 001.274 0 .9.9 0 000-1.273L11.275 10h-.002z"></path>
                                <!--?-->
                            </svg></span>
                        <!--?lit$148389113$--> </span>
                    <!--?lit$148389113$-->
                    <!--?-->
                    <!---->
                    <!---->
                    <!----> </button> </div> <input type="hidden" name="thing" value="t1_ol0r6ch">
            <!--?lit$148389113$-->
            <faceplate-loader name="ModRemovalReasonFormContent_6vKDK8" src="concat:B3qrcP5zmS,BzH2CYJgUj,C9vSPDUBco,BjETkAQxk5,B3L_906lX9,DRsNWZxIzQ,CGTMIGYAP9,SmyVDIHhU-,BuZ1LYSmr8,DqaU3Bvh90,roF4p0gSXt,BTt5gWFI4f,CIC2d41-nl,TViiHXbXL3,BgGU4obcD8,vVcxQs225t,MurIJ1i2nx,fGtlAgzUiP,oII3_br0Ob,BuhrXLOb7z,5XI52d_nlL,B5V6bGIPNs,80MSg98Bh-,CBpyPtkzUP,BZDjL7ZUWO,DArLXy2Lb8,C9p6oDHbrl,tMvN7mMCZd,BrxMV_kQCQ,BGYQjFJmBx,5hsxVeZO_U,ulS1Cbt7G_,DkcDUioDQ-,a5n6Oq2HEF,C9UH_Rf15q,dtrCk9YqCO,DA7KWGoFOg" loading="eager" data-prefix="en-US/">

                <script nonce="qkHdSbL5sPYrF0V1skcoKA==">
                    SML.load(["B3qrcP5zmS", "BzH2CYJgUj", "C9vSPDUBco", "BjETkAQxk5", "B3L_906lX9", "DRsNWZxIzQ", "CGTMIGYAP9", "SmyVDIHhU-", "BuZ1LYSmr8", "DqaU3Bvh90", "roF4p0gSXt", "BTt5gWFI4f", "CIC2d41-nl", "TViiHXbXL3", "BgGU4obcD8", "vVcxQs225t", "MurIJ1i2nx", "fGtlAgzUiP", "oII3_br0Ob", "BuhrXLOb7z", "5XI52d_nlL", "B5V6bGIPNs", "80MSg98Bh-", "CBpyPtkzUP", "BZDjL7ZUWO", "DArLXy2Lb8", "C9p6oDHbrl", "tMvN7mMCZd", "BrxMV_kQCQ", "BGYQjFJmBx", "5hsxVeZO_U", "ulS1Cbt7G_", "DkcDUioDQ-", "a5n6Oq2HEF", "C9UH_Rf15q", "dtrCk9YqCO", "DA7KWGoFOg"], 'en-US/', 'auto');
                </script>

                <!---->
            </faceplate-loader>
            <div slot="title">
                Give a removal reason
            </div><input type="hidden" name="authorId" value="t2_aw0tl15w"><input type="hidden" name="subredditId" value="t5_60hed7">
            <div class="flex flex-col justify-center gap-md w-100">
                <div class="mt-md">Removal reasons are logged in the user mod log and a great way to track mod actions on that user.</div>

                <removal-reason-input name="removal-reason" required="" reasons="[{&quot;id&quot;:&quot;e6fc2f71-3445-44d6-a9f4-b454f51925a4&quot;,&quot;title&quot;:&quot;No hate speech or bullying&quot;,&quot;message&quot;:&quot;Bullying of any kind is not permitted and degrading comments about race, culture, sexual orientation, gender or identity will not be tolerated.&quot;},{&quot;id&quot;:&quot;d4f8baec-cf31-4fb9-bbf6-c4e4f4672052&quot;,&quot;title&quot;:&quot;Be kind and polite.&quot;,&quot;message&quot;:&quot;Comments and posts that are harassing any member of this sub are not allowed. Comments that contain vulgar language are not permitted.&quot;},{&quot;id&quot;:&quot;3ad246f5-abb3-49e8-b44c-81fab4d6e981&quot;,&quot;title&quot;:&quot;Be courteous to everyone.&quot;,&quot;message&quot;:&quot;Disagreements happen, there is no need to engage in personal attacks. Simply agree to disagree.&quot;},{&quot;id&quot;:&quot;357f9750-6ee9-4aff-8ecd-f0b434d68d41&quot;,&quot;title&quot;:&quot;Religion hating on another&quot;,&quot;message&quot;:&quot;This is a subreddit for **Atheists** in Kerala. Content made by religious people, media outlet etc that is criticising another religion is not allowed.&quot;},{&quot;id&quot;:&quot;4bf5571d-7b84-49f2-b712-f0fa1c577782&quot;,&quot;title&quot;:&quot;Praising of religions are not permitted.&quot;,&quot;message&quot;:&quot;Praising of religions and religious ideologies, chanting of mantras, glorifying the religious and irrational cultures are not permitted.&quot;},{&quot;id&quot;:&quot;3cfc7315-7c52-4f53-a41d-7f60c1a1f7ea&quot;,&quot;title&quot;:&quot;Chaddi comments are not allowed.&quot;,&quot;message&quot;:&quot;Content by Chaddis that praise Hindutva, BJP, RSS etc that come here pretending to be atheists are not allowed&quot;},{&quot;id&quot;:&quot;e1d081e5-fbe9-4384-8248-fbdff0e47587&quot;,&quot;title&quot;:&quot;Out of context&quot;,&quot;message&quot;:&quot;Posts must be related to Atheism or this subreddit, concerning Kerala.\n\n---\n\nArchive of post:\n\n# [{content_title}]({content_link}) ([{content_domain}](https://www.reddit.com/domain/{content_domain}/))\n\n{content_body}&quot;},{&quot;id&quot;:&quot;6ef516ad-29eb-49c5-a0f5-fcd318dcd7ab&quot;,&quot;title&quot;:&quot;Hating on believers or minorities&quot;,&quot;message&quot;:&quot;We are a community that only mocks or criticizes the stupidities of religion. But we don't hate any believers. We only hate irrational and unscientific ideologies. So comments that were intended to harass, defame or devalue any religion, political party, organisation, community or individual are not permitted.&quot;},{&quot;id&quot;:&quot;d93f9b16-6129-4423-937d-8426f434fe05&quot;,&quot;title&quot;:&quot;Low quality&quot;,&quot;message&quot;:&quot;Your post has been removed for being low quality/repetitive or otherwise unrelated.\n\n---\n\nArchive of post:\n\n# [{content_title}]({content_link}) ([{content_domain}](https://www.reddit.com/domain/{content_domain}/))\n\n{content_body}&quot;},{&quot;id&quot;:&quot;5673847a-623e-41fd-a02c-e7a11a2830f3&quot;,&quot;title&quot;:&quot;Language policy&quot;,&quot;message&quot;:&quot;Content must be in Malayalam or English, or translations must be provided&quot;},{&quot;id&quot;:&quot;97245330-01f4-4647-b54c-ef48feb86e1f&quot;,&quot;title&quot;:&quot;Chanting of religious slogans is not permitted.&quot;,&quot;message&quot;:&quot;Chanting of slogans that are related to religion, terrorist organisation, and political parties are not permitted in this subreddit.&quot;},{&quot;id&quot;:&quot;f7ee76c5-e9c4-4a36-a558-15c49fc71d24&quot;,&quot;title&quot;:&quot;Chanting the names of God is not allowed.&quot;,&quot;message&quot;:&quot;Chanting or praising the names or actions of any mythical beings and gods is not permitted.&quot;},{&quot;id&quot;:&quot;15569b37-4526-45c3-b174-b1333d481ab2&quot;,&quot;title&quot;:&quot;Respect the privacy of others.&quot;,&quot;message&quot;:&quot;Comments revealing the personal information of others are strictly prohibited.&quot;},{&quot;id&quot;:&quot;d8938ec0-0be5-4555-a5fc-ef881500b876&quot;,&quot;title&quot;:&quot;Personal Attacks or Flaming.&quot;,&quot;message&quot;:&quot;Avoid fighting words and personal attacks. (applies to all forms of user content. Including the user's name.)&quot;},{&quot;id&quot;:&quot;3ea1a0c2-1b53-4165-a161-f4255ab81060&quot;,&quot;title&quot;:&quot;Duplicate Post&quot;,&quot;message&quot;:&quot;Sorry, post was removed as a duplicate exists.   \n\nIf your post offers a unique perspective not covered in the existing thread and that a separate post would be good, please [let us know](/message/compose/?to=/r/AtheisminKerala&amp;subject=Duplicate%20Post-Unique%20Perspective&amp;message={content_link}).  \nThank you.  &quot;},{&quot;id&quot;:&quot;bbe807c4-ed2d-4abe-8beb-315f71278cdb&quot;,&quot;title&quot;:&quot;Custom reason&quot;,&quot;message&quot;:&quot;Add reason here&quot;},{&quot;id&quot;:&quot;a625cd87-d7f9-442f-af8d-3ec76b1339c2&quot;,&quot;title&quot;:&quot;Anti-anti-Kerala hate comments/post&quot;,&quot;message&quot;:&quot;Please do not fallback on over-generalization and hate against Kerala. Kindly engage decently.  \nThank you.&quot;},{&quot;id&quot;:&quot;2e02fb57-acda-4dd1-a959-b6a9bfd60249&quot;,&quot;title&quot;:&quot;Misinformation&quot;,&quot;message&quot;:&quot;Don't post misinformation or posts without any source.&quot;}]" include-platform-rule-option="" removal-reason-suggestions-context="{&quot;predictedRemovalSavedResponses&quot;:[],&quot;eventContext&quot;:{&quot;commentId&quot;:&quot;t1_ol0r6ch&quot;,&quot;subredditId&quot;:&quot;t5_60hed7&quot;}}" faceplate-validity="invalid" aria-disabled="false">
                    <div slot="link" id="external-saved-responses-link">
                        <a rpl="" class="class=&quot;flex justify-between relative gap-[0.5rem] text-secondary hover:text-secondary-hover active:bg-interactive-pressed hover:bg-neutral-background-hover hover:no-underline cursor-pointer -outline-offset-1 no-underline a cursor-pointer
  text-secondary-plain hover:text-secondary-plain-hover no-visited visited:text-secondary-plain
  
  
  
  hover:underline
  " href="/mod/AtheisminKerala/saved-responses/removals" target="_blank"><span class="flex flex-col justify-center min-w-0 shrink">
                                <span class="text-14">
                                    Add a removal reason
                                </span>
                                <span class="text-12 text-secondary-weak">
                                    Your community doesn't have any removal reasons set up yet.
                                </span>
                            </span></a>
                    </div>
                </removal-reason-input>


                <removal-reason-input name="default-removal-reason" class="hidden" is-sitewide="true" reasons="[{&quot;id&quot;:&quot;sitewide-removal-harassment&quot;,&quot;title&quot;:&quot;Harassment&quot;,&quot;message&quot;:&quot;{community_link} does not allow harassment&quot;},{&quot;id&quot;:&quot;sitewide-removal-hate&quot;,&quot;title&quot;:&quot;Hate&quot;,&quot;message&quot;:&quot;{community_link} does not allow hate&quot;},{&quot;id&quot;:&quot;sitewide-removal-threatening-violence&quot;,&quot;title&quot;:&quot;Threatening Violence&quot;,&quot;message&quot;:&quot;{community_link} does not allow threats of violence&quot;},{&quot;id&quot;:&quot;sitewide-removal-other&quot;,&quot;title&quot;:&quot;Other&quot;,&quot;message&quot;:&quot;{community_link} follows platform-wide Reddit Rules&quot;}]" faceplate-validity="valid" aria-disabled="false">
                </removal-reason-input>


                <faceplate-textarea-input rows="7.5" name="message" required="" maxlength="10000" aria-disabled="false" helper-text-aria-live="polite" appearance="secondary" faceplate-validity="invalid">
                    <span slot="label">
                        Message to the user
                    </span>
                </faceplate-textarea-input><span class="text-12 text-danger-content px-md">u/Littux just added a removal reason</span>

                <removal-reason-notification-method is-mod-mail-allowed="" name="notification-method" required="" faceplate-validity="valid" aria-disabled="false">
                </removal-reason-notification-method>

                <removal-reason-notification-sender name="notification-sender" required="" user="u/Littux" faceplate-validity="valid" aria-disabled="false">
                    <div slot="mod-icon" class="w-[1.5rem] h-[1.5rem] inline-flex">
                        <span class="inline-flex items-center justify-center w-[1rem] h-[1rem] relative " rpl="" avatar="">

                            <span rpl="" class="inline-block rounded-full  relative [&amp;&gt;:first-child]:h-full [&amp;&gt;:first-child]:w-full [&amp;&gt;:first-child]:mb-0 [&amp;&gt;:first-child]:rounded-[inherit] h-full w-full
    [&amp;&gt;:first-child]:overflow-hidden [&amp;&gt;:first-child]:max-h-full">
                                <img src="https://styles.redditmedia.com/t5_60hed7/styles/communityIcon_j0nf39fdt99d1.jpg?width=64&amp;height=64&amp;frame=1&amp;auto=webp&amp;crop=64:64,smart&amp;s=c4846d901de8369d0edb77502993108f050254a6" alt="" class="mb-0 shreddit-subreddit-icon__icon rounded-full overflow-hidden nd:visible nd:bg-secondary-background  w-full h-full" width="16" style="color: #AB599D;background: #AB599D;width: 16px;" loading="lazy">
                            </span></span>
                    </div>

                    <div slot="user-icon" class="w-[1.5rem] h-[1.5rem]">
                        <span class="inline-flex items-center justify-center w-[1.5rem] h-[1.5rem] relative " rpl="" avatar="">

                            <span class="inline-flex snoovatar relative w-[1.5rem] h-[1.5rem] min-w-[1.5rem] min-h-[1.5rem]">
                                <div class="absolute h-full w-full" style="transform: scale(0.95)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" fill="none">
                                        <path d="M29 1.73205C30.8564 0.660254 33.1436 0.660254 35 1.73205L56.7128 14.2679C58.5692 15.3397 59.7128 17.3205 59.7128 19.4641V44.5359C59.7128 46.6795 58.5692 48.6603 56.7128 49.7321L35 62.2679C33.1436 63.3397 30.8564 63.3397 29 62.2679L7.28719 49.7321C5.43078 48.6603 4.28719 46.6795 4.28719 44.5359V19.4641C4.28719 17.3205 5.43078 15.3397 7.28719 14.2679L29 1.73205Z" fill="url(#paint0_diamond_26026_173944)"></path>
                                        <path d="M29 1.73205C30.8564 0.660254 33.1436 0.660254 35 1.73205L56.7128 14.2679C58.5692 15.3397 59.7128 17.3205 59.7128 19.4641V44.5359C59.7128 46.6795 58.5692 48.6603 56.7128 49.7321L35 62.2679C33.1436 63.3397 30.8564 63.3397 29 62.2679L7.28719 49.7321C5.43078 48.6603 4.28719 46.6795 4.28719 44.5359V19.4641C4.28719 17.3205 5.43078 15.3397 7.28719 14.2679L29 1.73205Z" fill="url(#paint1_linear_26026_173944)"></path>
                                        <defs>
                                            <radialGradient id="paint0_diamond_26026_173944" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.59974 23.1999) rotate(15.9097) scale(44.5051 21406.7)">
                                                <stop stop-color="#1185B5"></stop>
                                                <stop offset="0.29452" stop-color="#D7F7FF"></stop>
                                                <stop offset="0.526042" stop-color="#5EF6D8"></stop>
                                                <stop offset="0.838434" stop-color="#5EF6D8"></stop>
                                                <stop offset="0.867246" stop-color="#1990B9"></stop>
                                                <stop offset="1" stop-color="#3F9FC6"></stop>
                                            </radialGradient>
                                            <linearGradient id="paint1_linear_26026_173944" x1="23.5687" y1="22.7061" x2="44.1183" y2="53.4817" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="#004E5F"></stop>
                                                <stop offset="1" stop-color="#727CD8" stop-opacity="0.81"></stop>
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                                <span class="absolute h-full w-full start-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 72 72" fill="none">
                                        <path d="M34 3.4641C35.2376 2.74957 36.7624 2.74957 38 3.4641L63.1769 18C64.4145 18.7145 65.1769 20.035 65.1769 21.4641V50.5359C65.1769 51.965 64.4145 53.2855 63.1769 54L38 68.5359C36.7624 69.2504 35.2376 69.2504 34 68.5359L8.82309 54C7.58548 53.2855 6.82309 51.965 6.82309 50.5359V21.4641C6.82309 20.035 7.58548 18.7145 8.82309 18L34 3.4641Z" stroke="url(#paint0_diamond_26526_186798)" stroke-width="2" stroke-linejoin="round"></path>
                                        <defs>
                                            <radialGradient id="paint0_diamond_26526_186798" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.4247 26.0998) rotate(15.9097) scale(50.0682 24082.5)">
                                                <stop stop-color="#1185B5"></stop>
                                                <stop offset="0.29452" stop-color="#D7F7FF"></stop>
                                                <stop offset="0.526042" stop-color="#5EF6D8"></stop>
                                                <stop offset="0.838434" stop-color="#5EF6D8"></stop>
                                                <stop offset="0.867246" stop-color="#1990B9"></stop>
                                                <stop offset="1" stop-color="#3F9FC6"></stop>
                                            </radialGradient>
                                        </defs>
                                    </svg>
                                </span>
                                <div class="absolute h-full w-full" style="transform: translateY(-5.4%)">
                                    <svg width="100%" height="100%" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" class="overflow-hidden">
                                        <defs>
                                            <clipPath id="c35644af77b05">
                                                <path d="M120 0H0V96H22.0602C22.5169 98.2109 23.896 100.155 25.8949 101.309L56
          118.691C58.4752 120.12 61.5248 120.12 64 118.691L94.1051 101.309C96.104 100.155 97.4831
          98.2109 97.9398 96H120V0Z"></path>
                                            </clipPath>
                                        </defs>
                                        <image href="https://preview.redd.it/snoovatar/avatars/nftv2_bmZ0X2VpcDE1NToxMzdfZTY0YmI3ZGQwYTEzYWY2MjJlMGRlNjQ1NmQxYmJhZGM4ZDFlYzA5ZF80MDk2_rare_85a84975-0333-49e7-ba53-f957e144be02-headshot.png?width=48&amp;height=48&amp;crop=smart&amp;auto=webp&amp;s=7f87e24adb72199dc3cb4e8acf89cb1c3892d4dc" alt="u/Littux" clip-path="url(#c35644af77b05)" height="100%" width="100%"></image>
                                    </svg>
                                </div>
                            </span></span>
                    </div>
                </removal-reason-notification-sender>

                <faceplate-textarea-input name="modNote" maxlength="100" aria-disabled="false" helper-text-aria-live="polite" appearance="secondary" faceplate-validity="valid">
                    <span slot="label">
                        Mod note (optional)
                    </span>
                </faceplate-textarea-input>
            </div>
            <div slot="tertiaryButton">
                <faceplate-checkbox-input name="lock" checked="" aria-checked="true" faceplate-validity="valid" role="checkbox" tabindex="0" aria-disabled="false">
                    Lock Thread
                </faceplate-checkbox-input>
            </div>
            <div slot="primaryButton">
                <!--?lit$148389113$--><button rpl="" class="w-100 relative button-medium px-[calc(var(--rem12)-var(--button-border-width,0px))] button-primary items-center justify-center button inline-flex" type="submit">
                    <!--?lit$148389113$-->
                    <!----><span class="flex items-center justify-center">
                        <!--?lit$148389113$-->
                        <!--?lit$148389113$--><span class="flex items-center gap-xs">
                            <!--?lit$148389113$-->
                            <faceplate-progress value="20" class="animate-spin loading-icon absolute left-0 right-0 m-auto w-[16px] hidden" style="--loader-size:1rem" status="incomplete"></faceplate-progress> <span class="submit-button-content">
                                <!--?lit$148389113$-->Submit</span>
                        </span> </span>
                    <!--?lit$148389113$-->
                    <!--?-->
                    <!---->
                    <!---->
                    <!----> </button> </div>
            <div slot="secondaryButton">
                <!--?lit$148389113$--><button rpl="" class="w-100
button-medium px-[calc(var(--rem12)-var(--button-border-width,0px))]
button-plain



items-center justify-center
button inline-flex " type="button">
                    <!--?lit$148389113$-->
                    <!----><span class="flex items-center justify-center">
                        <!--?lit$148389113$-->
                        <!--?lit$148389113$--><span class="flex items-center gap-xs">
                            <!--?lit$148389113$-->Cancel</span> </span>
                    <!--?lit$148389113$-->
                    <!--?-->
                    <!---->
                    <!---->
                    <!----> </button> </div>
        </faceplate-modal>
    </removal-reason-form>
</div>
querySelector vs getElementById + closest + querySelector (version: 2)

Comparing performance of: `querySelector vs getElementById + closest + querySelector`

Created: 2 months ago by: Registered User

Go to the latest result

querySelector

getElementById + closest + querySelector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Test case name	Result
querySelector
getElementById + closest + querySelector
querySelector vs getElementById + closest + querySelector (version: 2)

Comparing performance of: querySelector vs getElementById + closest + querySelector

Created: 2 months ago by: Registered User

Go to the latest result

querySelector

getElementById + closest + querySelector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Comparing performance of: `querySelector vs getElementById + closest + querySelector`
