Jassif Team Institution

CSS செயல்திறன் தேர்வுமுறை

CSS செயல்திறன் தேர்வுமுறை உங்கள் வலைத்தளம் வேகமாக ஏற்றப்படுவதையும் மென்மையாக இயங்குவதையும் செய்கிறது; இது ஒரு சிறந்த பயனர் அனுபவத்தையும் விளைவிக்கிறது.

1. எளிய தேர்விகளைப் பயன்படுத்துங்கள்

முடிந்தால் எளிய தேர்விகளைப் பயன்படுத்துங்கள். சிக்கலான தேர்விகள் பாகுபடுத்தும் நேரத்தை அதிகரிக்கின்றன.

body #navlist ul li a.button:hover {
  background-color: blue;
}

.button:hover {
  background-color: blue;
}

2. பாணியிடலுக்கு உலகளாவிய தேர்வியைத் தவிர்க்கவும்

கண்டிப்பாக தேவையில்லாதபோது உலகளாவிய தேர்வியை (*) தவிர்க்கவும். உலகளாவிய தேர்வி (*) ஒவ்வொரு உறுப்பையும் பாதிக்கிறது மற்றும் பக்க வழங்கலை மெதுவாக்கலாம்.

* {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body, h1, h2, h3, p, ul, ol {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

3. உள்நிலை பாணிகளைத் தவிர்க்கவும்

தேவையில்லாதபோது உள்நிலை பாணிகளைத் தவிர்க்கவும். உள்நிலை பாணிகள் உங்கள் HTML ஐ கனமாக்குகின்றன மற்றும் நிர்வகிக்க கடினமாக உள்ளன.

<div style="color: red; font-size: 18px;">Hello</div>
<p style="color: blue; font-size: 16px;">Test</p>

<div class="alert">Hello</div>
<p class="info">Test</p>

.alert {
  color: red;
  font-size: 18px;
}

.info {
  color: blue;
  font-size: 16px;
}

4. @import ஐத் தவிர்க்கவும்

வெளிப்புற CSS ஐ ஏற்றுவதற்கு @import ஐப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இது பாணித் தாள் ஏற்றத்தை தாமதப்படுத்துகிறது.

பக்கத்தை வழங்குவதற்கு முன் ஏற்றப்படும் வகையில் தலைப்புப் பிரிவில் <link> குறிச்சொல்லுடன் வெளிப்புற CSS ஐச் சேர்க்கவும்.

<style>
@import url("style.css");
@import url("components.css");
</style>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="components.css">

5. குறுக்குப் பண்புகளைப் பயன்படுத்துங்கள்

முடிந்தால் குறுக்குப் பண்புகளைப் பயன்படுத்துங்கள். இது இடத்தைச் சேமிக்கிறது மற்றும் பாகுபடுத்த வேகமானது.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

margin: 10px 20px;

/* Border shorthand */
border: 1px solid #000;

/* Background shorthand */
background: #fff url(bg.jpg) no-repeat center;

/* Font shorthand */
font: bold 16px/1.5 Arial, sans-serif;

6. தேவையில்லாத அனிமேஷன்களைக் குறைக்கவும்

அதிக எண்ணிக்கையிலான அனிமேஷன்கள் மற்றும் பெரிய அனிமேஷன்களுக்கு கையாள அதிக செயலாக்க சக்தி தேவைப்படுகிறது, இது செயல்திறனைக் குறைக்கிறது. எனவே, தேவையில்லாத அனிமேஷன்களை அகற்றவும்.

7. மறுசீரமைப்பை ஏற்படுத்தாத பண்புகளைப் பயன்படுத்துங்கள்

அனிமேஷன் செயல்திறன் நீங்கள் என்ன பண்புகளை அனிமேஷன் செய்கிறீர்கள் என்பதைப் பொறுத்தது.

சில பண்புகள் (width, height, left, top போன்றவை), அனிமேஷன் செய்யப்படும்போது ஒரு தளவமைப்பு மறுகணக்கீட்டைத் தூண்டுகின்றன, மேலும் அவை தவிர்க்கப்பட வேண்டும்.

முடிந்தால், மறுசீரமைப்பை ஏற்படுத்தாத அனிமேஷன் பண்புகளைப் பயன்படுத்துங்கள், transforms, opacity மற்றும் filter போன்றவை.

8. CSS ஐ இணைத்து சுருக்கவும்

முடிந்தால் ஒரு CSS கோப்பைப் பயன்படுத்துங்கள், மேலும் கோப்பு அளவைக் குறைக்க இடைவெளிகள் மற்றும் கருத்துகளை அகற்றவும்.

நீங்கள் பின்வரும் கருவிகளைப் பயன்படுத்தலாம்:

/* Header Styles */
.header {
    margin: 0;
    padding: 1rem;
    background-color: #ffffff;
}

.header .logo {
    width: 100px;
    height: 50px;
}

/* Navigation */
.nav-list {
    list-style: none;
    display: flex;
}

.header{margin:0;padding:1rem;background-color:#fff}.header .logo{width:100px;height:50px}.nav-list{list-style:none;display:flex}

9. உங்கள் CSS ஐ கேச் செய்யுங்கள்

உங்கள் CSS கோப்பு உலாவியால் கேச் செய்யப்படுவதை உறுதிப்படுத்திக் கொள்ளுங்கள், அதற்கு உங்கள் சேவையக அமைப்புகளில் நீண்ட காலத்திற்கு காலாவதி நேரத்தைக் கொடுப்பதன் மூலம். இது பயனர்கள் அதை மீண்டும் ஏற்ற வேண்டிய அதிர்வெண்ணைக் குறைக்கிறது.

Cache-Control: public, max-age=31536000
Expires: Wed, 01 Jan 2025 00:00:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT

CSS செயல்திறன் தேர்வுமுறை பயிற்சி

செயல்திறன் தேர்வுமுறை பற்றிய உங்கள் அறிவை இந்த பயிற்சியுடன் சோதிக்கவும்.

சுருக்கம்