이전에 모질라 웹 사이트에서이 내용을 읽었으며 클라이언트 측 코드의 작동 방식에 대한 질문이 있습니다.웹 데이터는 웹 브라우저에서 어떻게 표시됩니까?
특히 웹 개발 컨텍스트에서 서버 측 및 클라이언트 측 코드라는 용어를들을 수도 있습니다. 클라이언트 측 코드는 사용자 컴퓨터에서 실행되는 코드입니다. 웹 페이지를 볼 때 페이지의 클라이언트 측 코드가 다운로드 된 후 브라우저에서 실행되고 표시됩니다. 이 JavaScript 모듈에서는 클라이언트 측 JavaScript에 대해 명시 적으로 이야기하고 있습니다.
코드가 "다운로드"되어 브라우저에서 실행 및 표시되는 경우 다운로드 위치는 어디입니까? 임시로 다운로드하거나 사용자 컴퓨터에 저장합니까? 영구적입니까?
파일이 다운로드되어 캐시에 저장되고 표시됩니다. 이 파일들은 html, css, JS, images 등입니다. 서버 측은 PHP 등입니다. 다운로드되지 않았습니다. 서버에서만 실행됩니다.
모든 브라우저는 다운로드 한 스크립트, 스타일 시트를 저장하는 디렉토리를 로컬 파일 시스템의 어딘가에 가지고 있습니다. , 이미지 등. 이들은 일시적이며 브라우저의 해당 기능을 통해 사용자가 삭제할 수 있습니다. Google 크롬에서 "clear browsing data"
This page explains the location of the temporary files downloaded by Chrome on various systems.
클라이언트에서 HTML, CSS 및 JavaScript 코드뿐만 아니라 이미지 및 비디오와 같은 자산은 일종의 메모리, 일반적으로 메인 RAM에 저장됩니다. 이 메모리는 일반적으로 탭을 닫거나 탭이 비활성 상태가되면 즉시 회수됩니다.
이미지와 같은 자산을 디코딩 한 후 GPU 메모리에 복사하여 더 빨리 렌더링 할 수 있습니다. 3D 코드는 그래픽 카드 지침으로 변환되어 일시적으로 그래픽 카드에 저장 될 수도 있습니다.
메모리가 부족하면 운영 체제가 메모리 카드를 디스크로 바꿀 수 있습니다. 자세한 내용은 virtual memory을 참조하십시오.
브라우저에는 디스크에 캐시가 있습니다. 이것은 보통 첫 번째 렌더링 동안 사용되지 않지만 (페이지를 렌더링하기 전에 디스크를 기다려야하기 때문에), 앞으로의 요청을 빠르게 할 수 있습니다. 프로그래머는 HTTP Cache-Control 및 other headers을 설정할 수 있습니다. 캐시 파일을 삭제할시기는 브라우저에 달려 있습니다. 일반적으로 오래된 캐시 크기의 한계에 도달하거나 사용자가 직접 캐시 크기를 삭제하면 오래된 캐시 캐시가 삭제됩니다. 브라우저와 사용자가 캐시를 구성하는지 여부와 캐싱 수행 방법을 구성합니다.
Proxy servers도 캐시 할 수 있습니다. 일부 대형 조직에서는이를 사용하여 인터넷 트래픽을 줄이고 제어합니다. 이 경우 코드는 일단 서버에서 프록시로 다운로드 된 다음 프록시에서 각 클라이언트로 다운로드됩니다.
HTML5 offline web applications은 일반적으로 더 오랜 시간 동안 디스크에 저장됩니다. 브라우저 캐시와 달리 오프라인 웹 응용 프로그램은 브라우저에서 삭제하지 않아야하지만 실제 브라우저는 다르게 작동 할 수 있습니다. 사용자가 오프라인 웹 응용 프로그램에 대한 URL을 입력하면 새 버전 요청이 전송되기 전에 디스크에서로드됩니다. 반대로 일반 브라우저 캐시에서는 자원이 디스크에 있거나 (HTTP 헤더가 올바르지 않으면 유효하지 않음) 다운로드 된 것입니다.
Service workers은 오프라인 웹 응용 프로그램과 마찬가지로 HTTP 요청을 가로 채기 위해 웹 사이트에서 설치할 수도 있습니다. 디스크에 localStorage 코드/자산을 저장하고로드 할 수 있습니다.요약하면, 코드가 저장되는 곳은 많은 요인에 따라 달라집니다. 현재의 컴퓨팅 아키텍처의 본질에 의해 코드는 메인 메모리에있게 될 것입니다. 다행히도 웹 애플리케이션은 코드의 실제 위치를 거의 신경 쓰지 않아 브라우저가 자동으로 사용할 수 있도록합니다. 그럼에도 불구하고 캐싱 헤더를 구성하고 오프라인 웹 응용 프로그램이나 서비스 작업자를 사용하면 성능이 향상되고 인터넷이 연결되지 않아도 웹 사이트를 사용할 수 있습니다.
실제 웹 사이트에 캐시 된 리소스를 확인하려면 웹 브라우저의 개발자 도구 (많은 시스템에서 F12)를 사용할 수 있습니다.
참고하는 캐시에서 (크롬 메모리에 하나의 디스크에 일이)라는 열 크기, 임의 경우 : 예를 들어, 여기에 크롬에서 사용할 캐시로드이 매우 페이지입니다 파일이오고있다.
고맙습니다. 브라우저 캐싱을 사용하도록 설정했다고 가정 해 보겠습니다. 브라우저가 모든 html, css, js 등의 파일을 캐시합니까? 아니면 더 선택적이며 일부 파일 만 다른 사람들보다 캐시합니까? 예를 들어, FaceBook을 사용 중이며 각 상태 게시물이 페이지에 동적으로로드되었다고 가정 해 봅시다. 그것들은 RAM에 다운로드되었거나 캐싱 되었습니까, 아니면 둘 다 있습니까? – Bail3y
@ Bail3y 처음에는 모든 것이 네트워크 카드에 다운로드됩니다. 그때부터 해독됩니다. 현재의 컴퓨팅 아키텍처는 RAM에서 발생하지만 CPU, 전용 암호화 카드 또는 향후 네트워크 카드 (이론적으로)에서 직접 발생할 수있는 이유는 없습니다. 그런 다음 일부 리소스는 캐시되고 다른 리소스는 캐시되지 않습니다. HTTP 헤더와 브라우저 구성에 따라 다릅니다. 자세한 기술 정보는이 응답의 링크를 따르십시오 (예 : [HTTP'Cache-Control' 헤더] (https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9). – phihag
감사합니다. 'YouTube'로 이동하여 비디오를 보았다면 조금 더 확장하십시오. 비디오가 일시적으로 다운로드 되었습니까? – Bail3y
아니요, 제가 아는 한 해당 비디오는 스트리밍되어 로컬 시스템에 임시 파일을 남기지 않습니다 –
모든 브라우저가 파일 시스템에 디렉토리를 가지고있는 것은 아닙니다. 예를 들어, elinks에는 캐시가 없습니다. 또한 캐시가 영구적으로 비활성화되도록 최신 브라우저를 구성 할 수 있습니다. 또한 일반적으로 시크릿/비공개 브라우징 모드에서는 캐시하지 않습니다 (적어도 디스크에는 저장하지 않음). – phihag