ជាមួយនឹងការកើនឡើងនៃល្បឿននៃការតភ្ជាប់អ៊ីធឺណិត និងការកើនឡើងនៃថាមពលមិនត្រឹមតែផ្ទៃតុប៉ុណ្ណោះទេ ប៉ុន្តែក៏មានផងដែរ។ ឧបករណ៍ចល័តគេហទំព័រកាន់តែធ្ងន់។ ចំនួន និងទំហំនៃឯកសារដែលបានភ្ជាប់កំពុងកើនឡើង៖ ឯកសារ JavaScript, ឯកសារ css, រូបភាព, ធាតុក្រាហ្វិកគេហទំព័រភាគីទីបី, iframes ។ បើក នៅពេលនេះភាពជាក់លាក់នៃរបៀបដែលកម្មវិធីរុករកដំណើរការគឺនៅពេលដែលផ្ទុកឯកសារ js ការបង្ហាញត្រូវបានរារាំងរហូតដល់ស្គ្រីបត្រូវបានប្រតិបត្តិ។ កម្មវិធីរុករកទំនើបវ ផ្ទៃខាងក្រោយនឹងញែកឯកសារ និងទាញយកស្គ្រីប និងរចនាប័ទ្ម ប៉ុន្តែការបង្ហាញនឹងត្រូវបានរារាំង។ ការប្រៀបធៀប ប៉ារ៉ាម៉ែត្របណ្តាញសម្រាប់ កម្មវិធីរុករកផ្សេងគ្នាអាចត្រូវបានមើលនៅ browserscope.org ។ យើងមិនអាចលុបបំបាត់ការទប់ស្កាត់ទាំងស្រុងបានទេ ប៉ុន្តែយើងអាចបង្កើនប្រសិទ្ធភាពម៉ាស៊ីនមេ និង ផ្នែកអតិថិជនកម្មវិធី ដូច្នេះការទប់ស្កាត់ការបង្ហាញត្រូវចំណាយពេលខ្លីបំផុត។

ដំណោះស្រាយខាងម៉ាស៊ីនមេ៖
- កាត់បន្ថយទំហំនៃឯកសារដែលបានផ្ទេរ
- ប្រើ CDN
- យកចេញ ឯកសារឋិតិវន្តនៅលើដែនដាច់ដោយឡែក ឬនៅក្រោមដែន ដូច្នេះការបង្កើនចំនួន ការតភ្ជាប់ក្នុងពេលដំណាលគ្នា។កម្មវិធីរុករក។
- បើកការបង្ហាប់ឯកសារដែលបានផ្ទេរ (gzip)

ដំណោះស្រាយសម្រាប់ភាគីអតិថិជន៖
- កាត់បន្ថយចំនួនសំណើ។
- ឯកសារឃ្លាំងសម្ងាត់នៅខាងអតិថិជនដោយប្រើ ក្បាលក្បាលផុតកំណត់និង Etags ។
- ប្រើ CDNs ដែលមានជាសាធារណៈ (Google CDN, Yandex CDN) ។ ដូច្នេះមានលទ្ធភាពដែលឯកសារពី CDN សាធារណៈនឹងត្រូវបានរក្សាទុករួចហើយនៅក្នុងឃ្លាំងសម្ងាត់កម្មវិធីរុករក។

វិធីមួយដើម្បីបង្កើនប្រសិទ្ធភាពល្បឿននៃការផ្ទុកគេហទំព័រគឺត្រូវផ្ទុកឯកសារដោយអសមកាល ដែលមិនរារាំងការបង្ហាញ។

JavaScript ផ្ទុកស្គ្រីបអសមកាល៖

(function() ( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "URL ឯកសារ"; document.getElementsByTagName("head") .appendChild(ស្គ្រីប);

ប្រសិនបើ JavaScript ចាំបាច់ត្រូវប្រតិបត្តិបន្ទាប់ពីទំព័រទាំងមូលបានផ្ទុក រួមទាំងមាតិកា រូបភាព ឯកសាររចនាប័ទ្ម និង ស្គ្រីបខាងក្រៅបន្ទាប់មក អ្នកត្រូវបន្ថែមការតាមដានសម្រាប់ព្រឹត្តិការណ៍ onload ទៅកម្មវិធីផ្ទុក។

ប្រសិនបើ (window.addEventListener) (window.addEventListener("ផ្ទុក", async_load, មិនពិត); ) ផ្សេងទៀតប្រសិនបើ (window.attachEvent) (window.attachEvent("onload", async_load); )

ស្គ្រីប​ផ្ទុក JavaScript អសមកាល​ដោយ​គិតគូរ​ពី​ព្រឹត្តិការណ៍​ដំណើរការ (function() ( function async_load())( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s .src = "URL ឯកសារ"; document.getElementsByTagName("head").appendChild(script); if (window.addEventListener) (window.addEventListener("load", async_load, false); ) ផ្សេងទៀតប្រសិនបើ (window.attachEvent) (បង្អួច .attachEvent("កំពុងផ្ទុក", async_load); ) ))();

ប៉ុន្តែនេះគឺជាករណីដាច់ស្រយាល នៅពេលដែលការទាញយកឯកសារតែមួយគឺត្រូវបានទាមទារ។ ជាញឹកញាប់នៅក្នុងការអនុវត្តឯកសារជាច្រើនត្រូវបានភ្ជាប់។

ស្គ្រីបសម្រាប់ផ្ទុកឧបករណ៍ភ្ជាប់ច្រើនអសមកាល ឯកសារ JavaScript(function() ( function async_load())( [ "URL_1.js", "URL_2.js", "URL_3.js" ].forEach(function(src) (var s = document.createElement("script"); s .type = "text/javascript"; s.async = true; document.getElementsByTagName("head").appendChild(script)); "load", async_load, false); attachEvent("onload", async_load) ))();

ប៉ុន្តែមានដកនៅក្នុងការអនុវត្តនេះ - ស្គ្រីបនឹងត្រូវបានផ្ទុកតាមលំដាប់ចៃដន្យ ហើយតាមនោះ ពួកវានឹងត្រូវបានប្រតិបត្តិដោយចៃដន្យទាន់ពេល។ ស្គ្រីបនេះ។ការផ្ទុកអសមកាលគឺល្អប្រសិនបើ ការប្រតិបត្តិ JavaScriptឯកសារមិនអាស្រ័យលើគ្នាទៅវិញទៅមក ហើយមិនអាស្រ័យលើ DOM ទេ។ បើមិនដូច្នេះទេ ការប្រើប្រាស់របស់វាអាចនាំឱ្យមានកំហុសនៅលើទំព័រ ឬលទ្ធផលប្រតិបត្តិការដែលមិនរំពឹងទុក។ សម្រាប់ការប្រតិបត្តិតាមលំដាប់លំដោយ ប៉ុន្តែការទាញយកអសមកាល អ្នកត្រូវបញ្ជាក់ async=false បន្ទាប់មកឯកសារនឹងត្រូវបានទាញយកតាមលំដាប់ចៃដន្យ ប៉ុន្តែត្រូវបានប្រតិបត្តិជាវេន។

HTML 5. ការផ្ទុក JavaScript អសមកាល

ស្តង់ដារ HTML 5 គាំទ្រការផ្ទុក JavaScript អសមកាល។ នេះអាចត្រូវបានធ្វើដោយការបន្ថែម async ឬពន្យាពេលពាក្យគន្លឹះ។ ឧទាហរណ៍៖

ស្គ្រីបដែលភ្ជាប់ជាមួយគុណលក្ខណៈពន្យានឹងត្រូវបានប្រតិបត្តិដោយមិនរំខានដល់លំដាប់នៃការប្រតិបត្តិទាក់ទងនឹងស្គ្រីបផ្សេងទៀត ហើយការប្រតិបត្តិរបស់វានឹងកើតឡើងបន្ទាប់ពី ផ្ទុកពេញនិងញែកទំព័រ ប៉ុន្តែមុនពេល DOMContentLoaded ត្រូវបានហៅ។

ស្គ្រីបដែលត្រូវបានភ្ជាប់ជាមួយគុណលក្ខណៈ async នឹងត្រូវបានប្រតិបត្តិឱ្យបានឆាប់តាមដែលអាចធ្វើបាន បន្ទាប់ពីវាត្រូវបានផ្ទុកពេញលេញ ប៉ុន្តែវាមិនរង់ចាំសម្រាប់ការញែកឯកសារបញ្ចប់ និងមុនពេលដែលវត្ថុបង្អួចត្រូវបានផ្ទុកនោះទេ។ កម្មវិធីរុករកមិនធានាថាស្គ្រីបនឹងត្រូវបានប្រតិបត្តិតាមលំដាប់ដូចគ្នាដែលពួកវាត្រូវបានភ្ជាប់។

បណ្ណាល័យសម្រាប់ការផ្ទុក JavaScript អសមកាល

RequireJS គឺជាម៉ូឌុលផ្ទុក JavaScript ។ ធ្វើឱ្យប្រសើរឡើងសម្រាប់កម្មវិធីរុករក ប៉ុន្តែវាអាចប្រើក្នុងបរិស្ថានផ្សេងទៀតដូចជា Node, Rhino ។

ទាមទារ(["ស្គ្រីប"] មុខងារ(ស្គ្រីប) ( console.log("ចាប់ផ្តើមបន្ទាប់ពីផ្ទុក script.js"); ));

extsrc.js គឺជាបណ្ណាល័យដែលដំណើរការស្គ្រីបដែលត្រូវប្រតិបត្តិបន្ទាប់ពីទំព័រត្រូវបានផ្ទុក និងបង្ហាញដល់អ្នកប្រើប្រាស់។ ដំណើរការបានត្រឹមត្រូវជាមួយ document.write។

yepnope.js - អនុញ្ញាតឱ្យផ្ទុកឯកសារ JavaScript និង CSS ដែលមិនសមកាលកម្ម។

Yepnope([ "script.js", "style.css" ]);

វិធីងាយៗក្នុងការទាញយក ស្គ្រីប JavaScript

វាប្រែថានៅក្នុងការអនុវត្ត ការសម្រេចបាននូវការផ្ទុកស្គ្រីប JavaScript ឆ្លងកាត់កម្មវិធីរុករកដ៏ល្អប្រសើរដែលមិនរារាំងការបង្ហាញគឺពិបាក ហើយពេលខ្លះមិនអាចទៅរួច។ ភាគច្រើន វិធីល្អបំផុតត្រូវបានបន្ថែមទៅចុងបញ្ចប់នៃឯកសារ មុនពេលស្លាកតួបិទ។ ដោយសារតែការរឹតបន្តឹង កម្មវិធីរុករកផ្សេងគ្នានិង HTML ខ្លួនវា ជម្រើសផ្ទុកបែបនេះដែលមិនរារាំងការបង្ហាញអាចត្រូវបានចាត់ទុកថាសាមញ្ញបំផុត។

ខ្ញុំកំពុងព្យាយាមដកចេញ 2 ឯកសារ CSSដែលកំពុងរារាំងការបង្ហាញនៅលើគេហទំព័ររបស់ខ្ញុំ - ពួកគេលេចឡើងនៅក្នុង ទំព័រ Googleការយល់ដឹងអំពីល្បឿន។ ខ្ញុំជាប់គាំង វិធីសាស្រ្តផ្សេងគ្នាគ្មាននរណាម្នាក់ជោគជ័យឡើយ។ ប៉ុន្តែថ្មីៗនេះ ខ្ញុំបានរកឃើញការបង្ហោះអំពី Thinking Async ហើយនៅពេលដែលខ្ញុំអនុវត្តកូដនេះ៖ វាដោះស្រាយបញ្ហា។

ទោះយ៉ាងណាក៏ដោយ បន្ទាប់ពីការបោះពុម្ពផ្សាយ ទំព័រនេះបានបាត់បង់រចនាប័ទ្មរបស់វា។ ខ្ញុំ​ក៏​មិន​ប្រាកដ​ថា​មាន​អ្វី​កើត​ឡើង​ដែរ ព្រោះ​កូដ​ដំណើរការ ប៉ុន្តែ​វា​ជា​ទម្រង់​ក្រោយ​ពេល​ផ្ទុក​ដែល​មិន​ដំណើរការ។ សូមអរគុណចំពោះជំនួយរបស់អ្នកក្នុងរឿងនេះ។ សូមអរគុណដល់

4 ចម្លើយ

ល្បិចដើម្បីទទួលបានរចនាប័ទ្មដើម្បីផ្ទុកអសមកាលគឺត្រូវប្រើធាតុ និងកំណត់គុណលក្ខណៈមេឌៀទៅជាតម្លៃមិនត្រឹមត្រូវ (ខ្ញុំប្រើ media="none" ប៉ុន្តែតម្លៃណាមួយនឹងធ្វើ)។ នៅពេលដែលសំណួរមេឌៀវាយតម្លៃថាមិនពិត កម្មវិធីរុករកតាមអ៊ីនធឺណិតនឹងនៅតែផ្ទុកសន្លឹករចនាប័ទ្ម ប៉ុន្តែវានឹងមិនរង់ចាំឱ្យមាតិកាមានមុនពេលបង្ហាញទំព័រនោះទេ។

បន្ទាប់ពីសន្លឹករចនាប័ទ្មបានបញ្ចប់ការផ្ទុក គុណលក្ខណៈមេឌៀគួរតែត្រូវបានកំណត់ទៅ តម្លៃត្រឹមត្រូវ។ដូច្នេះច្បាប់រចនាប័ទ្មនឹងត្រូវបានអនុវត្តចំពោះឯកសារ។ ព្រឹត្តិការណ៍ onload ត្រូវបានប្រើដើម្បីបិទ/បើកលក្ខណសម្បត្តិប្រព័ន្ធផ្សព្វផ្សាយនៅលើអ្វីគ្រប់យ៉ាង៖

វិធីសាស្ត្រផ្ទុក CSS នេះនឹងផ្តល់ខ្លឹមសារមានប្រយោជន៍ដល់អ្នកទស្សនាលឿនជាង វិធីសាស្រ្តស្តង់ដារ. CSS សំខាន់នៅតែអាចប្រើជាមួយវិធីសាស្រ្តទប់ស្កាត់ធម្មតា (ឬអ្នកអាចដាក់បញ្ចូលវាសម្រាប់ ដំណើរការអតិបរមា) ហើយរចនាប័ទ្មមិនសំខាន់អាចត្រូវបានផ្ទុកបន្ថែម និងអនុវត្តនៅពេលក្រោយក្នុងដំណើរការញែក/បង្ហាញ។

វិធីសាស្ត្រនេះប្រើ JavaScript ប៉ុន្តែអ្នកអាចបម្រើកម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលមិនមែនជា JavaScript ដោយរុំធាតុទប់ស្កាត់ដែលស្មើនឹងនៅក្នុង៖

អ្នកអាចមើលប្រតិបត្តិការនៅ www.itcha.edu.sv

អ្នកអាចព្យាយាមយកវាតាមវិធីជាច្រើន៖

1. ដោយប្រើ media="bogus" និងនៅលើជើង

2. រួមទាំង DOM តាមរបៀបចាស់

(function())(var bsa = document.createElement("script"); bsa.type = "text/javascript"; bsa.async = true; bsa.src = "https://s3.buysellads.com/ac / bsa.js"; (document.getElementsByTagName("head")||document.getElementsByTagName("body")).appendChild(bsa); ))();

3. ប្រសិនបើអ្នកអាចសាកល្បងកម្មវិធីជំនួយ អ្នកអាចសាកល្បងផ្ទុក CSS

// រួមបញ្ចូល loadCSS នៅទីនេះ... មុខងារ loadCSS(href, before, media)(... ) // load a file loadCSS("path/to/mystylesheet.css");

អនាគតហាក់ដូចជាត្រូវបានផ្ទុកពាក្យគន្លឹះជាមុនសម្រាប់ធាតុតំណ។

កំណែនៃការធ្វើសមកាលកម្ម

កំណែអសមកាល

ជាអកុសល...

កម្មវិធីរុករកគួរឱ្យកត់សម្គាល់ដែលមិនទាន់គាំទ្រមុខងារនេះរួមមាន Edge និង iOS Safari ។

ទោះយ៉ាងណាក៏ដោយ...

loadCSS ហាក់ដូចជាដំណោះស្រាយដ៏មានសក្តានុពលដែលអនុញ្ញាតឱ្យអ្នកប្រើការផ្ទុកជាមុននៅថ្ងៃនេះ (ជាមួយនឹងការធ្លាក់ចុះ)។

ទោះបីជាមានការរីករាលដាលនៃការចូលប្រើអ៊ីនធឺណិតតាមអ៊ីនធឺណិតកាន់តែកើនឡើងក៏ដោយ ក៏បញ្ហាជាមួយនឹងល្បឿននៃការផ្ទុកទំព័រ HTML នៅតែមិនមានភាពព្រងើយកន្តើយចំពោះអ្នកប្រើប្រាស់អ៊ិនធឺណិតជាច្រើន ជាពិសេសនៅក្នុងទំហំដ៏ធំនៃអតីតសហភាពសូវៀត។ CSS (Cascading Style Sheets) អាច​ជួយ​ក្នុង​បញ្ហា​នេះ ដោយ​ជួយ​សន្សំ​សំចៃ​ពេលវេលា និង​ចរាចរណ៍។

1. ជៀសវាងការប្រើតារាងសម្រាប់ប្លង់ទំព័រ

នេះគឺជាហេតុផលប្រាំមួយហេតុអ្វីបានជាវាប្រសើរជាងក្នុងការប្រើ CSS ជាជាងតារាងសម្រាប់ប្លង់ទំព័រ៖

• កម្មវិធីរុករកញែកតារាងពីរដង៖ ម្តងដើម្បីវាយតម្លៃរចនាសម្ព័ន្ធរបស់តារាង និងម្តងដើម្បីកំណត់មាតិការបស់វា។
• តារាងត្រូវបានបង្ហាញពេញភ្លាមៗ ហើយមិនមែននៅពេលពួកគេផ្ទុកនោះទេ។
• តារាងត្រូវបានបង្ខំឱ្យប្រើ រូបភាពថ្លាដើម្បីកំណត់ទទឹងជួរឈរ។ល។
• CSS ទាមទារកូដតិចជាងតារាងដែលផ្ទុកលើសទម្ងន់។
• កូដ CSS ទាំងអស់អាចត្រូវបាននាំចេញទៅឯកសារខាងក្រៅ ដែលនឹងត្រូវបានផ្ទុកតែម្តងគត់ និងរក្សាទុកក្នុងឃ្លាំងសម្ងាត់កម្មវិធីរុករក។
• នៅ CSS ជំនួយអ្នកអាចគ្រប់គ្រងលំដាប់ដែលធាតុទំព័រត្រូវបានផ្ទុក។

2. កុំប្រើរូបភាពដើម្បីបង្ហាញអត្ថបទ

ប៊ូតុង និងស្លាកភាគច្រើនអាចត្រូវបានបង្ហាញដោយប្រើ CSS ។ សូមក្រឡេកមើលឧទាហរណ៍៖

a:link.example, a:visited.example, a:active.example ( color:#fff; background:#f90; font-size:1.2em; font-weight:bold; text-decoration: none; padding:0.2 em; ព្រំដែន៖ 4px #00f ដើម) a:hover.example ( color:#fff; background:#fa1; font-size:1.2em; font-weight:bold; text-decoration: none; padding:0.2em; border : 4px #00f បញ្ចូល

CSS នេះកំណត់ ប៊ូតុងសាមញ្ញដែលផ្លាស់ប្តូររូបរាងរបស់វា នៅពេលអ្នកដាក់ទស្សន៍ទ្រនិច។ វិធីនេះអ្នកអាចបង្កើតវត្ថុស្មុគស្មាញបន្ថែមទៀត។

3. ការផ្ទុករូបភាពតាមរយៈ CSS

ខ្លះ រូបភាពផ្ទៃខាងក្រោយវាជាការប្រសើរក្នុងការផ្ទុកតាមរយៈ CSS ។ ឧទាហរណ៍ ដើម្បីបង្ហាញរូបភាព 200x100 អ្នកអាចប្រើកូដខាងក្រោម៖

និង CSS ដែលត្រូវគ្នា៖

រូបភាពស្អាត (ផ្ទៃខាងក្រោយ៖ url(filename.gif); ទទឹង៖ ២០០ភីច; កម្ពស់៖ ១០០ភីច)

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

បច្ចេកទេសនេះគឺសមបំផុតសម្រាប់ការផ្ទុកគ្រឿងតុបតែងសុទ្ធសាធ, ធាតុផ្ទៃខាងក្រោយទំព័រ។ ប្រសិនបើរូបភាពជាផ្នែកនៃខ្លឹមសារ អ្នកនឹងនៅតែត្រូវប្រើស្លាក IMG ដដែល។

4. ការប្រើរចនាប័ទ្មបរិបទ

លេខកូដនេះមិនមានប្រសិទ្ធភាពទេ៖

នេះគឺជាប្រយោគមួយ។

នេះជាប្រយោគមួយទៀត

នេះគឺ មួយទៀតប្រយោគ

នេះជាប្រយោគមួយទៀត

.text (ពណ៌៖ #03c; font-size:2em)

ជំនួសឱ្យការចាត់ថ្នាក់មួយទៅកថាខណ្ឌនីមួយៗ ពួកគេអាចត្រូវបានដាក់ជាក្រុមទៅជាមួយ។ ធាតុ DIVជាមួយថ្នាក់ដូចគ្នា៖

នេះគឺជាប្រយោគមួយ។

នេះជាប្រយោគមួយទៀត

នេះជាប្រយោគមួយទៀត

នេះជាប្រយោគមួយទៀត

.text p (ពណ៌៖ #03c; font-size:2em)

កូដនេះប្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតថាកថាខណ្ឌនីមួយៗនៅក្នុងធាតុដែលមានអត្ថបទថ្នាក់នឹងមានពណ៌ #03c និងទំហំពុម្ពអក្សរ 2em ។

អ្នក​ប្រហែល​ជា​បាន​កត់​សម្គាល់​ឃើញ​ថា​ពណ៌​នៅ​ទី​នេះ​ត្រូវ​បាន​ចង្អុល​បង្ហាញ​តែ​បី​តួ​ប៉ុណ្ណោះ មិន​មែន​ប្រាំមួយ​ទេ។ IN ក្នុងករណីនេះ#03c គឺជាអក្សរកាត់សម្រាប់ពណ៌ #0033cc ។

5. ការប្រើអក្សរកាត់

ពុម្ពអក្សរ

វាជាការប្រសើរក្នុងការសរសេរ៖

ពុម្ពអក្សរ៖ 1em/1.5em អក្សរទ្រេតដិត serif

ទំហំពុម្ពអក្សរ៖ 1em; កម្ពស់បន្ទាត់: 1.5em; font-weight: ដិត; រចនាប័ទ្មពុម្ពអក្សរ៖ ទ្រេត; font-family: serif

ព្រំដែន

ស៊ុម៖ រឹងខ្មៅ 1px

ទទឹងព្រំដែន៖ 1px; ពណ៌ព្រំដែន៖ ខ្មៅ; រចនាប័ទ្មព្រំដែន៖ រឹង

ផ្ទៃខាងក្រោយ

ផ្ទៃ​ខាង​ក្រោយ៖ #fff url(image.gif) គ្មាន​ការ​ធ្វើ​ឡើង​វិញ​នៅ​កំពូល​ខាង​ឆ្វេង

ពណ៌ផ្ទៃខាងក្រោយ៖ #ffff; រូបភាពផ្ទៃខាងក្រោយ៖ url(image.gif); background-repeat: no-repeat; ទីតាំងផ្ទៃខាងក្រោយ៖ កំពូលឆ្វេង;

ការបិទភ្ជាប់និងព្រំដែន

ប្រើ៖

រឹម៖ 2px 1px 3px 4px; (ខាងលើ ស្តាំ បាត ឆ្វេង)

ដូចគ្នានេះដែរ៖

រឹម៖ 5em 1em 3em; (ខាងលើ ឆ្វេង និងស្តាំ បាត)

រឹម: 5% 1%; (ឡើងលើចុះក្រោមឆ្វេងនិងស្តាំ)

ច្បាប់ទាំងនេះអនុវត្តចំពោះគុណលក្ខណៈរឹម ស៊ុម និងទ្រនាប់។

6. បង្រួមចន្លោះ ការបំបែកបន្ទាត់ និងមតិយោបល់

តួអក្សរនីមួយៗ - អក្សរឬដកឃ្លា - យកមួយបៃ។ តួអក្សរបន្ថែមនីមួយៗគ្រាន់តែបង្កើនទំហំទំព័រប៉ុណ្ណោះ។ ដូច្នេះ សូមព្យាយាមចុច Enter និង Tab តិច កំឡុងពេលដំណើរការប្លង់។ ដូចគ្នានេះផងដែរកុំភ្លេចបញ្ចូលគ្នានូវរចនាប័ទ្ម CSS ។

7. ប្រើតំណភ្ជាប់ដែលទាក់ទង

តំណភ្ជាប់ដាច់ខាតប្រើកន្លែងច្រើនជាងតំណភ្ជាប់ដែលទាក់ទង។ ហើយក្រៅពីនេះវាបង្កើតការផ្ទុកបន្ថែមនៅលើកម្មវិធីរុករកដែលមានសារៈសំខាន់ជាង។ ឧទាហរណ៍ សេចក្តីយោងដាច់ខាត: . វានឹងកាន់តែត្រឹមត្រូវក្នុងការសរសេរ< a href=»filename.htm»>. ប៉ុន្តែចុះយ៉ាងណាបើឯកសារដែលអ្នកត្រូវការគឺនៅក្នុងថតផ្សេង? នេះគឺជាឧទាហរណ៍មួយចំនួនដើម្បីជួយអ្នកឱ្យយល់ពីបញ្ហានេះ៖

• - ហៅទំព័រដើមនៃគេហទំព័រ http://www.URL.com
• - ហៅទំព័រក្នុងថតឫស http://www.URL.com/filename.html
• - ឯកសារនៅក្នុងថតរង "root" http://www.URL.com/directory/filename.html
• - ចូលទៅកាន់ថតបច្ចុប្បន្ន និង index.html
• - ថតមេនៃបច្ចុប្បន្ន និង index.html
• - រឿងដដែលនេះបង្ហាញឯកសារ
• - index.html នៅក្នុងថតពីរខាងលើបច្ចុប្បន្ន

8. កុំយកទៅឆ្ងាយជាមួយការប្រើស្លាក META

ស្លាក META ភាគច្រើនគឺមិនចាំបាច់ទាំងស្រុង។ ប្រសិនបើអ្នកចាប់អារម្មណ៍ អ្នកអាចមើលជម្រើសដែលមានស្រាប់ទាំងអស់។ ស្លាកសំខាន់បំផុត (ពាក្យគន្លឹះ និងការពិពណ៌នា) ត្រូវបានប្រើសម្រាប់ការបង្កើនប្រសិទ្ធភាពម៉ាស៊ីនស្វែងរក។ នៅពេលប្រើគុណលក្ខណៈមាតិកានៅក្នុងស្លាក META សូមព្យាយាមរក្សាវាឱ្យតិចជាង 200 តួអក្សរ។ ការពិពណ៌នាធំ និងពាក្យគន្លឹះជាច្រើនអាចត្រូវបានគេយល់ថាជាសារឥតបានការដោយម៉ាស៊ីនស្វែងរក។

9. រក្សា CSS និង JavaScript ក្នុងឯកសារដាច់ដោយឡែក

មនុស្សគ្រប់គ្នាដឹងរឿងនេះ ប៉ុន្តែពួកគេមិនតែងតែប្រើវាទេ។ នេះជាអ្វីដែលការហៅ CSS ពីឯកសារខាងក្រៅមើលទៅដូច៖

ហើយតាម JavaScript៖

ឯកសារខាងក្រៅណាមួយត្រូវបានទាញយកតែម្តងប៉ុណ្ណោះ ហើយបន្ទាប់មករក្សាទុកក្នុងឃ្លាំងសម្ងាត់មូលដ្ឋាន។ មិនមានការរឹតបន្តឹងលើចំនួនឯកសារខាងក្រៅ "បានភ្ជាប់" ទេ។

10. ដាក់ / (សញ្ញា) នៅចុងបញ្ចប់នៃតំណភ្ជាប់ថត

វាត្រូវតែសរសេរដូចនេះ។

សន្លឹករចនាប័ទ្មអាចត្រូវបានបន្ថែមទៅទំព័របណ្តាញតាមបីវិធីផ្សេងគ្នា ដែលសមត្ថភាពរបស់វាខុសគ្នា។

សន្លឹករចនាប័ទ្មដែលពាក់ព័ន្ធ

មធ្យោបាយដ៏មានឥទ្ធិពល និងងាយស្រួលបំផុតក្នុងការកំណត់រចនាប័ទ្ម និងច្បាប់សម្រាប់គេហទំព័រមួយ។ រចនាប័ទ្មត្រូវបានរក្សាទុកក្នុងឯកសារដាច់ដោយឡែកដែលអាចប្រើបានសម្រាប់គេហទំព័រណាមួយ។

ដើម្បីរួមបញ្ចូលតារាងនៃរចនាប័ទ្មដែលពាក់ព័ន្ធ សូមប្រើស្លាកនៅក្នុងបឋមកថាទំព័រ (ឧទាហរណ៍ 1) ។

ឧទាហរណ៍ទី 1៖ ការភ្ជាប់សន្លឹករចនាប័ទ្មដែលបានភ្ជាប់

ផ្លូវទៅកាន់ឯកសាររចនាប័ទ្មអាចទាក់ទង ឬដាច់ខាត ដូចដែលបានបង្ហាញក្នុងឧទាហរណ៍នេះ។

គុណសម្បត្តិនៃវិធីសាស្ត្រនេះ។

ឯកសាររចនាប័ទ្មមួយត្រូវបានប្រើសម្រាប់ចំនួននៃគេហទំព័រណាមួយ វាក៏អាចប្រើវានៅលើគេហទំព័រផ្សេងទៀតផងដែរ។

អ្នកអាចផ្លាស់ប្តូរសន្លឹករចនាប័ទ្មដោយមិនចាំបាច់កែប្រែទំព័របណ្តាញ។

នៅពេលអ្នកផ្លាស់ប្តូររចនាប័ទ្មក្នុងឯកសារតែមួយ រចនាប័ទ្មត្រូវបានអនុវត្តដោយស្វ័យប្រវត្តិទៅគ្រប់ទំព័រដែលមានតំណភ្ជាប់ទៅវា។ ងាយស្រួលដោយមិនសង្ស័យ។ យើង​បញ្ជាក់​ទំហំ​ពុម្ពអក្សរ​នៅ​កន្លែង​តែ​មួយ ហើយ​វា​ផ្លាស់​ប្តូរ​នៅ​លើ​ទំព័រ​បណ្ដាញ​ទាំង​អស់​រាប់រយ ឬ​ច្រើន​ទៀត​នៃ​គេហទំព័រ​របស់​យើង។

នៅពេលដែលឯកសាររចនាប័ទ្មត្រូវបានផ្ទុកជាលើកដំបូង វាត្រូវបានទុកក្នុងឃ្លាំងសម្ងាត់នៅលើកុំព្យូទ័រមូលដ្ឋានរបស់អ្នកដាច់ដោយឡែកពីគេហទំព័រ ដូច្នេះគេហទំព័រនេះផ្ទុកលឿនជាងមុន។

សន្លឹករចនាប័ទ្មសកល

រចនាប័ទ្មត្រូវបានកំណត់នៅក្នុងឯកសារខ្លួនវា ហើយជាធម្មតាមានទីតាំងនៅក្បាលគេហទំព័រ។

បើនិយាយពីភាពបត់បែន និងសមត្ថភាព វិធីសាស្ត្រនៃការប្រើប្រាស់រចនាប័ទ្មនេះគឺទាបជាងទម្រង់មុន ប៉ុន្តែវាក៏អនុញ្ញាតឱ្យអ្នកដាក់រចនាប័ទ្មទាំងអស់នៅកន្លែងតែមួយផងដែរ។ ក្នុងករណីនេះ សិទ្ធិនៅក្នុងតួឯកសារ។ និយមន័យរចនាប័ទ្មត្រូវបានបញ្ជាក់ដោយស្លាកមួយ (ឧទាហរណ៍ 2) ។

ឧទាហរណ៍ទី 2៖ ការប្រើសន្លឹករចនាប័ទ្មសកល

រចនាប័ទ្ម H1 (ទំហំពុម្ពអក្សរ៖ 120%; /* ទំហំពុម្ពអក្សរ */ font-family: Verdana, Arial, Helvetica, sans-serif; // គ្រួសារពុម្ពអក្សរ */ color: #336; /* ពណ៌អត្ថបទ */ ) សួស្តី! ពិភពលោក!

ឧទាហរណ៍នេះបង្ហាញពីការផ្លាស់ប្តូរទៅរចនាប័ទ្មបឋមកថា។

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

រចនាប័ទ្មខាងក្នុង

រចនាប័ទ្ម​ក្នុង​បន្ទាត់​គឺ​ជា​ផ្នែក​បន្ថែម​យ៉ាង​សំខាន់​ទៅ​នឹង​ស្លាក​មួយ​ដែល​ប្រើ​នៅ​លើ​ទំព័រ​បណ្ដាញ។ គុណលក្ខណៈរចនាប័ទ្មត្រូវបានប្រើដើម្បីកំណត់រចនាប័ទ្មមួយ ហើយតម្លៃរបស់វាត្រូវបានបញ្ជាក់ដោយប្រើភាសារចនាប័ទ្មសន្លឹក (ឧទាហរណ៍ 3) ។

ឧទាហរណ៍ទី 3៖ ការប្រើរចនាប័ទ្មខាងក្នុង

Styles សួស្តីពិភពលោក!

វាត្រូវបានណែនាំឱ្យប្រើរចនាប័ទ្មខាងក្នុងសម្រាប់ស្លាកតែមួយ ឬមិនប្រើវាទាល់តែសោះ ចាប់តាំងពីការផ្លាស់ប្តូរធាតុមួយចំនួនក្លាយជាបញ្ហា។ រចនាប័ទ្មខាងក្នុងមិនត្រូវគ្នានឹងមនោគមវិជ្ជានៃឯកសាររចនាសម្ព័ន្ធទេ នៅពេលដែលខ្លឹមសារ និងការរចនារបស់វាត្រូវបំបែក។

រចនាប័ទ្ម H1 (ទំហំពុម្ពអក្សរ៖ 120%; ពុម្ពអក្សរគ្រួសារ៖ Arial, Helvetica, sans-serif; ពណ៌៖ បៃតង;) សួស្តីពិភពលោក!

សួស្តីពិភពលោក!

ក្នុងឧទាហរណ៍ខាងលើ ក្បាលទីមួយត្រូវបានកំណត់ទៅជាពណ៌ក្រហម 36px ហើយក្បាលបន្ទាប់ត្រូវបានកំណត់ទៅជាពណ៌បៃតង និងពុម្ពអក្សរផ្សេង។

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

ការផ្ទុក CSS ធម្មតាសម្រាប់ថ្ងៃនេះ...មាតិកា...

CSS រារាំងការបង្ហាញ ដោយបង្ខំឱ្យអ្នកប្រើប្រាស់សម្លឹងអេក្រង់ពណ៌ស រហូតដល់ all-of-my-styles.css ត្រូវបានផ្ទុកពេញ។

វាជាទម្លាប់ធម្មតាក្នុងការបញ្ចូល CSS ទាំងអស់របស់គេហទំព័រទៅក្នុងទ្រព្យសម្បត្តិមួយ ឬពីរ ដែលមានន័យថាអ្នកប្រើប្រាស់ទាញយកច្បាប់ជាច្រើនដែលមិនអនុវត្តចំពោះទំព័របច្ចុប្បន្ន។ នេះដោយសារតែគេហទំព័រមួយរួមបញ្ចូលនូវប្រភេទទំព័រផ្សេងៗគ្នាដែលមាន "សមាសធាតុ" ជាច្រើន ហើយការបង្ហាញ CSS នៅកម្រិតសមាសភាគនីមួយៗនៅក្នុង HTTP/1 ធ្វើឱ្យប៉ះពាល់ដល់ដំណើរការ។

នេះមិនមែនជាបញ្ហាទេក្នុងករណី SPDY និង HTTP/2 ដែលធនធានតូចៗជាច្រើនអាចត្រូវបានផ្ទេរដោយចំណាយតិចបំផុត និងរក្សាទុកដោយឯករាជ្យ។

…មាតិកា… វាដោះស្រាយបញ្ហានៃការលែងត្រូវការតទៅទៀត ប៉ុន្តែដើម្បីធ្វើដូច្នេះអ្នកត្រូវដឹងពីអ្វីដែលនឹងមាននៅលើទំព័រក្នុងអំឡុងពេលលទ្ធផលដែលអាចរំខានដល់ការផ្សាយលទ្ធផល។ លើសពីនេះទៀត browser នៅតែត្រូវផ្ទុក CSS ទាំងអស់ មុនពេលដែលវាអាចបង្ហាញអ្វីទាំងអស់។ ការផ្ទុកយឺត /site-footer.css នឹងពន្យាពេលការបង្ហាញ.

សរុប

នៅក្នុងកូដនេះ យើងបានរៀបចំរចនាប័ទ្មក្នុងបន្ទាត់មួយចំនួន ដែលផ្តល់ឱ្យយើងនូវការបង្ហាញដំបូងរហ័ស និងលាក់ធាតុទាំងនោះដែលយើងមិនទាន់មានរចនាប័ទ្ម ហើយបន្ទាប់មកយើងផ្ទុក CSS ដែលនៅសល់ដោយអសមកាលដោយប្រើ JavaScript ។ CSS ដែលនៅសល់នេះនឹងបដិសេធការបង្ហាញ៖ គ្មានសម្រាប់ .main-article ជាដើម។

ឧទាហរណ៍​មួយ​ដែល​ខិត​ទៅ​ជិត​ជីវិត​គឺ​វិគី​ក្រៅ​បណ្ដាញ​របស់​ខ្ញុំ ដែល​វា​ដំណើរការ​ដូច​ជា​ភាព​ទាក់ទាញ៖

នៅលើ 3G ការបង្ហាញដំបូងគឺលឿនជាង 0.6 វិនាទី។ លទ្ធផលពេញលេញមុន និងក្រោយ។

ប៉ុន្តែមានគុណវិបត្តិមួយចំនួន៖

ត្រូវការបណ្ណាល័យ JavaScript (តូច)

ជាអកុសល នេះគឺដោយសារតែការអនុវត្តនៅក្នុង WebKit ។ នៅពេលដែលបានបន្ថែមទៅទំព័រនោះ WebKit រារាំងការបង្ហាញរហូតដល់សន្លឹករចនាប័ទ្មត្រូវបានផ្ទុក ទោះបីជាវាត្រូវបានបន្ថែមដោយស្គ្រីបក៏ដោយ។

នៅក្នុង Firefox និង IE/Edge ឯកសាររចនាប័ទ្មដែលបានបន្ថែមដោយស្គ្រីបត្រូវបានផ្ទុកទាំងស្រុងដោយអសមកាល។ ស្ថិរភាព កំណែ Chromeនៅតែមានឥរិយាបទដូច WebKit ប៉ុន្តែនៅក្នុង Canary យើងបានប្តូរទៅ Firefox/Edge ឥរិយាបទ។

អ្នកត្រូវបានកំណត់ត្រឹមដំណាក់កាលទាញយកពីរ

នៅក្នុងឧទាហរណ៍មុន CSS ខាងក្នុងលាក់មាតិកាដែលមិនទាន់មានរចនាប័ទ្មដោយប្រើការបង្ហាញ: គ្មាន បន្ទាប់មក CSS ដែលបានផ្ទុកអសមកាលបង្ហាញវា។ ដោយយកគំនិតនេះបន្ថែមទៅឯកសារ CSS ពីរ ឬច្រើន ពួកវាអាចផ្ទុកលើសចំណុះ ដែលបណ្តាលឱ្យមាតិកាលោតជុំវិញនៅពេលវាផ្ទុក៖

មាតិកាលោតធ្វើឱ្យអ្នកប្រើប្រាស់ខឹង ស្ទើរតែដូចគ្នាជាមួយនឹងការផ្សាយពាណិជ្ជកម្មលេចឡើង. ដុត​របស់​គួរ​ឲ្យ​ស្អប់​ខ្ពើម​នេះ។

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

វិធីគឺសាមញ្ញជាង និងល្អជាង.............

ផែនការគឺសម្រាប់នីមួយៗដើម្បីទប់ស្កាត់មាតិកាមិនឱ្យបង្ហាញ ខណៈពេលដែលរចនាប័ទ្មកំពុងផ្ទុក ប៉ុន្តែអនុញ្ញាតឱ្យមាតិកាត្រូវបានបង្ហាញមុនពេលវា។ រចនាប័ទ្មត្រូវបានផ្ទុកស្របគ្នា ប៉ុន្តែត្រូវបានអនុវត្តតាមលំដាប់លំដោយ។ សូមអរគុណដល់ការនេះវាចាប់ផ្តើមមានឥរិយាបទដូច។

ឧបមាថា CSS សម្រាប់បឋមកថា អត្ថបទ និងបាតកថាគេហទំព័របានផ្ទុក ហើយអ្វីៗផ្សេងទៀតគ្រាន់តែកំពុងផ្ទុក នេះជាអ្វីដែលទំព័រនឹងមើលទៅដូចនោះ៖

• "មួក": បង្ហាញ
• អត្ថបទ៖ បង្ហាញ
• មតិយោបល់៖ មិនត្រូវបានបង្ហាញទេ CSS មុនពេលពួកគេមិនទាន់បានផ្ទុក (/comment.css)
• ផ្នែក "អំពីខ្ញុំ"៖ មិនត្រូវបានបង្ហាញ CSS នៅពីមុខវាមិនទាន់បានផ្ទុកនៅឡើយ (/comment.css)
• បាតកថា៖ មិនត្រូវបានបង្ហាញទេ CSS នៅពីមុខវាមិនទាន់បានផ្ទុក (/comment.css) ទោះបីជា CSS របស់វាបានផ្ទុករួចហើយក៏ដោយ

នេះផ្តល់ឱ្យយើងនូវការបង្ហាញទំព័រជាប់លាប់។ អ្នកមិនចាំបាច់សម្រេចចិត្តថាអ្វីដែលរាប់ជា "អេក្រង់ដំបូង" គ្រាន់តែរួមបញ្ចូល CSS នៃសមាសភាគទំព័រ មុនពេលឧទាហរណ៍ដំបូងនៃសមាសភាគនោះ។ នេះគឺឆបគ្នាយ៉ាងពេញលេញជាមួយនឹងការទាញយកស្ទ្រីម ដោយសារវាមិនចាំបាច់បញ្ចេញរហូតដល់ពេលដែលវាត្រូវការ។

អ្នក​ត្រូវ​ប្រយ័ត្ន​ពេល​ប្រើ​ប្រព័ន្ធ​ប្លង់​ដែល​ប្លង់​ត្រូវ​បាន​កំណត់​ដោយ​មាតិកា (ឧ. តារាង និង​ប្រអប់​បត់) ដើម្បី​ជៀសវាង​មាតិកា​លោត​ពេល​វា​ផ្ទុក។ នេះមិនមែនទេ។ បញ្ហាថ្មី។ប៉ុន្តែជាមួយនឹងការបង្ហាញបន្តិចម្តង ៗ អ្នកនឹងត្រូវឆ្លងកាត់វាឱ្យបានញឹកញាប់។ អ្នកអាចជួសជុលឥរិយាបទរបស់ Flexbox ជាមួយនឹងការលួចចូល ប៉ុន្តែក្រឡាចត្រង្គ CSS គឺជាប្រព័ន្ធប្រសើរជាងមុនសម្រាប់ការរៀបចំទំព័រទាំងមូល (ទោះបីជា Flexbox គឺល្អសម្រាប់ផ្នែកតូចៗក៏ដោយ) ។

ការផ្លាស់ប្តូរនៅក្នុង Chrome

ឥរិយាបថបច្ចុប្បន្នរបស់ Chrome/Safari គឺត្រូវគ្នានឹងថយក្រោយ ពួកគេគ្រាន់តែរារាំងការបង្ហាញយូរជាងការចាំបាច់។ ឥរិយាបថរបស់ Firefox មានភាពស្មុគស្មាញបន្តិច ប៉ុន្តែមានវិធីដោះស្រាយ...

ជួសជុលសម្រាប់ Fox

ដោយសារ Firefox មិនតែងតែរារាំងការ rendering ក្នុងករណីនោះ អ្នកត្រូវគិតគូរជាមួយវាបន្តិច ដើម្បីជៀសវាងការបំភាន់មាតិកាអាក្រាត។ សំណាង​ល្អ វា​មាន​ភាព​ងាយ​ស្រួល​ណាស់ ដោយ​សារ​វា​រារាំង​ការ​ញែក ប៉ុន្តែ​ក៏​ត្រូវ​រង់​ចាំ​សម្រាប់​រចនាប័ទ្ម​ដើម្បី​ផ្ទុក៖

…

ដើម្បីឱ្យវាដំណើរការ ធាតុមិនត្រូវទទេទេ ចន្លោះនៅក្នុងវាគឺគ្រប់គ្រាន់។

Firefox និង Edge ជាមួយ IE នឹងបង្ហាញអ្នកនូវការបង្ហាញបន្តិចម្តងៗដ៏អស្ចារ្យ ខណៈដែល Chrome និង Safari នឹងបង្ហាញ អេក្រង់ពណ៌សរហូតដល់ CSS ទាំងអស់ត្រូវបានផ្ទុកពេញ។ ឥរិយាបថបច្ចុប្បន្នរបស់ Chrome និង Safari គឺមិនអាក្រក់ជាងការដាក់រចនាប័ទ្មទាំងអស់នោះទេ ដូច្នេះអ្នកអាចចាប់ផ្តើមប្រើវិធីសាស្ត្រនេះឥឡូវនេះ។ ក្នុងរយៈពេលប៉ុន្មានខែខាងមុខនេះ Chrome នឹងប្តូរទៅវិធីសាស្រ្តរបស់ Edge ហើយអ្នកប្រើប្រាស់កាន់តែច្រើននឹងឃើញការបង្ហាញកាន់តែលឿន។

ដូច្នេះ នេះ​ជា​វិធី​ងាយ​ស្រួល​ជាង​សម្រាប់​អ្នក​ក្នុង​ការ​ដឹក​ជញ្ជូន​តែ​ប៉ុណ្ណោះ។ CSS ដែលត្រូវការហើយក្នុងពេលជាមួយគ្នានេះទទួលបានការបង្ហាញលឿនជាងមុន។ សូមរីករាយជាមួយវាដើម្បីសុខភាពរបស់អ្នក!