Markdown प्रदर्शन अनुकूलन

Markdown प्रसंस्करण और वितरण का अनुकूलन तेज़ी से लोड होने वाली वेबसाइटों और सहज उपयोगकर्ता अनुभवों के लिए महत्वपूर्ण है। यह गाइड प्रदर्शन सर्वोत्तम प्रथाओं को कवर करती है।

पार्सर प्रदर्शन

तेज़ पार्सर चुनना

// विभिन्न पार्सरों का बेंचमार्क करें
const Benchmark = require('benchmark');
const marked = require('marked');
const markdownIt = require('markdown-it')();

const suite = new Benchmark.Suite;

suite
  .add('marked', () => marked.parse(markdown))
  .add('markdown-it', () => markdownIt.render(markdown))
  .on('complete', function() {
    console.log('सबसे तेज़ है ' + this.filter('fastest').map('name'));
  })
  .run();

पार्सर कॉन्फ़िगरेशन

// markdown-it को अनुकूलित करें
const md = require('markdown-it')({
  html: false,        // सुरक्षा और गति के लिए HTML अक्षम करें
  xhtmlOut: false,    // टैग बंद न करें
  breaks: false,      // \n को <br> में न बदलें
  linkify: false,     // यदि आवश्यक न हो तो स्वचालित लिंकिंग अक्षम करें
  typographer: false  // यदि आवश्यक न हो तो स्मार्ट कोट्स अक्षम करें
});

कैशिंग रणनीतियाँ

बिल्ड-टाइम कैशिंग

const cache = new Map();

function renderMarkdown(content, filePath) {
  // कैश जांचें
  if (cache.has(filePath)) {
    return cache.get(filePath);
  }
  
  // पार्स और कैश करें
  const result = md.render(content);
  cache.set(filePath, result);
  
  return result;
}

फ़ाइल-आधारित कैशिंग

const fs = require('fs');
const crypto = require('crypto');

function getCachedRender(content) {
  const hash = crypto.createHash('md5').update(content).digest('hex');
  const cachePath = `.cache/${hash}.html`;
  
  if (fs.existsSync(cachePath)) {
    return fs.readFileSync(cachePath, 'utf8');
  }
  
  const result = md.render(content);
  fs.writeFileSync(cachePath, result);
  return result;
}

ब्राउज़र कैशिंग

// सर्विस वर्कर कैशिंग
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

लेज़ी लोडिंग

छवियाँ

<img src="image.jpg" loading="lazy" alt="विवरण">

सामग्री अनुभाग

// लेज़ी रेंडरिंग के लिए Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const markdown = entry.target.dataset.markdown;
      entry.target.innerHTML = md.render(markdown);
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('[data-markdown]').forEach(el => {
  observer.observe(el);
});

कोड स्प्लिटिंग

डायनामिक इम्पोर्ट

// केवल आवश्यकता पड़ने पर सिंटैक्स हाइलाइटर लोड करें
async function highlightCode() {
  const hljs = await import('highlight.js');
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
}

चंकिंग

// बड़े दस्तावेज़ों को विभाजित करें
function chunkMarkdown(content, chunkSize = 5000) {
  const chunks = [];
  let currentChunk = '';
  
  content.split('\n').forEach(line => {
    if (currentChunk.length + line.length > chunkSize) {
      chunks.push(currentChunk);
      currentChunk = line;
    } else {
      currentChunk += '\n' + line;
    }
  });
  
  if (currentChunk) chunks.push(currentChunk);
  return chunks;
}

छवि अनुकूलन

संपीड़न

const sharp = require('sharp');

// बिल्ड के दौरान छवियों को अनुकूलित करें
async function optimizeImage(inputPath, outputPath) {
  await sharp(inputPath)
    .resize(1200, null, {
      withoutEnlargement: true,
      fit: 'inside'
    })
    .jpeg({ quality: 80, progressive: true })
    .toFile(outputPath);
}

आधुनिक प्रारूप

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="विवरण">
</picture>

रेस्पॉन्सिव छवियाँ

<img srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     src="large.jpg"
     alt="विवरण">

मिनिफिकेशन

HTML मिनिफिकेशन

const htmlMinifier = require('html-minifier');

const minified = htmlMinifier.minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  minifyCSS: true,
  minifyJS: true
});

CSS मिनिफिकेशन

const cssnano = require('cssnano');

cssnano.process(css, { from: undefined }).then(result => {
  fs.writeFileSync('output.min.css', result.css);
});

बंडल अनुकूलन

ट्री शेकिंग

// केवल आवश्यक फ़ंक्शन इम्पोर्ट करें
import { render } from 'markdown-it/lib/common/utils';

// के बजाय
import * as MarkdownIt from 'markdown-it';

Webpack कॉन्फ़िगरेशन

module.exports = {
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        markdown: {
          test: /[\\/]node_modules[\\/]markdown/,
          priority: -10
        }
      }
    }
  }
};

डेटाबेस अनुकूलन

इंडेक्सिंग

-- तेज़ क्वेरी के लिए इंडेक्स
CREATE INDEX idx_posts_slug ON posts(slug);
CREATE INDEX idx_posts_date ON posts(published_date);

क्वेरी अनुकूलन

// केवल आवश्यक फ़ील्ड्स लाएं
const posts = await db.select('id', 'title', 'slug', 'excerpt')
  .from('posts')
  .where('published', true)
  .orderBy('date', 'desc')
  .limit(10);

CDN एकीकरण

स्थिर संसाधन

<!-- लाइब्रेरी के लिए CDN का उपयोग करें -->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>

सामग्री वितरण

// CDN हेडर कॉन्फ़िगर करें
app.use((req, res, next) => {
  res.set('Cache-Control', 'public, max-age=31536000');
  next();
});

मॉनिटरिंग

प्रदर्शन मेट्रिक्स

// रेंडर समय मापें
console.time('markdown-render');
const html = md.render(markdown);
console.timeEnd('markdown-render');

// मेमोरी उपयोग
const used = process.memoryUsage();
console.log(`मेमोरी: ${Math.round(used.heapUsed / 1024 / 1024)} MB`);

Lighthouse स्कोर

# Lighthouse ऑडिट चलाएं
lighthouse https://your-site.com --output=html --output-path=./report.html

सर्वोत्तम प्रथाएं चेकलिस्ट

## प्रदर्शन चेकलिस्ट

- [ ] तेज़ Markdown पार्सर का उपयोग करें
- [ ] कैशिंग लागू करें (बिल्ड-टाइम + रनटाइम)
- [ ] छवियों और भारी सामग्री को लेज़ी लोड करें
- [ ] छवियों को अनुकूलित करें (संपीड़न + आधुनिक प्रारूप)
- [ ] HTML, CSS, JavaScript को मिनिफाई करें
- [ ] बड़े बंडलों को कोड स्प्लिट करें
- [ ] स्थिर संसाधनों के लिए CDN का उपयोग करें
- [ ] ब्राउज़र कैशिंग सक्षम करें
- [ ] सर्विस वर्कर लागू करें
- [ ] कोर वेब वाइटल्स की निगरानी करें
- [ ] डेटाबेस क्वेरी अनुकूलित करें
- [ ] प्लगइन ओवरहेड कम करें
- [ ] महत्वपूर्ण संसाधनों को प्रीलोड करें
- [ ] गैर-महत्वपूर्ण स्क्रिप्ट को टालें
- [ ] HTTP/2 या HTTP/3 का उपयोग करें

टूल्स

• Lighthouse: प्रदर्शन ऑडिटिंग
• WebPageTest: विस्तृत प्रदर्शन परीक्षण
• Bundle Analyzer: बंडल आकार का विश्लेषण करें
• Chrome DevTools: प्रदर्शन प्रोफ़ाइल करें
• Pingdom: अपटाइम और गति की निगरानी करें

निष्कर्ष

प्रदर्शन अनुकूलन के लिए पार्सिंग, कैशिंग, संसाधन वितरण और मॉनिटरिंग पर ध्यान देने की आवश्यकता है। तेज़, कुशल Markdown रेंडरिंग के लिए इन तकनीकों को लागू करें।