로그인
로그인

마인드 맵 갤러리 프런트엔드 풀링크 성능 최적화 및 RD 개발 프로세스 최적화

프런트엔드 풀링크 성능 최적화 및 RD 개발 프로세스 최적화

프런트 엔드 풀 링크 성능 최적화: 하이브리드 개발, CDN/DNS, HTTP, 쿠키, 서버, HTTPS, HTTP-2 등을 포함한 R

2021-01-01 19:46:28에 편집됨

슈퍼직장인

최근 작업 더 많은 작업 보기>>

(III) 저산소 유도 인자 프롤릴 하이드 록 실라 제 억제제
이것은 (III) 저산소증-유도 인자 프롤릴 하이드 록 실라 제 억제제에 대한 마인드 맵이며, 주요 함량은 다음을 포함한다 : 저산소증-유도 인자 프롤릴 하이드 록 실라 제 억제제 (HIF-PHI)는 신장 빈혈의 치료를위한 새로운 소형 분자 경구 약물이다. 1. HIF-PHI 복용량 선택 및 조정. Rosalasstat의 초기 용량, 2. HIF-PHI 사용 중 모니터링, 3. 부작용 및 예방 조치.
Kuka 산업용 로봇의 개발 및 Kuka 산업 로봇의 모션 제어 명령
이것은 Kuka Industrial Robots의 개발 및 Kuka Industrial Robot의 모션 제어 지침에 대한 마인드 맵입니다. 주요 내용에는 쿠카 산업 로봇의 역사, 쿠카 산업 로봇의 특성, 쿠카 산업 로봇의 응용 분야, 2. 포장 프로세스에서 쿠카 로봇은 빠르고 일관된 포장 작업을 달성하고 포장 효율성을 높이며 인건비를 줄입니다. 2. 인건비 감소 : 자동화는 운영자에 대한 의존성을 줄입니다. 3. 조립 품질 향상 : 정확한 제어는 인간 오류를 줄입니다.
1.1 컴퓨터 네트워크 요약
408 컴퓨터 네트워크가 너무 어렵습니까? 두려워하지 마세요! 나는 피를 구토하고 지식 맥락을 명확히하는 데 도움이되는 매우 실용적인 마인드 맵을 분류했습니다. 컨텐츠는 매우 완전합니다. 네트워크 아키텍처에서 응용 프로그램 계층, TCP/IP 프로토콜, 서브넷 디비전 및 기타 핵심 포인트에 이르기까지 원칙을 철저히 이해하는 데 도움이 될 수 있습니다. 📈 명확한 논리 : Mindmas 보물, 당신은 드문 기회가 있습니다. 서둘러! 이 마인드 맵을 사용하여 408 컴퓨터 네트워크의 학습 경로에서 바람과 파도를 타고 성공적으로 해변을 얻으십시오! 도움이 필요한 친구들과 공유해야합니다!

프런트엔드 풀링크 성능 최적화 및 RD 개발 프로세스 최적화

슈퍼직장인

최근 작업 더 많은 작업 보기>>

추천 사항
개요

느린 SQL 처리 백과사전
- 10
슈퍼직장인
아이데아 (Idea) - DNS와 SaaS 관련 프로젝트 계획
- 17
iCube연구소 1

프런트엔드 풀링크 성능 최적화 및 R&D 개발 프로세스 최적화

4. HTTP: HTTP 요청 수를 줄이는 방법은 무엇입니까?

CSS 스프라이트

이미지는 DataURL, 웹 글꼴을 사용합니다.

JS/CSS 파일 병합

JS/CSS 요청 콤보

인터페이스 병합

인터페이스 저장소 LocalStorage

정적 리소스 저장소 LocalStorage

5. 쿠키: 쿠키 크기를 줄이는 전략 및 이점

전략

기본 웹사이트 홈페이지에 화이트리스트 설정

허용 목록에 없는 쿠키를 주기적으로 삭제

혜택

페이지 간 전송 크기 줄이기

효과적인 쿠키 관리

6. 서버

캐시 구성 및 최적화 솔루션

만료

정의

응답 헤더에는 응답이 만료되는 날짜/시간이 포함됩니다.

0과 같은 유효하지 않은 날짜는 과거의 날짜, 즉 리소스가 만료되었음을 나타냅니다.

Cache-Control 응답 헤더에 "max-age" 또는 "s-max-age" 지시어가 설정된 경우 Expires 헤더가 무시됩니다.

문법:

만료: 2019년 12월 17일 화요일 07:01:44 GMT

예:

만료: 2019년 12월 17일 화요일 07:01:44 GMT

캐시 제어

정의

지침을 지정하여 캐싱 메커니즘을 구현하는 일반 메시지 헤더 필드입니다. 캐싱 지시문은 단방향입니다. 즉, 요청에 설정된 지시문이 반드시 응답에 포함될 필요는 없습니다.

문법

Cache-Control: max-age=[캐시 저장의 최대 기간을 설정합니다. 이 시간 이후에는 캐시가 만료된 것으로 간주됩니다(초 단위). Expires와는 반대로 시간은 요청 시간을 기준으로 합니다.]

예

캐시 제어:최대 연령=600

E태그

정의

HTTP 응답 헤더는 특정 버전의 리소스에 대한 식별자입니다. 이렇게 하면 콘텐츠가 변경되지 않은 경우 웹 서버가 전체 응답을 보낼 필요가 없기 때문에 캐싱이 더 효율적이고 대역폭이 절약됩니다. 콘텐츠가 변경되는 경우 ETag를 사용하면 리소스의 동시 업데이트가 서로 덮어쓰는 것을 방지할 수 있습니다.

특정 URL에 자발적인 변경이 있는 경우 새 ETag 값을 생성해야 합니다. 따라서 ETag는 지문과 유사하며 일부 서버에서 추적하는 데 사용될 수도 있습니다. ETag를 비교하면 이 리소스가 변경되었는지 신속하게 확인할 수 있지만 추적 서버에 의해 영구적으로 지속될 수도 있습니다.

문법:

ETag: "<etag_값>"

예

ET태그: "<5c6ccc12-1d45>"

최종 수정됨

Lat-Modified는 원본 서버에서 식별된 리소스가 수정된 날짜와 시간을 포함하는 응답 헤더입니다. 수신되거나 저장된 리소스가 서로 일치하는지 여부를 확인하기 위한 유효성 검사기로 자주 사용됩니다. 이는 ETag보다 정확도가 떨어지기 때문에 대체 메커니즘입니다. If-Modified-Since 또는 If-Unmodified-Since 헤더를 포함하는 조건부 요청은 이 필드를 사용합니다.

문법

최종 수정 날짜: <일 이름>, <일>, <월>, <년>, <시간>: <분>: <초> GMT

예

최종 수정 날짜: 웹, 2019년 2월 20일 03:40:02 GMT

날짜

정의:

날짜는 메시지가 생성된 날짜와 시간을 포함하는 공통 헤더입니다.

문법

날짜: <일-이름>, <일>, <월>, <년>, <시>: <분>: <초> GMT

예

날짜: 2019년 2월 17일 화요일 03:40:02 GMT

상태

정의

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 여부를 나타냅니다. 응답은 정보 응답(100 - 199), 성공적인 응답(200 - 299), 리디렉션(300 - 399), 클라이언트 오류(400 - 499) 및 서버 오류(500 - 599)의 5가지 범주로 나뉩니다.

예

상태：200

gzip 압축을 활성화하고 구성하는 방법

혜택

텍스트 압축(HTML/CSS/JS)

텍스트가 아닌 경우 압축 안 함(jpg/gif/png)

압축률 약 50% - 70%

구성 방법

Nginx 구성: nginx.conf 파일에 gzip을 추가합니다.

Apache 구성: AddOutputFilterByType 및 AddOutputFilter

유효성 탐지

응답 헤더 Content-Encoding: gzip이 있는지 확인합니다. 이는 서버에서 gzip이 켜져 있음을 의미합니다.

7. HTTPS: 전체 사이트에 대해 HTTPS를 활성화하는 방법

기본 사상

HTTPS(HyperText Transfer Protocol Secure)는 컴퓨터 네트워크를 통한 보안 통신을 위한 전송 프로토콜입니다.

HTTPS는 HTTP를 통해 통신하지만 데이터 암호화에는 SSL/TLS를 사용합니다.

HTTPS의 주요 목적은 서버 ID 인증을 제공하고 데이터 개인 정보 보호 및 무결성을 보호하는 것입니다.

작동 원리

브라우저가 HTTPS 요청을 시작합니다.

양도증명서

브라우저가 인증서를 구문 분석합니다.

암호화된 정보 보내기

서버가 정보를 해독합니다.

암호화된 정보 전송

브라우저가 정보를 해독합니다.

이점

SEO

안전

구현하다

대리점 구매 증명서

GoGetSSL

SSLs.com

SSLmate.com

로컬 테스트 인증서

로컬 HomeBrew 설치: Brew install mkcert

루트 인증서를 로컬로 설치: $ mkcert --install

로컬에서 서명 생성: $mkcert 123.com //123.com에 대한 인증서 생성

로컬 nginx 구성

8. HTTP-2: HTTP-2를 업그레이드하면 어떤 이점이 있나요? 업그레이드하는 방법?

HTTP/2 개념

h2(TLS/1.2 이상을 기반으로 한 암호화된 연결) 또는 h2c(암호화되지 않은 연결)라고 하는 HTTP/2(Hypertext Transfer Protocol 버전 2, 원래 이름은 HTTP 2.0)는 HTTP 프로토콜 버전의 두 번째 주요 버전입니다.

HTTP/2의 장점

바이너리 형식으로 데이터 전송

멀티플렉싱(단일 HTTP/2 연결을 통해 여러 요청을 수행할 수 있음)

헤더 압축, 작은 전송량

서버 푸시(Server Push), 서버는 리소스를 클라이언트에 더 빠르게 푸시할 수 있습니다.

HTTP/2 사이트의 장점

서버 부담을 줄일 수 있습니다

웹사이트 접속 속도 향상

웹사이트를 안전하게 유지하세요

Nginx에서 HTTP/2 활성화

OpenSSL 업그레이드: $ openssl 버전

재컴파일

$ CD nginx-xxx

$ ./configure --with-http_ssl_module --with-http_v2_module

$ make && make install

HTTP/2 확인

브라우저에서 작은 녹색 자물쇠가 있는지 확인하세요.

브라우저 요청 스크린샷

3. DNS: 주류 DNS 최적화 방법은 무엇입니까?

정의

도메인 이름 시스템(Domain Name System)은 웹 사이트 도메인 이름과 IP 주소를 서로 매핑하여 인터넷에 더 쉽게 액세스할 수 있도록 하는 분산 데이터베이스입니다.

클라이언트 처리

Android DNS 모듈(okhttp)

HTTP/2를 지원합니다. HTTP/2는 단일 연결에서 한 번에 여러 요청을 보내 데이터를 보내거나 받는 멀티플렉싱 기술을 사용하여 단일 TCP 연결에서 동시성을 지원합니다.

HTTP/2를 사용할 수 없는 경우 연결 풀 재사용 기술을 사용하면 대기 시간도 크게 줄일 수 있습니다.

다운로드 크기를 압축하는 GZIP 지원

해당 캐싱은 반복되는 네트워크 요청을 완전히 방지할 수 있습니다.

서버가 여러 IP 주소로 구성된 경우 첫 번째 IP 연결이 실패하면 OkHttp는 자동으로 다음 IP를 시도합니다.

iOS DNS 모듈(자체 개발)

앱이 시작되면 사용될 수 있는 모든 도메인 이름과 IP를 캐시하고 이를 비동기적으로 처리합니다. 클라이언트는 캐시된 결과를 가져올 필요가 없습니다.

캐시에 이 도메인 이름에 대한 캐시가 있으면 캐시된 IP가 직접 반환됩니다.

이 도메인 이름이 캐시에 없으면 HTTPDNS SERVER에 다시 적용하면 이 콜백에 결과가 반환됩니다.

프런트 엔드 처리

브라우저 동시성 제한, 여러 도메인 이름으로 설정된 배포

사용자 액세스: Java, PHP 및 기타 API 인터페이스

페이지 및 스타일: HTML/CSS/JS

사진: jpg, png, gif 등

2. CDN: CDN 캐시를 올바르게 구성하는 방법은 무엇입니까?

정의

CDN(Content Delivery Network)은 각 사용자에게 가장 가까운 서버를 사용하여 사용자 배포 네트워크에 파일을 더 빠르고 안정적으로 보냅니다.

이점

속도 향상: 사용자에게 데이터를 전송하기 위해 더 가깝고 원활한 서버 노드가 할당됩니다.

저렴한 비용: 서버를 서로 다른 위치에 배치하여 상호 연결 트래픽을 줄이고 대역폭 비용을 줄입니다.

고가용성 : 서버 장애 시 자동으로 인근 지역의 서버 호출

CDN을 원본으로 되돌리기

원본으로 돌아가는 것은 브라우저가 CDN 클러스터의 정적 파일에 액세스할 때 파일 캐시가 만료되고 원본 시스템에 액세스하기 위해 CDN 클러스터에 직접 침투하는 것을 의미합니다.

CDN 캐시

레벨 3 캐시: 브라우저 로컬 캐시, CDN 에지 노드 캐시, CDN 원본 사이트 캐시

캐시 설정: 캐시 시간을 너무 짧게 설정하면 CDN 엣지 노드 캐시가 자주 실패하여 원본 반환이 자주 발생하고 원본 사이트의 부하가 증가하며 캐시 시간을 너무 길게 설정하면 액세스가 느려지고 파일이 업데이트됩니다. 속도가 느리고 사용자의 로컬 캐시를 제때 업데이트할 수 없습니다. 따라서 비즈니스 상황에 따라 다릅니다.

다양한 정적 리소스 유형의 캐시 시간

HTML: 3분

JS, CSS: 10분, 1일, 30일

CDN 그레이스케일 릴리스

원칙: 일부 지역 및 일부 지역의 일부 운영자에서는 정적 리소스가 먼저 해제되며 검증 후 전체가 해제됩니다.

구현: 도메인 이름 측면에서 원본 사이트 시스템 측면에서 그레이스케일링이 필요한 도시 및 운영자를 확인하기 위해 특수 VIP를 설정하고 그레이스케일 도시 및 운영자를 확인하기 위해 별도의 원본 사이트 시스템을 구성합니다. 이 독특한 기계들

CDN, 대대적인 프로모션 준비

컴퓨터실 대역폭 늘리기

운영자 트래픽 증가

재해 복구: CDN 애플리케이션 캐시 시간은 10분~1시간으로 설정되며, 주요 승격 후 복원됩니다.

1. 하이브리드 개발

미니 프로그램의 핵심과 장점 소개

비전

손끝에서: 사용자는 스캔하거나 검색하여 앱을 열 수 있습니다.

즉시 사용하세요. 너무 많은 앱을 설치하는 것에 대해 걱정하지 마세요.

기술적 장점

H5는 앱 개발보다 개발 임계값이 낮습니다.

H5보다 낫고 네이티브 경험에 가깝습니다.

카메라, 위치, 네트워크, 스토리지 등 풍부한 기본 기능

상단 드롭다운과 검색, QR코드 등의 출입구가 간편하고 사용 후 사라지는 방식이 간편하고 편리합니다.

앱처럼 다운로드할 필요 없이 바로 열고 종료하면 됩니다. 핫 업데이트 지원

기본 커널

사업 배경

앱 플랫폼 측

트래픽 수익화

미니 프로그램 생태

수강신청 유통시장

엔터프라이즈 애플리케이션 측

모바일 트래픽 고갈, 신규 트래픽은 덤

고객 확보가 어려운 일부 문제를 해결하고 신규 고객 유치 비용을 절감

개발 비용을 대폭 절감

비즈니스에서 시행착오를 겪을 기회가 더 많아졌습니다.

선택 제안

최초 출시: 2017년 1월(위챗 미니 프로그램)

Github 시작: 비공개 소스

커뮤니티 활성: 확인

구성품: 매우 풍부함

학습 곡선: 매우 낮음

기본 성능: OK

포괄적인 제안: 이제 플랫폼 제품은 판매자에게 트래픽을 제공합니다. RN 및 Flutter에 비해 여러 앱이 비즈니스 상호 운용성을 가능하게 하며 소규모 프로그램이 더 권장됩니다.

Flutter 핵심 및 장점 소개

비전

화면 어디에서나 픽셀을 그릴 수 있는 아름다운 건축 경험을 위한 편리한 툴킷

기술적 장점

한 번 작성하여 각 터미널에 배포: 웹, Android/iOS, Mac/Linux/Windows, Fuchsia OS

하단 레이어는 Skia 그래픽 엔진을 사용하며 그래픽 성능은 기본 애플리케이션과 비슷합니다.

전체 화면 앱이나 2D 게임과 같은 인터페이스

빠르며 기본 ARM 바이너리를 사용하고 미리 컴파일하며 JVM이 필요하지 않습니다.

기본 원칙

선택 제안

2017년 5월

Github 시작: 8.16w(2019년 말)

커뮤니티가 전반적으로 활성화되어 있습니다.

구성 요소는 특수한 위젯이므로 풍부하지 않습니다.

학습 곡선이 상대적으로 높아 Dart 언어에 다시 익숙해집니다.

네이티브가 가장 잘 수행됩니다.

종합 제안: 성능을 고려하면 비즈니스는 다중 터미널 지향적이며 앱 팀에는 충분한 인력이 있으므로 선택하는 것이 좋습니다.