JavaScript는 수만 개의 데이터 예제 코드를 한 번에 표시합니다.

이 글에서는 수만 개의 데이터를 한 번에 표시하는 자바스크립트의 구현 방법을 주로 소개합니다. 참조값이 아주 좋습니다.

한 동료가 인터넷에서 면접 질문을 본 적이 있다고 모두에게 말했습니다. "백엔드가 수만 개의 데이터를 프런트 엔드, 프런트 엔드는 어떻습니까?" 페이지로 렌더링됩니까?", 어떻게 대답해야 합니까? 그 결과 사무실은 떠들썩해졌고, 동료들은 우리의 계획을 하나씩 논의하기 시작했습니다. 어떤 사람은 HTML을 생성하기 위해 직접 루프를 만들어 페이지에 삽입해야 한다고 말했고, 어떤 사람은 면접관이 바보라고 말했는데, 어떻게 백그라운드에서 수만 개의 데이터를 프런트 엔드로 전송할 수 있습니까? ? 곰곰이 생각해보니 백엔드가 수만 개의 데이터를 프런트엔드에 보낼 정도로 멍청한지는 중요하지 않다. 이런 일이 발생하면 프런트엔드가 데이터를 얻은 후, 데이터를 직접 html 문자열로 변환하고 DOM 작업을 통해 삽입합니다. 페이지에 도달하면 필연적으로 페이지가 느려지게 됩니다. 이러한 이유로 테스트용 코드도 다음과 같습니다.

$.get("data.json", function (response) {
 //response里大概有13万条数据
 loadAll( response );
});
function loadAll(response) {
 var html = "";
 for (var i = 0; i < response.length; i++) {
  var item = response[i];
  html += "<li>title:" + item.title + " content:" + item.content + "</li>";
 }
 $("#content").html(html);
}

data.json에는 약 130,000개의 데이터가 있는데, Ajax를 통해 데이터를 얻은 후 가장 간단하고 투박하게 Chrome 브라우저에서 데이터를 표시합니다. , 데이터를 표시하기 위해 페이지를 새로 고쳤습니다. 전체 프로세스는 약 5초가 걸렸으며 매우 지연되었습니다. 코드의 실행 시간을 대략 관찰한 결과 문자열을 생성하기 위해 반복하는 과정은 실제로 시간이 많이 걸리지 않는다는 것을 알았습니다. 성능 병목 현상은 HTML 문자열을 문서에 삽입하는 과정, 즉 $("#content") 입니다. html(html); 결국 이 코드를 실행하면 문서에 삽입되는 li 요소가 130,000개가 됩니다. 페이지 렌더링 속도가 느린 것은 당연합니다.

한 번에 130,000개의 데이터를 렌더링하면 페이지 로딩 속도가 느려지므로, 그렇게 많은 데이터를 한 번에 렌더링할 수 없고, 한 번에 10,000개 등 일괄적으로 렌더링하여 1시간 안에 완료합니다. 13번 이렇게 하면 페이지의 렌더링 속도가 향상될 수 있습니다. 그러나 이러한 13개 작업이 동일한 코드 실행 프로세스에서 실행되면 잘못된 페이지 스턱 문제를 해결할 수 없을 뿐만 아니라 코드가 복잡해집니다. 다른 언어의 유사한 문제에 대한 가장 좋은 해결책은 멀티스레딩을 사용하는 것입니다. Javascript에는 멀티스레딩이 없지만 setTimeout 및 setInterval 두 함수는 멀티스레딩과 유사한 효과를 가질 수 있습니다. 따라서 이 문제를 해결하기 위해 setTimeout을 사용할 수 있습니다. setTimeout 함수의 기능은 지정된 시간 이후에 작업을 완료하기 위해 새 스레드를 시작하는 것으로 볼 수 있습니다.

$.get("data.json", function (response) {
  //response里大概有13万条数据
  loadAll( response );
});

function loadAll(response) {
  //将13万条数据分组， 每组500条，一共260组
  var groups = group(response);
  for (var i = 0; i < groups.length; i++) {
    //闭包， 保持i值的正确性
    window.setTimeout(function () {
      var group = groups[i];
      var index = i + 1;
      return function () {
        //分批渲染
        loadPart( group, index );
      }
    }(), 1);
  }
}

//数据分组函数（每组500条）
function group(data) {
  var result = [];
  var groupItem;
  for (var i = 0; i < data.length; i++) {
    if (i % 500 == 0) {
      groupItem != null && result.push(groupItem);
      groupItem = [];
    }
    groupItem.push(data[i]);
  }
  result.push(groupItem);
  return result;
}
var currIndex = 0;
//加载某一批数据的函数
function loadPart( group, index ) {
  var html = "";
  for (var i = 0; i < group.length; i++) {
    var item = group[i];
    html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
  }
  //保证顺序不错乱
  while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
  }
}

위 코드의 일반적인 실행 흐름은

1입니다. ajax를 사용하여 처리해야 할 데이터를 가져옵니다. 총 130,000개입니다.

2. 배열을 각각 500개 항목, 총 260개 그룹으로 그룹화합니다.

3. 이 260개 데이터 그룹을 반복하고, 각 데이터 그룹을 별도로 처리하고, setTimeout 함수를 사용하여 다음을 수행합니다. 대량의 데이터 렌더링으로 인해 메인 스레드가 차단되는 것을 방지하기 위해 새 실행 스레드(비동기)를 시작합니다.

loadPart 함수

while (index - currIndex == 1) {
 $("#content").append(html);
 currIndex = index;
}

에 이 코드가 있어 HTML이 최종적으로 다른 스레드에서 문서에 삽입될 때 순서의 일관성을 보장합니다. HTML을 삽입할 때 동시에 실행되는 코드가 서로를 빼앗지 않도록 하기 위함입니다.

이렇게 실행하면 대기 시간 없이 바로 페이지가 뜹니다. 동기식에서 비동기식으로 변경하면 코드의 전체 리소스 소비가 증가하지만 페이지는 즉시 응답할 수 있습니다. 또한 프런트 엔드의 실행 환경은 사용자의 컴퓨터이므로 약간의 성능 저하로 인해 사용자 경험이 향상됩니다. 상대적으로 가치가 있습니다.

예제에 언급된 상황은 실제 환경에서는 거의 발생하지 않지만 일상 업무에는 항상 그럴듯한 시나리오가 있으며 내부의 처리 아이디어를 사용하면 문제를 해결하는 데 도움이 될 수 있습니다.

ps: setTimeout은 실제로 멀티스레드는 아니지만 표현의 편의를 위해 스레드라는 단어를 빌려왔습니다

위 내용은 JavaScript는 수만 개의 데이터 예제 코드를 한 번에 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!