이 시리즈의 세 번째이자 마지막 부분에 오신 것을 환영합니다.이 시리즈는 이전 IE의 퇴직과 프론트 엔드 개발 분야에 대한이 사건의 영향을 탐구 할 것입니다. 지금까지 우리는 안전하게 폐기 할 수있는 구식 기술과 HTML5 및 CSS3 속성을 주류 브라우저에서 기본적으로 완전히 지원합니다. 오늘날 우리는 기본 JavaScript 기술 및 위의 범주에 속하지 않는 기타 컨텐츠에 중점을 둘 것입니다. Caniuse.com에 다시 한 번 감사드립니다. 매우 귀중한 자원입니다. 나는 또한 마지막 면책 조항 인
를 반복 할 것입니다
이 기사에서는 Old IE 를 지원하기로 한 결정을 포기할 것인지는 아무 관련이 없습니다. 웹 사이트 또는 응용 프로그램의 특정 세부 정보를 기반으로 직접 결정을 내려야합니다.
더 이상 고민하지 않고 계속합시다!
키 포인트
현대 자바 스크립트 API의 채택 : 인터넷 익스플로러의 퇴직을 통해 개발자는 이제 폴리 벌금이없는 주류 브라우저에서 최신 JavaScript API (예 : Base64 인코딩 및 Blob 빌드)를 직접 사용할 수 있으므로 성능과 호환성을 향상시킬 수 있습니다.
> 최신 브라우저의 채널 메시징 및 웹 소켓과 같은 API의 가용성은 각각보다 효율적인 스크립트 인터 스크립트 통신과 브라우저와 서버 간의 지속적인 연결을 촉진합니다.
ES6 구문 소개 : 블록 수준 변수 선언에 대한
및
와 같은 ES6 기능에 대한 지원과 화살표 기능의 인기를 통해 개발자는 클리너와보다 효율적인 코드를 작성할 수 있습니다.
보안 및 개인 정보 먼저 : 웹 암호화 API 및 CSP (Content Security Policy)가 완전히 지원되어 웹 애플리케이션의 보안을 향상시키기위한 강력한 도구를 제공합니다.
성능 최적화 : Page Visibility API 및 RequestAnimationFrame과 같은 새로운 기능은 웹 응용 프로그램의 효율성을 향상시키고 리소스 사용 및 애니메이션 성능을 최적화합니다.
> 앞으로 웹 개발 보안 : 인터넷 익스플로러 비활성화를 통해 개발자는 레거시 브라우저 호환성에 제한되지 않고 HTML5, CSS3 및 JavaScript의 잠재력을 최대한 활용하여보다 혁신적이고 미래 지향적 인 성적 웹 애플리케이션을 활용할 수 있습니다. .
javaScript apis
이 섹션에서는 상당히 많은 JavaScript 기능, API 및 기능을 소개합니다. 그들은 공통점이 무엇입니까? 그중 어느 것도 오래된 IES에 실제로 사용하거나 다양한 폴리 플릴을 사용해야하거나 가능한 경우 다양한 다른 프레임 워크 및 라이브러리를 통해 그 영향을 달성해야 할 수 없습니다. 현재 환경 (IE11 Edge)에서는 브라우저에 기본 지원이 내장되어있어 직접 사용할 수 있습니다. const Base64 인코딩 및 디코딩 (BTOA 및 ATOB)
Base64는 웹에서 매우 유용한 도구입니다. 많은 사람들이 글꼴이나 이미지를 CSS에 포함시키는 데 사용했을 것입니다. 또 다른 일반적인 사용법은 일반적으로 전송 프로토콜을 방해하는 다양한 자원을 처리하는 것입니다. 좋은 예는 기본 액세스 인증입니다. 여기서 사용자 이름 : 비밀번호 쌍이 Base64를 사용하여 포장 한 다음 서버로 전송됩니다. 인코딩/디코딩 작업에 대한 기본 지원은 더 빨리 실행될 수 있음을 의미합니다. 다음은 몇 가지 소개 자원입니다
MDN 의 atob () 및 btoa () 문서
base64.js polyfill
blob 빌드
바이너리 큰 객체 또는 blob은 데이터베이스 관리 시스템의 단일 엔터티에 저장된 원시 데이터 모음입니다. 오디오 클립 또는 이미지 일 수 있으며 Base64 형식으로 저장됩니다. 또는 이미지 세트. 대부분의 경우, 블로브 필드는 데이터 구조가 정상 테이블 또는 JSON 객체와 같은 테이블 스키마로 표현 된 것만 큼 엄격하지 않은 데이터에 사용됩니다. 여러분 중 일부는 Blob 인터페이스의 조상, 즉 Blobbuilder의 조상을 기억할 수 있습니다. 그러나이 접근법은 더 이상 사용되지 않았으며 모든 블로브 작업을 새로운 인터페이스를 통해 수행해야합니다.
가장 중요한 것은이 컬렉션이 파일과 매우 유사하기 때문에 Blob 객체의 기본 인터페이스가 파일 () 인터페이스의 기초로 사용되었습니다. 따라서 "Blob URL"이라는 멋진 기능이 있습니다.이 기능은 개발자가 파일을 사용할 수있는 모든 곳에서 사용할 수있는 Blob 객체에 대한 URL을 생성 할 수 있습니다. 이를 염두에두고 Native Support는 이제 모든 주류 브라우저를 다루고 있습니다.
mdn의 blob
mdn의 Blob URL
JavaScript Blob 및 파일 인터페이스 소개
채널 메시징
일반적으로, 다른 브라우저 컨텍스트에서 실행되는 두 개의 스크립트는 많은 보안 함정을 피하기 위해 서로 의사 소통하는 것을 금지합니다. 그러나 때로는 그러한 의사 소통이 필요할뿐만 아니라 실제로 필요합니다. Channel Messaging API가 작동하는 곳입니다. 이 인터페이스를 통해 두 스크립트는 양방향 파이프 라인을 통해 서로 통신 할 수 있습니다. 같은 채널에서 모든 사람에게 워키 토키를주는 것과 같습니다. 매우 영리하지 않습니까?
dev.opera 에서 HTML5 웹 메시징 소개
MDN
상수 및 블록 수준 변수
const and let는 ES6에서 데이터를 정의하는 두 가지 새로운 방법입니다. VAR은 글로벌 또는 기능 스코프가있는 변수를 정의하지만 새로운 컨텐츠에는 블록 레벨 스코프가 있습니다. 이는 Const 및 Let로 생성 된 변수의 범위가이를 정의하는 브래킷 쌍으로 제한됨을 의미합니다.
는 클래식 변수와 동일하게 작동하는 변수 (범위 제외)를 정의하더라도 상수 (const)는 값에 대한 읽기 전용 참조입니다. 재 할당 할 수없고 재정의 할 수 없으며 동일한 범위 내의 다른 변수 또는 함수와 동일한 이름을 공유 할 수 없습니다. 유일한 예외는 상수가 자체 속성을 가진 객체 인 경우입니다. 이러한 특성은 변경에 의해 보호되지 않으며 정상 변수처럼 작동합니다.
이 말하면 코드에서 일정한 및 블록 수준 변수를 올바르게 사용하는 방법을 확인하십시오.
mdn에서 상수
mdn에 를하자
itepoint ecmascript 6에 대한 준비 6 : let and const
wes bos 'es6 vs const ariable
콘솔 로깅
대부분의 프론트 엔드 개발자는 웹 콘솔이 스크립트가 비정상적으로 행동 할 때 가장 유용한 도구 중 하나라는 데 동의합니다. 그러나 Internet Explorer는 본질적으로 통합하는 데 속도가 느리고 버전 10만이 완전한 지원을 제공하기 시작합니다. 이제 구식 IE의 퇴직 으로이 기능을 최대한 활용하는 것을 막을 수있는 것은 없습니다. 지식을 새로 고치고 콘솔을 사용하는 새로운 방법을 찾으려면 다음 사양을 확인하십시오.
MDN의 콘솔
몇 가지 소스 리소스 공유
CORS (Cross-Origin Resource Sharing)는 HTML5 API로 자체 도메인 외부에서 리소스를 요청할 수 있습니다. 브라우저 및 서버가 특정 권한을 부여 할 때 원격 자원을 요청할 수있는 HTTP 헤더 세트를 설명합니다. 다음 리소스는이 기능을 올바르게 사용하는 방법을 배우기위한 좋은 출발점입니다.
Dev.opera에서 크로스-오리핀 리소스 공유를 사용한 DOM 액세스 제어
MDN의 HTTP 액세스 컨트롤 (CORS)
itepoint 에서 Cors에 대한 심층적 인 이해
웹 암호화 API
보안 및 개인 정보 보호는 요즘 모든 응용 프로그램에서 가장 많이 찾는 기능 중 하나입니다. 즉, 좋은 (그리고 빠른) 암호화가 높이 평가됩니다. 이제 모든 주류 브라우저는 IE11 (이전 버전의 사양을 구현하는) 및 Safari (crypto.webkitsubtle prefix가 필요한)를 제외하고는 웹 암호화 API를 지속적으로 지원합니다. 다행스럽게도 임의 값 생성과 같은 일부 특정 기능이 더 잘 구현됩니다. 따라서 기본 지원을 사용하여 암호화 된 요소를 구현하는 것이 그 어느 때보 다 쉬워집니다. 다음은 올바르게 수행하는 방법에 대한 가이드입니다.
mdn의 암호화 객체
mdn 의 getRandomValues
Github Shim 의 레거시 브라우저에 대한 웹 암호화 API
국제화
오늘날 인터넷 액세스의 유병률은 웹 사이트 방문자가 전 세계에서 나올 수 있음을 의미합니다. 사람들은 더 친숙한 것을 신뢰하기 때문에 모든 정보를 자신의 언어와 그들이 익숙한 형식으로 제시하는 것이 가장 좋습니다. 여기에는 국제화 (I18N이라고도 함)와 현지화 (또는 L10N)가 필요한 곳입니다. 이것은 말도 안되는 것처럼 들립니까? JavaScript에서 국제화를 달성하는 방법 (i18n)에 대한 그의 기사에서 Aurelio de Rosa를 인용합시다 :
국제화 (I18N이라고도 함)는 특정 현지 언어와 문화에 쉽게 적응할 수 있도록 제품 및 서비스를 만들거나 변환하는 과정입니다. 현지화 (L10N이라고도 함)는 특정 지역 또는 언어에 대해 국제화 된 소프트웨어를 조정하는 프로세스입니다. 다시 말해, 국제화는 여러 배양 (통화 형식, 날짜 형식 등)을 지원하기 위해 소프트웨어를 조정하는 프로세스이며, 현지화는 하나 이상의 문화를 구현하는 과정입니다.
브라우저 지원은 올해 초보다 약간 우수하며 Safari V10은 9 월에 순위에 합류했습니다. 흥미롭게 들립니까? 다음은 귀하를 추적 할 수있는 몇 가지 리소스입니다.
MDN의 국제 API
JavaScript Internationalization API - 간단한 소개
JavaScript에서 국제화를 달성하는 방법 (i18n)
미디어 쿼리 처리
반응 형 웹 디자인은 효율적인 웹 사이트의 현재 표준이며, 가능한 주요 기능은 미디어 쿼리의 존재입니다. MatchMedia는 CSS에서 JavaScript로 미디어 쿼리를 소개하여 개발자에게 다양한 장치에서 컨텐츠를 최적화 할 수있는 유연성을 높이기 위해 개발자에게 제공합니다. 좋은 예는 초상화 모드에서 조경 모드로 변경 및 휴대 전화 및 태블릿의 리버스 모드를 처리하는 것입니다. 장치 방향 감지를 처리하는 API가 있지만 대부분의 브라우저 지원은 부분적이며 Microsoft Edge만이 완전히 지원합니다. 이 주제에 대한 몇 가지 소개 리소스는 다음과 같습니다
mdn 의 테스트 미디어 쿼리
mdn 의 window.matchmedia
itepoint 에서 JavaScript에서 미디어 쿼리를 사용하는 방법
미디어 소스 확장
Media Source Extensions (MSE)는 플러그인을 사용하지 않고 비디오 및 오디오 요소에 추가 기능을 추가합니다. 적응 형 미디어 스트리밍, 실시간 스트리밍, 스티칭 비디오 및 비디오 편집을 제공합니다. YouTube는 2013 년 9 월부터 HTML5 플레이어에서 MSE를 사용하고 있습니다. 브라우저 지원도 상당히 좋습니다. iOS 사파리와 오페라 미니만이 기능이 부족합니다. IE11은 Windows 8에서 사용될 때만 완전히 지원됩니다. 불행히도 IE11/WIN7 사용자는이 기술의 혜택을받을 수 없습니다. 당신이 호기심이 많 거나이 API 사용을 시작하고 싶든 다음 리소스가 매우 유용하다는 것을 알게 될 것입니다.
MDN 의 MediaSource API
MSDN의 미디어 소스 확장자
html5 미디어 소스 확장 : 프로덕션 비디오를 웹에 가져 오기
돌연변이 관찰자
JavaScript 응용 프로그램은 매일 점점 더 복잡해지고 있습니다. 개발자는 특히 DOM 트리가 변경되거나 "돌연변이"할 때 페이지에서 어떤 변화가 발생하는지 제어해야합니다. 이러한 종류의 모니터링의 필요성은 새로운 것이 아니라 실제로 해결책 - 돌연변이 사건이 있습니다. 이 인터페이스의 문제점은 이벤트로서 동기식 (통화시 트리거되어 다른 이벤트가 트리거되는 것을 막을 수 있음)이며 DOM을 통해 캡처하거나 버블 링해야한다는 것입니다. 이로 인해 다른 이벤트가 발생하여 JavaScript 스레드를 과부하시키고 일부 특별한 경우에 전체 캐스케이드 고장을 생성하여 브라우저가 충돌합니다.
따라서, 돌연변이 사건은 더 이상 사용되지 않았으며 돌연변이 관찰자로 대체되었다. 당신은 물어볼 수 있습니다, 차이점은 무엇입니까? 가장 중요한 것은 관찰자가 비동기식입니다. 스크립트가 실행되는 것을 막을 수는 없습니다. 그것들은 각 돌연변이에서 트리거되지 않지만 주요 활동이 완료된 후에 배치 패스됩니다. 더 중요한 것은 관찰자를 미세 조정하여 노드의 모든 변경 사항을 관찰하거나 특정 범주의 변경 사항 만 관찰 할 수 있습니다 (예 : 하위 목록 또는 속성 만있는 것 등). 다음 리소스를 사용하여이 작업을 수행하는 방법을 배우기 시작하십시오.
mdn 의 돌연변이 요소
돌연변이 관찰자를 이해하십시오
itepoint에서 발전하는 새로운 변형
페이지 가시성
탭 브라우징은 네트워크와 상호 작용하는 방식이 변경되었습니다. 많은 사람들이 수십 페이지를 동시에 열 수있는 것은 드문 일이 아닙니다. 각 페이지는 자체 작업을 수행하고 스크립트를 실행하며 소유 한 리소스를 다운로드합니다. 한 번에 하나의 탭 만 활성화 할 수 있더라도 모든 열린 페이지는 CPU 시간과 대역폭을 소비합니다. 일부 응용 프로그램은 연결을 통해 주기적으로 업데이트를 보내고받을 수 있습니다. 그러나 활동 탭에서 앱을 열지 않으면 백그라운드에서 x 초마다 업데이트해야합니까? 약간의 폐기물처럼 보이지 않습니까? 특히 모바일 장치 및 데이터 계획에서 모든 리소스는 가치가 있습니다.
이것은 페이지 가시성 API가 작동하는 곳입니다. 이 인터페이스를 통해 개발자는 응용 프로그램이 활성 탭에 있는지 또는 백그라운드에 있는지 알 수 있습니다. 이전에 언급 한 응용 프로그램을 예로 들어 보겠습니다. Page Visibility API를 사용하면 응용 프로그램이 백그라운드에있는시기를 감지 한 다음 5 ~ 10 초마다 업데이트를 수행하는 대신 60 초 이하의마다 수행 할 수 있습니다. 페이지가 다시 표시되면 일반 업데이트 속도로 다시 전환 할 수 있습니다. 아주 멋지지 않습니까?
그래서, 당신은 무엇을 기다리고 있습니까? Page Visibility에 대한 응용 프로그램 시작을 시작하려면 다음 안내서를 확인하십시오. 사용자는 감사합니다 :
MDN의 PAGE 가시성 API
페이지 가시성 API 소개
페이지 변환 이벤트
페이지를 떠나거나 닫으려고 할 때 팝업되는 웹 양식을 사용한 적이 있습니까? 이것은 요즘 설정, 프로필 세부 사항 등을 변경하는 페이지에서 일반적입니다. 페이지의 스크립트는 당신이 떠나는 것을 어떻게 알 수 있습니까? 그들은 Page -Hide 이벤트를 듣습니다.
Pagehide와 그 파트너 Pageshow는 Page Conversion 이벤트의 주요 주인공입니다. 우리는 첫 번째 것이 주로 사용되는 것을 위에서 보았습니다. Pageshow의 주요 목적은 페이지가 캐시에서 또는 서버에서 직접로드되어 있는지 확인하는 것입니다. 이것은 가장 일반적인 용도는 아니지만 기능이 필요한 경우 다음 리소스를 확인하십시오.
Mdn Mdn 의 페이지 리드
requestAnimationFrame
웹의 애니메이션은 초기
>에서 애니메이션 gif, jQuery 효과, 현재 CSS, SVG, Canvas 및 WebGL 애니메이션에 이르기까지 먼 길을 왔습니다. 이러한 모든 방법 중 하나는 애니메이션의 흐름을 제어하고 가능한 한 매끄럽게 만드는 것이 필요하다는 것입니다.
초기 방법은 setInterval 및 settimeout을 사용하여 애니메이션의 단계를 제어합니다. 문제는 결과가 안정적으로 일관성이없고 애니메이션이 일반적으로 거칠다는 것입니다. 이것이 새로운 인터페이스가 설계된 이유 - requestAnimationFrame입니다. 이 접근법의 주요 장점은 브라우저가 요청을 자체 도면 사이클과 자유롭게 일치시켜 애니메이션을 크게 부드럽게 할 수 있다는 것입니다. 이 두 가지 방법은 상대방의 CancelAnimationFrame과 함께 현대적인 JavaScript 애니메이션의 기초입니다. 평소와 같이,이 기능을 마스터하기 시작할 수있는 몇 가지 리소스가 있습니다.
MDN
탐색 타이밍
MDN 의 내비게이션 타이밍 API
itepoint에서 내비게이션 타이밍 API를 사용하여 페이지로드를 분석하십시오
itepoint의 탐색 타이밍 API : 페이지 로딩을 효율적으로 분석하는 방법
리소스 타이밍
MDN
의 리소스 타이밍 API
Google 개발자 블로그의 리소스 타이밍 API를 사용하여 네트워크 성능을 측정하십시오.
itepoint 에서 자원 타이밍 API 소개
사용자 타이밍
itepoint 에서 사용자 타이밍 API를 발견하십시오
html5rocks에서 사용자 타이밍 API
usertiming-rum.js 및 usertiming.js polyfill on github
일반 배열
JavaScript 유형 배열은 배열과 같은 객체이며 원시 바이너리 데이터에 액세스 할 수있는 방법을 제공합니다. 최대의 유연성과 효율성을 위해, 구현은 버퍼 (원시 데이터 블록)와보기 (버퍼 데이터를 해석 할 수있는 컨텍스트 제공)의 두 가지 개념을 따라 수행됩니다. WebGL, Canvas 2D, XMLHTTPREQUEST2, 파일, 미디어 소스 또는 바이너리 웹 소켓과 같은 유형 배열을 사용하는 많은 웹 API가 있습니다. 코드가 그러한 기술을 처리하는 경우 다음 리소스에 관심이있을 수 있습니다.
JavaScript 유형 배열 mdn
일반 배열 : 브라우저의 이진 데이터 (html5rocks)
websockets
우리는 이전에 채널 메시징을 이전에 논의했으며 두 개의 다른 스크립트가 서로 직접 통신하는 방법에 대해 논의했습니다. Websockets는 더 많은 기능을 갖춘 이와 유사합니다. 이 API를 사용하여 브라우저와 웹 서버간에 지속적인 통신 채널을 만듭니다. http와 마찬가지로 WebSocket 프로토콜에는 안전하지 않은 (ws : // ...)와 Secure (wss : // ...)의 두 가지 버전이 있습니다. 또한 터널이 열리는 프록시 서버 및 방화벽을 고려합니다. 실제로 WebSocket 연결은 일반적인 HTTP 연결로 시작하여 기존 인프라와의 호환성을 보장합니다.
Websockets는 매혹적인 기술 (전용 웹 사이트도 있습니다)이며 배울 것이 많습니다. 시작하는 데 도움을주기 위해 다음은 몇 가지 선택된 리소스가 있습니다.
webSocket.org에서 webSocket에 대한
mdn의 websockets
itepoint 에서 html5 websockets api 소개
웹 작업자
기본적으로 모든 JavaScript 작업은 동일한 스레드에서 실행됩니다. 즉, 페이지의 모든 스크립트는 동일한 처리 시간 큐를 공유해야합니다. 프로세서에 하나의 코어 만 있으면 좋고 간단합니다. 그러나 최신 CPU에는 최소한 듀얼 코어가 있으며 일부 모델은 4, 6 또는 8 코어에도 도달합니다. 일부 작업이 사용 가능한 추가 커널로 처리 할 수있는 별도의 스레드로 이동할 수 있다면 좋지 않습니까? 이것이 웹 작업자가 발명 한 이유입니다.
웹 작업자 API를 사용하여 개발자는 스크립트 파일이라는 이름을 별도의 스레드로 실행하는 작업자에게 위임 할 수 있습니다. 작업자는 스크립트에 대해서만 응답하고 메시지를 통해 양방향으로 통신하며 XMLHTTPREQUEST 호출을 실행할 수 있으며 DOM 또는 창 객체의 기본 메소드 및 속성과 상호 작용하지 않습니다. 예외 범주에서는 WebSockets (WebSocket 연결 관리를 작업자에게 할당 할 수 있음) 또는 IndexEDDB와 같은 데이터 저장 메커니즘을 언급 할 수 있습니다. 자신의 비서가 보조 작업을 처리 할 수있는 조수가있는 반면, 기본 스레드는 전체 응용 프로그램을 실행하는 데 중점을 두지 만이보다 더 좋은 것은 없습니다.
이 기능을 시작하려면 (웹 작업자가 사용할 수있는 기능 및 클래스 목록 포함) 다음 리소스를 확인하십시오.
웹 워커 API에서 MDN
MDN의 웹 워커가 제공하는 기능 및 클래스
Sitepoint에서 HTML5 웹 워커를 사용한 JavaScript 스레딩
xmlhttprequest 고급 기능
xmlhttprequest의 채택은 웹 개발의 새로운 시대를 나타냅니다. 전체 페이지를 다시로드하지 않고 브라우저와 서버간에 데이터를 교환 할 수 있습니다. Ajax는 모든 사람이 단일 페이지 응용 프로그램을 가질 수있는 새로운 표준입니다.
이 유용한 기술은 더욱 발전 할 것이며, 이는 정상입니다. 이는 XHR이 파일 업로드, 진행 상황 정보 전송 또는 양식 데이터를 직접 전송하는 것과 같은 새로운 기능을 얻는 방법입니다. 이러한 모든 기능 (IE11 이상의 경우 약간 예외)은 퇴직 후 주류 브라우저에서 지원됩니다.
자세한 내용은 다음과 같은 자료를 확인하십시오.
최신 웹은 HTML, CSS 및 JavaScript 이상입니다. 온라인 경험을 최대한 훌륭하게 만들기 위해 열심히 노력하는 무대 뒤에서 보이지 않는 (그리고 불과한) 영웅이 많이 있습니다. 아래에서는 위의 IE 브라우저에서 사용할 수없는 이러한 기능 중 일부를 논의 할 것입니다 (보안 취약점과 현대적인 기능에 대한 지원 부족으로 유명합니다).
"async"및 "defer"를 사용하여 비 블로킹 JavaScript 로딩
모든 웹 개발자는 스크립트가 "로드 차단"이라는 것을 알게되며로드 될 때까지 전체 페이지를 차단합니다. 우리는 모두 전에 jQuery를로드한다는 제안을 기억합니다. 그러나 단일 페이지 응용 프로그램의 경우 웹 사이트의 모든 동작이 JavaScript에 의해 주도되기 때문에이 접근법은 쓸모가 없습니다. 이것은 우리를 출발점으로 되돌립니다.
그러나 대부분의 경우 귀하의 웹 사이트 나 응용 프로그램은 모든 JavaScript의 일부만으로 부드링해야한다는 것입니다. 나머지는 나중에 필요하거나 DOM에 영향을 미치지 않는 작업을 수행하고 있습니다. 명백한 방법은 주요 스크립트 만 정기적으로로드하고 응용 프로그램에 부정적인 영향을 미치지 않는 방식으로 나머지를로드하는 것입니다. 실제로, 그러한 로딩 방법은 두 가지가 있습니다.
첫 번째 방법은 DEFER 속성을 사용하는 것입니다.이 속성은 DOM에 영향을 미치지 않고 문서를 구문 분석 한 후 실행되도록 의도 된 스크립트를 표시하는 데 사용됩니다. 대부분의 경우 이러한 스크립트는 사용자 상호 작용을 처리하므로 이러한 방식으로 안전하게로드 할 수 있습니다. 두 번째 방법은 비동기 속성을 사용하고 다운로드 직후에 병렬로로드되는 스크립트를 표시합니다. 그러나 로딩 순서가 실행 순서와 동일하다는 것은 보장되지 않습니다.
이 두 매개 변수의 모든 이점은 웹 사이트 및 응용 프로그램 성능을 향상시키는 데 중요한 도구가되고 있습니다. 이 기술을 사용하는 방법과시기에 대한 자세한 내용은 다음 리소스를 확인하십시오.
Google 개발자에서 렌더링 차단 JavaScript를 제거하십시오
html5 Async를 사용하여 비 블로킹 JavaScript 로딩 및 SitePoint에서 연기
컨텐츠 보안 정책
처음부터 웹의 보안은 "상 동성"모델 주위에 구축되었으며, 이는 동일한 도메인의 스크립트 만 주어진 페이지와 상호 작용할 수 있음을 의미합니다. 그러나 시간이 지남에 따라 타사 스크립트를 페이지에 통합해야합니다 : CDN의 JavaScript 라이브러리, Facebook, Google 또는 Twitter의 소셜 미디어 위젯 및 기타 유사한 사례. 이것은 우리가 문을 열고 "게스트"스크립트가 우리의 은유 적 안뜰에 들어가도록 허용한다는 것을 의미합니다. 문제는 악의적 인 스크립트도 몰래 들어가서 다른 스크립트와 같이 실행될 때 발생합니다. 우리 모두가 알고있는 공격 방법, 크로스 사이트 스크립팅 또는 XSS.
컨텐츠 보안 전략은 XSS에 대한 주요 무기입니다. 이 메커니즘에는 실행할 수있는 스크립트, 자원을로드 할 수있는 곳, 인라인 스타일 또는 스크립트를 실행할 수 있는지 등을 지정할 수있는 정책 및 지침이 포함되어 있습니다. CSP는 화이트리스트를 기반으로합니다. 즉, 기본적으로 모든 것이 거부되고 지정된 리소스에만 액세스 할 수 있음을 의미합니다. 즉, 규칙이 미세 조정되면 악의적 인 스크립트가 사이트에 삽입 되어도 실행되지 않습니다.
다음은이 메커니즘을 더 잘 이해하는 데 도움이되는 몇 가지 리소스입니다.
컨텐츠 보안 정책 참조
itepoint에서 컨텐츠 보안 정책을 사용하여 웹 보안을 향상시킵니다
html5rocs의 컨텐츠 보안 정책 소개
http/2 프로토콜
처음부터 웹은 HTTP 프로토콜에서 실행되었습니다. 그러나 첫 번째는 매우 빠르게 성장했지만 HTTP는 크게 동일하게 유지되었습니다. 현대 웹 사이트 및 응용 프로그램의 복잡한 생태계에서 HTTP는 성능 병목 현상이 될 수 있습니다. 물론,이 프로세스를 최적화 할 수있는 기술과 관행이 있지만 너무 많은 일만 할 수 있습니다.
이것이 프로토콜의 두 번째 반복이 Google의 SPDY 프로토콜을 기반으로하는 http/2라고 불리는 개발 된 이유입니다. 2015 년 2 월에 승인되었으며 사양은 2016 년 5 월에 RFC 7540으로 출시되었습니다. 지금까지 주류 브라우저는 암호화 된 연결을 통해 HTTP/2 만 지원하며, 미래에 사이트 소유자가 HTTPS로 전환하도록 장려 할 가능성이 높습니다.
HTTP/2 채택은 일부 구성 설정을 변경하는 문제가 아닙니다. HTTP 성능을 향상시키기위한 몇 가지 모범 사례는 HTTP/2의 성능에 영향을 줄 수 있습니다. 웹 사이트가 HTTP/2를 사용할 준비가되었는지 확인하려면 다음 리소스를 참조하십시오.
HTTP/2 준비 : 웹 디자이너 및 개발자를위한 안내서 (Smashing Magazine)
HTTP/2가 웹 성능을위한 모범 사례를 변경하는 방법 (새로운 유물 블로그)
웹 개발자를위한 http/2 (CloudFlare Blog)
<: :> 리소스 팁 : 프리 페치
웹 성능은 오늘날에 인기있는 주제이며 그럴만 한 이유가 있습니다. 현장의 모든 직원이 알고 있듯이 페이지로드 시간의 상당 부분은 리소스 다운로드를 통해 수행됩니다. 페이지로드 후 시간을 사용하여 다음 단계의 리소스를 사전로드 할 수 있다면 좋지 않습니까? 이것이 자원 프롬프트의 것입니다.
리소스 프롬프트는 브라우저에 미래에 필요한 특정 리소스를 제공하도록 지시하는 일련의 지침입니다. 이 목록에는 다음과 같이 5 개의 프롬프트가 포함되어 있습니다
dns-prefetch
preconnect
prefetch
예압
프레 렌더
이 5 가지 가능한 옵션 중 현재 브라우저 지원이 좋은 유일한 옵션은 프리 페치입니다. 이 프롬프트는 브라우저에 현재 페이지 후 사용자가 요청할 가능성이있는 문서를 캐시합니다. 이것은 캐시 할 수있는 요소로의 사용을 제한합니다. 다른 유형의 리소스와 함께 사용하면 작동하지 않습니다.
이 주제에 관심이 있다면 자세한 내용을 제공하는 몇 가지 리소스가 있습니다.
리소스 팁 중간 리소스 팁
엄격한 전송 보안
HTTPS는 새로운 브라우징 표준이되고 있으며 점점 더 많은 웹 사이트가 안전한 연결 만 허용합니다. 정상 연결 (HTTP)은 일반적으로 HTTPS 버전으로 리디렉션되며 평소와 같이 상황이 발생합니다. 그러나이 접근법은 로그인 자격 증명을 훔치기 위해 원하는 웹 사이트 (일반적으로 뱅킹 웹 사이트)의 스푸핑 된 클론으로 리디렉션이 발생하는 "중간"공격에 취약합니다.
이것은 엄격한 전송 보안 헤더가 작동하는 곳입니다. HTTPS를 사용하여 원하는 웹 사이트에 처음 연결하면 헤더가 브라우저로 전송됩니다. 다음에 연결하면 URL의 HTTP 버전 만 사용하더라도 브라우저는 리디렉션 사이클을 통과하지 않고 HTTPS 버전으로 직접 이동합니다. HTTP에 연결되지 않으므로 위에서 설명한 공격은 발생하지 않습니다.
엄격하게 보안 헤더 전송에 대한 자세한 내용은 다음 웹 사이트를 확인하십시오.
HTTP MDN
장치 픽셀 비율
wind 이런 식으로 개발자는 고밀도 화면 (예 : Apple의 Retina 디스플레이 또는 고급 안드로이드 화면)을 감지 할 수 있습니다. 미디어 쿼리 및 MatchMedia (위에서 논의한)와 함께 사용하면이 속성을 사용하면 최상의 경험을 위해 최적화 된 리소스를 제공합니다.
mdn 의 window.devicepixelratio
웹 비디오 텍스트 트랙
웹 비디오 텍스트 트랙 (또는 WebVTT)은 멀티미디어 리소스의 텍스트 자막을 표시하는 데 사용되는 형식입니다. HTML5 요소와 함께 사용되며 자막, 번역, 제목 또는 설명을 미디어 자산 (오디오 또는 비디오)에 동기식으로 추가 할 수 있습니다. 이 텍스트 정보가 있으면 미디어 리소스에 쉽게 액세스 할 수 있습니다.
이 기능을 시작하는 방법에 대한 지침은 다음 리소스를 확인하십시오.
webvtt on mdn
webvtt 소개 및 dev.opera
html5rocs에서 트랙 요소 초보자
요약
우리는이 시리즈의 끝에 간단한 지적 운동으로 시작합니다. "
Old IE 가 사라졌습니다! 축하하자! (… 몇 시간 후…) 지금해야 할 일 ?”. 우리는 HTML, CSS 또는 기본 JavaScript 등 PolyFill없이 무료로 할 수있는 새로운 모든 것에 더 이상 필요하지 않은 기술과 관행에서 광범위한 주제를 다룹니다. 우리는 성능 최적화 및 향상된 보안과 같은 광범위한 주제를 다루었습니다.
[ 지금 모든 코드를 리팩토링해야합니까? 아마. 이러한 결정은 재구성 된 비용과 기술 부채 비용 사이의 균형에 따라 이루어져야합니다. 그러나 새로운 프로젝트를 시작하는 경우 과거가 아니라 미래를 위해 프로젝트를 구축하십시오. ]인터넷 익스플로러 퇴직 후 기본 JavaScript 개발에 대한 FAQ (FAQ)
인터넷 익스플로러 퇴직 후 기본 JavaScript 개발의 중요성은 무엇입니까?
Internet Explorer 이후의 기본 JavaScript 개발은 개발자가보다 효율적이고 효율적인 웹 애플리케이션을 만들 수 있기 때문에 중요합니다. Internet Explorer 비활성화를 통해 개발자는 더 이상 해당 브라우저와 관련된 제약 및 호환성 문제에 국한되지 않습니다. 이제 최신 기능 및 업데이트를 포함하여 JavaScript의 전체 기능을 사용하여보다 역동적이고 대화식 및 사용자 친화적 인 웹 응용 프로그램을 구축 할 수 있습니다.
내 브라우저에서 JavaScript를 활성화하는 방법은 무엇입니까?
브라우저에서 JavaScript를 활성화하는 것은 쉬운 프로세스입니다. 대부분의 브라우저의 경우 설정 또는 환경 설정 메뉴에서 JavaScript를 활성화 또는 비활성화하는 옵션을 찾을 수 있습니다. 일반적으로 여기에는 "보안"또는 "개인 정보"섹션으로 탐색하고 JavaScript와 관련된 옵션을 찾는 것입니다. 더 나은 탐색 경험을 위해 활성화하십시오.
다른 브라우저에서 Internet Explorer와 JavaScript의 차이점은 무엇입니까?
예, Internet Explorer 및 기타 브라우저에서 JavaScript의 작동 방식에는 큰 차이가 있습니다. Internet Explorer는 다른 JavaScript 엔진을 가지고있어 종종 호환성 문제와 한계로 이어집니다. Chrome, Firefox 및 Safari와 같은 최신 브라우저는 최신 JavaScript 기능 및 표준을 지원하는 고급 JavaScript 엔진을 사용하여 성능을 향상시키고 호환성 문제를 줄입니다.
라이브러리 나 프레임 워크 대신 기본 JavaScript를 사용하면 어떤 이점이 있습니까?
기본 JavaScript를 사용하면 라이브러리 또는 프레임 워크 사용에 비해 많은 이점이 있습니다. 불필요한 코드 로딩 및 구문 분석의 오버 헤드가 없기 때문에 더 나은 성능을 허용합니다. 또한 개발자는 특정 라이브러리 나 프레임 워크에 구속되지 않기 때문에 코드에 대한 더 많은 제어 기능을 제공합니다. 또한 기본 JavaScript를 이해하고 사용하면 언어와 특징에 대한 더 깊은 이해를 제공 할 수 있습니다.
인터넷 익스플로러의 비활성화는 JavaScript 개발에 어떤 영향을 미칩니 까?
인터넷 익스플로러의 비활성화는 JavaScript 개발에 큰 영향을 미쳤습니다. 개발자는 더 이상 인터넷 익스플로러와의 호환성을 보장하기 위해 추가 또는 다른 코드를 작성할 필요가 없습니다. 이로 인해보다 효율적인 개발 프로세스와 JavaScript의 전체 기능을 활용할 수 있습니다. 또한 브라우저에서보다 일관된 사용자 경험으로 이어집니다.
개발에서 JavaScript를 사용할 수있는 최신 기능은 무엇입니까?
JavaScript가 지속적으로 업데이트되었으며 새로운 기능과 개선 사항이 추가되었습니다. 최신 기능 중 일부에는 비동기 작업을 처리하기위한 비동기/대기, 배열 확장을위한 확장 된 구문 또는보다 간결한 기능 구문을위한 화살표 기능이 포함됩니다. 이러한 기능은 JavaScript 개발을 크게 향상시킬 수 있으며보다 효율적이고 읽을 수있는 코드를 작성할 수 있습니다.
내 JavaScript 코드가 모든 브라우저와 호환되는지 확인하는 방법은 무엇입니까?
브라우저 호환성 보장은 JavaScript 개발의 중요한 측면입니다. 이를 달성하는 한 가지 방법은 사용자의 브라우저가 기능을 사용하기 전에 기능을 지원하는지 확인하는 기능 감지를 사용하는 것입니다. 또 다른 방법은 지원하지 않는 이전 브라우저에 새로운 기능을 제공하는 스크립트 인 Polyfill을 사용하는 것입니다.
인터넷 익스플로러가 은퇴 한 후 JavaScript 개발의 미래는 무엇입니까?
인터넷 익스플로러가 은퇴 한 후 JavaScript 개발의 미래는 유망한 것처럼 보입니다. Internet Explorer 비활성화를 통해 개발자는 이제 호환성 문제에 대해 걱정하지 않고 JavaScript의 전체 기능을 활용하는 데 집중할 수 있습니다. 이는 언어의 지속적인 업데이트 및 개선과 결합하여 JavaScript가보다 효율적이고 강력하며 다재다능한 미래를 예고합니다.
기본 JavaScript 개발에 대해 더 많이 배우기위한 좋은 자료는 무엇입니까?
기본 JavaScript 개발에 대해 더 많이 배울 수있는 훌륭한 리소스가 많이 있습니다. 일부 인기있는 온라인 플랫폼에는 MDN (Mozilla Developer Network), Freecodecamp 및 Codecademy가 포함됩니다. 이 플랫폼은 JavaScript의 포괄적 인 가이드 및 튜토리얼을 제공하며 기본부터 고급 주제에 이르기까지 모든 것을 다룹니다.
JavaScript 코드를 효과적으로 디버그하는 방법은 무엇입니까?
디버깅은 JavaScript 개발의 필수 부분입니다. 대부분의 최신 브라우저에는 디버깅에 사용할 수있는 내장 개발 도구가 제공됩니다. 이 도구를 사용하면 코드를 통해 변수를 확인하고 발생하는 오류 또는 예외를 볼 수 있습니다. 또한 깨끗하고 간결한 코드 작성 및 코드 주석과 같은 우수한 코딩 관행을 사용하면 디버깅 프로세스가 더 쉬워 질 수 있습니다.
위 내용은 Internet Explorer 이후 기본 JavaScript 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
