Thuật toán frontend: Tìm node chứa content chính

Tại sao nên đọc bài này

• Đập vào mặt những đứa nói làm Frontend thì không cần logic, thuật toán

• Xem tui khoe công việc đang làm thôi

Vấn đề

Solution

Ratio = (Node nào có text length / tổng sổ node bên trong) Node nào có cái ratio đó cao nhất thì khả năng cao là main content

Cùng test thử nhé

• Bạn có thể lấy được text content của một node bằng node.innerText

• Số lượng child node của div qua node.childElementCount hoặc lấy list children qua node.childNodes. (Note là node.childElementCount = node.childNodes.length nhé)

Children count

const getTotalChildNode = (node, total = 0) => {
  if (!node.childElementCount) {
    return total;
  }

  return total + (node.childElementCount || 0) + Array.from(node.childNodes).map(child => getTotalChildNode(child)).reduce((a, b) => a + b, 0)
}

Ratio

const textNodeRatio = (node) => {
  const totalNodes = getTotalChildNode(node);
  if (!node.innerText || !totalNodes) {
    return 0;
  }

  const textLength = node.innerText.length;
  return textLength / getTotalChildNode(node);
}

const checkAllNodes = (node, result = []) => {
  result.push({node, ratio: textNodeRatio(node)});
  if (node.childElementCount) {
    Array.from(node.childNodes).forEach(child => {
      checkAllNodes(child, result);
    })
  }

  return result.sort((a, b) => b.ratio - a.ratio).slice(0, 10);
}

Context của bài toán

const textNodeRatio = (node) => {
  const totalNodes = getTotalChildNode(node);
  if (!node.innerText || !totalNodes) {
    return 0;
  }

  const textLength = node.innerText.length;
  if (textLength < 1000) {
	// Thằng nào có text ít quá thì cho ra đê luôn 😱
    return 0;
  }

  return textLength / getTotalChildNode(node);
}

Full script

const getTotalChildNode = (node, total = 0) => {
  if (!node.childElementCount) {
    return total;
  }

  return total + (node.childElementCount || 0) + Array.from(node.childNodes).map(child => getTotalChildNode(child)).reduce((a, b) => a + b, 0)
}

const textNodeRatio = (node) => {
  const totalNodes = getTotalChildNode(node);
  if (!node.innerText || !totalNodes) {
    return 0;
  }

  const textLength = node.innerText.length;
  if (textLength < 1000) {
    return 0;
  }

  return textLength / getTotalChildNode(node);
}

const checkAllNodes = (node, result = []) => {
  result.push({node, ratio: textNodeRatio(node)});
  if (node.childElementCount) {
    Array.from(node.childNodes).forEach(child => {
      checkAllNodes(child, result);
    })
  }

  return result.sort((a, b) => b.ratio - a.ratio).slice(0, 10);
}

Độ hoàn thiện

Đánh giá performance

Một số idea khác

• Tìm xem div nào chiếm nhiều viewport nhất

• Div nào chứa nhiều thẻ p trong đó nhất

• Coi xem thằng này làm làm sao https://github.com/mozilla/readability

Tổng kết

Bài viết “lan quyên”

Thuật ngữ trong Frontend - Optimization

Dành cho các bạn mới tiếp cận và thấy quá nhiều thuật ngữ mới Dành cho các bạn có thể đã làm FE một thời gian rồi nhưng đôi khi vẫn không biết có một thứ như vậy tồn tại trên đời Có vài keyword để tối ưu performance cho website Trong bài này mình sẽ nói về các thuật ngữ liên quan tới optimization nhé!

https://thanhle.blog/blog/thuat-ngu-trong-frontend-optimization

Tương lai của frontend

Cùng xem trí tưởng tượng của thằng viết bài này bay xa tới đâu Một số vấn đề hiện nay của frontend Mình được gọi là làm việc nghiêm túc ở ngành lập trình khoảng 4 năm, còn thực tế kinh nghiệm làm web thì chắc khoảng 12-13 năm gì đó.

https://thanhle.blog/blog/tuong-lai-cua-frontend

Một số thứ để nhanh vượt qua giai đoạn Junior/Fresher hơn

Nếu bạn đang là Junior/Fresher, mới đi làm bla bla để mau chóng giỏi hơn Đầu tiên khi đi làm bạn cần phải biết rõ là mình đang ở đâu và mình đang cần gì? VD như ...

https://thanhle.blog/blog/mot-so-thu-de-nhanh-vuot-qua-giai-doan-junior-fresher-hon