[browser] 웹 브라우저의 뒤로 버튼은 어떻게 작동합니까?

이 질문에 대해 웹을 검색했지만 아무것도 찾지 못했습니다.

뒤로 버튼의 논리는 무엇입니까? 웹 브라우저에서 뒤로 버튼을 누르면 어떻게됩니까?

그것에 대해 더 많이 이해하고 싶습니다.

감사합니다.



답변

웹 브라우저는 해당 창에서 방문한 웹 페이지의 스택 (또는 원하는 경우 목록)을 유지합니다. 홈페이지가 google.com이고 여기에서 youtube.com, yahoo.com 및 cnn.com과 같은 몇 가지 다른 웹 사이트를 방문한다고 가정 해 보겠습니다. 마지막 방문시 목록은 다음과 같습니다.

google.com -> youtube.com -> yahoo.com -> cnn.com
                                            ^
                                            |
                                       current page

뒤로 버튼을 누르면 브라우저는 다음과 같이 목록의 이전 페이지로 돌아갑니다.

google.com -> youtube.com -> yahoo.com -> cnn.com
                                ^
                                |
                           current page

이 시점에서 뒤로를 다시 눌러 youtube.com으로 이동하거나 앞으로를 눌러 cnn.com으로 다시 이동할 수 있습니다. 뒤로를 두 번 누른다 고 가정 해 보겠습니다.

google.com -> youtube.com -> yahoo.com -> cnn.com
                   ^
                   |
              current page

이제 abc.com으로 이동하면 목록이 다음과 같이 변경됩니다.

google.com -> youtube.com -> abc.com
                               ^
                               |
                          current page

yahoo.com과 cnn.com이 모두 목록에서 사라졌습니다. 새로운 길을 택했기 때문입니다. 브라우저는 방문한 모든 페이지의 기록이 아닌 현재 위치로 이동하기 위해 방문한 페이지 목록 만 유지합니다. 또한 브라우저는 사용자가 방문하는 사이트의 구조에 대해 전혀 알지 못하기 때문에 놀라운 동작이 발생할 수 있습니다.

탐색 할 제품의 카테고리 및 하위 카테고리가있는 쇼핑 사이트 (짧은 예로서 ne.com)에 있습니다. 사이트 디자이너는 범주를 탐색 할 수 있도록 창 상단 근처에 탐색 경로 를 신중하게 제공했습니다 . 사이트의 맨 위 페이지에서 시작하여 하드웨어, 메모리를 차례로 클릭합니다. 이제 목록은 다음과 같습니다.

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

하드웨어 카테고리로 돌아가고 싶으므로 뒤로 버튼을 사용하는 대신 탐색 경로를 사용하여 상위 카테고리로 이동합니다. 이제 브라우저 목록은 다음과 같습니다.

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                                          ^
                                                          |
                                                     current page

사이트 구조에 따르면 뒤로 (한 단계 위로) 이동했지만 브라우저로 이동하면 링크를 클릭했기 때문에 앞으로 이동했습니다. 링크를 클릭하거나 주소 표시 줄에 URL을 입력 할 때마다 해당 링크가 이미 방문한 페이지로 이동하는지 여부에 관계없이 브라우저에 관한 한 계속 진행됩니다.

마지막으로 기본 사이트 페이지 (ne.com)로 돌아가고 싶습니다. 이동 경로를 사용할 수 있지만 이번에는 뒤로 버튼을 클릭합니다. 한 단계 위로 이동해야하는 것이 분명해 보입니다. 그러나 그것은 당신을 어디로 데려가 는가?

처음에는 많은 사용자 (내가 정확히이 작업을 수행 할 때 나 자신을 포함)에게 혼란스러워서 메모리 범주로 돌아가는 수준을 “다운”하게됩니다. 페이지 목록을 보면 그 이유를 쉽게 알 수 있습니다.

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                            ^
                                            |
                                       current page

뒤로 버튼 만 사용하여 메인 페이지로 돌아가려면 두 번 더 눌러야합니다. 하드웨어 카테고리로 “돌아가고”마지막으로 메인 페이지로 이동합니다. 우리 프로그래머에게는 무슨 일이 일어나고 있는지 분명해 보이지만 브라우저가 어떤 웹 사이트에 있든 계층 구조에 대해 아무것도 알지 못한다는 것을 깨닫지 못하기 때문에 항상 일반 사용자를 놀라게합니다.

브라우저가 사이트 디자이너가 지금하는 일이 아닌 명백한 일을하도록 뒤로 버튼을 프로그래밍 할 수있게한다면 좋을까요?

편집 : 한 댓글 작성자가 브라우저가 페이지를 다시로드하는지 아니면 단순히 로컬 캐시에서 표시하는지 물었습니다.

대답은 상황에 따라 다릅니다. 사이트 디자이너는 브라우저가 페이지를 캐시할지 여부를 지정할 수 있습니다. 캐시되지 않은 페이지로 설정된 페이지의 경우 처음 방문하는 것처럼 뒤로를 누르면 브라우저가 서버에서 페이지를 다시로드합니다. 캐시 된 페이지의 경우 브라우저는 캐시에서이를 표시하므로 훨씬 빠릅니다.


답변

나는 그것이 나의 마지막 요청을 재발행하는 것으로 생각하고 싶다. 간단한 GET을 수행했다면 아마도 지난번에했던 것과 동일한 결과를 반환 할 것입니다 (동적 콘텐츠 제외). POST를 완료 한 경우 확인 후 양식을 서버에 다시 제출합니다.


답변

기본 아이디어는 마지막 페이지 또는 논리적 사이트 분할로 돌아가는 것입니다.

Gmail을 보면 검색을 수행하는지 확인하고 메시지를 클릭 한 다음 뒤로 버튼을 누르면 이전 검색으로 돌아갑니다.

대부분의 브라우저에서 클릭하면 마지막 http 요청을 다시 보내거나 브라우저가 사이트를 캐시하는 경우 캐시를로드합니다.


답변

이것을 설명하는 가장 쉬운 방법은 의사 코드라고 생각합니다.

class Page:
    String url, ...
    Page previous, next # implements a doubly-linked list

class History:
    Page current # current page

    void back():
        if current.previous == null:
            return
        current = current.previous
        refresh()

    void forward():
        if current.next == null:
            return
        current = current.next
        refresh()

    void loadPage(Page newPage):
        newPage.previous = current
        current.next = newPage # remove all the future pages
        current = current.next
        display(current)


답변

본 페이지의 기록은 스택과 같은 형태로 보관됩니다. 상위 3 개 페이지 (예 : A, B, C)를 “팝”한 다음 다른 페이지 D로 이동하면 앞으로 눌러 다시 B에 도달 할 수 없습니다.


답변

개발자는 브라우저가 뒤로 버튼을 어떻게 처리하든 상관없이 웹앱이 작동하는지 확인해야합니다. 🙂 요청을 다시 보내나요? 새 요청이 이전 요청과 동일합니까, 아니면 어떤 방식 으로든 다른가요? 브라우저가 사용자에게 다시 게시를 확인하도록 요청합니까? 페이지의 어떤 요소가 다시 요청되고 캐시에서로드되는 요소는 무엇입니까? 브라우저가 내 캐시 제어 헤더를 존중합니까?

이 질문에 대한 대답은 제조업체, 브라우저 버전 및 사용자 설정에 따라 다릅니다. 이 모든 것이 그다지 중요하지 않도록 소프트웨어를 설계하십시오.

직접적인 답변이 아니 어서 미안하지만 이미 여기에 몇 가지 직접적인 답변이 있습니다.


답변

브라우저는 항상 기억하기 위해 페이지를 저장하고 뒤로 버튼을 누르면 이전 페이지에 대한 요청을 서버로 보내지 않고 페이지를 저장 한 캐시를보고 LIFO 규칙을 따릅니다. 마지막에 열었던 뒤로 버튼을 누르면 먼저 해당 페이지를 제공합니다.