브라우저 기록 이해

브라우저의 히스토리 스택 관리와 관련된 일부 내용을 설명하는 기본 기사입니다. 이 글을 쓰는 이유는 최근 pushState를 사용하여 SPA를 구현할 때 어떤 문제가 발생하는지 알아보고 싶었기 때문입니다. PushState는 궁극적으로 브라우저 기록 스택의 내용에 영향을 미치기 때문에 브라우저가 어떻게 관리하는지에 대해 생각해 보았습니다. 히스토리 스택. 왜냐하면 연구 과정에서 이전에 전혀 알아차리지 못했던 몇 가지 중요한 사항을 발견하여 기록하게 되었기 때문입니다.

데모 주소: http://liuyunzhuge.github.io/blog/history/demo1.html

이 데모는 이 기사의 뒷부분에 언급된 관련 테스트에 사용됩니다. 관심이 있으시면 새 문제를 테스트하고 싶을 때마다 새 탭에서 여는 것보다 이 데모를 여는 것이 좋습니다. 기존 웹 페이지의 탭이 열려 있기 때문에 열린 웹 페이지의 탭에서 엽니다. 해당 기록 스택에는 이미 이전에 방문한 웹 페이지의 기록이 포함되어 있으므로 문제 결과에 영향을 미칩니다. 테스트하고 싶습니다.

브라우저는 동일한 창(탭)에서 방문한 웹 페이지를 기록합니다. 다음 중 어떤 방법으로 웹 페이지를 변경하더라도 브라우저는 변경된 웹 페이지를 전달 및 전달할 수 있도록 기록합니다. 뒤로 버튼을 사용하면 방문한 웹페이지로 빠르게 전환할 수 있습니다.
1) 주소 표시줄에 웹페이지 주소를 직접 입력하세요.
2) 다른 페이지로 이동하려면 웹페이지의 하이퍼링크를 클릭하세요. 웹 페이지는 새 창에서 열리는 링크에 있을 수 없습니다.
3) 스크립트를 통해 location.href를 변경하여 다른 웹 페이지로 이동할 수는 없습니다.
4) 양식 제출을 통해 다른 웹 페이지로 이동할 수는 없습니다. 새 창에 제출된 양식입니다.
간단히 말하면 웹페이지가 동일한 창 내에서 점프하는 한 브라우저는 이를 기록합니다. 새로 고침을 제외하고 기록 개체의 길이 속성은 현재 창에 저장된 총 기록 레코드 수를 볼 수 있습니다. 이전 데모 페이지에서 이 속성은 웹 페이지가 변경될 때만 변경됩니다. 웹페이지를 새로 고치는 동안 이 속성은 변경되지 않습니다.

브라우저에는 웹 페이지의 기록을 저장하는 데이터 구조가 있습니다. 그 구조가 스택이 사용되는 방식과 다소 유사하기 때문에 나는 이를 기록 스택이라고 부릅니다.

동작 테스트 1 : 이전 데모 주소를 복사한 후, 크롬 브라우저에서 다음 단계를 따라 진행하시면 됩니다.

새 탭을 열고, 데모2.html을 클릭하고, 데모4.html을 클릭하고, 데모2.html을 클릭하세요.

브라우저는 위의 접속 기록을 다음 그림과 유사한 방식으로 저장합니다.

현재 브라우저는 멀티탭 모드이기 때문에 탭을 열면 특정 웹페이지를 방문하지 않더라도 브라우저는 이 탭에 대한 히스토리 객체 등 BOM 객체를 생성한 후 새 탭의 빈 페이지는 기록의 첫 번째 기록으로 사용됩니다. 따라서 위 그림의 마지막 열에 8개의 레코드가 표시됩니다. 이는 데모 페이지에 표시된 숫자와 동일합니다.

브라우저에는 기록 스택과 함께 기록 스택에서 현재 웹페이지의 위치를 ​​나타내는 액세스 포인터도 있습니다. 기본적으로 위에 나열된 방법을 통해 웹 페이지 주소를 변경하면 위 그림과 같이 새 페이지가 기록 스택의 맨 위로 푸시되고 포인터는 최신 웹 페이지를 가리킵니다. 페이지가 변경되면 브라우저의 앞으로 및 뒤로 기능(버튼, 바로가기, 오른쪽 클릭 메뉴 등 포함)을 사용하거나 제공된 이동 기능을 사용할 때 현재 페이지의 포인터는 항상 기록 스택의 맨 위에 있는 레코드를 가리킵니다. /back/forward 메소드는 히스토리 스택의 내용을 변경하지 않고 포인터만 이동합니다.

1) 앞으로 기능/go(1)/forward는 포인터를 1단계 위로 이동합니다.

2) 역방향 함수/go(-1)/forward는 포인터를 1단계 아래로 이동합니다.

3) go(n)는 포인터를 n 위치 위로 이동합니다. go(-n) 포인터를 n 위치 아래로 이동합니다.

브라우저는 기록 스택에서 웹페이지를 찾아 이동한 포인터 위치를 기준으로 표시합니다. 첫 번째 의 결과를 테스트하기 위해 작업을 진행한다면 다음 작업을 계속 진행합니다.

동작 테스트 2: 브라우저 뒤로 버튼을 7번 클릭하세요.

이때, 브라우저의 히스토리 스택 저장 상황은 다음과 같은 상태가 됩니다.

history.go(n)과 History.go(-n)은 포인터를 임의의 위치로 이동할 수 있지만, 이동하려는 위치가 히스토리 스택의 위치 범위를 초과하는 경우 포인터는 이동하지 않습니다. 따라서 연산 테스트 2의 결과,history.go(-100),history.go(100)을 호출하면 작동하지 않습니다.

히스토리 스택의 내용을 변경하는 두 가지 다른 상황이 있습니다.

작업 테스트 3: 작업 테스트 2의 결과에 따라 앞으로 버튼을 세 번 클릭하면 브라우저의 기록 스택이 다음 상태로 들어갑니다.

이때 작동 테스트 2나 작동 테스트 3 모두 기록 스택의 내용을 변경하지 않았으므로 맞다면 페이지의 기록 통계는 여전히 8이어야 합니다.

작동 테스트 4: 다음으로 다음 두 단계를 수행합니다. 데모2.html을 클릭하고, 데모3.html을 클릭합니다. 이때 페이지의 기록 통계는 다음과 같습니다.

history.length가 변경되었습니다. 이는 히스토리 스택의 내용도 변경되었음을 나타냅니다. 그런데 왜 10(8+2)이 아닌 6이 되는 걸까요? 현재 브라우저 기록 스택의 상태를 살펴보세요.

브라우저는 새 레코드를 기록 스택에 푸시할 때 이를 현재 포인터 바로 뒤에 푸시합니다. 현재 포인터 뒤에 다른 레코드 항목이 있으면 해당 항목은 삭제됩니다. 이를 통해 4차 운용 테스트 이후 총 이력 기록 수가 6개에 불과한 이유를 쉽게 이해할 수 있습니다.

브라우저 기록 기록 관리에서 또 다른 중요한 점은 저장되는 총 기록 스택 수에 제한이 있다는 것입니다. Chrome과 Firefox 모두 50개입니다. 히스토리 스택의 저장량이 이 한도를 초과하면 히스토리 레코드의 저장 공간은 롤링 방식으로 저장됩니다. 즉, 새로운 레코드가 스택의 맨 위로 푸시되고 맨 아래의 레코드는 맨 아래에서 제거됩니다. 스택의. 데모 페이지에서 데모1, 데모2, 데모3, 데모4를 계속 전환하며 클릭하면 특정 횟수에 도달하면 페이지에 인쇄되는 통계 정보가 더 이상 변경되지 않습니다. 이는 기록 기록 한도에 도달했음을 의미합니다. 하지만 IE11에서는 100개가 넘는 항목을 클릭했는데 여전히 변경되고 있는 것을 발견했는데, 이는 IE의 제한 사항이 더 높을 수도 있고 높지 않을 수도 있음을 나타냅니다. .

이 기사에는 브라우저 기록 관리에 대한 일부 내용이 기록되어 있습니다. 분석에 일부 불완전성이 있을 수 있으므로 여러분의 비판과 수정을 환영합니다. 위 내용이 역사와 pushState에 대한 깊은 이해가 필요한 친구들에게 도움이 되기를 바랍니다. 읽어주셔서 감사합니다 :)