អត្ថបទ javascript async src ត្រូវបានផ្ទុក។ ការផ្ទុក JavaScript អសមកាលកម្ម - បង្កើនល្បឿនការផ្ទុកទំព័រ។ ការបន្ថែមគុណលក្ខណៈពន្យារ ឬធ្វើសមកាលកម្មនៅក្នុង WordPress
អត្ថបទ javascript async src ត្រូវបានផ្ទុក។ ការផ្ទុក JavaScript អសមកាលកម្ម - បង្កើនល្បឿនការផ្ទុកទំព័រ។ ការបន្ថែមគុណលក្ខណៈពន្យារ ឬធ្វើសមកាលកម្មនៅក្នុង WordPress
សួស្តីមិត្តៗ! តើអ្នកដឹងទេថាការផ្ទុក JavaScript គឺជាឧបសគ្គដ៏ធំបំផុតមួយនៅក្នុងដំណើរការគេហទំព័រ? ថ្ងៃនេះ ភារកិច្ចចម្បងរបស់ខ្ញុំគឺពន្យល់ពីអ្វីដែលស្គ្រីបមួយ និងរបៀបដែលវាប៉ះពាល់ដល់ល្បឿន និងដំណើរការនៃគេហទំព័រ។
កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលផ្ទុកស្លាកស្គ្រីបឈប់ដំណើរការទំព័ររហូតដល់ស្គ្រីបត្រូវបានផ្ទុក និងដំណើរការ។ ទំព័រត្រូវបានរារាំង ហើយកម្មវិធីរុករកមិនឆ្លើយតបនឹងសកម្មភាពរបស់អ្នកប្រើក្នុងរយៈពេលពីរបីវិនាទី។ ការពន្យាពេលអាស្រ័យលើកត្តាជាច្រើន៖
ការកំណត់រចនាសម្ព័ន្ធ,
ល្បឿនភ្ជាប់អ៊ីនធឺណិត,
ទំហំឯកសារ និងផ្សេងៗទៀត...
សម្រាប់ហេតុផលនេះ Google PageSpeed Insights ណែនាំឱ្យដក JavaScript ចេញពីផ្នែកខាងលើនៃទំព័រដែលរារាំងការបង្ហាញ។ វាជាការអនុវត្តល្អក្នុងការដាក់ស្គ្រីបនៅផ្នែកខាងក្រោមនៃគេហទំព័រ ជាឧទាហរណ៍ មុនពេលបិទស្លាក។
ឬរៀបចំការផ្ទុកអសមកាល។
ប្រសិនបើកូដស្គ្រីបប៉ះពាល់ដល់ការបង្ហាញផ្នែកខាងលើនៃគេហទំព័រ សូមកុំដាក់វានៅក្នុងឯកសារដាច់ដោយឡែក ប៉ុន្តែបង្កប់វាដោយផ្ទាល់ទៅក្នុង HTML ។
JS អាចផ្លាស់ប្តូរខ្លឹមសារនៃគេហទំព័រ ហើយថែមទាំងប្តូរទិសទៅ url ផ្សេង។ ក្នុងករណីនេះ ការបញ្ចូលស្គ្រីបនៅចុងបញ្ចប់នៃឯកសារនឹងនាំឱ្យមានឥទ្ធិពលនៃ "រមួល" នៃទំព័រ ផ្ទុកថ្មី ឬផ្លាស់ប្តូរធាតុដែលមានស្រាប់នៅផ្នែកខាងលើ។
អនុវត្តគុណលក្ខណៈ async និងពន្យាពេលទៅស្លាកស្គ្រីប
សូមក្រឡេកមើលថាតើការងារ JavaScript អសមកាល និងពន្យាពេលគឺជាអ្វី ហើយតើអ្វីជាភាពខុសគ្នាជាមូលដ្ឋានរវាង async និង defer attributes។ ប៉ុន្តែជាដំបូង សូមក្រឡេកមើលលំដាប់នៃដំណើរការឯកសារជាមួយនឹងការតភ្ជាប់ធម្មតានៃស្លាកស្គ្រីប។
< src="example.js">
ជាឧទាហរណ៍ ខ្ញុំនឹងប្រើអនុសញ្ញាខាងក្រោម៖
- ដំណើរការទំព័រ
ដូច្នេះ លំដាប់ដំណើរការមានដូចខាងក្រោម៖
ការញែកកូដ HTML ត្រូវបានរំខានខណៈពេលដែលស្គ្រីបកំពុងផ្ទុក និងដំណើរការ ហើយបន្ទាប់មកបន្ត។ មានការពន្យាពេលក្នុងការបង្ហាញគេហទំព័រ។
ពន្យារគុណលក្ខណៈ
គុណលក្ខណៈពន្យាពេលអនុញ្ញាតឱ្យកម្មវិធីរុករកចាប់ផ្តើមផ្ទុកឯកសារ js ស្របគ្នាដោយមិនបញ្ឈប់ដំណើរការបន្ថែមនៃទំព័រ។ ពួកវាត្រូវបានប្រតិបត្តិបន្ទាប់ពីការញែកពេញលេញនៃគំរូវត្ថុឯកសារ (DOM ក្នុងរយៈពេលខ្លី) ខណៈពេលដែលកម្មវិធីរុករកធានាភាពស្ថិតស្ថេរដោយផ្អែកលើលំដាប់ដែលឯកសារត្រូវបានភ្ជាប់។
< ពន្យាពេល src = "example.js">
គុណលក្ខណៈ Async
ការគាំទ្រសម្រាប់គុណលក្ខណៈ async បានបង្ហាញខ្លួននៅក្នុង HTML5 វាអនុញ្ញាតឱ្យកម្មវិធីរុករកផ្ទុកឯកសារ js ស្របគ្នា ហើយប្រតិបត្តិភ្លាមៗបន្ទាប់ពីផ្ទុកដោយមិនរង់ចាំសម្រាប់ទំព័រដែលនៅសល់ត្រូវបានដំណើរការ។
< async src = "example.js">
ដ្យាក្រាមលំដាប់ដំណើរការ៖
នេះគឺជាការទាញយកអសមកាល។ គុណលក្ខណៈត្រូវបានណែនាំសម្រាប់ស្គ្រីបដែលមិនប៉ះពាល់យ៉ាងខ្លាំងដល់ការបង្ហាញឯកសារ។ ទាំងនេះរួមមាន បញ្ជរប្រមូលស្ថិតិ (Google Analytics, Yandex Metrica), លេខកូដបណ្តាញផ្សាយពាណិជ្ជកម្ម (បណ្តាញផ្សាយពាណិជ្ជកម្ម Yandex, Google AdSense), ប៊ូតុងប្រព័ន្ធផ្សព្វផ្សាយសង្គមជាដើម។
ល្បឿនផ្ទុកគេហទំព័រគឺជាកត្តាចំណាត់ថ្នាក់មួយនៅក្នុង Google ។
ការតភ្ជាប់ JavaScript អសមកាលកាត់បន្ថយពេលវេលាផ្ទុកទំព័រដោយលុបបំបាត់ភាពយឺតយ៉ាវ។ ទន្ទឹមនឹងនេះ ខ្ញុំសូមផ្តល់អនុសាសន៍ឱ្យបង្ហាប់ និងបញ្ចូលឯកសារ js ចូលទៅក្នុងមួយ ឧទាហរណ៍ដោយប្រើបណ្ណាល័យ។ អ្នកប្រើប្រាស់ចូលចិត្តគេហទំព័រលឿន 😎
Async and Defer - យុទ្ធសាស្ត្រផ្ទុក JavaScript
JavaScript គឺជាផ្នែកសំខាន់នៃកម្មវិធីបណ្តាញទំនើបណាមួយ ហើយយុទ្ធសាស្រ្តដែលយើងជ្រើសរើសដើម្បីប្រើសម្រាប់ការផ្ទុកដោយផ្ទាល់ប៉ះពាល់ដល់ដំណើរការនៃកម្មវិធីនោះ។ នៅក្នុងអត្ថបទនេះ យើងនឹងព្យាយាមស្វែងយល់ពីភាពខុសគ្នាសំខាន់ៗរវាងវិធីសាស្រ្តនីមួយៗ គុណសម្បត្តិ និងគុណវិបត្តិ រួមជាមួយនឹងផលប៉ះពាល់នៃការអនុវត្ត និងរបៀបបង្កើនប្រសិទ្ធភាពសម្រាប់អន្តរកម្មទំព័រ និងពេលវេលាផ្ទុក។
សម្រាប់ការបង្ហាញ ខ្ញុំនឹងបង្កើតគេហទំព័រមួយដែលមានភាពអាស្រ័យខាងក្រៅដូចខាងក្រោម។ យកចិត្តទុកដាក់ជាពិសេសចំពោះទំហំឯកសាររៀងៗខ្លួន ព្រោះពេលវេលាទាញយកឯកសារគឺសមាមាត្រដោយផ្ទាល់ទៅនឹងវា។
HTML - ទំព័រ ~ 1 MB ។ មានការសម្គាល់ / មាតិកាពិតប្រាកដដើម្បីបង្ហាញលទ្ធផលថាមវន្តមួយចំនួនពី JavaScript ។
រូបភាព - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB គឺជា javascript ស្នូល (ឯកសារសំខាន់) ហើយអាស្រ័យលើការញែក HTML ។ វាត្រូវការជាចាំបាច់ដើម្បីបង្ហាញខ្លឹមសារថាមវន្តមួយចំនួន ឬដើម្បីភ្ជាប់សមាសធាតុប្រតិកម្ម/ជ្រុងនៅលើទំព័រ។
JavaScript - file2.js ~ 460B គឺជាឯកសារ javascript ឯករាជ្យតូចមួយដែលមានអន្តរកម្មជាមួយ dom ។
JavaScript - file3.js ~ 1.5 MB គឺជាឯកសារ js ទីពីរ ហើយអាស្រ័យលើ file1.js ដើម្បីប្រតិបត្តិកូដអាទិភាពទាបមួយចំនួន។ កូដនេះមិនត្រូវបានទាមទារភ្លាមៗសម្រាប់ការបង្ហាញទំព័រ និងអន្តរកម្មអ្នកប្រើប្រាស់ទេ។ វាបង្ហាញរូបតំណាងប្រព័ន្ធផ្សព្វផ្សាយសង្គម មតិយោបល់ ជំនួយលើអ៊ីនធឺណិត ការចាប់ផ្តើមកិច្ចការវិភាគមួយចំនួន។ល។
វិធីសាស្រ្ត-1 [ស្គ្រីបនៅក្នុងផ្នែកក្បាល]
ក្នុងករណីដំបូង យើងនឹងផ្ទុកស្លាកស្គ្រីបទាំងអស់ទៅក្នុងផ្នែកក្បាលនៃ HTML របស់យើង។ ខាងក្រោមគឺជារូបថតអេក្រង់នៃការវិភាគនៃផ្ទាំងបណ្តាញនៃទំព័រ chrome ដែលត្រៀមរួចជាស្រេចសម្រាប់អន្តរកម្មអ្នកប្រើប្រាស់។
គុណសម្បត្តិ៖
លំដាប់នៃការប្រតិបត្តិកូដនៃឯកសារ JS ផ្សេងៗនឹងត្រូវបានរក្សាទុកតាមលំដាប់ដែលឯកសារត្រូវបានបញ្ចូលក្នុង HTML ។ ក្នុងឧទាហរណ៍បច្ចុប្បន្ន ទោះបីជា file2 និង file3 ត្រូវបានផ្ទុកមុន file1 ក៏ដោយ លំដាប់នៃការប្រតិបត្តិនឹងត្រឹមត្រូវ។
គុណវិបត្តិ៖
នៅក្នុងសេណារីយ៉ូនេះ ការញែក HTML នឹងត្រូវបានផ្អាក រហូតដល់ស្គ្រីបទាំង 3 នៅក្នុងផ្នែកក្បាលត្រូវបានផ្ទុក ញែក និងប្រតិបត្តិ។ អេក្រង់ពណ៌សទទេនឹងត្រូវបានបង្ហាញដល់អ្នកប្រើប្រាស់ ទោះបីជាឯកសារ HTML ត្រូវបានផ្ទុករួចហើយ [ប៉ុន្តែមិនត្រូវបានញែកទេ]។ នេះពិតជាមិនល្អសម្រាប់ការប្រើប្រាស់ទេ។
គ្មានស្គ្រីបខាងលើណាមួយនឹងអាចចូលប្រើ / រៀបចំទំព័រ HTML បានទេ ដោយសារ DOM មិនទាន់រួចរាល់។ ដំណោះស្រាយមួយដែលអាចធ្វើទៅបានដើម្បីដោះស្រាយបញ្ហានេះគឺដើម្បីស្តាប់ព្រឹត្តិការណ៍ DOMContentLoaded ហើយបន្ទាប់មកប្រតិបត្តិកូដបន្ទាប់ពីនោះ។ DOMContentLoaded ព្រឹត្តិការណ៍នេះត្រូវបានបង្កឡើងនៅពេលដែលឯកសារ HTML ដើមត្រូវបានផ្ទុកពេញលេញ និងញែកដោយមិនចាំបាច់រង់ចាំសម្រាប់សន្លឹករចនាប័ទ្ម រូបភាពដើម្បីបញ្ចប់ការផ្ទុក។
វិធីសាស្រ្ត-2 [ស្គ្រីបនៅចុងបញ្ចប់]
ដើម្បីជម្នះបញ្ហា 2 ដែលយើងប្រឈមមុខក្នុងវិធីសាស្រ្តទីមួយ ចូរយើងផ្ទុកស្គ្រីបទាំង 3 នៅខាងក្រោមស្លាកតួ។
គុណសម្បត្តិ៖ HTML ត្រូវបានញែកមុនពេលស្គ្រីបត្រូវបានផ្ទុក ដូច្នេះអ្នកប្រើប្រាស់នឹងអាចឃើញខ្លឹមសារពិតប្រាកដភ្លាមៗ ជំនួសឱ្យការរង់ចាំស្គ្រីប។
ដោយសារស្គ្រីបទាំងអស់ត្រូវបានប្រតិបត្តិបន្ទាប់ពី HTML ត្រូវបានញែក ពួកគេទាំងអស់អាចចូលប្រើ DOM សម្រាប់ប្រភេទនៃឧបាយកលណាមួយ។ លំដាប់នៃការប្រតិបត្តិស្គ្រីបត្រូវបានរក្សាទុក។
គុណវិបត្តិ៖
មិនមានការទទួលបានលទ្ធផលដូចនោះទេ។
វិធីសាស្រ្ត-3 [ដោយប្រើគុណលក្ខណៈ Async]
HTML5 បានណែនាំគុណលក្ខណៈស្គ្រីប async ដែលជួយក្នុងការផ្ទុកឯកសារស្គ្រីបដែលសមស្របស្របគ្នានឹងស្ទ្រីមផ្សេងទៀតដោយមិនប៉ះពាល់ដល់ការញែក HTML ។
ទោះជាយ៉ាងណាក៏ដោយ ស្គ្រីបដែលត្រូវគ្នានឹងត្រូវបានញែក និងប្រតិបត្តិភ្លាមៗនៅពេលដែលវាបញ្ចប់ការផ្ទុក ថាតើការញែក HTML បានបញ្ចប់ឬអត់ ហើយនឹងយោងធាតុ DOM ដល់ចំណុចជាក់លាក់នោះ។
នៅទីនេះអ្នកអាចមើលឃើញយ៉ាងច្បាស់ថា file2.js ត្រូវបានផ្ទុកមុនពេលឯកសារ HTML ។ ទោះយ៉ាងណាក៏ដោយ ខណៈពេលដែលកម្មវិធីរុករកកំពុងផ្ទុកឯកសារ 2 វាមិនផ្អាកការញែក HTML ហើយដោយសារតែវានៅពេលដែលវាត្រូវបានប្រតិបត្តិ វាមានតំណភ្ជាប់ទៅកាន់កន្លែងដាក់ html ដើម្បីបញ្ចូលមាតិកាថាមវន្ត។
គុណសម្បត្តិ៖ ដោយសារស្គ្រីបត្រូវបានផ្ទុកនៅលើខ្សែស្រឡាយផ្សេង ការញែក HTML នឹងមិនត្រូវបានផ្អាកទេ ហើយអ្នកប្រើប្រាស់នឹងអាចឃើញខ្លឹមសារភ្លាមៗជំនួសឱ្យអេក្រង់ទទេពណ៌ស។ ការកើនឡើងនៃការអនុវត្តសំខាន់ ពោលគឺពេលវេលានៃការផ្ទុក DOMContent បានថយចុះពី 47.68 វិនាទីមកត្រឹមតែ 21.12 វិនាទី ហើយគឺ ~ 55% នៃការកើនឡើង។
គុណវិបត្តិ៖
លំដាប់ប្រតិបត្តិ JS មិនត្រូវបានរក្សាទុកទេ។ វាត្រូវបានប្រតិបត្តិក្នុងលំដាប់ផ្ទុកត្រឹមត្រូវ មិនមែនជាលំដាប់ស្គ្រីបដែលបានរួមបញ្ចូលនៅក្នុង HTML នោះទេ។ ជំនួយកម្មវិធីរុករកតាមអ៊ីនធឺណិត - មិនត្រូវបានគាំទ្រនៅលើកម្មវិធីរុករកតាមអ៊ីនធឺណិតចាស់ៗ ពោលគឺ IE 9 និងខាងក្រោម។
តើមានអ្វីកើតឡើងប្រសិនបើ JS ត្រូវបានផ្ទុកមុនពេលធាតុ DOM អាចប្រើបាន? កំហុសនឹងត្រូវបានបោះចោល។
ចំណាំ៖ ការដាក់ស្គ្រីបជាមួយនឹងគុណលក្ខណៈ async នៅផ្នែកខាងក្រោមនៃផ្នែកតួនឹងគ្មានប្រយោជន៍ និងស្មើនឹង Approach-2។
វិធីសាស្រ្ត-4 [ដោយប្រើគុណលក្ខណៈពន្យារ]
គុណលក្ខណៈ Defer នឹងធ្វើឱ្យស្គ្រីបត្រូវបានប្រតិបត្តិតែបន្ទាប់ពីការញែក HTML ត្រូវបានបញ្ចប់។ ចំណុចសំខាន់មួយដែលត្រូវចងចាំនៅទីនេះគឺថា Chrome មិនទាន់គាំទ្រការពន្យាពេល និងមិនមានផលប៉ះពាល់លើរយៈពេលនៃ DOMContentLoaded ទេ។ ទោះយ៉ាងណាក៏ដោយ វាដំណើរការស្គ្រីបនៅចុងបញ្ចប់នៃការញែក HTML ។
គុណសម្បត្តិ៖
លំដាប់នៃការនាំចូលស្គ្រីបត្រូវបានរក្សាទុក។ ដូច្នេះ file3.js ត្រូវបានប្រតិបត្តិតែបន្ទាប់ពីការទាញយកបានបញ្ចប់ ហើយ file1 ត្រូវបានប្រតិបត្តិ ទោះបីជា file3 ត្រូវបានផ្ទុកមុនក៏ដោយ។
ការគាំទ្រកម្មវិធីរុករក - វាមានការគាំទ្រកម្មវិធីរុករកប្រសើរជាងបើប្រៀបធៀបទៅនឹងគុណលក្ខណៈ async ពោលគឺវាត្រូវបានគាំទ្រដោយផ្នែកនៅក្នុង IE v6-9
ស្គ្រីបអាចចូលប្រើ DOM ចាប់តាំងពីវាត្រូវបានប្រតិបត្តិបន្ទាប់ពី HTML ពេញលេញត្រូវបានញែក។
គុណវិបត្តិ៖
ដើមឡើយខ្ញុំគិតថាការពន្យាពេលជាជម្រើសប្រសើរជាងការធ្វើសមកាលកម្ម ប៉ុន្តែក្រោយមកបានរកឃើញថា Chrome មិនទាន់គាំទ្រវានៅឡើយ [កំណែ 71.0.3578.98] និងមិនមានឥទ្ធិពលលើរយៈពេល DOMContentLoaded ទេ។
ទោះយ៉ាងណាក៏ដោយ វាដំណើរការដូចការរំពឹងទុកនៅក្នុង Firefox ជាមួយនឹងការធ្វើឱ្យប្រសើរឡើងនូវការអនុវត្តដ៏សំខាន់។
ការសន្និដ្ឋាន
វាជាការប្រសើរក្នុងការដាក់ស្លាកស្គ្រីបនៅក្នុងផ្នែកក្បាលជាមួយនឹងគុណលក្ខណៈ async សម្រាប់បណ្ណាល័យភាគីទីបីដែលពឹងផ្អែកលើ Google Analytics, Google reCAPTCHA ឬអ្វីផ្សេងទៀតដែលមិនតម្រូវឱ្យមានការចូលប្រើ DOM ចាប់តាំងពីស្គ្រីបដែលត្រូវគ្នាត្រូវបានផ្ទុកស្របគ្នា ប៉ុន្តែត្រូវបានប្រតិបត្តិភ្លាមៗ .
ប្រើពន្យាពេលសម្រាប់ស្គ្រីបផ្សេងទៀតទាំងអស់ដែលបានផ្ទុកនៅក្នុងផ្នែកក្បាល ដោយសារពួកវាក៏នឹងត្រូវបានផ្ទុកស្របគ្នាដែរ ប៉ុន្តែនឹងត្រូវបានប្រតិបត្តិតែបន្ទាប់ពី HTML បានបញ្ចប់ការញែក ហើយ DOM រួចរាល់ដើម្បីចូលប្រើ / រៀបចំ។
អ្នកក៏អាចប្រើ DOMContentLoaded listener រួមបញ្ចូលគ្នានៅខាងក្នុងស្គ្រីបអសមកាល ដើម្បីដំណើរការមុខងារនៅពេលក្រោយ។ សូមទុកមតិ និងសេចក្តីសន្និដ្ឋានរបស់អ្នកនៅក្នុងមតិយោបល់ ហើយខ្ញុំនឹងរីករាយក្នុងការពិភាក្សាជាមួយអ្នក។
ស្គ្រីបដោត (JavaScript) រារាំងការផ្ទុកកូដ HTML ។ នៅពេលដែលកម្មវិធីរុករក (ញែក) ទៅដល់ស្លាក
