History

localizeflow[bot] 388926566b chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)		4 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 243 changes)	4 months ago

README.md

គម្រោងផ្នែកបន្ថែមកម្មវិធីអ៊ិនធឺរណែត ផ្នែកទី 3៖ រៀនអំពីភារកិច្ចផ្ទៃក្រោយ និងប្រសិទ្ធភាព

journey
    title ដំណើរការបង្កើនប្រសិទ្ធភាពរបស់អ្នក
    section មូលដ្ឋាន
      រៀនឧបករណ៍រុករក: 3: Student
      យល់ដឹងអំពីការពិនិត្យសក្តានុពល: 4: Student
      កំណត់ចំណុចចំណាស់: 4: Student
    section តម្រូវលក្ខណៈពិសេសបន្ថែម
      បង្កើតប្រព័ន្ធពណ៌: 4: Student
      បង្កើតបេសកកម្មផ្ទៃខាងក្រោយ: 5: Student
      កែប្រែរូបតំណាងឯករាជ្យ: 5: Student
    section បង្កើនប្រសិទ្ធភាព
      តាមដានប្រសិទ្ធភាព: 5: Student
      វាយតម្លៃបញ្ហា: 4: Student
      ពង្រឹងបទពិសោធនា: 5: Student

ធ្លាប់សួរថាអ្វីជាហេតុផលដែលធ្វើឲ្យកម្មវិធីបន្ថែមក្នុងកម្មវិធីរុករកបន្ទាប់មកមានអារម្មណ៍រហ័សនិងឆាប់តបទៅកាន់អ្នកប្រើ ខណៈដែលផ្សារមួយចំនួនដូចជាកម្មវិធីបន្ថែមមួយចំនួនផ្សេងទៀតហាក់ដូចធ្វើបានយឺត? អត្ថន័យសំខាន់គឺនៅក្នុងអ្វីដែលកំពុងកើតឡើងនៅពីក្រោយពិដាន។ ខណៈពេលអ្នកប្រើចុចជុំវិញចង្កេះរបស់កម្មវិធីបន្ថែមរបស់អ្នក មានពិភពលោកមួយតូចមួយកំពុងគ្រប់គ្រងដូចជា ការទាញយកទិន្នន័យ ការអាប់ដេតរូបតំណាង និងធនធានប្រព័ន្ធពេញលេញ។

នេះគឺជម្រើសចុងក្រោយរបស់យើងក្នុងលំហាត់បណ្ដុំកម្មវិធីបន្ថែមរុករក ហើយយើងនឹងធ្វើឲ្យកម្មវិធីតាមដានស្នាមកាបូនរបស់អ្នកដំណើរការយ៉ាងរលូន។ អ្នកនឹងបន្ថែមការអាប់ដេតរូបតំណាងឲ្យផ្លាស់ប្តូរនិងរៀនពីរបៀបដើម្បីរកឃើញបញ្ហាប្រសិទ្ធភាពមុនពេលពួកវាក្លាយទៅជាបញ្ហាធំបំផុត។ វាដូចជាការតម្លើងរថយន្តប្រណាំងមួយ - ការប្រសើរជាងតិចតួចអាចបង្កើតភាពខុសគ្នាយ៉ាងច្រើនក្នុងរបៀបដំណើរការរបស់គ្រប់យ៉ាង។

ពេលដែលយើងបញ្ចប់ អ្នកនឹងមានកម្មវិធីបន្ថែមដែលត្រូវបានដាក់ស្នូលស្អាត និងយល់ដឹងពីគោលការណ៍ប្រសិទ្ធភាពដែលបំបែកកម្មវិធីវេបល្អពីកម្មវិធីវេបដ៏អស្ចារ្យ។ មកធ្វើដំណើរចូលទៅក្នុងពិភពការបង្កើតកម្មវិធីល្បឿនលឿនរបស់កម្មវិធីរុករក។

ផ្ទៀងផ្ទាត់មុនហ្វឹកហាត់

ចំណាំងមុខ

ក្នុងមេរៀនមុនៗនេះ អ្នកបានបង្កើតបែបបទមួយ ក្នុងការតភ្ជាប់វាជាមួយ API ហើយបានដោះស្រាយការទាញយកទិន្នន័យដោយអាស៊ីងក្រោន។ កម្មវិធីបន្ថែមរបស់អ្នកកំពុងមានរូបរាងល្អ។

ឥឡូវនេះយើងត្រូវបន្ថែមការផុសម៉ុខចុងក្រោយ - ដូចជាធ្វើឲ្យរូបតំណាងកម្មវិធីបន្ថែមផ្លាស់ប្ដូរពណ៌ទៅតាមទិន្នន័យកាបូន។ នេះបង្វិលខ្ញុំឲ្យគិតពីរបៀបដែល NASA ត្រូវបានលំអងគ្រប់ប្រព័ន្ធនៅលើយានអាកាស Apollo។ ពួកគេមិនអាចបាត់បង់សម្ភារៈដូចប៉ះស្មើឬម៉ោម៉ារបស់ឆ្នាំងបានទេ ព្រោះជីវិតពឹងផ្អែកលើប្រសិទ្ធភាព។ ខណៈដែលកម្មវិធីបន្ថែមរុករករបស់យើងមិនដែលសំខាន់ដូច្នេះទេ គោលការណ៍ដដែលត្រូវបានអនុវត្ត - កូដដំណើរការយ៉ាងមានប្រសិទ្ធភាពបង្កើតបទពិសោធន៍អ្នកប្រើល្អជាង។

mindmap
  root((កំហুভត្ដិភាព និង ការងារផ្ទៃក្រោយ))
    Browser Performance
      Rendering Pipeline
      Asset Optimization
      DOM Manipulation
      JavaScript Execution
    Profiling Tools
      Developer Tools
      Performance Tab
      Timeline Analysis
      Bottleneck Detection
    Extension Architecture
      Background Scripts
      Content Scripts
      Message Passing
      Icon Management
    Optimization Strategies
      Code Splitting
      Lazy Loading
      Caching
      Resource Compression
    Visual Feedback
      Dynamic Icons
      Color Coding
      Real-time Updates
      User Experience

មូលដ្ឋានប្រសិទ្ធភាពវេប

ពេលដែលកូដរបស់អ្នកដំណើរការយ៉ាងមានប្រសិទ្ធភាព មនុស្សអាចប្រាកដថា មានអារម្មណ៍ មើលឃើញភាពខុសគ្នា។ អ្នកស្គាល់ពេលដែលទំព័រត្រូវបានផ្ទុកភ្លាមៗ ឬតួអនុភាពរីករាយដោយរលូនមែនទេ? នេះគឺជាប្រសិទ្ធភាពល្អនៅពេលធ្វើការងារ។

ប្រសិទ្ធភាពមិនត្រឹមតែជាអំពីល្បឿនទេ - វាអំពីការធ្វើឲ្យបទពិសោធន៍វេបមានអារម្មណ៍ធម្មជាតិនៅវិញ និង មិនរញ្ជួយ ឬធ្វើឲ្យចំរូងចំរាស។ នៅក្នុងថ្ងៃដើមនៃការគណនា Grace Hopper បានរក្សារូបភាពនៃ nanosecond (ខ្សែប្លង់ប្រហែលមុខជើងមួយផ្ទាល់) នៅលើតុរបស់នាងដើម្បីបង្ហាញពីចម្ងាយចេញចូលរបស់ពន្លឺក្នុង១សិន្តីភាគពីរមួយពាន់លានៃវិនាទី។ វាជារបៀបរបស់នាងក្នុងការពន្យល់ថាផ្ទាល់រាល់មីលីវិនាទីមានសារៈសំខាន់ក្នុងការគណនា។ មកស្វែងយល់ពីឧបករណ៍កាន់តំណាងដែលជួយអ្នករកឃើញថាអ្វីជារឿងធ្វើឲ្យយឺត។

"ប្រសិទ្ធភាពគេហទំព័រអំពីរប្រធានបទ៖ តើទំព័រផ្ទុករហ័សប៉ុណ្ណា និងតើកូដនៅលើវាដំណើរការប្រសិទ្ធប៉ុណ្ណា។" -- Zack Grossbart

ប្រធានបទអំពីរបៀបទៅធ្វើឲ្យគេហទំព័ររបស់អ្នកលឿនខ្លាំងនៅលើឧបករណ៍គ្រប់ប្រភេទ សម្រាប់អ្នកប្រើគ្រប់ប្រភេទ គ្រប់ស្ថានភាព គឺធំ និងពេញលេញប្រហែល។ មុនពេលបង្កើតគម្រោងវេបស្តង់ដារ ឬកម្មវិធីបន្ថែមរុករក សូមចងចាំចំណុចខាងក្រោម។

ជំហានដំបូងក្នុងការចុះសម្រួលគេហទំព័ររបស់អ្នកគឺយល់ដឹងអំពីអ្វីកំពុងកើតឡើងក្នុងផ្ទៃក្រោយ។ សំណាងល្អ គេហទំព័ររបស់អ្នកមានឧបករណ៍កាន់តំណាងដ៏មានអំណាចជាផ្នែកមួយក្នុងខ្លួនវា។

flowchart LR
    A[HTML] --> B[វិភាគ]
    B --> C[ដើមឈើ DOM]
    D[CSS] --> E[វិភាគ]
    E --> F[CSSOM]
    G[JavaScript] --> H[អនុវត្ត]
    
    C --> I[ដើមឈើបង្ហាញ]
    F --> I
    H --> I
    
    I --> J[ផែនការ]
    J --> K[គំនូរ]
    K --> L[ផ្សំ]
    L --> M[បង្ហាញ]
    
    subgraph "ផ្លូវបង្ហាញសំខាន់"
        N["1. វិភាគ HTML"]
        O["2. វិភាគ CSS"]
        P["3. អនុវត្ត JS"]
        Q["4. បង្កើតដើមឈើបង្ហាញ"]
        R["5. ផែនការធាតុ"]
        S["6. គំនូរ ភិចសែល"]
        T["7. ផ្សំស្រទាប់"]
    end
    
    style M fill:#e8f5e8
    style I fill:#fff3e0
    style H fill:#ffebee

ដើម្បីបើកឧបករណ៍អ្នកអភិវឌ្ឍនៅ Edge ចុចលើចំណុចបីនៅជុំខាងលើភាគផ្ដើមខាងស្ដាំ បន្ទាប់មកចូលទៅ More Tools > Developer Tools។ ឬប្រើផ្លូវកាត់ក្តារចុច Ctrl + Shift + I នៅ Windows ឬ Option + Command + I នៅ Mac។ ពេលអ្នកឈានដល់ទីនោះ សូមចុចលើផ្ទាំង Performance - នេះជាទីតាំងដែលអ្នកនឹងធ្វើស៊ើបអង្កេត។

នេះជាឧបករណ៍កាន់តំណាងប្រសិទ្ធភាពរបស់អ្នក៖

បើក Developer Tools (អ្នកនឹងប្រើវានៅជាទៀងទាត់ឲ្យក្លាយជាអ្នកអភិវឌ្ឍ!)
ចូល ទៅផ្ទាំង Performance - គិតថាវាជាត្រីក្រោកកាយសម្បទារបស់កម្មវិធីវេបរបស់អ្នក
ចុច ប៊ូតុង Record ហើយមើលទំព័ររបស់អ្នកដំណើរការ
សិក្សា លទ្ធផលដើម្បីរកឃើញអ្វីជារឿងធ្វើឲ្យយឺត

យើងមកសាកល្បង៖ បើកគេហទំព័រមួយ (Microsoft.com ធ្វើបានល្អសម្រាប់នេះ) ហើយចុចប៊ូតុង 'Record'។ ឥឡូវរុញទំព័រឡើងវិញ ហើយមើលអ្នកបញ្ជាបូវរូបភាពកែច្នៃអ្វីៗកើតឡើង។ ពេលអ្នកឈប់ថត អ្នកនឹងឃើញការបង្ហាញលម្អិតនៃរបៀបដែលកម្មវិធីរុករក 'ស្គ្រីប', 'បង្ហាញ' និង 'គំនូរ' ទំព័រ។ វាប្រហែលដូចជាជំនួយការផ្ដល់ដំណឹងពេលផ្ដួលផ្កាយផ្ទាល់ - អ្នកទទួលបានទិន្នន័យពេលវេលាពិតប្រាកដនៃអ្វីកំពុងកើតឡើង និងពេលវេលា។

✅ ឯកសារ Microsoft មានព័ត៌មានលម្អិតច្រើនបើអ្នកចង់ស្វែងយល់ជម្រៅ។

យ៉ាងណាក្តី៖ សូមសំអាតឃ្លាំងប្រវត្តិរក្សារបស់អ្នកមុនសាកល្បង ដើម្បីមើលថាតើគេហទំព័ររបស់អ្នកដំណើរការយ៉ាងដូចម្តេចសម្រាប់ភ្ញៀវថ្មី - វាធម្មតាប្រែប្រួលខុសគ្នាពីការមកម្តងទីពីរ!

ជ្រើសរើសធាតុមួយនៃរបារពេលវេលាសម្រាប់ពង្រីកមើលព្រឹត្តិការណ៍កើតឡើងពេលទំព័ររបស់អ្នកផ្ទុក។

ទទួលបានរូបថតសង្ខេបនៃប្រសិទ្ធភាពទំព័ររបស់អ្នកដោយជ្រើសរើសផ្នែកមួយក្នុងរបារពេលវេលា ហើយមើលផ្ទាំងសង្ខេប៖

ពិនិត្យផ្ទាំងកំណត់ហេតុព្រឹត្តិការណ៍ (Event Log) ដែលមើលថាតើមានព្រឹត្តិការណ៍ណាមួយដែលប្រើពេលលើស ១៥ មីលិវិនាទីទេ៖

✅ សូមស្គាល់អ្នកបញ្ជាបូវរូបភាពរបស់អ្នក! បើកឧបករណ៍អ្នកអភិវឌ្ឍនៅលើវេបសាយនេះ ហើយមើលថាតើមានបញ្ហាទីណាលឿយឬទេ។ តើវត្ថុដែលផ្ទុកយឺតបំផុតគឺអ្វី? លឿនបំផុត?

flowchart TD
    A[បើក DevTools] --> B[បើកទៅផ្ទាំងប្រតិបត្តិការ]
    B --> C[ចុចប៊ូតុងថតតារាង]
    C --> D[អនុវត្តសកម្មភាព]
    D --> E[បញ្ឈប់ការថត]
    E --> F{វិភាគលទ្ធផល}
    
    F --> G[ពិនិត្យពេលវេលា]
    F --> H[ពិនិត្យបណ្ដាញ]
    F --> I[ពិនិត្យស្គ្រីប]
    F --> J[កំណត់ព្រឹត្តិការណ៍គូរ]
    
    G --> K{មានភារកិច្ចវែង?}
    H --> L{ទ្រព្យសម្បត្តិធំ?}
    I --> M{រាំងស្ទះការបង្ហាញ?}
    J --> N{គូរពណ៌ថ្លៃថ្នូរ?}
    
    K -->|បាទ| O[បង្កើត JavaScript ដោយប្រសើរ]
    L -->|បាទ| P[បង្រួមទ្រព្យសម្បត្តិ]
    M -->|បាទ| Q[បន្ថែម Async/Defer]
    N -->|បាទ| R[សម្រួល ស្ទីល]
    
    O --> S[សាកល្បងម្តងទៀត]
    P --> S
    Q --> S
    R --> S
    
    style A fill:#e1f5fe
    style F fill:#fff3e0
    style S fill:#e8f5e8

តើត្រូវមើលអ្វីពេលប្រើប្រាស់ profiler

ការបង្កើត profiler គ្រាន់តែជាចំណុចចាប់ផ្តើមប៉ុណ្ណោះ - ជំនាញពិតប្រាកដគឺការយល់ថាតារាងពណ៌ចម្រុះទាំងនោះនិយាយអ្វី។ កុំបារម្ភ អ្នកនឹងចេះបកអានវា។ អ្នកអភិវឌ្ឍជាញឹកញាប់បានរៀនគេចចេញពីសញ្ញាព្រមានមុនពេលវាក្លាយជាបញ្ហាធំ។

យើងនឹងនិយាយពីមេដៃបញ្ហាប្រសិទ្ធភាពនៅលើគេហទំព័រ ដែលជាទម្លាប់សំខាន់ៗក្នុងគម្រោងវេប។ ដូចជា Marie Curie ត្រូវតែតាមដានកម្រិតកាំរស្មីយ៉ាងប្រុងប្រយ័ត្នក្នុងបន្ទប់ប្រើប្រាស់របស់នាង យើងត្រូវតែតាមដានបំពានមួយចំនួនដែលបង្ហាញថាបញ្ហាកំពុងកើត។ ការចាប់បញ្ហាទាំងនេះមុនគឺជាជំនួយធំសម្រាប់អ្នក និងអ្នកប្រើរបស់អ្នក។

ទំហំទ្រព្យសម្បត្តិ៖ គេហទំព័របានធ្លាប់ក្លាយងាប់ធ្ងន់ជាងមុនរយៈពេលប៉ុន្មានឆ្នាំ ហើយទំងន់បន្ថែមច្រើនគឺមកពីរូបភាព។ វាត្រូវបានប្រៀបដូចជាការផ្ទុកវត្ថុបន្ថែមច្រើនសម្រាប់កាបូបឌីជីថលរបស់យើង។

✅ ចូលទៅកាន់ Internet Archive ដើម្បីមើលនូវការកើនឡើងទំហំទំព័រជាចន្លោះពេលវេលា - វាលម្អិតនិងចេះចាំ។

នេះជាវិធីរក្សាទ្រព្យសម្បត្តិរបស់អ្នកឲ្យមានប្រសិទ្ធភាព៖

បង្រួមបង្ហាប់ រូបភាពទាំងនេះ! រូបមន្តទំនើបដូចជា WebP អាចកាត់បន្ថយទំហំឯកសារបានយ៉ាងខ្លាំង
ផ្តល់ ទំហំរូបភាពត្រូវសម្រាប់ឧបករណ៍នីមួយៗ - មិនចាំបាច់ផ្ញើរូបភាពក្រៅតុធំៗទៅទូរស័ព្ទ
រក្សា កូដ CSS និង JavaScript ឲ្យតូចបំផុត - រាល់បៃមានតម្លៃ
ប្រើ ល្បឿនយឺត (lazy loading) ដើម្បីរូបភាពទាញយកតែពេលអ្នកប្រើដេញចុចរកប៉ុណ្ណោះ

ការឆ្លងកាត់ DOM៖ កម្មវិធីរុករកត្រូវតែបង្កើតម៉ូដែលឯកសារដែលមានលំដាប់ទៅតាមកូដដែលអ្នកសរសេរ ដូច្នេះវាល្អណាស់ក្នុងការរក្សាទំនាក់ទំនងណែនាំគេហទំព័រក្នុងកម្រិតតិចបំផុតដោយប្រើតែវត្ថុដែលចាំបាច់ និងបូកបន្ថែមរចនាប័ទ្មត្រឹមត្រូវតែសម្រាប់ទំព័រមួយច្បាស់លាស់។

យុទ្ធសាស្ត្រចម្បងសម្រាប់ជំរុញ DOM៖

កាត់បន្ថយ ចំនួនធាតុ HTML និងកម្រិតបញ្ចូលគ្នា
យកចេញ បទបញ្ជា CSS មិនប្រើ និងបញ្ចូលស្ទាយជាសាំងៗប្រកបដោយប្រសិទ្ធភាព
រៀបចំ CSS ដើម្បីផ្ទុកតែអ្វីដែលត្រូវការពេលទំព័រនីមួយៗ
រចនាសម្ព័ន្ធ HTML ជាផ្លូវការសម្រាប់ការវិភាគរបស់កម្មវិធីរុករកល្អប្រសើរ

JavaScript៖ អ្នកអភិវឌ្ឍជាច្រើនគួរតែប្រយ័ត្ន scripts ដែលបង្ហាញរាំងខ្ទប់ (« render-blocking ») ដែលត្រូវតែផ្ទុកមុនពេល DOM អាចត្រូវបានតភ្ជាប់និងគូរអោយមាននៅលើកម្មវិធីរុករក។ សូមពិចារណាប្រើ defer ជាមួយតួអក្សរ inline scripts (ដូចជា module Terrarium)។

និរន្តរភាពកូដ JavaScript បែបប្រើប្រាស់សម័យថ្មី៖

ប្រើ អត្ថបទ defer ដើម្បីផ្ទុក scripts បន្ទាប់ពី DOM ច្រាសត្រូវបានបញ្ចប់
អនុវត្ត ការចែកកូដ (code splitting) ដើម្បីផ្ទុក JavaScript ត្រឹមត្រូវតែប៉ុណ្ណោះ
អនុវត្ត ល្បឿនយឺតសម្រាប់មុខងារមិនសំខាន់
កាត់បន្ថយ ការប្រើប្រាស់បណ្ណាល័យ និងស៊ុមខ្លីក្រែនធ្វើបណ្តាញដល់តិចបំផុត

✅ សាកល្បងគេហទំព័រខ្លះៗជាមួយ គេហទំព័រប្រឡងល្បឿនតំណ ដើម្បីរៀនពីការត្រួតពិនិត្យទូទៅដែលធ្វើឡើងដើម្បីវាយតម្លៃប្រសិទ្ធភាពគេហទំព័រ។

🔄 ពិនិត្យជាមួយគ្រូបង្រៀន

យល់ដឹងអំពីប្រសិទ្ធភាព៖ មុនពេលសង់មុខងារកម្មវិធីបន្ថែម សូមប្រាកដថាអ្នកអាច៖

✅ ពន្យល់ពីផ្លូវកំណត់បង្ហាញពី HTML ទៅ pixels
✅ សម្គាល់បញ្ហាប្រសិទ្ធភាពទូទៅនៅក្នុងកម្មវិធីវេប
✅ ប្រើឧបករណ៍អភិវឌ្ឍកម្មវិធីរុករកក្នុងការវាយតម្លៃប្រសិទ្ធភាពទំព័រ
✅ យល់ពីរបៀបដែលទំហំទ្រព្យសម្បត្តិ និងភាពស្មុគស្មាញ DOM នាំឲ្យល្បឿនរំលស់

តេស្ដមុខឯងឆាប់ៗ៖ តើមានអ្វីកើតឡើងពេលដែលមាន JavaScript ដែលរាំងខ្ទប់ការបង្ហាញ? ចម្លើយ៖ កម្មវិធីរុករកត្រូវតែទាញយក និងដំណើរការតួស្គ្រីបមុនវាចាប់ផ្តើមច្រាស HTML និងបង្ហាញទំព័រ

ឥទ្ធិពលប្រសិទ្ធភាពពិតប្រាកដ៖

ពន្ធនាទី ១០០ មីលិវិនាទី៖ អ្នកប្រើគ្មានចិត្តលំហូរ
ពន្ធនាទី ១ វិនាទី៖ អ្នកប្រើចាប់ផ្តើមខ្វះកម្ពស់
៣ វិនាទីឡើងលើ៖ ៤០% អ្នកប្រើចាកចេញពីទំព័រ
បណ្ដាញទូរស័ព្ទ៖ ប្រសិទ្ធភាពមានសារៈសំខាន់ជាងមុនសម្រាប់ស្ថិតិទូរស័ព្ទ

ឥឡូវនេះដែលអ្នកមានគំនិតពីរបៀបដែលកម្មវិធីរុករកបង្ហាញទ្រព្យសម្បត្តិដែលអ្នកផ្ញើរឲ្យវា មកមើលរឿងចុងក្រោយពីរយៈពេលត្រូវធ្វើដើម្បីបញ្ចប់កម្មវិធីបន្ថែមរបស់អ្នក៖

បង្កើតមុខងារគណនាពណ៌

ឥឡូវនេះយើងនឹងបង្កើតមុខងារមួយដែលបម្លែងទិន្នន័យចំនួនទៅជាពណ៌មានន័យ។ គិតដូចជាប្រព័ន្ធសញ្ញាអំពីចរាចរណ៍ - ពណ៌បៃតងសម្រាប់ថាមពលស្អាត ពណ៌ក្រហមសម្រាប់កាបូនធ្ងន់។

មុខងារនេះនឹងទទួលទិន្នន័យ CO2 ពី API របស់យើង ហើយកំណត់ថាពណ៌ណាដែលបង្ហាញផលប៉ៈពាល់បរិស្ថានល្អបំផុត។ វាគឺដូចជាទីបញ្ជូនពណ៌ដែលអ្នកវិទ្យាសាស្ត្រប្រើប្រាស់នៅផែនទីកម្តៅដើម្បីបង្ហាញលំនាំទិន្នន័យស្មុគស្មាញ - ចាប់ពីសីតុណ្ហភាពសមុទ្រ រហូតដល់ការបង្កើតផ្កាយ។ អ្នកបូកបន្ថែមវានៅ /src/index.js ទីហើយបន្ទាប់ពីបញ្ជាក់តួអក្សរ const ដែលបានរៀបចំរួច:

flowchart LR
    A[តម្លៃ CO2] --> B[រកចំណុចស្កេលជិតបំផុត]
    B --> C[ទទួលបានលេខសម្គាល់ស្កេល]
    C --> D[ផ្គូរផ្គងទៅពណ៌]
    D --> E[ផ្ញើទៅផ្ទៃខាងក្រោយ]
    
    subgraph "វដ្តពណ៌"
        F["0-150: បៃតង (ស្អាត)"]
        G["150-600: លឿង (មធ្យម)"]
        H["600-750: ពណ៌ទឹកក្រូច (ខ្ពស់)"]
        I["750+: ពណ៌ត្នោត (ខ្ពស់ណាស់)"]
    end
    
    subgraph "ការផ្ញើសារជាប្រព័ន្ធ"
        J[ស្គ្រីប្តខ្លឹមសារ]
        K[chrome.runtime.sendMessage]
        L[ស្គ្រីប្តផ្ទៃខាងក្រោយ]
        M[ធ្វើបច្ចុប្បន្នភាពរូបតំណាង]
    end
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style E fill:#fff3e0

function calculateColor(value) {
	// កំណត់លំដាប់ភាពខ្លាំង CO2 (ក្រាមក្នុងមួយគីឡូវអត់ម៉ោម៉៉ោម៉៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉ោម៉៉
	const co2Scale = [0, 150, 600, 750, 800];
	// Corresponding colors from green (clean) to dark brown (high carbon)
	const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];

	// Find the closest scale value to our input
	const closestNum = co2Scale.sort((a, b) => {
		return Math.abs(a - value) - Math.abs(b - value);
	})[0];
	
	console.log(`${value} is closest to ${closestNum}`);
	
	// Find the index for color mapping
	const num = (element) => element > closestNum;
	const scaleIndex = co2Scale.findIndex(num);

	const closestColor = colors[scaleIndex];
	console.log(scaleIndex, closestColor);

	// Send color update message to background script
	chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}

ចែកវាឲ្យយល់ល្អពីមុខងារល្អនេះ៖

កំណត់ អារេពីរដុំ - មួយសម្រាប់កម្រិត CO2 មួយសម្រាប់ពណ៌ (បៃតង = ស្អាត, ស្វាយ = ប្រេង!)
ស្វែងរក ការផ្គូផ្គងសៀរីដូចជាតម្លៃ CO2 ពិតប្រាកដដោយប្រើការតម្រៀបអារេព្រមទាំង
ទទួលយក ពណ៌ផ្គូផ្គងដោយប្រើមុខងារ findIndex()
ផ្ញើ សារទៅកាន់ script ផ្ទៃក្រោយរបស់ Chrome ជាមួយពណ៌ដែលបានជ្រើសរើស
ប្រើប្រាស់ template literals (សញ្ញាក្នុងតួសញ្ញាទាំងពីរពីលើ) សម្រាប់រៀបចំខ្សែអក្សរបានស្អាត
រក្សា រៀបចំទាំងអស់ដោយ const

chrome.runtime API គឺដូចប្រព័ន្ធប្រសាសន៍នៃកម្មវិធីបន្ថែមរបស់អ្នក - វាគ្រប់គ្រងការទំនាក់ទំនងនៅពីក្រោយ និងភារកិច្ចទាំងអស់៖

"ប្រើ chrome.runtime API ដើម្បីទាញយកទំព័រផ្ទៃក្រោយ យកព័ត៌មានពី manifest ហើយស្តាប់និងឆ្លើយតបដល់ព្រឹត្តិការណ៍ក្នុងជីវចលកម្មកម្មវិធីឬកម្មវិធីបន្ថែម។ អ្នកអាចប្រើ API នេះដើម្បីបម្លែងផ្លូវរួមគ្នា URLs ទៅជា URLs ពេញលេញបានផង។"

ហេតុអ្វីបានជា Chrome Runtime API មានប្រយោជន៍:

អនុញ្ញាតឲ្យ ផ្នែកផ្សេងៗនៃកម្មវិធីបន្ថែមនិយាយគ្នា
គ្រប់គ្រង ការងារផ្ទៃក្រោយដោយគ្មានបញ្ហាកិច្ចការពាក់ព័ន្ធ UI
គ្រប់គ្រង ព្រឹត្តិការណ៍ជីវចលកម្មកម្មវិធីបន្ថែម
ធ្វើឲ្យ ការផ្ញើសាររវាង script งាយស្រួលណាស់

✅ ប្រសិនបើអ្នកកំពុងអភិវឌ្ឍកម្មវិធីបន្ថែមរុករកសម្រាប់ Edge អាចធ្វើអោយអ្នកភ្ញាក់ផ្អើលថាអ្នកកំពុងប្រើ chrome API។ កម្មវិធីរុករក Edge ជំនាន់ថ្មីរត់លើម៉ាស៊ីន Chromium ដូច្នេះអ្នកអាចប្រើឧបករណ៍ទាំងនេះបាន។

architecture-beta
    group browser(logos:chrome)[កម្មវិធីរុករក]
    
    service popup(logos:html5)[ផ្ទាំងបង្ហាញ Popup UI] in browser
    service content(logos:javascript)[កូដខ្មែរ Content Script] in browser
    service background(database)[កូដផ្ទៃខាងក្រោយ Background Script] in browser
    service api(logos:api)[API ខាងក្រៅ External API] in browser
    
    popup:R -- L:content
    content:R -- L:background
    background:T -- B:api
    content:T -- B:api
    
    junction junctionCenter in browser
    popup:R -- L:junctionCenter
    junctionCenter:R -- L:background

ជំរើសពិសេស៖ ប្រសិនបើអ្នកចង់ប្រើ profiler សម្រាប់កម្មវិធីបន្ថែមរុករក សូមបើក dev tools ពីក្នុងកម្មវិធីបន្ថែមដោយផ្ទាល់ទៅមក មុនពេលដំណើរការប្រៀបដូចជាកម្មវិធីរុករកឯករាជ្យ។ វាជួយឲ្យអ្នកបង្កើតសន្ទស្សន៍ប្រសិទ្ធភាពក្នុងកម្មវិធីបន្ថែម។

កំណត់ពណ៌រូបតំណាងលំនាំដើម

មុនពេលយើងចាប់ផ្តើមទាញយកទិន្នន័យពិតប្រាកដ អ្នកណាម្នាក់មិនចូលចិត្តមើលរូបតំណាងទទេ ឬមានមុខមាត់ខូចខាតឡើយ។ យើងនឹងចាប់ផ្តើមជាមួយពណ៌បៃតង ដើម្បីឲ្យអ្នកប្រើដឹងថាកម្មវិធីបន្ថែមកំពុងដំណើរការ ពីពេលខាងកាន់ពួកគេដំឡើងវា។

ក្នុងមុខងារ init() របស់អ្នក សូមកំណត់រូបតំណាងពណ៌បៃតងលំនាំដើម៖

chrome.runtime.sendMessage({
	action: 'updateIcon',
	value: {
		color: 'green',
	},
});

អ្វីដែលការចាប់ផ្តើមនេះបានធ្វើ:

កំណត់ ពណ៌បៃតងធម្មតាជាស្ថានភាពលំនាំដើម
ផ្ដល់ ការផ្តល់មតិភ្នែកភ្លាមពេលកម្មវិធីបន្ថែមផ្ទុក
បង្កើត លំនាំទំនាក់ទំនងជាមួយ script ផ្ទៃក្រោយ
ធានា អ្នកប្រើឃើញកម្មវិធីបន្ថែមដំណើរការមុនការទាញយកទិន្នន័យ

ហៅមុខងារ ដំណើរការហៅ

ឥឡូវពីរភ្ជាប់គ្នាពីរប្រភេទ ដូច្នេះពេលដែលទិន្នន័យ CO2 ថ្មីមក អ្នកតំណាងរបស់អ្នកនឹងត្រូវអាប់ដេតដោយស្វ័យប្រវត្តិក្នុងពណ៌ត្រឹមត្រូវ។ វាដូចជាការតភ្ជាប់សៀគ្វីចុងក្រោយនៅក្នុងឧបករណ៍អេឡិចត្រូនិច - ក្រោយមកផ្នែកផ្សេងៗទាំងមូលដំណើរការជាប្រព័ន្ធតែមួយ។

បន្ថែមបន្ទាត់នេះបន្ទាប់ពីអ្នកទទួលបានទិន្ននៃ CO2 ពី API៖

// បន្ទាប់ពីទាញយកទិន្នន័យ CO2 ពី API
// អនុញ្ញាត CO2 = data.data[0].intensity.actual;
calculateColor(CO2);

ការតភ្ជាប់នេះបានធ្វើ៖

ភ្ជាប់ ដំណើរការទិន្នន័យ API ជាមួយប្រព័ន្ធសញ្ញាភ្នែក
បញ្ចូលពន្លឿន ការអាប់ដេតរូបតំណាងដោយស្វ័យប្រវត្តិពេលទិន្នន័យថ្មីមក
ធានា ការផ្តល់មតិបង្ហាញភ្នែកពេលពិតប្រាកដ អាស្រ័យលើកាបូនបច្ចុប្បន្ន
រក្សា ការបំបែកចេញពីភារកិច្ចទាញយកទិន្នន័យនិងការបង្ហាញ

ចុងក្រោយ នៅក្នុង /dist/background.js បន្ថែមកម្មវិធីស្តាប់សម្រាប់ការហៅសកម្មភាពផ្ទៃក្រោយទាំងនេះ៖

// ស្ដាប់សារពីស្គ្រីបខ្លឹមសារ
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === 'updateIcon') {
		chrome.action.setIcon({ imageData: drawIcon(msg.value) });
	}
});

// គូររូបតំណាងឌីណាមិចដោយប្រើ Canvas API
// ខ្ចីពីផ្នែកបន្ថែម energy lollipop - លក្ខណៈពិសេសល្អ!
function drawIcon(value) {
	// បង្កើតកំណាត់កង់ក្រៅអេក្រង់សម្រាប់ការអនុវត្តល្អប្រសើរ
	const canvas = new OffscreenCanvas(200, 200);
	const context = canvas.getContext('2d');

	// គូរពណ័ផ្កង់ដែលបង្ហាញពីភាពខ្លាំងកាបូន
	context.beginPath();
	context.fillStyle = value.color;
	context.arc(100, 100, 50, 0, 2 * Math.PI);
	context.fill();

	// ត្រឡប់មកវិញទិន្នន័យរូបភាពសម្រាប់រូបតំណាងម៉ាស៊ីនរកមើលវេប
	return context.getImageData(50, 50, 100, 100);
}

នេះជាអ្វីដែល script ផ្ទៃក្រោយនេះធ្វើ៖

ស្តាប់ សារពី script មេរបស់អ្នក (ដូចជាមន្រ្តីទទួលទូរស័ព្ទ)
ដំណើរការ សំណើ 'updateIcon' ដើម្បីប្ដូររូបតំណាងផ្ទាំងឧបករណ៍រុករក
បង្កើត រូបតំណាងថ្មីៗប្រើប្រាស់ Canvas API
គូរ វង់ពណ៌សាមញ្ញបង្ហាញកម្រិតកាបូនបច្ចុប្បន្ន
អាប់ដេត រូបតំណាងនៅលើផ្ទាំងឧបករណ៍រុករករបស់អ្នក
ប្រើ OffscreenCanvas សម្រាប់ប្រសិទ្ធភាពល្អ (គ្មានការរាំងស្ទាក់ UI)

✅ អ្នកនឹងរៀនបន្ថែមអំពី Canvas API នៅក្នុង មេរៀនហ្គេមអាកាស។

sequenceDiagram
    participant CS as ស្គ្រីបខ្លឹមសារ
    participant BG as ស្គ្រីបផ្ទៃខាងក្រោយ
    participant Canvas as ក្រឡាផ្ទៃក្រៅអេក្រង់
    participant Browser as រូបតំណាងរុករក
    
    CS->>BG: sendMessage({action: 'updateIcon', color})
    BG->>Canvas: new OffscreenCanvas(200, 200)
    Canvas->>Canvas: getContext('2d')
    Canvas->>Canvas: beginPath() + fillStyle + arc()
    Canvas->>Canvas: fill() + getImageData()
    Canvas->>BG: Return image data
    BG->>Browser: chrome.action.setIcon(imageData)
    Browser->>Browser: Update toolbar icon

🔄 ពិនិត្យជាមួយគ្រូបង្រៀន

យល់ដឹងកម្រិតលំដាប់សរុប នៃកម្មវិធីបន្ថែម៖ សូមបញ្ជាក់ពីជំនាញបំពេញប្រព័ន្ធទាំងមូល៖

✅ តើការផ្ញើសារ (message passing) ធ្វើការយ៉ាងដូចម្តេចក្នុងចន្លោះស្គ្រីបផ្នែកបន្ថែមផ្សេងៗ?
✅ ហេតុអ្វីយើងប្រើ OffscreenCanvas ជំនួស Canvas ទូទៅសម្រាប់អត្រាទិចថាមពល?
✅ តើ API របស់ Chrome Runtime មានតួនាទីអ្វីក្នុងសំណុំសំណង់ផ្នែកបន្ថែម?
✅ តើ algorithm គណនាពណ៌ផ្គូផ្គងទិន្នន័យទៅភាពឃើញបែបណា?

កាលៈទេសៈនៃការអនុវត្ត: ផ្នែកបន្ថែមរបស់អ្នកឥឡូវបង្ហាញពី៖

ការបញ្ជូនសារយ៉ាងប្រសើរ: ការប្រាស្រ័យទាក់ទងបរិស្ថានស្គ្រីបទាន់សម័យ
ការសម្រួលផ្នែកគំនូរ: OffscreenCanvas ជៀសវាងការរអាក់ UI
អាប់ដេតពេលវេលាពិតប្រាកដ: ការប្រែប្រួលរូបតំណាងដោយផ្អែកលើទិន្នន័យផ្ទាល់
ការគ្រប់គ្រងអង្គចងចាំ: ការសម្អាត និងដឹកជញ្ជូនធនធានត្រឹមត្រូវ

ពេលវេលាចាប់ផ្តើមសាកល្បងផ្នែកបន្ថែមរបស់អ្នក៖

បង្កើត ឯកសារទាំងអស់ជាមួយ npm run build
បញ្ចូលម្ដងទៀត ផ្នែកបន្ថែមនៅក្នុងកម្មវិធីរុករក (កុំភ្លេចជំហាននេះ)
បើក ផ្នែកបន្ថែមរបស់អ្នក ហើយសង្កេតឃើញការផ្លាស់ប្ដូរពណ៌រូបតំណាង
ពិនិត្យ វាឆ្លើយតបយ៉ាងដូចម្តេចចំពោះទិន្នន័យកាបូនពិតៗពីទូទាំងពិភពលោក

ឥឡូវនេះ អ្នកនឹងដឹងភ្លាមៗថាតើពេលនេះល្អសម្រាប់បោកបញ្ចក់ឬតើតម្រូវរង់ចាំថាមពលបរិសុទ្ធ។ អ្នកទើបតែបង្កើតអ្វីដែលមានប្រយោជន៍ពិតប្រាកដ ហើយបានរៀនអំពីការសម្របសម្រួលកម្មវិធីរុករកជាមួយនឹងដំណើរការផ្សេងៗ។

ជម្រុះ GitHub Copilot Agent 🚀

ប្រើមូដប្រាជ្ញាធិបតីដើម្បីបញ្ចប់ភារកិច្ចដូចខាងក្រោម៖

ពិពណ៌នា: បង្កើតសមត្ថភាពត្រួតពិនិត្យប្រតិបត្តិការនៃផ្នែកបន្ថែមកម្មវិធីរុករក ដោយបន្ថែមមុខងារតាមដាននិងបង្ហាញពេលវេលាដំណើរការសម្រាប់ឧបករណ៍ផ្សេងៗនៃផ្នែកបន្ថែម។

ពាក្យបញ្ជា: បង្កើតប្រព័ន្ធត្រួតពិនិត្យប្រតិបត្តិការសម្រាប់ផ្នែកបន្ថែមកម្មវិធីរុករក ដែលវាស់និងកត់ត្រាពេលវេលាស៊ើបអង្កេតទិន្នន័យ CO2 ពី API កំណត់ពណ៌ និងធ្វើអាប់ដេតរូបតំណាង។ បន្ថែមមុខងារប្រាប់ឈ្មោះ performanceTracker ដែលប្រើ Performance API ដើម្បីវាស់ការចំណាយពេលវេលានិងបង្ហាញលទ្ធផលនៅក្នុង Console របស់កម្មវិធីរុករកជាមួយពេលវេលានិងកម្រិតរយៈពេល។

សូមស្វែងយល់បន្ថែមអំពី mode agent នៅទីនេះ។

🚀 ភារកិច្ច

នេះជាបេសកកម្មពិនិត្យស្រាវជ្រាវគួរឱ្យចាប់អារម្មណ៍៖ ជ្រើសរើសគេហទំព័រមួយចំនួនដែលជា open source និងមានវត្តមានរយៈពេលវែង (គិតផ្ទៃដូចជា Wikipedia, GitHub, ឬ Stack Overflow) ហើយស្វែងរកប្រវត្តិការបញ្ជូន commit របស់ពួកវា។ តើអ្នកអាចរកឃើញកន្លែងដែលពួកគេបានធ្វើការកែលម្អប្រសិទ្ធភាព? តើមានបញ្ហាអ្វីខ្លះដែលកើតឡើងជាថ្មី?

វិធីសាស្ត្រស្រាវជ្រាវរបស់អ្នក៖

ស្វែងរក សារបញ្ជូន commit សម្រាប់ពាក្យដូចជា "optimize," "performance," ឬ "faster"
សង្កេត សំណុំបែបបទ - តើពួកគេតែងតែជួសជុលបញ្ហាបែបណា?
កំណត់ អ្នកបង្កបញ្ហារអាប់ឡូវដែលធ្វើឲ្យគេហទំព័រពិបាករហ័ស
ចែករំលែក អ្វីដែលអ្នករកឃើញ - អ្នកអភិវឌ្ឍន៍ផ្សេងទៀតអាចរៀនពីឧទាហរណ៍ពិត

ប្រលងក្រោយមេរៀន

ការពិនិត្យឡើងវិញ និងរៀនផ្ទាល់ខ្លួន

ពិចារណាចុះឈ្មោះសារព័ត៌មាន performance newsletter

ស្វែងយល់ពីវិធីដែលកម្មវិធីរុករកវាស់ប្រតិបត្តិការបណ្តាញដោយមើលតាមរយៈភាគ Performance ក្នុងឧបករណ៍អភិវឌ្ឍន៍របស់ពួកវា។ តើអ្នកឃើញភាពខុសគ្នាធំៗណាមួយទេ?

⚡ អ្វីដែលអ្នកអាចធ្វើក្នុង ៥ នាទីបន្ទាប់

បើកកម្មវិធី Task Manager របស់កម្មវិធីរុករក (Shift+Esc នៅក្នុង Chrome) ដើម្បីមើលការប្រើធនធានរបស់ផ្នែកបន្ថែម
ប្រើ DevTools ផ្នែក Performance ដើម្បីថតនិងវិភាគប្រតិបត្តិការទំព័រស្ក្រីត
ពិនិត្យទំព័រ Extensions នៃកម្មវិធីរុករកដើម្បីឃើញផ្នែកបន្ថែមដែលប៉ះពាល់ដល់ពេលចាប់ផ្តើម
សាកល្បងផិទៅមុខផ្នែកបន្ថែមបណ្តោះអាសន្ន ដើម្បីមើលភាពខុសគ្នានៃផលិតភាព

🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងម៉ោងនេះ

បញ្ចប់ប្រលងក្រោយមេរៀន និងយល់ដឹងពីគំនិតផលិតភាព
អនុវត្តស្គ្រីបផ្នែកខាងក្រោយសម្រាប់ផ្នែកបន្ថែមកម្មវិធីរុករករបស់អ្នក
រៀនប្រើ browser.alarms សម្រាប់បេសកកម្មផ្នែកខាងក្រោយប្រសើរ
អនុវត្តការផ្ញើសារពីស្គ្រីបមាតិកាទៅស្គ្រីបផ្នែកខាងក្រោយ
វាស់និងធ្វើអប្បបរមាអង្គធនធានរបស់ផ្នែកបន្ថែមរបស់អ្នក

📅 ការធ្វើដំណើរផ្នែកផលិតភាពរបស់អ្នករយៈពេលមួយសប្ដាហ៍

បញ្ចប់ផ្នែកបន្ថែមកម្មវិធីរុករកដែលមានប្រសិទ្ធភាពខ្ពស់ និងមុខងារផ្នែកខាងក្រោយ
ជំនាញនៃសេវាកម្មធ្វើការ (service workers) និងសំណុំសំណង់បន្ថែមទំនើប
អនុវត្តយុទ្ធសាស្ត្រសម្របសម្រួលទិន្នន័យ និង caching
រៀនវិធី Debug ចម្បងសម្រាប់ផលិតភាពផ្នែកបន្ថែម
បញ្ចេញមុខងារអាចប្រើបានយ៉ាងប្រសើរ និងធនធានប្រសិទ្ធភាព
បង្កើតតេស្តពេញលេញសម្រាប់សេចក្តីលក្ខណៈផលិតភាពផ្នែកបន្ថែម

🌟 ភាពឯកទេសក្នុងការសម្របសម្រួលប្រសិទ្ធភាពរយៈពេលមួយខែ

បង្កើតផ្នែកបន្ថែមកម្មវិធីរុករកកម្រិតសហរដ្ឋដែលមានប្រសិទ្ធភាពខ្ពស់
រៀនអំពី Web Workers, Service Workers និងផលិតភាពវែបភ្នំពេញទំនើប
ធ្វើចំណែកទៅគម្រោង open source មួយចំនួនដែលផ្តោតលើការសម្របសម្រួលផលិតភាព
ជំនាញចំណេះដឹងជ្រៅអំពីរចនាសម្ព័ន្ធកម្មវិធីរុករក និងវិធី debug រឹងមាំ
បង្កើតឧបករណ៍ត្រួតពិនិត្យផលិតភាព និងមគ្គុទេសក៏ល្អបំផុត
ក្លាយជាអ្នកជំនាញរបស់ផលិតភាព ដែលជួយសម្រួលកម្មវិធីវែប

🎯 រៀនបន្ថែមពីផ្នែកបន្ថែមកម្មវិធីរុករករបស់អ្នក

timeline
    title ការរីកចំរូងការអភិវឌ្ឍផ្នែកបន្ថែមយ៉ាងលំអិត
    
    section គ្រប់មូលដ្ឋានការសម្របសម្រួល (20 នាទី)
        ការវិភាគកម្មវិធីរុករក: អំណាច DevTools
                         : ការវិភាគពេលវេលា
                         : ការកំណត់បញ្ហាកក់សំខាន់
                         : ផ្លូវការសរសេរបង្ហាញសំខាន់
        
    section ការងារផ្ទៃខាងក្រោយ (25 នាទី)
        ស្ថាបត្យកម្មផ្នែកបន្ថែម: ការបញ្ជូនសារ
                              : ស្គ្រីបផ្ទៃខាងក្រោយ
                              : ការប្រើប្រាស់ Runtime API
                              : ការទំនាក់ទំនងជាម៉ោងភាគី
        
    section មតិតបែបវិចិត្រសាស្ត្រ (30 នាទី)
        UI អាចផ្លាស់ប្តូរ: អាល់ហ្គរីធึមគណនារូបពណ៌
                  : ការតភ្ជាប់ Canvas API
                  : ការបង្កើតរូបតំណាង
                  : ការអាប់ដេតពេលវេលាពិតប្រាកដ
        
    section ការវ៉ែនធ្វើការបង្កើនសមត្ថភាព (35 នាទី)
        កូដមានប្រសិទ្ធភាព: ប្រតិបត្តិការជាមូលដ្ឋាន Async
                      : ការគ្រប់គ្រងចងចាំ
                      : ការសំអាតធនធាន
                      : ការត្រួតពិនិត្យសមត្ថភាព
        
    section រៀបចំដើម្បីផលិតកម្ម (45 នាទី)
        ការលើកទឹកចិត្ត និង ការធ្វើតេស្ត: ការចំណាយតាមកម្មវិធីរុករកជាច្រើន
                        : ការដោះស្រាយកំហុស
                        : បទពិសោធន៍អ្នកប្រើប្រាស់
                        : ការផ្ទៀងផ្ទាត់សមត្ថភាព
        
    section លក្ខណៈពិសេសខ្ពស់ (1 សប្តាហ៍)
        ប្រព័ន្ធផ្នែកបន្ថែម: ហាង Chrome Web Store
                           : មតិបញ្ចេញពីអ្នកប្រើប្រាស់
                           : ការតភ្ជាប់វិភាគ
                           : ការគ្រប់គ្រងការអាប់ដេត
        
    section ការអភិវឌ្ឍជំនាញវិជ្ជាជីវៈ (2 សប្តាហ៍)
        ផ្នែកបន្ថែមសម្រាប់សហគ្រាស: ការសហការអាជីព
                             : ការពិនិត្យកូដ
                             : ទន្លេ CI/CD
                             : ការត្រួតពិនិត្យសុវត្ថិភាព
        
    section ជំនាញឯកទេស (1 ខែ)
        ជំនាញវេទិកា: API Chrome ខ្ពស់
                          : ការវ៉ែនសមត្ថភាព
                          : លំនាំស្ថាបត្យកម្ម
                          : ការរួមចំណែកប្រភពបើក

🛠️ គ្រឿងបន្លាស់អភិវឌ្ឍន៍ផ្នែកបន្ថែមរបស់អ្នកពេញលេញ

បន្ទាប់ពីបញ្ចប់ត្រីភាគនេះ អ្នកកាន់តែស្ទាត់ជំនាញ៖

រចនាសម្ព័ន្ធកម្មវិធីរុករក: យល់ដឹងជ្រៅពីរបៀបផ្សំផ្នែកបន្ថែមជាមួយប្រព័ន្ធរុករក
បណ្ដេញការបង្ហាញបញ្ហាផលិតភាព: សមត្ថភាពកំណត់និងជួសជុលបញ្ហាការអាប់ឡូវដោយប្រើឧបករណ៍អភិវឌ្ឍន៍
កម្មវិធីអាសិច: រចនាបទ JavaScript ទំនើបសម្រាប់ប្រតិបត្តិការ non-blocking ផ្សេងៗ
ចូលរួមជាមួយ API: ស្វែងយល់និងចាប់យកទិន្នន័យក្រៅក្នុងការផ្គត់ផ្គង់សុវត្ថិភាព និងការពារកំហុស
រចនាផ្ទៃមុខ: បង្កើត UI មានសកម្មភាព និងគំនូរជាមួយ Canvas
បញ្ជូនសារ: ការប្រាស្រ័យទាក់ទងក្នុងស្ក្រីបផ្នែកបន្ថែម
បទពិសោធន៍អ្នកប្រើ: ការបង្ហាញស្ថានភាពផ្ទុក ការដោះស្រាយកំហុស និងការប្រើប្រាស់ងាយស្រួល
ជំនាញផលិតកម្ម: ការធ្វើតេស្ត ការពិនិត្យកំហុស និងការសម្រួលប្រសិទ្ធភាព សម្រាប់ការផលិត

កម្មវិធីពិភពពិត៖ ជំនាញអភិវឌ្ឍនេះអាចអនុវត្តបានដោយផ្ទាល់ទៅ៖

កម្មវិធី Web ដែលមានលំនាំអភិវឌ្ឍន៍: រចនាសម្ព័ន្ធនិងរបៀបប្រតិបត្តិប្រហែលគ្នា
កម្មវិធី Desktop Electron: កម្មវិធីគូលុំប្រើបច្ចេកវិទ្យាវែប
កម្មវិធី Mobile Hybrid: ការអភិវឌ្ឍ Cordova/PhoneGap ប្រើ API វែប
កម្មវិធី Web សម្រាប់សហគ្រាស: ផ្ទាំងគ្រប់គ្រង និងឧបករណ៍ផលិតភាពស្មុគស្មាញ
វិភាគភាគកម្មវិធី Chrome DevTools: ឧបករណ៍អភិវឌ្ឍជំនាន់ខ្ពស់ និងការពិនិត្យកំហុស
ការចូលរួមជាមួយ API វែប: កម្មវិធីណាមួយដែលទំនាក់ទំនងជាមួយសេវាកម្មក្រៅ

ផលប៉ះពាល់វិជ្ជាជីវៈ៖ អ្នកអាច៖

បង្កើត ផ្នែកបន្ថែមកម្មវិធីរុករកសម្រាប់ផលិតកម្មពីគំនិតដល់ការផ្សាយ
អនុវត្ត ការសម្រួលភាពរហ័សរបស់កម្មវិធីវែបជាមួយឧបករណ៍ profiling គ្រប់គ្រាន់
រចនា ប្រព័ន្ធមានប្រវែងភាពដែលបែងចែកមុខងារត្រឹមត្រូវ
ដោះស្រាយ ប្រតិបត្តិការលំបាក asynchronous និងការប្រាស្រ័យទាក់ទងមុខងារផ្សេងគ្នា
ចូលរួម គម្រោងផ្នែកបន្ថែម open source និងវិញ្ញាបនបត្ររបស់កម្មវិធីរុករក

ឱកាសកម្រិតបន្ទាប់:

អ្នកអភិវឌ្ឍ Chrome Web Store: ចេញផ្សាយផ្នែកបន្ថែមសម្រាប់អ្នកប្រើលានភាគរយលានរាប់លាន
វិស្វករផលិតភាព Web: ជំនាញសម្រួលប្រសិទ្ធភាព និងបទពិសោធន៍អ្នកប្រើ
អ្នកអភិវឌ្ឍវេទិកាកម្មវិធីរុករក: ចូលរួមអភិវឌ្ឍម៉ូទ័ររុករក
អ្នកបង្កើតស៊ុមផ្នែកបន្ថែម: បង្កើតឧបករណ៍ជួយអ្នកអភិវឌ្ឍផ្សេងៗ
ទំនាក់ទំនងអ្នកអភិវឌ្ឍ: ចែករំលែកចំណេះដឹងតាមការបង្រៀននិងការបង្កើតមាតិកា

🌟 សមិទ្ធផលបានទទួល: អ្នកបានបង្កើតផ្នែកបន្ថែមកម្មវិធីរុករកពេញលេញដែលបង្ហាញពីអនុវត្តន៍វិជ្ជាជីវៈ និងស្តង់ដារវែបទំនើប!

ការចាត់តាំង

វិភាគគេហទំព័រសម្រាប់ផលិតភាព

ការរក្សាសិទ្ធិ៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាបកប្រែ AI Co-op Translator។ នៅពេលយើងខំប្រឹងប្រសើរឡើងនូវភាពត្រឹមត្រូវ សូមជ្រាបថាបកប្រែដោយស្វ័យប្រវត្តិនេះអាចមានកំហុសឬមិនត្រឹមត្រូវខ្លះ។ ឯកសារដើមក្នុងភាសាមូលដ្ឋានត្រូវតែត្រូវបានយកចិត្តទុកដាក់ជាគោលដៅសិទ្ធិ។ សម្រាប់ពត៌មានសំខាន់ៗ គួរឲ្យប្រើការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយោលយល់ខុស ឬការបកប្រែមិនត្រឹមត្រូវដែលកើតមានពីការប្រើប្រាស់បកប្រែនេះឡើយ។

README.md

គម្រោងផ្នែកបន្ថែមកម្មវិធីអ៊ិនធឺរណែត ផ្នែកទី 3៖ រៀនអំពីភារកិច្ចផ្ទៃក្រោយ និងប្រសិទ្ធភាព

ផ្ទៀងផ្ទាត់មុនហ្វឹកហាត់

ចំណាំង​មុខ

មូលដ្ឋានប្រសិទ្ធភាពវេប

តើត្រូវមើលអ្វីពេលប្រើប្រាស់ profiler

🔄 ពិនិត្យជាមួយគ្រូបង្រៀន

បង្កើតមុខងារគណនាពណ៌

កំណត់ពណ៌រូបតំណាងលំនាំដើម

ហៅមុខងារ ដំណើរការហៅ

🔄 ពិនិត្យជាមួយគ្រូបង្រៀន

ជម្រុះ GitHub Copilot Agent 🚀

🚀 ភារកិច្ច

ប្រលងក្រោយមេរៀន

ការពិនិត្យឡើងវិញ និងរៀនផ្ទាល់ខ្លួន

⚡ អ្វីដែលអ្នកអាចធ្វើក្នុង ៥ នាទីបន្ទាប់

🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងម៉ោងនេះ

📅 ការធ្វើដំណើរផ្នែកផលិតភាពរបស់អ្នករយៈពេលមួយសប្ដាហ៍

🌟 ភាពឯកទេសក្នុងការសម្របសម្រួលប្រសិទ្ធភាពរយៈពេលមួយខែ

🎯 រៀនបន្ថែមពីផ្នែកបន្ថែមកម្មវិធីរុករករបស់អ្នក

🛠️ គ្រឿងបន្លាស់អភិវឌ្ឍន៍ផ្នែកបន្ថែមរបស់អ្នកពេញលេញ

ការចាត់តាំង

ចំណាំងមុខ