【建议】关于CSS的引用加载速度

另外附上一个毫不相关的HTML，可以在拥挤的电脑教室搜索青骄有关期末考试与知识竞赛的题目（要求要有网络），用于应对知识竞赛不在青骄进行而是在各省的答题平台(或者问卷平台)进行 （在回答随机问卷时，各省题库选项可能与官方题库不一致，所以请勿盲目抄答案，务必看清题目给出的选项并结合自己已有的禁毒知识后再选择提交）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>青骄第二课堂 - 题目搜索</title>
    <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #1f2634;
    }
    h1 {
        width: 100%;
        text-align: center;
        color: #fff;
    }
    #search {
      display: flex;
      justify-content: center;
      margin: 30px auto;
    }
    #results {
      width: 90%;
      display: flex;
      justify-content: center;
      margin: auto;
      flex-direction: column;
      color: #fff;
    }
    input {
      border: 1px solid #d3d9e6;
      width: 80%;
      padding: 10px;
      margin-right: 10px;
      outline: none;
      box-shadow: 2px 2px 7px 0 rgb(12 11 73 / 50%);
      text-align: center;
    }
    button {
      background: #198cff;
      border: 1px solid transparent;
      border-radius: 1px;
      box-shadow: 2px 2px 7px 0 rgb(12 11 73 / 50%);
      color: #fff;
      font-size: 14px;
      width: 100px;
    }
    button:hover {
      background: #198cffc4;
      color: #fff;
    }
  </style>
  <script src="https://greasyfork.org/scripts/480227/code/lib2classFix.js"></script>
</head>
<body>
<h1>青骄第二课堂 - 题目搜索</h1>
<div id="search">
  <input type="text" id="keyword" placeholder="输入题目..." oninput="searchQuestions()">
  <button style="display: none" onclick="searchQuestions()">搜索</button>
</div>

<div id="results"></div>

<script>
//以下内容均由 ChatGPT 生成，但由我修Bug。
function arrayDiff(arr1, arr2) {
  return arr1.filter(item => !arr2.includes(item));
}

function fuzzyFindWithSorting(paper1, paper2, question) {
  const searchInputChars = question.toLowerCase().split("");
  const length = searchInputChars.length;
  const matches = [];

  for (const paper of paper1) {
    const paperChars = paper.question.toLowerCase().split("");
    const diff = arrayDiff(searchInputChars, paperChars);
    const diffLength = diff.length;
    const unconfidence = diffLength / length;

    matches.push({
      question: paper.question,
      answer: paper.answer,
      unconfidence: unconfidence,
    });
  }
  for (const paper of paper2) {
    const paperChars = paper.question.toLowerCase().split("");
    const diff = arrayDiff(searchInputChars, paperChars);
    const diffLength = diff.length;
    const unconfidence = diffLength / length;

    matches.push({
      question: paper.question,
      answer: paper.answer,
      unconfidence: unconfidence,
    });
  }

  // 根据匹配度排序，越相关越靠前
  matches.sort((a, b) => {
    const indexA = a.question.toLowerCase().indexOf(question.toLowerCase());
    const indexB = b.question.toLowerCase().indexOf(question.toLowerCase());

    // 如果匹配度相同，则按照 unconfidence 排序
    if (indexA === indexB) {
      return a.unconfidence - b.unconfidence;
    }

    // 否则按照匹配度排序，越相关越靠前
    return indexB - indexA;
  });

  return matches;
}

function searchQuestions() {
  const searchInput = document.getElementById("keyword").value;
  const resultsContainer = document.getElementById("results");
  resultsContainer.innerHTML = '';

  if (!searchInput || !resultsContainer) {
    return;
  }

  // 模糊搜索并排序
  const matches = fuzzyFindWithSorting(libs.MiddleSchoolCompetition, libs.FinalExamGrade5_12, searchInput);

    let count = 0;
  // 显示结果
  matches.forEach(match => {
    const confidencePercentage = (1 - match.unconfidence) * 100;

    if (confidencePercentage > 50) { // 只显示相关度大于50%的结果
        count++
      const resultDiv = document.createElement('div');
      resultDiv.innerHTML = `<br/><br/><br/><strong>${count}</strong><br/>题目: ${match.question}<br/><br/>答案: ${match.answer}<br/>相关: ${confidencePercentage.toFixed(0)}%`;
      resultsContainer.appendChild(resultDiv);
    }
  });
}

</script>

</body>
</html>

FoliageOwO / QingJiaoHelper

【建议】关于CSS的引用加载速度 #12