การเพิ่มประสิทธิภาพ Markdown

เมื่อเนื้อหา Markdown ของคุณเติบโตขึ้น ประสิทธิภาพก็กลายเป็นสิ่งสำคัญ เรียนรู้วิธีการเพิ่มประสิทธิภาพการประมวลผลและการเรนเดอร์ Markdown เพื่อประสบการณ์ผู้ใช้ที่เร็วขึ้น

กลยุทธ์การประมวลผล

1. การแคชผลลัพธ์ที่แปลงแล้ว

const cache = new Map();

function renderMarkdown(content, key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  
  const html = md.render(content);
  cache.set(key, html);
  return html;
}

2. การประมวลผลแบบเลซี่

// ประมวลผลเฉพาะเนื้อหาที่มองเห็น
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const content = entry.target.getAttribute('data-markdown');
      entry.target.innerHTML = md.render(content);
      observer.unobserve(entry.target);
    }
  });
});

3. การประมวลผลในเวลาสร้าง

// เวลาสร้าง (ประสิทธิภาพดีที่สุด)
const fs = require('fs');
const marked = require('marked');

const markdown = fs.readFileSync('content.md', 'utf8');
const html = marked.parse(markdown);
fs.writeFileSync('output.html', html);

การเพิ่มประสิทธิภาพภาพ

การโหลดแบบเลซี่

![คำอธิบายภาพ](large-image.jpg){loading="lazy"}

หรือใช้ HTML:

<img src="large-image.jpg" alt="คำอธิบายภาพ" loading="lazy">

ภาพที่ตอบสนอง

![คำอธิบาย](image.jpg)

พร้อมการประมวลผล CSS:

img {
  max-width: 100%;
  height: auto;
}

รูปแบบสมัยใหม่

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="คำอธิบาย">
</picture>

การเพิ่มประสิทธิภาพการเน้นโค้ด

ใช้ไลบรารีน้ำหนักเบา

// แทน highlight.js (ใหญ่)
import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';

// โหลดเฉพาะภาษาที่ต้องการ

การเน้นสีฝั่งเซิร์ฟเวอร์

// ประมวลผลก่อนส่งไปยังไคลเอนต์
const marked = require('marked');
const Prism = require('prismjs');

marked.setOptions({
  highlight: function(code, lang) {
    if (Prism.languages[lang]) {
      return Prism.highlight(code, Prism.languages[lang], lang);
    }
    return code;
  }
});

เทคนิคการแบ่งเนื้อหา

แยกเอกสารยาว

// แบ่ง Markdown เป็นส่วนๆ
function chunkMarkdown(content, chunkSize = 1000) {
  const sections = content.split(/^##\s/m);
  return sections.map(section => '## ' + section);
}

การโหลดแบบค่อยเป็นค่อยไป

async function loadChunks(chunks) {
  for (const chunk of chunks) {
    await new Promise(resolve => setTimeout(resolve, 0));
    const html = md.render(chunk);
    container.insertAdjacentHTML('beforeend', html);
  }
}

การวัดประสิทธิภาพ

วัดเวลาการประมวลผล

console.time('การประมวลผล Markdown');
const html = md.render(largeMarkdownContent);
console.timeEnd('การประมวลผล Markdown');

ใช้ Performance API

performance.mark('markdown-start');
const html = md.render(content);
performance.mark('markdown-end');

performance.measure('markdown-processing', 'markdown-start', 'markdown-end');
const measure = performance.getEntriesByName('markdown-processing')[0];
console.log(`เวลาการประมวลผล: ${measure.duration}ms`);

รายการตรวจสอบประสิทธิภาพ

• [ ] เปิดใช้งานการแคชสำหรับ HTML ที่แปลงแล้ว
• [ ] ใช้การโหลดแบบเลซี่สำหรับภาพ
• [ ] เพิ่มประสิทธิภาพภาพ (บีบอัด รูปแบบสมัยใหม่)
• [ ] ประมวลผลในเวลาสร้างเมื่อเป็นไปได้
• [ ] แบ่งเอกสารยาว
• [ ] โหลดไลบรารีขั้นต่ำที่จำเป็น
• [ ] ใช้ Web Workers สำหรับการประมวลผลหนัก
• [ ] เปิดใช้งานการบีบอัด gzip/brotli
• [ ] ย่อ CSS และ JavaScript
• [ ] ใช้ CDN สำหรับทรัพยากรคงที่
• [ ] ใช้กลยุทธ์การแคชที่เหมาะสม
• [ ] ตรวจสอบและวัดประสิทธิภาพเป็นประจำ

สรุป

การเพิ่มประสิทธิภาพ Markdown ต้องการแนวทางที่ครอบคลุมซึ่งรวมถึงการแคชอย่างชาญฉลาด การประมวลผลที่มีประสิทธิภาพ และการเพิ่มประสิทธิภาพทรัพยากร โดยการใช้กลยุทธ์เหล่านี้ คุณสามารถปรับปรุงเวลาการโหลดอย่างมีนัยสำคัญและให้ประสบการณ์ผู้ใช้ที่ราบรื่นยิ่งขึ้น

แหล่งข้อมูลเพิ่มเติม

• Web Performance API
• คู่มือการเพิ่มประสิทธิภาพภาพ
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการแคช