Soft Navigations - The-Next-Web-Research-Lab/the-next-web-research-lab.github.io GitHub Wiki

• https://github.com/WICG/soft-navigations
• https://chromestatus.com/feature/5144837209194496

Overview

"Soft Navigation"은 History API 또는 새로운 Navigation API를 사용하는 JS 기반의 same-document navigation으로, 사용자 제스처에 의해 트리거되어 이전 컨텐츠와 사용자에게 표시된 URL을 수정하고 DOM을 수정합니다.

PerformanceTimeline#168는 Soft Navigation에 대한 성능 지표를 더 잘 리포트할 수 있기를 바라는 희망을 간추려서 설명합니다. Soft Navigation을 탐지하기 위한 휴리스틱은 개발자가 SPA의 성능 지표를 측정하고 사용자에게 이익이 되도록 최적화할 수 있습니다.

Motivation

왜 우리는 Soft Navigation을 웹상에 노출시키려고 할까요?

몇 가지 이유:

• 개발자들은 다양한 성능 항목을 특정 "Soft Navigation" URL에 귀속시키고자 합니다. 예를 들어, 하나의 URL에서 발생하는 레이아웃 시프트는 현재 해당 랜딩 페이지에 귀속될 수 있으며, 이로 인해 잘못된 속성이 발생하고 실제 원인을 찾고 해결하는 데 어려움이 있습니다.
• 개발자들은 Soft Navigation을 위한 다양한 "Load" 성능 항목을 받기를 원합니다. 특히, 페인트 타이밍 항목은 그러한 내비게이션에 원하는 것으로 보입니다.

사용자의 관점에서, 사용자들은 방문한 사이트의 아키텍처에 신경 쓰지는 않지만, 사용자들은 속도에는 신경을 쓸 것입니다. 이 사양에서는 측정이 사용자 경험과 일치할 수 있게 하여, SPA 사이트가 빠르게 개선되어 사용자 경험을 향상될 것을 기대합니다.

Proposed Heuristics

• 사용자는 DOM Element를 클릭하여 soft navigation을 시작합니다.
  • 우리는 semantic elements만 고려했지만, 이것은 현재 현실 세계의 관례와 일치하지 않은 것으로 보인다.
• 이 작업으로 인해 이벤트 핸들러가 발생했습니다("클릭" 이벤트 또는 "내비게이션" 이벤트)
• 그런 다음 이벤트 핸들러에 의해 트리거된 작업을 수행합니다.
  • "내비게이션" 이벤트인 경우 이러한 작업은 traverseTo()에 전달된 Promise의 일부입니다.
  • "클릭" 이벤트인 경우 해당 작업은 이벤트 핸들러 자체에서 생성됩니다.
• "클릭" 이벤트의 경우 핸들러는 History.pushState() 또는 History.placeState() 호출 또는 문서 위치 변경을 포함하는 태스크를 트리거했습니다.
• 작업은 DOM 요소를 수정합니다.
  • 우리는 휴리스틱이 너무 광범위하고 내비게이션으로 간주되어서는 안 되는 수정 사항을 캡처하는 경우를 대비하여 "의미 있는" DOM 수정 사항과 관련하여 특정 DOM 요소 또는 기타 휴리스틱으로 제한하려고 할 수 있습니다.
• contentful element가 포함된 다음 페인트는 Soft Navigation의 FCP로 간주됩니다.
• 다음 largest contentful element는 LCP 항목을 트리거합니다.
• 마지막으로, 우리는 특정 기간(예: Y초당 X)에 탐지되는 Soft Navigation의 양을 제한하는 것을 고려해야 합니다.

Task attribution

위의 휴리스틱은 작업을 추적할 수 있는 능력과 그 증명력에 의존합니다. 우리는 특정 작업이 다른 사람에 의해 게시되었다는 것을 말할 수 있어야 하며, DOM dirtying와 Soft Navigation을 트리거한 이벤트 핸들러의 URL 수정 사이에 인과관계 체인을 만들 수 있어야 합니다.

Note: 위의 휴리스틱을 올바르게 지정하려면 이벤트 루프 처리의 일부로 TaskAttribution을 지정해야 합니다.

Proposed API shape

SoftNavigationEntry : PerformanceEntry {
  unsigned long NavigationId;
}

NavigationId는 Performance Timeline 내에 정의됩니다. (explainer)

PerformanceEntry 상속의 의미는 startTime, name, entryType, duration`을 포함하는 것입니다.

• startTime은 사용자의 클릭을 받은 시점을 정의합니다.
• name은 Soft Navigation을 나타내는 히스토리 항목의 URL 입니다.
• entryType은 "soft-navigation"입니다.
• duration은 아직 유용한 값이 명확하지 않다.

Examples

아직 공식 배포 전으로 chrome://flags/#enable-experimental-web-platform-features 활성화 후 사용할 수 있음

지원 확인

const isSupportedSoftNavigation = PerformanceObserver.supportedEntryTypes.includes('soft-navigation');

Soft Navigation 확인

const softNavigations = [];
const observer = new PerformanceObserver(list => {
  softNavigations.push(...list.getEntries());

  console.log(...list.getEntries());
});
observer.observe({ type: 'soft-navigation' });

{
    "name": "https://github.com/WICG/soft-navigations/blob/main/README.md",
    "entryType": "soft-navigation",
    "startTime": 343297.30000019073,
    "duration": 0,
    "navigationId": "0e8e49eb-9642-40e3-b212-36b8ae7b30c1"
}

LCP

const softNavigations = [];
const softNavigationObserver = new PerformanceObserver(list => {
    softNavigations.push(...list.getEntries());
    console.log(...list.getEntries());
});
softNavigationObserver.observe({
    type: 'soft-navigation'
});

const lcpObserver = new PerformanceObserver(list => {
    for (const entry of list.getEntries()) {
        const id = entry.navigationId;
        const nav = softNavigations.filter(entry => entry.navigationId === id)[0];
        console.log(entry);
    }
});
lcpObserver.observe({
    type: 'largest-contentful-paint',
    includeSoftNavigationObservations: true
});

// SoftNavigationEntry
{
    "name": "https://github.com/WICG/soft-navigations/blob/main/README.md",
    "entryType": "soft-navigation",
    "startTime": 20203.599999904633,
    "duration": 0,
    "navigationId": "4d5a5f9a-ff90-4371-bb28-c03dc4ceb48e"
}

// LargestContentfulPaint
{
    "name": "",
    "entryType": "largest-contentful-paint",
    "startTime": 20803.799999952316,
    "duration": 0,
    "navigationId": "4d5a5f9a-ff90-4371-bb28-c03dc4ceb48e",
    "size": 94129,
    "renderTime": 20803.799,
    "loadTime": 0,
    "firstAnimatedFrameTime": 0,
    "id": "",
    "url": ""
}