전선 학습
- 기준 (CSS, HTML, 자바 스크립트)
- JS 라이브러리
- 프런트 엔드 프레임합니다 (MVVM)
- 브라우저 및 컴퓨터 기초
- 프런트 엔드 엔지니어링
- 성능 최적화
- Nodejs
- 데이터 구조 및 알고리즘
학습 목표
첫째, '빅 3'
CSS
- 상자 (표준 & IE)
- 플렉스, 플로트
- 일반적인 CSS 선택기
- CSS 선택기 우선 순위 극 및 무게
- BFC는 IFC와 이해
- 전이, 애니메이션 변환 等
- 이해하기 만 응답
H5
- 시맨틱 태그
- 캔버스
- 로컬 저장소 (차이 로컬 스토리지, sessionStorage, 쿠키의)
- 비디오 및 오디오 사용
- 응용 프로그램 캐시 (캐시 매니페스트)
자바 스크립트
- JS 데이터 유형 :베이스 타입 참조 형식
- 이
- 범위 (범위 체인)
- 프로토 타입 및 프로토 타입 상속 체인 &
- 클로저
- 어휘 범위 및 동적 범위
- 자바 스크립트 구현 메커니즘
- 약속 및 비동기
둘째, 라이브러리 도구
- jQuery를 : 정적 HTML 개발을위한 운영 DOM의 API의 다양한 집합 유용
- Zepto : 이동 단부 jQuery를 간체
- 순간 : 날짜와 시간 조작 라이브러리
- lodash : 라이브러리 작업을 JS
셋째, 상기 프레임의 선단
프런트 엔드 프레임 : 데이터 기반 뷰, 뷰, 단일 데이터 스트림 등 뷰 방식 바인딩 반작용
- : 기본 원칙에 응답 뷰의 반응 원리 , 반작용과 뷰 반응 대조적
- 게시 가입 모델 : 이해 JS 게시 - 구독 모델을
- 가상 DOM 이해 : 당신이 VirtualDOM을 모르는
- 경로의 프론트 엔드의 원리 : 웹 프런트 엔드 분석 및 구현의 원칙을 라우팅 , NetEase는 클라우드 교실 -vue 라우터 원
- nextTicek의 원칙 : $ nextTick 원리
- setState를의 원리
- DIFF 알고리즘 : DIFF 알고리즘의 이해 반응
- 단일 페이지 응용 프로그램 (SPA) 원리와 장점과 단점 : 참조
넷째, 브라우저 및 컴퓨터 기초
- 브라우저 캐시 메커니즘 : 강한 캐싱, 캐싱 협상, 브라우저 캐시 메커니즘
- 브라우저에서 JS 집행 메커니즘 : 참조
- 페이지 원리를 렌더링 : 부하를 무슨 일이 있었는지에 대한 입력 페이지 URL에서 ,
- 브라우저 보안 문제 : 8 큰 프런트 엔드 보안 문제 , 8 큰 프론트 - 엔드 보안 (아래)
- 왜 브라우저 크로스 도메인 : 브라우저는 도메인 간 액세스를 제한해야하는 이유
- 페이지 최적화 아이디어
- HTTP 및 HTTPS의 차이
- TCP / IP 프로토콜
- 세 방향 핸드 셰이크 네 파
- CDN의 역할과 원칙
- 앞으로 프록시 및 리버스 프록시 기능
다섯째, 프론트 엔드 설계
모듈 형
- JS 모듈
- 모듈 형 CSS
- 모듈 형 자원
컴포넌트 화
- 의 구성 요소 : 각 템플릿 함유는 (HTML) + 스타일 (CSS) + 논리합니다 (JS)는 UI가 아래로 분할 구조 단위, 우리는 구성 요소를 호출 기능.
표준화
- 코딩 표준
- 인터페이스 사양
- 사용의 자식
- 코드 검토
- UI 요소 스펙
지식 포인트
- 프로젝트의 바벨, ESLint, 웹팩 및 기타 도구의 역할을 이해
- 바벨의 핵심 원리
- 웹팩 컴파일러 이론, 빌드 프로세스, 뜨거운 업데이트의 원칙
- Nginx에 대한 기본적인 이해
- 이해 힘내 워크 플로우
- 의의 및 모의의 혜택
성능 최적화
- 프런트 엔드 성능 측정, 성능 모니터링 (성능, 등 대)
- 일반적인 성능 최적화 프로그램하는
- SSR 프로그램 성능 최적화
- 웹팩의 성능 최적화
- 반응, 뷰 다른 성능 최적화 프레임 워크
- 네트워크 수준의 최적화
- 페이지 렌더링 최적화 레벨
- 흑백 최적화 기법
Nodejs
- 의 응용 프로그램에서 Nodejs 역할
- 익스프레스와 코아의 차이
- 유사점과 기본 운영 원칙 Nodejs의 차이 및 브라우저
- 원리는 비 차단 메커니즘을 Nodejs