vue 단일 페이지 응용 및 다 중 페이지 응용 우열

다 중 응용
페이지 가 이동 할 때마다 백 스테이지 서버 는 새로운 html 문 서 를 되 돌려 줍 니 다.이런 유형의 사 이 트 는 여러 페이지 의 사이트 이 고 여러 페이지 의 응용 이 라 고도 합 니 다.

왜 여러 페이지 의 첫 화면 이 빠 릅 니까?
첫 화면 시간 은 페이지 첫 화면의 내용 을 보 여 주 는 시간 이 라 고 합 니 다.우리 가 페이지 를 방문 할 때 서버 가 html 로 돌아 가면 페이지 가 보 여 집 니 다.이 과정 은 하나의 HTTP 요청 만 거 쳤 기 때문에 페이지 가 보 여 주 는 속도 가 매우 빠 릅 니 다.
왜 검색엔진 최적화 효과 가 좋 습 니까?
검색엔진 은 홈 페이지 순 위 를 할 때 홈 페이지 내용 에 따라 홈 페이지 에 가중치 를 주어 홈 페이지 순 위 를 매 길 수 있다.검색엔진 은 html 내용 을 식별 할 수 있 으 며,우 리 는 각 페이지 의 모든 내용 을 Html 에 넣 기 때문에 이러한 여러 페이지 의 응용 은 seo 순위 효과 가 좋다.
하지만 전환 이 느 린 것 도 단점 이다.
매번 점프 할 때마다 http 요청 을 해 야 하기 때문에 네트워크 가 느 리 면 페이지 사 이 를 왔다갔다 할 때 뚜렷 한 카드 가 발견 된다.
단일 페이지 응용
처음 페이지 에 들 어 갈 때 html 파일 을 요청 하고 새로 고침 해서 지 웁 니 다.다른 구성 요소 로 전환 하면 경로 도 변 하지만 새로운 html 파일 요청 이 없고 페이지 내용 도 변 합 니 다.
원 리 는:JS 는 url 의 변 화 를 감지 합 니 다.이 를 통 해 현재 페이지 의 내용 을 js 동적 으로 제거 한 다음 다음 다음 페이지 의 내용 을 현재 페이지 에 마 운 트 할 수 있 습 니 다.이때 의 길 은 백 엔 드 가 아니 라 전단 으로 할 수 있 습 니 다.페이지 가 어떤 구성 요 소 를 표시 하 는 지 판단 하고 필요 하지 않 은 구성 요 소 를 제거 하 며 필요 한 구성 요 소 를 표시 합 니 다.이 과정 은 단일 페이지 응용 프로그램 입 니 다.매번 점프 할 때마다 html 파일 을 요청 할 필요 가 없습니다.

왜 페이지 전환 이 빠 릅 니까?
페이지 가 전환 할 때마다 html 파일 의 요청 을 하지 않 아 도 됩 니 다.그러면 http 발송 지연 을 많이 절약 할 수 있 습 니 다.우 리 는 페이지 를 전환 할 때 속도 가 빠 릅 니 다.
단점:첫 화면 이 느 리 고 SEO 차이
한 페이지 에 적용 되 는 첫 화면 은 시간 이 느 리 고 첫 화면 에 html 를 요청 하 는 동시에 js 요청 을 한 번 보 내야 합 니 다.두 번 의 요청 이 돌아 와 야 첫 화면 이 보 여 집 니 다.여러 페이지 에 비해 첫 화면 시간 이 느 립 니 다.
SEO 효과 가 좋 지 않 습 니 다.검색엔진 은 html 의 내용 만 알 고 js 의 내용 을 모 르 기 때문에 한 페이지 의 응용 내용 은 모두 js 렌 더 링 으로 생 성 된 것 입 니 다.검색엔진 은 이 부분 을 식별 하지 않 으 면 좋 은 순 위 를 주지 않 고 한 페이지 의 응용 으로 만들어 진 인터넷 페이지 가 바 이 두 와 구 글 에서 의 순위 가 떨 어 질 수 있 습 니 다.
이런 단점 이 있 는데 왜 Vue 를 사용 하 세 요?
Vue 는 이러한 단점 을 해결 하 는 다른 기술 도 제공 했다.예 를 들 어 서버 엔 드 렌 더 링 기술(SSR 입 니 다.)은 이런 기술 을 통 해 이런 단점 을 완벽 하 게 해결 하고 이런 문 제 를 해결 할 수 있다.실제 단일 페이지 응용 은 전단 에 있어 매우 완벽 한 페이지 개발 해결 방안 이다.
새로운 업데이트
최근 에 회 사 를 개조 하 는 프로젝트 에서 회사 의 프로젝트 는 한 페이지 의 응용 으로 여러 페이지 의 응용 으로 바 뀔 수 있 기 때문에 이것 에 대해 다시 한 번 보 았 다.인터넷 에서 표를 보 니 정리 가 잘 된 것 같 아서 붙 여 놓 았 다저 는 표 출처 입 니 다.
mm
다 중 응용 프로그램 MPA
단일 페이지 응용 모드 SPA
응용 구성
여러 개의 전체 페이지 로 구성 되 어 있다.
하나의 케이스 페이지 와 여러 페이지 세 션 으로 구성 되 어 있 습 니 다.
점프 모드
페이지 간 의 이동 은 한 페이지 에서 다른 페이지 로 이동 하 는 것 이다.
페이지 세 션 사이 의 점프 는 한 페이지 세 션 을 삭제 하거나 숨 기 고 다른 페이지 세 션 을 불 러 와 표시 하 는 것 입 니 다.이것 은 세 션 간 의 아 날로 그 점프 입 니 다.케이스 페이지 를 열지 않 았 습 니 다.
이동 후 공공 자원 을 다시 불 러 올 지 여부
예.
아니.
URL 모드
http://xxx/page1.html 
http://xxx/page1.html
http://xxx/shell.html#page1 
http://xxx/shell.html#page2
사용자 체험
페이지 간 전환 로드 가 느 리 고 원활 하지 않 으 며 사용자 체험 이 좋 지 않 습 니 다.특히 모 바 일 장치 에서.
페이지 세 션 간 의 전환 이 빠 르 고 사용자 체험 이 좋 으 며 모 바 일 장치 에 포함 되 어 있 습 니 다.
필드 전환 애니메이션 을 실현 할 수 있 습 니까?
실현 불가능
실현 하기 쉽다.
페이지 간 전달 데이터
URL,쿠키 또는 localstorage 에 의존 하여 번 거 로 움 을 실현 합 니 다.
한 페이지 내 에서 페이지 간 에 데 이 터 를 전달 하 는 것 이 쉽게 이 루어 지기 때문이다.
검색엔진 최적화(SEO)
그냥 해도 돼 요.
단독 방안 이 필요 해서 좀 번거롭다
특별 적용 범위
검색엔진 에 우호 적 인 사이트 가 필요 합 니 다.
체험 에 대한 요구 가 높 은 응용,특히 모 바 일 응용
검색엔진 최적화(SEO)
그냥 해도 돼 요.
단독 방안 이 필요 해서 좀 번거롭다
개발 난이도
낮 게,프레임 선택 이 쉽다.
좀 높 으 면 이런 모델 의 개발 난이 도 를 낮 추 는 전문 적 인 틀 이 필요 하 다.
이상 은 vue 단일 페이지 응용 과 여러 페이지 응용 의 우열 에 대한 상세 한 내용 입 니 다.vue 단일 페이지 응용 과 여러 페이지 응용 에 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 십시오!