HTML5 크로스 브라우저 폴리 플릴에 대한 초보자 가이드

키 포인트

polyfill은 개발자가 최신 웹 기능을 지원하지 않는 이전 브라우저에서 이러한 기능을 사용할 수 있도록하여 이러한 브라우저의 사용자가 기능이나 경험을 잃지 않고도 웹 사이트에 여전히 액세스하고 사용할 수 있도록하는 도구입니다. <..> polyfill.io는 주문시 PolyFill 라이브러리를 제공하는 오픈 소스 프로젝트로, 개발자는 이전 브라우저와의 호환성을 유지하면서 최신 표준을 사용할 수 있습니다. 사용자 에이전트 HTTP 헤더를 읽고 필요한 폴리 필드 만 제공하여 최신 브라우저의 팽만감을 줄입니다.

PolyFill은 이전 브라우저에서 현대적인 기능을 활성화하는 데 도움이되지만 웹 페이지의 무게를 늘리는 것과 같은 잠재적 인 단점이 있습니다. 의도 된 목적으로 Polyfill의 기능은 불일치 또는 오류를 초래합니다.

• 웹 페이지가 빠르게 발전하고 있습니다. 새로운 프레임 워크, 도구, 심지어 언어조차도 떠오르고 있습니다. 그러나 많은 개발자들은 사용자의 가장 느린 속도로 앞으로 나아가 야한다고 생각합니다. 최신 브라우저는 "상록수"입니다. 백그라운드에서 자동으로 업데이트되고 권한 요청이 필요하며 새로운 API를 개선하는 데 큰 진전을 보였습니다.
그러나 그러나 최신 브라우저조차도 모든 기능을 동시에 구현하지는 않습니다. 현대 개발에서 최첨단 기술에 관한 기사를 읽는 것은 실망스럽고 이러한 기술은 앞으로 몇 년 동안 이용할 수 없다는 것을 알게됩니다. 아마도 웹 사이트의 분석 데이터를 확인한 후 아직도 IE9를 사용하는 사용자가 있습니까? 2011 년에했던 것처럼 코드를 작성하거나 jQuery 또는 일부 프레임 워크에 모든 것을 위임해야합니까? 다른 옵션이 있습니다. 그것은 polyfill 입니다. polyfill이란 무엇입니까? 왜 우리는 그들을 필요로합니까?
• Remy Sharp는 2009 년 책과 블로그 게시물 에서이 용어를 만들었습니다. 이 기능이 브라우저에 존재하는 경우 PolyFill을 사용하면 브라우저가 작동하지 않으면 FolyFill이 누락 된 기능을 보충합니다. 오래된 브라우저의 취약성, 오늘날 사용하려는 누락 된 기능을 채 웁니다. 비 천연 코드를 사용하여 기본 API를 복사합니다.
우리가 말하는 누락 된 기능은 무엇입니까?

2009 년 ECMAScript 버전 5가 출시되었습니다. 이것은 언어의 거대하고 급진적 인 발전입니다. ECMAScript 2015도 비슷한 주요 업데이트를 가져 왔습니다. 앞으로이 언어의 개선은 점진적이며 매년 일어날 것입니다. 새로운 기능이 끊임없이 언어에 추가 된 흥미로운 시간입니다. 핵심 언어 자체 외에도 DOM 및 웹 플랫폼에 대한 다양한 API가 있습니다. 현대식 브라우저와 구형 브라우저의 차이점을 강조하기 위해 최신 Chrome 버전과 Internet Explorer 9 (일부 회사는 여전히 유감스럽게도 지원)를 비교하는 것이 있습니다. ECMAScript 6에 대한 지원을 보여주는 테이블도 있습니다. 두 번째 테이블은 IE 11로만 추적되며, 볼 수 있듯이 거의 ES6 기능이 없습니다. 이것은 많은 누락 된 함수입니다 ...

polyfill 및 번역 따라서 위의 표에서 코드를 번역해야한다는 것이 분명합니다. 반짝이는 새로운 구문과 구식 ECMAScript 5를 출력합니다. 화살표 기능을 사용하려면 Async/Await, Rest 및 Spread 매개 변수, 클래스 등을 사용하려면 코드에서 Babel과 같은 도구를 사용하여 ES6 코드를 ES5로 변환해야합니다. 그러나 JavaScript의 구문을 다리 채색 할 수 없습니다. Babel은 화살표 기능을 일반 기능으로 변환하는 반면 Polyfill은 글로벌 범위 및 기본 프로토 타입에 방법을 추가합니다. Babel은 Babel 웹 사이트에서 자체 ES6 PolyFill을 제공합니다. Babel 웹 사이트에서는 "Promise 또는 WeakMap과 같은 새로운 내장 객체, Array.From.From.From.Assign, Asray.Prototype.includes와 같은 인스턴스 방법 및 및 인스턴스 방법을 제공합니다. 발전기 함수 "Babel Polyfill은 우리가 원하는 모든 ES6 기능을 제공 할 수 있습니다. 그러나 그것은 많이 그리워요. 클래스리스트 API를 사용하여 클래스를 추가하고 제거하거나 미디어 쿼리에 MatchMedia를 사용하지만 여전히 IE9를 지원해야합니다. 다행스럽게도 Babel Polyfill 커버 등을 제공하는 서비스가 있습니다.

polyfill.io로 인생을 단순화하십시오 <.> polyfill.io는 Financial Times가 개발 한 오픈 소스 프로젝트입니다. 현재 하루에 최대 2 억 2 천만 건의 요청을 받고 있으며 그 자체는 "PolyFill의 사양 라이브러리"라고합니다. 이 주문형 폴리 필 시스템을 사용하면

를 사용할 수 있습니까?

를 사용할 수 있습니까? 최신 표준을 사용하여 구형 브라우저와 호환됩니다.

이상적으로, 우리는 실제로 사용한 폴리 필 기능 만 제공해야하며 특정 브라우저에 실제로 필요한 폴리 플릴 만 보내야합니다. polyfill.io는 두 요구를 모두 충족시킬 수 있습니다. 이 서비스는 사용자 에이전트 HTTP 헤더를 읽으므로 최신 브라우저에 블로 된 파일을 제공하지 않고 필요한 컨텐츠 만 제공합니다. 새 브라우저는 거의 빈 파일을 받고 이전 버전의 IE는 많은 코드를받습니다. 쿼리 문자열에서 사용중인 기능 목록을 지정하여 이전 시스템으로 전송 된 코드의 가중치를 줄일 수 있습니다. 생략하면 기본값 세트가 사용됩니다. 서비스를 사용하려면 추가 차단 HTTP 요청이 필요하지만 제 생각에는 사용의 용이성이 가치가 있습니다. Google 엔지니어 Philip Walton은 Polyfill 및 Performance에 대한 자체 관점을 가지고 있으며 추가 요청에 대해 걱정할 경우 읽을 가치가 있습니다.

무엇을 다루지 않습니까?

polyfill.io는 매우 포괄적이며 페치 및 약속과 같은 최첨단 브라우저 API가 포함되어 있습니다. 그러나 새로운 기술을 시도하고 사용할 수있는 많은 폴리 ​​플릴이 있습니다. 아마도 가장 흥미로운 점은 아마도 스타일 캡슐화와 반복하기 쉬운 기능을 제공하는 잠재적으로 혁신적인 프론트 엔드 개발 발전 인 웹 구성 요소 일 것입니다. 크로스 브라우저 지원이 마침내 다가오고 있습니다. Google은 폴리머 프로젝트를 강하게 밀고 있습니다.이 프로젝트는 기본적으로 대형 Polyfill 위에 구축 된 JavaScript 프레임 워크입니다. 그러나 웹 구성 요소 자체가 큰 잠재력을 가지기 때문에 웹 구성 요소는이 프레임 워크와 동일하지 않아야합니다. 중합체없이 구성 요소를 사용할 수 있지만 API의 전체 범위는 아직 복사되지 않았습니다. 웹 애니메이션 API는 JavaScript를 사용하여 애니메이션을 구축하는 효율적인 라이브러리가없는 방법을 제공합니다. 브라우저 지원은 아직 좋지 않지만 Shim은 내가 참여한 모든 제작 사이트에서 애니메이션 에이 기술을 자신있게 사용했을 정도로 신뢰할 수 있습니다. 현재 특정 브라우저에서 사용 가능한 기능을 작성하는 두 가지 옵션을 제공합니다. 아직 마무리되지 않은 또 다른 기능은 저의 마지막 주제로 가져 왔습니다 ...

"prolyfills": 신흥 API를 테스트합니다 및 prolyfills - 가 나타날 수있는 API에 대한 투기 적 신.

PolyFill의 미공개 기능은 개념 증명으로 점점 일반화되고 있으며 프론트 엔드 개발을위한 최첨단 기술을 시험해 보는 것이 흥미 롭습니다. 인기있는 RXJS 라이브러리에서 영감을 얻은 관찰 정보 권장 사항을 테스트하고 싶습니까? 이것에 대한 프롤리 필이 있습니다. 새로운 기술을 시도하는 것은 개발자가되는 가장 흥미로운 부분 중 하나입니다.

결론 <.> 그게 다야. 우리는 폴리 플릴이 무엇인지, 필요한 이유, Polyfill.io에서 필요한 폴리 플릴을 추출하는 방법, 그리고 Polyfill이 아직 기능을 공개하지 않은 방법을 배웠습니다. 하지만 당신은 어떻습니까? 지원하는 모든 브라우저에서 사용할 수있는 언어 기능 만 사용하고 있습니까? 아니면 최신 코드를 작성한 다음 Polyfill을 사용하여 이전 브라우저에서 작동하도록 했습니까? 지원 해야하는 가장 오래된 브라우저는 무엇입니까? 아래 의견에 알려주십시오. 이 기사는 Graham Cox가 동료 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!

HTML5 크로스 브라우저 Polyfill faqs HTML5 크로스 브라우저 폴리 필드를 사용하는 목적은 무엇입니까?

HTML5 크로스 브라우저 폴리 필은 자체적으로 지원하지 않는 이전 브라우저에서 최신 웹 기능을 가능하게하는 데 사용됩니다. 그들은 최신 브라우저와 동일한 기능을 제공하는 폴백 함수 역할을합니다. 이를 통해 이전 브라우저 사용자는 기능이나 경험을 잃지 않고도 웹 사이트 또는 웹 응용 프로그램에 여전히 액세스하고 사용할 수 있습니다. 내 웹 프로젝트에서 PolyFill을 구현하는 방법은 무엇입니까?

웹 프로젝트에서 PolyFill 구현은 여러 단계로 구성됩니다. 먼저 Polyfill의 기능을 결정해야합니다. 다음으로 기능을 제공하기 위해 적절한 폴리 필을 찾아야합니다. 이는 폴리 필 라이브러리 또는 저장소를 온라인으로 검색하여 수행 할 수 있습니다. 적절한 PolyFill을 찾으면 스크립트 태그를 사용하여 HTML 파일에 추가하여 프로젝트에 포함시킬 수 있습니다.

PolyFill 사용의 잠재적 문제 또는 단점은 무엇입니까?

폴리 플릴은 매우 유용하지만 잠재적 인 단점이 있습니다. 주요 문제 중 하나는 성능입니다. PolyFill은 페이지에 추가 무게를 추가하여 로딩 시간을 늦추고 사용자 경험에 부정적인 영향을 줄 수 있습니다. 또한 모든 폴리 플릴이 동일하지는 않습니다. 일부는 PolyFill로 설계된 것을 완전히 또는 정확하게 복사하지 못할 수 있으며, 이는 불일치 나 오류로 이어질 수 있습니다.

내 필요에 맞는 올바른 폴리 필을 선택하는 방법은 무엇입니까?

올바른 폴리 플릴을 선택하는 것은 몇 가지 요인에 따라 다릅니다. 먼저, Polyfill을 시도하는 것을 고려하고 기능을 정확하게 복제하는 Polyfill을 찾아야합니다. 또한 타겟팅하려는 브라우저를 고려하고 PolyFill이 지원해야합니다. 마지막으로, 폴리 플릴의 크기와 성능을 고려해야합니다. 이는 웹 사이트의로드 시간과 전반적인 성능에 영향을 줄 수 있습니다.

내 자신의 폴리 필을 만들 수 있습니까?

예, 자신만의 폴리 필을 만들 수 있습니다. 여기에는 브라우저가 특정 기능을 지원하는지 확인하고 브라우저가없는 경우 제공하는 스크립트를 작성하는 것이 포함됩니다. 그러나 고유 한 폴리 플릴을 만드는 것은 복잡하고 시간이 많이 걸릴 수 있으며 기존 폴리 필을 사용하는 것이 더 쉽고 효율적입니다.

폴리 플릴을 찾을 수있는 인기있는 라이브러리 나 리소스는 무엇입니까?

폴리 플릴을 찾을 수있는 몇 가지 인기있는 라이브러리와 리소스가 있습니다. 여기에는 PolyFill.io가 포함되어 있으며, 이는 브라우저에 필요한 폴리 필드를 자동으로 반환합니다.

PolyFill이 제대로 작동하는지 테스트하는 방법은 무엇입니까?

폴리 필드 테스트에는 타겟팅하려는 브라우저에서 제대로 작동하도록 설계된 기능을 확인하는 것이 포함됩니다. 브라우저 테스트 도구를 사용하거나 다른 브라우저에서 기능을 수동으로 테스트하여 수행 할 수 있습니다. 기능이 예상대로 작동하면 PolyFill이 제대로 작동합니다.

폴리 필드는 React 또는 Angular와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니까?

예, Polyfill은 React 또는 Angular와 같은 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 실제로, 이러한 프레임 워크는 종종 최적의 호환성과 성능을 위해 특정 폴리 플릴을 권장하고 요구합니다. 이러한 프레임 워크를 사용하여 PolyFill을 구현하는 프로세스는 일반 웹 프로젝트에서 PolyFill을 구현하는 것과 유사합니다.

Polyfill은 브라우저 호환성 문제에 대한 장기 솔루션입니까?

polyfill은 브라우저 호환성 문제에 대한 단기 솔루션과 비슷합니다. 브라우저가 따라 잡아서 기본적으로 지원할 때까지 특정 기능에 대한 브라우저의 지원 격차를 메우는 데 사용됩니다. 브라우저가 계속 발전하고 업데이트함에 따라 특정 폴리 플릴에 대한 수요가 감소 할 것입니다.

Polyfill과 Shim의 차이점은 무엇입니까?

polyfill 및 shim은 브라우저에서 지원하지 않는 기능에 대한 백업 기능을 제공하는 데 사용됩니다. 그러나 Shim은 일반적으로 다른 기존 API를 사용하여 누락 된 API에 대한 폴백 기능을 제공하는 반면 PolyFill은 브라우저가 마치 기본적으로 사용할 수있는 새로운 구현을 제공합니다.

위 내용은 HTML5 크로스 브라우저 폴리 플릴에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!