1. CSS
1. CSS 상자 모델에 대해 이야기하기
HTML에서 모든 요소는 상자로 볼 수 있습니다.
박스 구성 : 내용 내용, 안쪽 여백 패딩, 테두리 테두리, 바깥쪽 여백
박스 모델 유형:
표준 상자 모델
여백+테두리+패딩+내용
즉 박스 모델
여백+내용(패딩+테두리)
제어 상자 모델의 모드: box-sizing: content-box(기본값, 표준 상자 모델), border-box(예: 상자 모델)
2. CSS 선택자의 우선순위
CSS 기능: 상속, 캐스케이딩, 우선순위
우선 사항:
! 중요, 인라인 스타일, id 선택자, class/pseudo-class/attribute, 레이블, 전역 선택자
3. 요소를 숨기는 방법
display:none; 공간을 차지하지 않음
불투명도:0; 공간을 차지함
가시성:숨겨진; 공간을 차지하다
위치:절대;
클립 경로 절단
4. px와 rem의 차이점
px: 절대 단위 길이
rem: html 루트 노드의 font-size 값에 대한 상대 단위 길이, 1rem=10px; font-size: 62.5% (16px* 62.5%=10)
5. 다시 그리기와 재정렬의 차이점은 무엇입니까?
리플로우(리플로우): 레이아웃 엔진은 스타일에 따라 페이지에서 상자 모델의 위치와 크기를 계산합니다.
다시 그리기: 상자 모델의 위치, 크기 및 기타 속성을 계산한 후 브라우저는 각 상자 모델의 특성에 따라 그립니다.
브라우저의 렌더링 메커니즘: 돔의 크기와 위치를 수정한 후 브라우저는 재정렬이라고 하는 이러한 요소의 기하학적 속성을 다시 계산해야 합니다.
DOM 스타일, 색상, bgcolor를 수정합니다. 브라우저가 설정된 속성을 계산할 필요가 없을 때 요소의 새 스타일을 직접 그립니다. 이를 다시 그리기라고 합니다.
6. 요소를 수평 및 수직으로 중앙에 배치
포지셔닝+마진
포지셔닝+변환
플렉스 레이아웃
그리드 레이아웃
테이블 레이아웃
7. 상속받을 수 있는 CSS 속성과 상속받을 수 없는 속성
글꼴 속성 글꼴
텍스트 속성 선 높이
요소 가시성
테이블 레이아웃 속성 border-spacing
목록 속성 목록 스타일
페이지 스타일 속성 페이지
8. 전처리기
전처리 언어는 변수, 함수 및 혼합과 같은 기능을 추가합니다.
덜 말하다
둘, javascript
1. js의 구성
ECMAScript: js 코어, 설명 언어 기본 문법, var, for 등
DOM(Document Object Model): HTML 페이지를 요소로 구성된 문서로 계획
Browser Object Model(BOM): 브라우저 창 액세스 및 조작
2.js 내장 객체
문자열 부울 숫자 배열 개체 함수 수학 날짜 정규식
3. 배열을 조작하는 방법은 무엇입니까
push() pop() sort() splice() unshift() shift() reverse() map()
4. 데이터 유형 감지
typeof()는 기본 데이터 유형을 판단합니다.
instanceof()는 참조 데이터 유형을 판단합니다.
생성자 기본 데이터 유형 및 참조 데이터 유형, 생성자 선언 및 배열 지정
object.prototype.tostring.call()은 모든 유형을 지원합니다.
5. 폐쇄, 기능
클로저: 함수 중첩 함수, 내부 함수가 반환되고 외부 함수에 의해 저장됨
특징: 변수 재사용, 이 변수는 전역을 오염시키지 않으며 변수는 가비지 수집 메커니즘에 의해 재활용되지 않습니다.
단점: 메모리 소비, 페이지 성능 저하, 브라우저의 메모리 누수
사용 시나리오: 흔들림 방지, 스로틀링, 글로벌 데이터 오염 방지
6. 프런트엔드 메모리 누수
Node.js는 메모리 주소를 할당하지만 오랫동안 해제하지 못하여 충돌이 발생합니다.
요인: 선언 없는 할당, 해제된 타이머, 클로저, 참조 요소가 명확하지 않음
7. 이벤트 위임
원칙: 이벤트 버블링 메커니즘, 하위 요소 이벤트는 상위 요소에 바인딩됩니다.
이벤트 버블링 방지 event.stopPropagation()
8. 기본 데이터 유형과 참조 데이터 유형의 차이점
기본 데이터 유형: 문자열, 숫자, 부울, unfined 및 null은 스택 메모리에 저장되고 특정 값을 저장합니다.
참조 데이터 유형: 객체, 함수, 배열은 힙 메모리에 저장되고 주소는 저장됩니다.
9. 프로토타입 체인
프로토타입은 생성자의 인스턴스에 대한 메서드와 속성을 공유하는 객체이며 모든 인스턴스는 동일한 프로토타입 객체를 참조합니다.
인스턴스 객체가 속성과 메서드를 호출할 때 인스턴스 자체, 생성자의 프로토타입, 프로토타입의 프로토타입에서 차례로 검색합니다.
10. new 연산자는 정확히 무엇을 합니까?
먼저 빈 개체를 만듭니다.
프로토타입 체인을 통해 빈 개체와 생성자를 연결합니다.
생성자의 this를 빈 객체에 바인딩합니다.
생성자가 반환한 형식에 따라 값 형식이면 개체를 반환하고 참조 형식이면 참조 형식을 반환합니다.
11. js가 상속을 구현하는 방법
프로토타입 체인 상속
차용 생성자 상속
구성 상속
es6 클래스 클래스 상속
12. 이것은 js의 문제를 지적합니다.
전역 개체의 this는 창을 가리킵니다.
일반 함수에서 this는 전역 창을 가리킵니다.
this는 항상 마지막으로 호출한 객체를 가리킵니다(화살표가 아닌 함수).
new 키워드는 이 방향을 바꿉니다.
apply, call, bind는 this의 방향을 바꿀 수 있습니다(화살표가 아닌 함수).
화살표 함수의 this는 부모 클래스의 this를 가리킵니다.
익명 함수의 this는 window를 가리킵니다.
13. 스크립트에서 async와 defer의 차이점은 무엇입니까
async 및 defer가 없으면 브라우저는 지정된 스크립트를 즉시 로드하고 실행합니다.
비동기식으로 요소를 로드하고 렌더링하는 프로세스는 스크립트 로드 및 실행과 동시에 수행됩니다.
defer를 사용하면 요소를 로드하고 렌더링하는 프로세스가 스크립트 로드와 동시에 수행되며 모든 요소는 구문 분석 후 실행됩니다.
14.setTimeout 최소 실행 시간
시간 초과 설정:4ms
setInterval:10ms
15. ES5와 ES6ECMAScript의 차이점
ES5:
ES6:
16. ES6의 새로운 기능
추가된 블록 수준 범위(let, const)
클래스(클래스)를 정의하기 위한 구문 설탕 추가
기호 기본 데이터 유형 추가
구조 분해 할당 추가
새 함수 매개변수 기본값
어레이용 새 API 추가
개체 및 배열에 대한 새로운 스프레드 연산자
약속하다
모듈성 추가(가져오기, 내보내기)
세트 및 맵 데이터 구조 추가
발전기 추가
화살표 기능 추가
17. 호출, 적용 및 바인드의 차이점
둘 다 이 지점과 함수 호출을 변경합니다.
call과 apply의 기능은 비슷하지만 매개변수를 전달하는 방식이 다릅니다.
호출 매개변수는 매개변수 목록입니다.
적용 매개변수는 배열입니다.
bind는 매개변수를 전달한 직후에 실행되지 않고, 이 점을 변경하는 함수를 반환하며, 생성자로 사용할 수 없습니다.이 함수는 bind()()에 매개변수를 전달할 수 있습니다.
호출 방법의 성능이 훨씬 사용하기 쉽습니다.
18. 화살표 함수와 일반 함수의 차이점은 무엇입니까?
생성자로 사용할 수 없으며 new를 사용할 수 없습니다.
인수 없음
호출, 적용 또는 바인드를 사용하여 이 방향을 변경할 수 없습니다.
프로토타입 없음
this는 외부 레이어에 있는 첫 번째 함수의 this를 가리킵니다.
19. let const var의 차이점
let const: 변수 승격 없음, 사용 전에 정의해야 함, 일시적 데드존 문제 있음, 블록 수준 범위 내용 있음, 동일한 범위 내에서 반복적으로 선언할 수 없음
var: 변수 호이스팅 존재
20. 딥카피 구현 방법
새 객체를 완전히 복사하고 힙 메모리에 새 공간을 엽니다.
주로 참조 유형 데이터용
스프레드 연산자 {...obj}는 첫 번째 수준만 달성할 수 있습니다.
json.parse(json.stringify()), 내부 함수를 복사하지 않습니다.
재귀 함수를 사용하여 달성
21. 아약스란?
대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술
전체 페이지를 다시 로드하지 않고 서버와 데이터를 교환하고 콘텐츠의 일부를 업데이트합니다.
xmlhttprequest 객체를 통해 서버에 비동기 요청을 보내고 서버에서 데이터를 가져온 후 js를 통해 dom을 조작하여 페이지를 운영
xmlhttprequest 개체 만들기
xmh 객체의 open() 메서드를 통해 서버와의 연결을 설정합니다.
요청에 필요한 데이터를 빌드하고 xmh의 send()를 통해 서버로 전송
xmh의 onreadystate 변경 이벤트를 통해 서버와 사용자 간의 통신 상태 듣기
서버 응답의 데이터 결과 수락 및 처리
처리된 데이터를 html 페이지로 업데이트
22. get과 post의 차이점
get 매개변수는 덜 안전한 URL에 배치되고 게시물은 본문에 배치됩니다.
새로 고침 서버를 가져오거나 반환해도 효과가 없으므로 게시물이 다시 제출됩니다.
get 요청은 캐시되고 게시물은 캐시되지 않습니다.
Get 요청은 브라우저의 기록에 저장되지만 게시는 저장되지 않습니다.
get은 URL 인코딩만 가능하며, post는 많은 것을 지원합니다.
23. Promise의 내적 원칙과 장단점
Promise 객체는 비동기 작업을 캡슐화하고 성공 또는 실패 결과를 얻을 수도 있습니다.
Promise 객체는 주로 콜백 지옥의 문제를 해결합니다.과거에는 비동기 작업이 많고 상호 종속성이 있는 경우 콜백 함수로만 처리할 수 있었습니다.이는 쉽게 콜백 지옥으로 이어지고 가독성과 코드의 유지 보수성이 좋지 않았습니다.
세 가지 상태가 있습니다: 보류 중인 초기 상태, 이행된 성공 상태, 거부된 실패 상태
원칙: 약속 인스턴스를 구성합니다. 인스턴스는 매개변수를 전달해야 합니다. 이 매개변수에는 두 개의 공식 매개변수가 있으며 둘 다 함수 유형이며 하나는 해결이고 다른 하나는 거부입니다.
Promise에는 then 메소드가 있는데 state가 변할 때 확정 연산을 지정하는 데 사용되는데 resolve는 첫 번째 함수를 실행하는 것이고, reject는 두 번째 함수를 실행하는 것입니다.
24. 약속과 비동기 대기의 차이점
둘 다 비동기 요청을 처리합니다.
약속은 es6이고 비동기 대기는 es7입니다.
Async await는 약속을 기반으로 구현되며 비 차단입니다.
장점과 단점:
Promise는 반환 객체이며 catch 메서드는 예외를 처리하고 catch하는 데 사용해야 하며 쓰기 메서드는 체인으로 연결되어 코드가 겹치고 유지 관리가 용이하지 않습니다.
Async await는 try catch를 통해 예외를 포착하는 데 사용됩니다.
Async await는 코드를 동기식으로 보이게 할 수 있습니다. await를 만나는 한 즉시 결과를 반환한 다음 후속 작업을 수행합니다.
promise.then()은 요청이 반환되지 않았음을 보여주고 다음 작업이 수행됩니다.
25. 브라우저 저장 방법
쿠키 표준 로컬 저장 방법, 좋은 호환성, 작은 저장 용량, 포장 필요
localstorage는 키-값 쌍을 표준 방식으로 사용하고, 작동하기 쉽고, 영구 저장소, 좋은 호환성, 저장된 값의 유형이 제한되며 개인 정보 보호 모드에서 읽을 수 없습니다.
sessionstorage는 페이지가 닫힐 때 정리됩니다. 세션 수준 저장 방법
indexedDB 키-값 쌍 저장, 편리한 저장
26. 토큰은 어디에 존재합니까?
토큰: 인증을 위한 토큰
localdtorage에 존재하는 경우 인터페이스를 요청할 때마다 백그라운드로 필드로 전달해야 하므로 xss의 공격을 받기 쉽습니다.
쿠키에 존재하며 자동으로 전송되지만 교차 도메인일 수 없습니다. 27. 페이지 렌더링 프로세스
DNS 해상도
TCP 연결 설정
HTTP 요청 보내기
서버가 요청을 처리합니다.
렌더링 페이지
브라우저는 html 및 css 리소스를 가져오고 html을 dom 트리로 구문 분석합니다.
그런 다음 css를 cssom으로 구문 분석합니다.
dom과 cssom을 렌더 트리에 병합
렌더 트리의 각 노드를 페이지에 렌더링
TCP 연결 끊기
JWT
json 웹 토큰은 웹 어플리케이션에서 json 형태의 토큰으로 사용되며, 당사자간 안전하게 json 데이터로 정보를 출력할 수 있습니다.
정보 이전, 승인
npm의 기본 환경
노드 패키지 관리자는 노드용 패키지 관리 및 배포 도구입니다.
Npm 구성 요소: 웹사이트, 레지스트리, 명령줄 도구
브라우저 캐싱 정책
강력한 캐시(로컬 캐시), 협상 캐시(약한 캐시)
강력한 캐시: 요청을 보내지 않고 캐시의 콘텐츠를 직접 사용하며, 브라우저는 js, css, 이미지 등을 메모리에 저장하고 다음 사용자 액세스는 성능 향상을 위해 메모리에서 직접 가져옵니다.
약한 캐시: 협상 캐시 사용 여부를 판단하여 백그라운드로 요청을 보내야 합니다. 콘텐츠가 변경되지 않은 경우 304를 반환하면 브라우저가 캐시의 콘텐츠를 사용합니다.
동일 출처 정책이란?
동일 출처 정책이 없는 브라우저의 핵심은 네트워크 공격의 대상이 됩니다.
주로 프로토콜 + 도메인 이름 + 포트 번호가 일치하며, 그 중 하나가 다르면 동일한 소스가 아니며 교차 도메인이 발생합니다.
img, 링크 및 스크립트는 리소스의 도메인 간 로드를 허용합니다.
도메인 간 요청을 보낼 수 있으며 백엔드는 정상적으로 결과를 반환하지만 결과는 브라우저에서 가로채게 됩니다.
도메인 간 해결: jsonp, cors, websocket, 리버스 프록시
손떨림 방지 및 스로틀링이란 무엇입니까?
둘 다 페이지의 빈번한 이벤트를 처리하는 최적화 솔루션입니다.
손떨림 방지: 반복되는 이벤트 트리거를 피하고 일정 시간 내에 마지막으로만 실행
Throttling: 일정 시간 동안 한 번만 실행
3. HTML/CSS
1. html5 및 css3의 새로운 기능은 무엇입니까
H5: 시맨틱 태그, 새로운 오디오 및 비디오 태그, 새로운 캔버스, 새로운 데이터 저장소, 새로운 양식 컨트롤, 새로운 드래그 앤 드롭 API
css3: 새 속성, 의사 클래스, 의사 요소 선택기, 새 미디어 쿼리, 텍스트 그림자, 테두리, 상자 모델 상자 크기 조정, 그라데이션, 전환, 사용자 지정 애니메이션, 배경 속성, 2d 및 3d
네, vue
1. v-if와 v-show의 차이점
요소의 숨기기와 표시를 제어할 수 있습니다.
v-show는 디스플레이 값을 표시하거나 숨기도록 제어하는 것입니다.
v-if는 dom 요소의 파괴 및 생성입니다.
2. mvvm 이해하기
model-view-viewmodel의 약어는 디자인 아이디어로,
모델은 데이터 수정 및 작업을 정의하는 데 사용되는 데이터 모델입니다.
보기는 보기다
viewmodel은 뷰와 모델을 연결하는 다리입니다.
데이터가 변경되면 뷰모델은 데이터의 변화를 모니터링하여 자동으로 뷰를 업데이트하고, 사용자가 뷰를 조작하면 뷰모델은 뷰의 변화를 모니터링하고 변경된 데이터를 알릴 수 있습니다.
뷰모델은 양방향 바인딩을 통해 뷰와 모델을 연결하고 이들 사이의 동기화는 자동으로 이루어집니다.
3. 컴포넌트 수명 주기
만들다
beforeCreate: 속성이나 메서드를 사용할 수 없습니다.
생성됨: 인스턴스가 생성된 후 데이터를 사용 및 수정할 수 있지만 페이지가 렌더링되지는 않습니다.
산
beforemount: 가상 돔이 생성되고 곧 렌더링됩니다.
mounted: 컴파일된 템플릿을 페이지에 마운트합니다.
고쳐 쓰다
beforeUpdate: 구성 요소가 업데이트되기 전에 사용되며 데이터가 새 것이고 페이지의 데이터가 오래되었으며 구성 요소가 곧 업데이트됩니다.
업데이트됨:렌더링 재렌더링, 데이터 및 페이지가 새로워짐
파괴하다
beforeDestory: 타이머 및 기타 작업 지우기
파괴됨: 구성요소가 파괴됨
keep-alive를 사용할 때 두 개 더
활성화됨: 구성 요소가 활성화된 경우
비활성화됨: 구성 요소가 소멸된 경우
4. 요청 데이터를 생성하는 것과 마운트하는 것의 차이점은 무엇인가요?
생성됨: 렌더링 전에 호출되며 데이터를 먼저 초기화합니다.
Mounted: 렌더링 후 호출, 요청 데이터가 스플래시 화면에 나타날 수 있음, 생성되지 않음
요청된 데이터는 dom에 영향을 미치고 사용이 생성되며 dom과 관련이 없으며 마운트에 배치할 수 있습니다.
5. Vue 컴포넌트 통신
부모에서 자식으로 전달: props, $ref--참조 정보 개체는 부모 구성 요소의 $refs 개체에 등록됩니다.
자식에서 부모로 전달: ￥emit---자식 구성 요소는 사용자 지정 이벤트를 바인딩하고 자식 구성 요소는 수신에 바인딩합니다.
Brother Biography: 글로벌 이벤트 버스 $bus는 데이터 전송을 위해 on 및 emit을 사용합니다.
6.생존 유지
Vue의 빌트인 컴포넌트로 컴포넌트를 래핑할 때 비활성 컴포넌트 인스턴스가 캐시됩니다.
재 렌더링 방지, 로딩 시간 및 성능 소모 감소
7. 액시오스 패키징 방법
다운로드 axios----인스턴스 생성----요청 및 응답 인터셉터 캡슐화----인터페이스 캡슐화--사용
8. vue 라우팅 매개변수 전달
params传参:this.$router.push({name:'',params:{}})
this.$route.params.id
경로 속성 전달 매개변수
this.$router.push({이름:'/${item.id}'})
라우팅 구성 {path:'/index:id'}
쿼리 매개변수
this.$router.push({name:'index',query:{}})
9. 라우팅 해시 모드와 기록의 차이점은 무엇입니까
해시 주소에 #이 있지만 히스토리가 없습니다.
Enter 키를 눌러 주소 표시줄을 새로 고치면 해시가 해당 페이지를 로드하고 기록에 404가 보고됩니다.
Hash는 H5의 새로운 API로 인해 낮은 버전의 브라우저를 지원합니다.
해시는 페이지를 다시 로드하지 않습니다
history에는 과거 기록이 있으므로 pushState 및 replaceState(0)를 통해 기록 기록을 수정할 수 있으며 즉시 요청을 보내지 않습니다.
기록에는 백그라운드 구성이 필요합니다.
10. 경로 차단
router.before 각 ach((to,from,next)=>{})
11. vue의 동적 라우팅
라우팅 구성에서 메타 속성을 설정하고 권한 관련 필드를 확장하고 라우팅 탐색 가드에서 권한 식별자를 판단하여 동적 증가 및 점프 라우팅을 실현합니다.
12. 새로 고침 후 2차 로딩 경로 해결 방법
창.위치.재로드()
매처
비용 라우터=createRouter()
내보내기 기능 resetRouter(){
const newRouter=creatRouter()
router.matcher=newRouter.matcher
}
13. vuex 새로 고침 페이지 데이터 손실
Vuex는 데이터를 다시 수집합니다
브라우저 캐시 쿠키, localstorage, 세션에 데이터 저장
페이지가 새로고침되면 데이터를 다시 요청하고 vuex에서 데이터를 동적으로 업데이트합니다.
14. 계산과 시계의 차이점
계산됨: 계산된 속성, 캐싱 지원, 속성 값이 변경되기 때문에 계산된 속성이 다시 계산됩니다. 그렇지 않으면 캐시가 사용되고 비동기가 지원되지 않으며 첫 번째 로드가 모니터링되며 함수에 반환이 있어야 합니다.
감시: 속성 모니터링, 데이터의 데이터 변경 모니터링, 캐싱 지원 안 함, 비동기 지원, 첫 번째 로드 모니터링 안 함, 반환이 필요 없음
15.vuex 사용 시나리오 및 속성
상태: 저장 변수
게터: 상태의 계산된 속성
변이: 업데이트된 데이터를 제출하는 방법, 동기화
작업: 비동기 작업
모듈: 모듈식 vuex
이용자 개인정보, 장바구니 등
16. vue 양방향 바인딩의 원리
게시자-구독자 모델과 결합된 데이터 하이재킹을 통해 Liyong object.defineProperty()는 각 속성의 setter 및 getter를 하이재킹하고 데이터가 변경되면 구독자에게 메시지를 게시하고 해당 모니터링 콜백을 트리거하여 보기를 렌더링합니다.
17. diff 및 가상 돔
요소 간의 관계를 설명하고 js 객체를 생성하는 가상 돔
구성 요소에 응답 데이터가 있는 경우 데이터가 변경되면 렌더링 기능이 새 가상 DOM을 생성하고 새 가상 DOM을 이전 가상 DOM과 비교하여 수정해야 하는 가상 DOM 콘텐츠를 찾은 다음 dom에서 해당 실제 수정으로 이동
diff는 가상 dom 비교에 사용되며 패치 객체를 반환하여 두 노드 간의 차이를 저장하고 마지막으로 패치의 레코드 정보로 실제 dom을 업데이트합니다.
18. vue와 jquery의 차이점
원칙은 다릅니다. vue는 데이터 바인딩이고 jq는 먼저 처리를 위해 dom을 얻습니다.
초점이 다릅니다. vue는 데이터 기반이고 jq는 페이지에 중점을 둡니다.
동작이 다름
19. vuex의 반응형 처리
이벤트가 발생하면 디스패치를 통해 액션의 메소드에 접근하게 되며, 액션의 커밋은 뮤테이션의 메소드를 트리거하여 상태의 값을 수정하고 getter를 통해 뷰에 데이터를 업데이트합니다.
20. 컴포넌트를 캡슐화하는 방법
Vue.extend()를 사용하여 컴포넌트 생성
Vue.components() 메소드를 사용하여 컴포넌트 등록
21. 뷰 필터
보간 표현식, v-bind는 필터를 사용할 수 있습니다.
전역: Vue.filter
로컬: 메서드, 필터와 같은 수준
22. vue에서 강제 새로 고침
localtion.reliad()
this.$router.go(0)
제공 및 주입
23. vue2 및 vue3
양방향 데이터 바인딩의 원칙은 다릅니다. vue2는 defindpropty()를 사용하고 vue3은 프록시를 사용합니다.
단편화 지원
다른 API
데이터 변수를 정의하는 다양한 방법, vue3---setup
라이프 사이클이 다르다
다른 값
명령어와 슬롯이 다름
main.js는 다릅니다.
24. Vue 성능 최적화
데이터에 모든 데이터를 넣지 마십시오.
v-for는 이벤트 프록시를 사용하여 각 요소에 이벤트를 바인딩합니다.
keep-alive 캐시 구성 요소
재사용성 향상을 위해 구성 요소를 최대한 차별화
키는 고유해야 합니다.
경로 지연 로딩의 합리적인 사용
가능한 한 데이터 영구 저장을 위해 흔들림 방지 및 제한 최적화를 사용하십시오.
주문형 로딩, 콘텐츠 레이지 로딩, 이미지 레이지 로딩
스켈레톤 스크린
SEO 최적화: 사전 렌더링, 서버측 렌더링 ssr
cdn, 멀티 스레드 패키징 형태의 타사 모듈 도입 및 공개 파일 추출
클라이언트 캐시, 서버 캐시, 서버 Gzip 압축
25. 첫 화면 최적화
경로를 사용한 지연 로드
스크롤 없이 볼 수 있는 구성 요소는 비동기를 사용합니다.
첫 번째 화면에서 중요하지 않은 구성 요소의 지연 로드
동적 리소스는 CDN에 배치됩니다.
첫 화면에서 js, css 등 리소스 파일 크기 줄이기
서버 측 렌더링 사용
dom의 수와 수준을 줄입니다.
스프라이트 요청 사용
거짓말 좀 해
Gzip 활성화
이미지 지연 로딩
26.vue3는 vue2보다 낫습니다.
diff 알고리즘 최적화
정적 부스트
이벤트 리스너 캐시
27. vue가 프록시를 사용하는 이유
프록시는 전체 개체를 프록시할 수 있습니다.
프록시 개체의 모니터링 방법이 더 풍부합니다.
프록시 개체는 새 개체를 생성하고 개체 자체를 수정하지 않습니다.
즉 브라우저와 호환되지 않음
28. SEO 최적화 방법
srr - 서버측 렌더링
seo--검색 엔진 최적화
srr, prerender prerender-spa-plugin