kintone 업데이트로 관련 레코드의 상세 화면이 지연 표시가 되었으므로, kintone 이벤트 처리시의 동작 검증을 해 보았습니다.
시도에 관련 레코드의 문자열 항목을 빨간색으로 표시합니다.

관련 레코드 세부 정보 화면에서 지연 표시 개요

관련 레코드를 지연 표시하는 것으로, 「상세 화면에서 표시가 개시되기까지의 대기 시간이 단축」되는 것 같습니다.

kintone 2021년 10월판 주요 업데이트

관련 레코드 목록 필드가 있는 앱의 양식 표시를 시작하는 데 걸리는 시간 단축
앱의 레코드 상세·편집 화면에서, 로드에 시간이 걸리는 관련 레코드 일람이 배치되고 있을 때, 폼의 표시가 개시되기까지의 대기 시간이 단축되었습니다.
・레코드 상세 화면의 로드(9월판까지):
레코드 내용이 아무것도 표시되지 않는 대기 시간이 길었고 그동안 아무 것도 할 수 없었습니다.
・레코드 상세 화면의 로드(10월판부터):
관련 레코드 목록 이외의 필드가 빠르게 표시되어 레코드 내용을 보고 편집할 수 있습니다.

관련 레코드 DOM

관련 레코드의 레이블을 포함하는 부분, 레코드를 표시하는 TABLE 부분이 있습니다.

kintone 이벤트 처리 중 관련 레코드 상태

상세 화면 표시 이벤트에서 관련 레코드의 어느 부분이 표시됩니까? 되지 않는지 확인합니다.

(function() {
  'use strict';
  kintone.events.on(['app.record.detail.show','app.record.create.show','app.record.edit.show'], function(event) {
    var ref = document.querySelectorAll('.control-reference_table-field-gaia>.control-value-gaia');
    var ref2 = document.querySelectorAll('.reference-subtable-gaia');
    console.log(event.type, ref);
    console.log(ref2);
    return event;
  });
})();

상세 화면 표시 이벤트

상세 화면 표시 이벤트에서는, TABLE 의 부분이 없고, 그 위에의 DIV 는, 어느 상태입니다.

편집 화면 표시 이벤트

편집 화면 표시 이벤트에서는, 지금까지대로 TABLE 부분이 있는 상태입니다.

관련 레코드 표시 모니터링

MutationObserver 에서 DOM 요소의 변화를 감시할 수 있으므로, 이것을 사용해 관련 레코드가 표시되는 것을 감시해 보겠습니다.

(function() {
  'use strict';
  kintone.events.on(['app.record.detail.show','app.record.create.show','app.record.edit.show'], function(event) {
    var ref = document.querySelectorAll('.control-reference_table-field-gaia>.control-value-gaia');
    var ref2 = document.querySelectorAll('.reference-subtable-gaia');
    console.log(event.type, ref);
    console.log(ref2);
    ref.forEach(function(xx) {
      console.log('xx', xx);
      var mo = new MutationObserver(function() {
        console.log('xx2', xx);
      });
      mo.observe(xx, { childList: true });
    });
    return event;
  });
})();

상세 화면 표시 이벤트 시('XX')는, 관련 레코드의 TABLE 가 없고, 'XX2' 의 타이밍으로 관련 레코드의 TABLE 가 생성되고 있는 것을 알 수 있습니다.

관련 레코드의 DOM 조작

상세 화면 표시의 관련 레코드의 DOM 조작을 해 봅니다.
관련 레코드의 문자열 항목을 빨간색으로 표시하는 예입니다.
※kintone 커스터마이즈로 DOM 조작은, 비추천이 되고 있습니다.

(function() {
  'use strict';
  const setReferenceStyle = function(xx) {
      var ele1 = xx.querySelectorAll('.control-single_line_text-field-gaia>.control-value-gaia');
      ele1.forEach(function(yy) {
        yy.style.color = 'red';
      });
  }

  kintone.events.on(['app.record.detail.show','app.record.create.show','app.record.edit.show'], function(event) {
    var ref = document.querySelectorAll('.control-reference_table-field-gaia>.control-value-gaia');
    var ref2 = document.querySelectorAll('.reference-subtable-gaia');
    console.log(event.type, ref);
    console.log(ref2);
    ref.forEach(function(xx) {
      console.log('xx', xx);
      setReferenceStyle(xx);
      var mo = new MutationObserver(function() {
        console.log('xx2', xx);
        setReferenceStyle(xx);
      });
      mo.observe(xx, { childList: true });
    });
    return event;
  });
})();

무사히 상세 화면에서도 문자열 항목을 빨간색으로 표시할 수 있었습니다.