웹 프론트엔드 HTML 튜토리얼 브라우저 기록 이해

브라우저 기록 이해

Oct 11, 2016 pm 02:03 PM

브라우저의 히스토리 스택 관리와 관련된 일부 내용을 설명하는 기본 기사입니다. 이 글을 쓰는 이유는 최근 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에 대한 깊은 이해가 필요한 친구들에게 도움이 되기를 바랍니다. 읽어주셔서 감사합니다 :)

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles