របៀបដែលគេហទំព័រដំណើរការ

URL, DNS, HTTP, status code, cookie និង caching — អ្វីដែលពិតជាកើតឡើងចន្លោះពេលអ្នកវាយអាសយដ្ឋានមួយ និងពេលអ្នកឃើញទំព័រ ដោយតាមដានវាជាមួយ DevTools របស់ browser និង curl។

អ្នកប្រើ web រៀងរាល់ថ្ងៃ ហើយក្នុងនាមជាអ្នកអភិវឌ្ឍន៍ អ្នកនឹងបង្កើតអ្វីៗសម្រាប់វារៀងរាល់ថ្ងៃដែរ។ ប៉ុន្តែអ្វីៗភាគច្រើនដែលកើតឡើងបន្ទាប់ពីអ្នកចុច Enter នៅក្នុង address bar គឺមើលមិនឃើញទេ៖ ឈ្មោះមួយត្រូវបានប្តូរទៅជាលេខ connection មួយត្រូវបានបើក និងអ៊ិនគ្រីប request មួយត្រូវបានផ្ញើ response មួយត្រូវបានផ្ញើត្រឡប់មកវិញ ហើយ request រាប់សិបទៀតត្រូវបានផ្ញើចេញ មុនពេលទំព័របង្ហាញឡើង។ នៅពេលមានអ្វីមួយខូច — 404 មួយ CORS error មួយ ការ login ដែលមិននៅជាប់ ឬការផ្លាស់ប្តូរដែលមិនព្រមបង្ហាញ — ផ្នែកដែលមើលមិនឃើញនោះហើយ ជាកន្លែងដែលបញ្ហាស្ថិតនៅ។

ស៊េរីនេះធ្វើឲ្យវាមើលឃើញ។ វាចាប់ផ្តើមពីអ្វីដែល web ពិតជាជា រួចតាមដានអាសយដ្ឋានមួយឆ្លងកាត់គ្រប់ជំហាន៖ ផ្នែកនីមួយៗនៃ URL របៀបដែល DNS រក server របៀបដែល connection ត្រូវបានបង្កើត និងធានាសុវត្ថិភាព រូបរាងពិតប្រាកដរបស់ HTTP request និង response និងរបៀបដែល browser បំប្លែង response ទៅជា pixel។ បន្ទាប់មក វានិយាយអំពីអ្វីៗដែលធ្វើឲ្យ web មានអារម្មណ៍ថាលឿន និងស្គាល់អ្នកផ្ទាល់ — cookie, session, caching និង CDN — ព្រមទាំងភាពខុសគ្នារវាង static site, web app និង API។ ជំពូកចុងក្រោយតាមដាន URL មួយ ចាប់ពីការចុចគ្រាប់ចុច រហូតដល់ pixel ដោយប្រើអ្វីៗទាំងអស់ពីជំពូកមុនៗ។

អ្នកនឹងមិនសរសេរ app ទេ ប៉ុន្តែអ្នកនឹងមើល traffic ពិតៗដោយខ្លួនឯង ជាមួយឧបករណ៍ពីរដែលអ្នកមានរួចហើយ៖ DevTools របស់ browser អ្នក និង curl នៅក្នុង terminal។ ឧទាហរណ៍សំខាន់របស់អ្នក គឺ website GitHub Pages ដែលអ្នកបានបោះពុម្ពផ្សាយនៅចុងបញ្ចប់នៃ Git និង GitHub សម្រាប់អ្នកចាប់ផ្តើម។ បើអ្នកបានរំលងស៊េរីនោះ website សាធារណៈណាមួយក៏អាចប្រើបានដែរ។

អ្នកត្រូវការកុំព្យូទ័រដែលប្រើ Windows, macOS ឬ Linux, browser ទំនើបមួយ (Chrome, Edge ឬ Firefox), ការរៀបចំ terminal ពី មូលដ្ឋានគ្រឹះ Command Line និងអ៊ីនធឺណិត។ គ្មានអ្វីត្រូវចំណាយលុយទេ។

  1. 01តើ Web ជាអ្វី?ភាពខុសគ្នារវាងអ៊ីនធឺណិត និង web, client និង server, អ្វីដែល browser ពិតជាជា, ផែនទីនៃអ្វីដែលកើតឡើងនៅពេលអ្នកបើកទំព័រមួយ និងការមើល DevTools Network tab ជាលើកដំបូង។
  2. 02URL ម្តងមួយផ្នែកScheme, host, port, path, query string និង fragment នៃ URL មួយ អ្វីដែល browser ធ្វើជាមួយផ្នែកនីមួយៗ percent-encoding និងភាពខុសគ្នារវាង absolute link និង relative link។
  3. 03IP Address និង DNSអ្វីទៅជា IP address, IPv4 ធៀបនឹង IPv6, private address និង localhost, របៀបដែល DNS បំប្លែងឈ្មោះទៅជាលេខម្តងមួយជំហាន, ប្រភេទ record ដែលអ្នកនឹងរៀបចំដោយខ្លួនឯង និងហេតុអ្វីការផ្លាស់ប្តូរ DNS ត្រូវការពេល។
  4. 04ការតភ្ជាប់៖ TCP, Port និង TLSរបៀបដែល packet ក្លាយជាការតភ្ជាប់ដែលអាចទុកចិត្តបានជាមួយ TCP របៀបដែល port ជ្រើសរើសកម្មវិធីត្រឹមត្រូវ អ្វីដែល HTTPS និងរូបសោពិតជាការពារ របៀបដែល certificate ដំណើរការ និងហេតុអ្វីការតភ្ជាប់ថ្មីនីមួយៗចំណាយពេល។
  5. 05HTTP Requestតើ HTTP request ពិតជាមើលទៅដូចម្តេច៖ request line, method ដូចជា GET និង POST, header ដែល browser ផ្ញើ, body និងរបៀបអានវាទាំងអស់ជាមួយ curl -v និង DevTools។
  6. 06HTTP Response និង Status Codeរូបរាងរបស់ HTTP response ក្រុមទាំងប្រាំនៃ status code និងលេខដែលអ្នកនឹងជួបពិតប្រាកដ redirect ភាពខុសគ្នារវាង 401 និង 403 Content-Type និងរបៀបអាន response ពិតពី GitHub Pages។
  7. 07ខាងក្នុង Browser៖ ពី HTML ទៅជា Pixelរបៀបដែល browser parse HTML ទៅជា DOM ហេតុអ្វីទំព័រមួយក្លាយជា request រាប់សិប អ្វីដែល block ការ render របៀបដែល layout និង paint ដាក់ pixel លើអេក្រង់ និងរបៀបអាន waterfall ក្នុង Network tab។
  8. 08Cookie, Session និង Stateហេតុអ្វី HTTP ភ្លេចអ្វីៗទាំងអស់រវាង request នីមួយៗ របៀបដែល cookie ធ្វើឲ្យ website ចងចាំអ្នក របៀបដែល login និង session ដំណើរការ ការកំណត់ cookie ដែលរក្សាវាឲ្យមានសុវត្ថិភាព localStorage និងការតាមដានដោយ third-party។
  9. 09Cache, CDN និងល្បឿនរបៀបដែល browser ជៀសវាងការទាញយករបស់ដដែលពីរដង ដោយប្រើ Cache-Control, ETag និង 304 ហេតុអ្វីការផ្លាស់ប្តូរលើ GitHub Pages របស់អ្នកចំណាយពេលច្រើននាទីទើបលេចឡើង hard refresh, compression និងរបៀបដែល CDN នាំ server មកជិតអ្នក។
  10. 10Static Site, Web App និង APIStatic site ធៀបនឹងទំព័រ server-rendered ធៀបនឹង single-page app តើ API ជាអ្វី ហើយហេតុអ្វីវានិយាយជា JSON ការមើល CORS បន្តិច និងកន្លែងដែល track Frontend និង Backend បន្តពីទីនេះ។
  11. 11ដាក់អ្វីៗទាំងអស់បញ្ចូលគ្នាតាមដាន URL មួយ ចាប់ពីការចុចគ្រាប់ចុចរហូតដល់ pixel ដោយប្រើគ្រប់ជំពូកនៃស៊េរីនេះ បន្ទាប់មកការសង្ខេបឡើងវិញ បញ្ជីពិនិត្យសម្រាប់ debug cheat sheet សម្រាប់ curl និង DevTools អ្វីដែលស៊េរីនេះមិនបាននិយាយដល់ និងទៅណាបន្ទាប់។