Program Tip

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

programtip 2020. 10. 10. 10:52
반응형

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


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

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

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

감사합니다.


웹 브라우저는 해당 창에서 방문한 웹 페이지의 스택 (또는 원하는 경우 목록)을 유지합니다. 홈페이지가 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를 완료 한 경우 확인 후 양식을 서버에 다시 제출합니다.


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

Looking at Gmail you'll see if you do a search and click a message then hit the back button it will take you back to the search that you did.

When you click it in most browsers it will either resend the last http request or will load a cache if the browser caches sites.


I think the easiest way to explain this is in pseudocode:

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)

A history of pages viewed is kept in a stack-like form. When you "pop" the top three pages (A, B, C, for instance) and then go to a different page D, you cannot get to B again by hitting forward.


As a devoloper, you should make sure that your webapp works no matter how the browser handles the Back button :-) Does it resend the request? Is the new request identical to the old one, or does it differ in any way? Will browser ask user to confirm re-POST? What elements of the page will be re-requested and what loaded from cache? Will browser respect my cache-control headers?

Answers to these question depend on make, version of a browser and user settings. Design you software so that all this doesn’t matter that much.

Sorry for not very direct answer, but there are some straight answers here already.


a browser always stored the pages for its remembering and when we press the back button it doesn't send the request to server for the previous page instead it just see its cache where it stored the pages and it follow the LIFO rule that is why it give us that page first on pressing the back button which we opened in the last


The browser loads the last viewed page before the current one, and then follows any redirection that might happen?

I kind of seem to be missing the point of the question.

참고URL : https://stackoverflow.com/questions/1313788/how-does-the-back-button-in-a-web-browser-work

반응형