このシリーズの3番目と最終部分へようこそ。ここでは、古いIEの退職と、この事件がフロントエンド開発分野での影響を調(diào)査します。これまでのところ、安全に廃棄できる時代遅れのテクノロジーと、主流のブラウザで完全にネイティブにサポートされているHTML5およびCSS3プロパティを取り上げてきました。今日、私たちは上記のカテゴリに分類されないネイティブJavaScriptテクノロジーやその他のコンテンツに焦點を當(dāng)てます。

caniuse.comに再び感謝します。これは非常に貴重なリソースです。また、最後の免責(zé)事項を繰り返します：

この記事は、

古いIE

をサポートする決定を放棄するかどうかとは何の関係もありません。ウェブサイトまたはアプリケーションの特定の詳細(xì)に基づいて、獨自の決定を下す必要があります。

これ以上苦労せずに、続けましょう！

キーポイント

最新のJavaScript APIの採用：インターネットエクスプローラーの退職により、開発者はポリフィージャーなしで主流のブラウザーで最新のJavaScript API（Base64エンコードやBLOBビルドなど）を直接使用できるようになり、パフォーマンスと互換性を向上させることができます。

通信機(jī)能の強化：最新のブラウザのチャネルメッセージやウェブケットなどのAPIの可用性は、それぞれブラウザーとサーバー間のより効率的なスクリ間通信と持続的な接続を促進(jìn)します。
ES6構(gòu)文の導(dǎo)入：ブロックレベルの変數(shù)宣言と矢印関數(shù)の人気の
• や
などのES6機(jī)能のサポートにより、開発者はよりクリーンで効率的なコードを書き込むことができます。
• constセキュリティとプライバシー最初に：Web Cryptography APIおよびコンテンツセキュリティポリシー（CSP）が完全にサポートされており、Webアプリケーションのセキュリティを強化するための強力なツールを提供します。 let
パフォーマンスの最適化：ページの可視性APIやRequestAnimationFrameなどの新機(jī)能Webアプリケーションの効率を改善し、リソースの使用とアニメーションのパフォーマンスを最適化します。
• 將來の安全なWeb開発：Internet Explorerの非アクティブ化により、開発者はレガシーブラウザーの互換性に限定されることなく、HTML5、CSS3、およびJavaScriptの潛在能力を最大限に活用できるため、より革新的で先見の明のあるWebアプリケーションになります。 。
javascript apis

1. このセクションでは、非常に多くのJavaScript機(jī)能、API、および機(jī)能を紹介します。彼らには何が共通していますか？それらのいずれも、古いIEに実際に使用することも、さまざまなポリフィルを使用することも、可能であれば、他のさまざまなフレームワークやライブラリを通じて効果を達(dá)成する必要がありません?，F(xiàn)在の環(huán)境（IE11 Edge）では、ブラウザにネイティブサポートが組み込まれているため、直接使用できることを意味します。

   base64エンコードとデコード（BTOAおよびATOB）

   base64は、Web上の非常に便利なツールです。あなたの多くは、それを使用してフォントまたは畫像をCSSに埋め込んでいるかもしれません。別の一般的な使用法は、通常、伝送プロトコルを妨害するさまざまなリソースに対処することです。良い例は、基本アクセス認(rèn)証です。ここでは、ユーザー名：パスワードペアがbase64を使用してパッケージ化され、サーバーに送信されます。エンコード/デコード操作のネイティブサポートは、それらをより速く実行できることを意味します。いくつかの紹介リソースを次に示します：

   • atob（）およびbtoa（）はmdn
   にドキュメントをドキュメントします
   • base64.js polyfill

   blob build

   バイナリの大きなオブジェクトまたはBLOBは、データベース管理システム內(nèi)の単一のエンティティに保存されている生データのコレクションです。オーディオクリップまたは畫像であり、Base64形式で保存されます。または一連の畫像。多くの場合、ブロブフィールドは、データ構(gòu)造が通常のテーブルやJSONオブジェクトなどのテーブルスキーマで表されるほど厳格ではないデータに使用されます。皆さんの中には、Blobインターフェイスの祖先、すなわちBlobbuilderを覚えている人もいるかもしれません。ただし、このアプローチは廃止されており、すべてのBLOB操作を新しいインターフェイスを介して実行することを強くお勧めします。

   最も重要なことは、このコレクションはファイルに非常に似ているため、BLOBオブジェクトのネイティブインターフェイスがファイル（）インターフェイスの基礎(chǔ)として使用されていることです。そのため、開発者がファイルを使用できる場所で使用できるBLOBオブジェクトのURLを作成できるようにする「Blob URLS」と呼ばれる優(yōu)れた機(jī)能があります。それを念頭に置いて、Native Supportはすべての主流のブラウザをカバーするようになりました。これは非常に高く評価されています。

   mdn
   • のblob mdn
   のblob url
   • JavaScript Blobおよびファイルインターフェイスの紹介
   チャネルメッセージング

   通常、さまざまなブラウザのコンテキストで実行されている2つのスクリプトは、多くのセキュリティの落とし穴を避けるために相互に通信することを禁止されています。ただし、そのようなコミュニケーションが必要であるだけでなく、本當(dāng)に必要な場合もあります。これは、チャネルメッセージングAPIが機(jī)能する場所です。このインターフェイスにより、2つのスクリプトが雙方向パイプラインを介して相互に通信することができます。それは、同じチャンネルでみんなにトランシーバーを與えるようなものです。とても賢いですね。

   dev.opera
   のHTML5 Webメッセージングの紹介 MDNのMessageChannel
   定數(shù)変數(shù)とブロックレベルの変數(shù)

   constとletは、ES6でデータを定義する2つの新しい方法です。 VARはグローバルまたは関數(shù)のスコープを持つ変數(shù)を定義しますが、新しいコンテンツにはブロックレベルのスコープがあります。これは、constとletで作成された変數(shù)の範(fàn)囲が、それらを定義するブラケットペアに制限されることを意味します。

   典型的な変數(shù)と同じように動作する変數(shù)（範(fàn)囲を除く）を定義しますが、定數(shù)（const）は値への読み取り専用の參照です。再割り當(dāng)てすることも、再定義することもできず、同じ範(fàn)囲內(nèi)の他の変數(shù)または関數(shù)と同じ名前を共有することはできません。唯一の例外は、定數(shù)が獨自のプロパティを持つオブジェクトである場合です。これらのプロパティは、変更によって保護(hù)されておらず、通常の変數(shù)のように動作します。

   と言われているので、コードで定數(shù)変數(shù)とブロックレベルの変數(shù)を正しく使用する方法を確認(rèn)してください。

   mdn
   • の定數(shù)
   • mdnで
   let SitePoint EcMascript 6の準(zhǔn)備
   • let and const
   • wes bos 'es6 let vs const変數(shù)

   コンソールロギング

   ほとんどのフロントエンド開発者は、スクリプトが異常に動作するとき、Webコンソールが最も便利なツールの1つであることに同意します。ただし、Internet Explorerは基本的に統(tǒng)合が遅く、バージョン10のみが完全なサポートを提供し始めます?，F(xiàn)在、古いIE の引退により、この機(jī)能を最大限に活用することを妨げるものはありません。知識を更新したり、コンソールを使用する新しい方法を見つけたりする必要がある場合は、次の仕様をご覧ください。 MDN

   のコンソール
   コンソール
   いくつかのソースリソース共有

   クロスオリジンリソース共有（CORS）は、獨自のドメイン外からのリソースのリクエストを許可するHTML5 APIです。これは、特定のアクセス許可を付與するときにブラウザとサーバーがリモートリソースを要求できるようにするHTTPヘッダーのセットについて説明します。次のリソースは、この機(jī)能を正しく使用する方法を?qū)Wぶための良い出発點です。

   domアクセスコントロールを使用して、クロスオリジンリソース共有を使用してdev.opera

   MDN
   のHTTPアクセス制御（CORS） SitePointでのCORの詳細(xì)な理解
   • web暗號API
   • セキュリティとプライバシーは、最近のアプリケーションで最も求められている機(jī)能の2つです。つまり、良好な（そして高速）暗號化が高く評価されています?，F(xiàn)在、すべての主流ブラウザは、IE11（古いバージョンの仕様を?qū)g裝する）とSafari（Crypto.Webkitsubtleプレフィックスが必要です）を除き、Web暗號APIを一貫してサポートしています。幸いなことに、ランダム値の生成など、いくつかの特定の機(jī)能がより良く実裝されています。したがって、ネイティブサポートを使用して暗號化された要素を?qū)g裝することはこれまで以上に簡単です。これを正しく行う方法に関するいくつかのガイドは次のとおりです。
   mdn

   上の暗號オブジェクト mdn

   のgetRandomValues Github shim

   のレガシーブラウザ用の

   Web暗號API
   國際化
   今日のインターネットアクセスの有病率は、あなたのウェブサイトへの訪問者が世界中から來ることができることを意味します。人々はより馴染みのあるものを信頼するので、すべての情報を自分の言語と慣れ親しんでいる形式で提示することが最善です。これは、國際化（I18Nとも呼ばれる）とローカリゼーション（またはL10N）が必要な場所です。これはナンセンスのように聞こえますか？ JavaScriptで國際化を達(dá)成する方法（I18N）についての彼の記事でAurelio de Rosaを引用しましょう：
   國際化（I18Nとも呼ばれる）は、特定のローカル言語や文化に簡単に適応できるように、製品とサービスを作成または変換するプロセスです。ローカリゼーション（L10Nとも呼ばれます）は、特定の地域または言語に対して國際化ソフトウェアを調(diào)整するプロセスです。言い換えれば、國際化は、複數(shù)の文化（通貨形式、日付形式など）をサポートするためにソフトウェアを適応させるプロセスであり、ローカリゼーションは1つ以上の文化を?qū)g裝するプロセスです。

   ブラウザのサポートは今年の初めよりわずかに優(yōu)れており、Safari V10は9月にランクに加わりました。面白そうですか？軌道に乗るためのリソースは次のとおりです。

   MDN
   • の國際API
   JavaScript Internationalization API - 簡単な紹介
   JavaScript（I18N）
   • で國際化を達(dá)成する方法
   メディアクエリの処理
   レスポンシブWebデザインは、効率的なWebサイトの現(xiàn)在の標(biāo)準(zhǔn)であり、それを可能にする重要な機(jī)能はメディアクエリの存在です。 MatchMediaは、CSSからJavaScriptにメディアクエリを?qū)毪?、さまざまなデバイスでコンテンツを最適化するための柔軟性を開発者に提供します。良い例は、攜帯電話やタブレットのポートレートモードからランドスケープモード、リバースモードへの変更を処理することです。デバイスの向きの検出を処理するAPIがありますが、ほとんどのブラウザーサポートは部分的であり、Microsoft Edgeのみが完全なサポートを提供します。このトピックに関するいくつかの紹介リソースを次に示します：
   mdn
   • のメディアクエリをテストします mdn
   のwindow.matchmedia でJavaScriptでメディアクエリを使用する方法
   • メディアソース拡張機(jī)能
   メディアソース拡張機(jī)能（MSE）は、プラグインを使用せずにビデオおよびオーディオ要素に追加の機(jī)能を追加します。これにより、アダプティブメディアストリーミング、リアルタイムストリーミング、ステッチビデオ、ビデオ編集が可能になります。 YouTubeは、2013年9月からHTML5プレーヤーでMSEを使用しています。ブラウザのサポートも非常に優(yōu)れており、iOS SafariとOpera Miniのみがこの機(jī)能を欠いています。 IE11は、Windows 8で使用された場合にのみ完全にサポートされています。殘念ながら、IE11/WIN7ユーザーはこのテクノロジーの恩恵を受けることはできません。あなたがただ興味があるか、本當(dāng)にこのAPIの使用を始めたいのかにかかわらず、あなたは次のリソースが非常に役立つことがわかります：
   mdn

   のmediasource api MSDNのメディアソース拡張機(jī)能

   • HTML5メディアソース拡張機(jī)能：プロダクションビデオをWebに持ち込む（Smashing Magazine）
   変異オブザーバー
   JavaScriptアプリケーションは、毎日ますます複雑になっています。開発者として、特にDOMツリーが変更または「変異」する場合、ページで何が起こるかを制御する必要があります。この種の監(jiān)視の必要性は新しいものではありませんが、実際には解決策 - 突然変異イベントがあります。このインターフェースの問題は、イベントとして、どちらも同期し（コール時にトリガーされ、他のイベントがトリガーされるのを防ぐ可能性がある）、DOMを介してキャプチャまたは泡立つ必要があることです。これにより、他のイベントがトリガーされ、JavaScriptスレッドをオーバーロードし、一部の特別なケースでカスケード全體の障害を生成し、ブラウザがクラッシュします。

   したがって、突然変異イベントは廃止され、突然変異観測者に置き換えられました。あなたは尋ねるかもしれません、違いは何ですか？第一に、そして最も重要なことは、オブザーバーは非同期です。彼らはあなたのスクリプトの実行を妨げません。それらは各突然変異でトリガーされていませんが、メインアクティビティが完了した後にバッチパスされます。さらに重要なことは、オブザーバーを微調(diào)整してノードのすべての変更を観察するか、特定のカテゴリの変更のみを観察することができます（サブリストのみまたは屬性のみの変更など）。次のリソースを使用して、これを行う方法の學(xué)習(xí)を開始します。

   mdn
   • の
   mutationobserver
   • 突然変異観測者を理解してください
   SitePointで発達(dá)している新しいバリエーション

   ページの可視性

   タブブラウジングは、ネットワークとの対話方法を変えました。多くの人が同時に數(shù)十ページを開くことは珍しくありません。各ページは、獨自のアクションを?qū)g行し、スクリプトを?qū)g行し、所有するリソースをダウンロードします。一度に1つのタブのみをアクティブにできる場合でも、すべてのオープンページはCPU時間と帯域幅を消費します。一部のアプリケーションは、定期的に接続を介して更新を送信して受信する場合があります。ただし、[アクティビティ]タブでアプリを開かない場合、バックグラウンドでx秒ごとに更新する必要がありますか？少し無駄のようですね。特にモバイルデバイスとデータプランでは、すべてのリソースが価値があります。
   これは、ページの可視性APIが機(jī)能する場所です。このインターフェイスにより、開発者はアプリケーションがアクティブなタブにあるのか、バックグラウンドにあるのかを知ることができます。例として更新を?qū)g行する前述のアプリケーションを取り上げましょう。ページVisibility APIを使用すると、アプリケーションがバックグラウンドにあるときに検出し、5秒または10秒ごとに更新を?qū)g行する代わりに、60秒またはそれ以下に行うことができます。ページが再び表示されると、通常の更新レートに戻ることができます。とてもかっこいいですね。
   それで、あなたは何を待っていますか？次のガイドをチェックして、ページの可視性のためにアプリケーションの起動を開始してください。あなたのユーザーはあなたに感謝します：
   mdn
   のページ可視性API
2. ページ変換イベント
ページを離れたり閉じたりしようとするときにポップアップするWebフォームを使用したことがあります。これは、最近では、設(shè)定、プロフィールの詳細(xì)などを変更するページで一般的です。ページ內(nèi)のスクリプトは、あなたが去っていることをどのように知っていますか？彼らはPageHideイベントを聴きます。
pagehideとそのパートナーのページは、ページ変換イベントの主な主人公です。最初のものが主に使用されるものを上に見てきました。 Pageshowの主な目的は、ページがキャッシュからロードされているのか、それともサーバーから直接読み込まれているのかを判斷することです。これは最も一般的な用途ではありませんが、どちらの機(jī)能も必要な場合は、次のリソースをご覧ください。
mdn

のページショー mdn

のページハイド

• requestAnimationFrame
ウェブ上のアニメーションは、初期の
• や
からアニメーションGIF、jQueryエフェクト、現(xiàn)在のCSS、SVG、キャンバス、WebGLアニメーションまで、長い道のりを歩んできました。これらすべての方法の1つの定數(shù)は、アニメーションの流れを制御し、可能な限りスムーズにする必要性です。

初期の方法では、setintervalとsetimeoutを使用してアニメーションのステップを制御します。問題は、結(jié)果が確実に一貫していないことであり、アニメーションは通常ラフであることです。これが、新しいインターフェイスが設(shè)計された理由です - requestAnimationFrame。このアプローチの主な利點は、ブラウザがリクエストを獨自の描畫サイクルに自由に一致させることができ、それによりアニメーションを大幅に滑らかにすることです。対応するCancelAnimationFrameとともに、これらの2つの方法は、最新のJavaScriptアニメーションの基礎(chǔ)です。

いつものように、この機(jī)能を習(xí)得し始めたいくつかのリソースがあります。

mdn
• のrequestAnimationFrame mdn
のcancelanimationframe SitePointでrequestAnimationFrameを使用した簡単なアニメーション
時限API
オンラインパフォーマンスは今日のホットなトピックであり、誰もがリソースを削減し、スクリプトを最適化し、すべてのツールを最大限に活用するために最善を盡くしています。この問題を解決するには、ネットワークパフォーマンス（サイトとリソースの配信速度）とユーザーパフォーマンス（アプリケーション自體の実行速度）の2つの主な方法があります。

ネットワークパフォーマンスには、ナビゲーションタイミングとリソースタイミングの2つのAPIが提供されます。それらはすべて、DNS、CDN、リクエスト、応答時間など、ネットワークパフォーマンスに関連するあらゆる種類の情報を提供します。唯一の違いは、ナビゲーションタイミングがHTMLページ自體をターゲットにし、リソースタイミングが他のすべてのリソース（畫像、スクリプト、メディアなど）を処理することです。

ユーザーパフォーマンスに関しては、API：ユーザーのタイミングがあります。このAPIは、Mark（非常に詳細(xì)なタイムスタンプ）と測定（2つのマーク間の時間間隔）と呼ばれる2つの主要な概念を処理します。これらの概念を使用して、コードの実行速度を測定し、最適化する必要がある場所を特定します。殘念ながら、SafariはまだこのAPIをサポートしていないため、ポリフィルが必要になる場合があります。

これらのインターフェイスの使用を習(xí)得することは、ウェブサイトまたはアプリケーションの最適なパフォーマンスを確保するために不可欠です。これが私たちがあなたにいくつかの學(xué)習(xí)資料を提供する理由です：

ナビゲーションのタイミング

MDN

のナビゲーションタイミングAPI SitePointでナビゲーションタイミングAPIを使用してページの読み込みを分析します

• SitePointでのナビゲーションタイミングAPI：ページの読み込みを効率的に分析する方法
  • リソースのタイミング
  • MDN
  のリソースタイミングAPI
  Google DevelopersブログでリソースタイミングAPIを使用してネットワークパフォーマンスを測定でのリソースタイミングAPIの紹介
• ユーザーのタイミング
  SitePointでユーザータイミングAPIを発見します
  user-timing-rum.jsおよびusertiming.js polyfill on github
• 典型的な配列
  JavaScriptタイプ付き配列は、配列のようなオブジェクトであり、生のバイナリデータにアクセスする方法を提供します。最大限の柔軟性と効率のために、実裝は2つの概念に沿って実行されます：バッファー（生データのブロック）とビュー（バッファデータを解釈できるコンテキストを提供）。 WebGL、Canvas 2D、XMLHTTPREQUEST2、ファイル、メディアソース、バイナリWebSocketsなどの型付けられた配列を使用する多くのWeb APIがあります。コードがそのような手法を処理している場合、次のリソースに興味がある可能性があります。
  javascriptはmdn
  で配列を入力しました
典型的な配列：ブラウザ內(nèi)のバイナリデータ（html5rocks）

websockets

以前にチャネルメッセージングと、2つの異なるスクリプトが互いに直接通信する方法について説明しました。 WebSocketはこれに似ており、より多くの機(jī)能があります。このAPIを使用して、ブラウザとWebサーバーの間に永続的な通信チャネルを作成します。

httpと同様に、Websocketプロトコルには2つのバージョンもあります：Unsafe（ws：// ...）とSecure（wss：// ...）。また、トンネルが開かれるプロキシサーバーとファイアウォールも考慮します。実際、WebSocket接続は通常のHTTP接続から始まり、既存のインフラストラクチャとの互換性を確保します。

WebSocketsは魅力的なテクノロジーであり（専用のWebサイトもあります）、學(xué)ぶべきことがたくさんあります。開始するために、選択したリソースを次に示します。

WebSocket.orgのWebsocket
について
mdn
• のWebSockets
HTML5 WebSockets APIの紹介SitePoint
webワーカー
デフォルトでは、すべてのJavaScriptタスクが同じスレッドで実行されます。これは、ページ內(nèi)のすべてのスクリプトが同じ処理時間キューを共有する必要があることを意味します。これは、プロセッサにコアが1つしかない場合、これは良好でシンプルです。ただし、最新のCPUには少なくともデュアルコアがあり、一部のモデルには4、6、または8コアに達(dá)することさえあります。いくつかのタスクを、利用可能な余分なカーネルで処理できる別々のスレッドに移動できる場合、それは良くありませんか？これが、ウェブワーカーが発明された理由です。
Web Workers APIを使用して、開発者は名前付きスクリプトファイルを別々のスレッドで実行しているワーカーに委任できます。ワーカーは、それを作成したスクリプトにのみ応答し、メッセージを雙方向で通信し、XMLHTTPREQUEST呼び出しを?qū)g行でき、DOMまたはウィンドウオブジェクトのいくつかのデフォルトのメソッドとプロパティと対話しません。例外カテゴリでは、WebSockets（WebSocket接続の管理をワーカーに割り當(dāng)てることができる）やIndexEdDBなどのデータストレージメカニズムに言及できます。メインスレッドはアプリケーション全體の実行に焦點を當(dāng)てている間、セカンダリタスクを処理するための獨自のアシスタントを持つことは、これほど良いことはありません。

この機(jī)能（Webワーカーが利用できる機(jī)能とクラスのリストを含む）を開始するには、次のリソースをご覧ください。

MDNのWeb Workers API

MDNでWebワーカーが利用できる
機(jī)能とクラス
• xmlhttprequest高度な機(jī)能
• XMLHTTPREQUESTの採用は、Web開発の新しい時代を示しています。これで、ページ全體をリロードせずに、ブラウザとサーバーの間でデータを交換できるようになりました。 Ajaxは、誰もが単一のページアプリケーションを持つことができる新しい標(biāo)準(zhǔn)です。
この有用な技術(shù)はさらに開発されますが、これは正常です。これは、XHRがファイルのアップロード、進(jìn)行狀況情報の転送、フォームデータの送信などの新機(jī)能を直接取得する方法です。これらのすべての機(jī)能（IE11以降のAndroidの場合のわずかな例外）は、退職後の主流のブラウザによってサポートされています。
詳細(xì)については、次のリソースを自由に確認(rèn)してください。
mdn
• のformdata SitePointのHTML5 FormDataインターフェイスを使用してAJAXを簡素化します

その他の関數(shù)
最新のWebは、HTML、CSS、JavaScript以上のものです。舞臺裏には、オンライン體験を可能な限り素晴らしいものにするために一生懸命働いている多くの目に見えない（そして未処理の）ヒーローがいます。以下では、上記のように、古いIEブラウザでは使用できないこれらの機(jī)能のいくつかについて説明します（セキュリティの脆弱性と最新の機(jī)能のサポートの欠如で有名です）。

「async」と「defer」

を使用した非ブロッキングJavaScriptロード すべてのWeb開発者は、スクリプトが「ロードブロック」であることを?qū)Wび、ロードされるまでページ全體をブロックします。私たちは皆、の前にjQueryにロードするという提案を覚えています。ただし、単一のページアプリケーションの場合、Webサイトのすべての動作はJavaScriptによって駆動されるため、このアプローチは役に立たない。これにより、出発點に戻ります。

しかし、真実は、ほとんどの場合、あなたのウェブサイトまたはアプリケーションには、それがロードするすべてのJavaScriptの一部のみが必要であるということです。殘りは後で必要になるか、DOMに影響を與えない操作を?qū)g行しています。明らかな方法は、キースクリプトのみを定期的にロードし、殘りをアプリケーションに悪影響を與えない方法でロードすることです。実際、このような負(fù)荷方法は2つあります。

最初の方法は、DOMに影響を與えず、ドキュメントを解析した後に実行されることを目的としたスクリプトをマークするために使用されるDefer屬性を使用することです。ほとんどの場合、これらのスクリプトはユーザーの相互作用を処理するため、この方法で安全にロードできます。 2番目のメソッドは、async屬性を使用し、並行してロードされますが、ダウンロード直後に実行されるスクリプトをマークします。ただし、読み込み順序が実行順序と同じであることは保証されていません。

これら2つのパラメーターのすべての利點は、ウェブサイトとアプリケーションのパフォーマンスを改善するための重要なツールになりつつあります。このテクノロジーの使用方法の詳細(xì)については、次のリソースをご覧ください。

Google開発者でjavaScriptをブロックするレンダリングを削除

html5 asyncを使用して非ブロッキングJavaScriptをロードし、SitePointで延期する

コンテンツセキュリティポリシー

• 最初から、Web上のセキュリティは「相同」モデルを中心に構(gòu)築されました。つまり、同じドメインのスクリプトのみが特定のページと対話できることを意味します。ただし、時間の経過とともに、CDNのJavaScriptライブラリ、Facebook、Google、Twitterのソーシャルメディアウィジェット、その他の同様のケースなど、時間の経過とともにサードパーティのスクリプトをページに統(tǒng)合する必要があります。これは、ドアを開けて、「ゲスト」スクリプトが比phor的な中庭にぶつかることを許可することを意味します。問題は、悪意のあるスクリプトも忍び込み、他のスクリプトのように実行されるときに発生します。これは、私たち全員が知っている攻撃方法、Cross-Site ScriptingまたはXSSと呼ばれる方法です。

コンテンツセキュリティ戦略は、XSSに対する主要な武器です。このメカニズムには、どのスクリプトを?qū)g行できるか、リソースをロードできる場所、インラインスタイルやスクリプトを?qū)g行できるかどうかなどを指定する一連のポリシーと指令が含まれています。 CSPはホワイトリストに基づいています。つまり、デフォルトではすべてが拒否され、指定されたリソースのみにアクセスできることを意味します。これは、ルールが微調(diào)整されている場合、悪意のあるスクリプトがサイトに挿入されても実行されないことを意味します。

以下は、このメカニズムをよりよく理解するのに役立ついくつかのリソースです。

コンテンツセキュリティポリシーリファレンス
Webセキュリティを改善するためにSitePointでコンテンツセキュリティポリシーを使用
html5rocs
• のコンテンツセキュリティポリシーの紹介
http/2プロトコル
最初から、WebはHTTPプロトコルで実行されています。ただし、最初のものは非常に速く成長しましたが、HTTPはほぼ同じままです。最新のウェブサイトとアプリケーションの複雑なエコシステムでは、HTTPはパフォーマンスボトルネックになる可能性があります。もちろん、このプロセスを最適化できる手法と実踐がいくつかありますが、それだけでできることだけです。

これが、GoogleのSPDYプロトコルに基づくHTTP/2と呼ばれるプロトコルの2回目の反復(fù)が開発された理由です。 2015年2月に承認(rèn)され、仕様は2016年5月にRFC 7540としてリリースされました。これまでのところ、主流のブラウザは、暗號化された接続よりもHTTP/2のみをサポートしており、近い將來にサイトの所有者がHTTPに切り替えることを奨勵することがそのように殘る可能性が非常に高いです。

HTTP/2採用は、構(gòu)成設(shè)定の一部を変更するだけの問題ではありません。 HTTPパフォーマンスを強化するためのいくつかのベストプラクティスは、HTTP/2のパフォーマンスに影響を與える可能性があります。ウェブサイトがHTTP/2を使用する準(zhǔn)備ができているかどうかを判斷するには、次のリソースを參照できます。

HTTP/2の準(zhǔn)備：Webデザイナーと開発者向けガイド（Smashing Magazine） HTTP/2がWebパフォーマンスのベストプラクティスをどのように変更するか（新しいRelicブログ）

Web開発者向けの
• http/2（cloudflare blog）
リソースのヒント：Prefetch
Webパフォーマンスは今日のホットなトピックであり、正當(dāng)な理由があります?，F(xiàn)場のすべてのスタッフが知っているように、ページの読み込み時間の大部分はリソースのダウンロードによって取り上げられます。ページがロードされてから時間を使用して次のステップのリソースをプリロードできれば、それは素晴らしいことではないでしょうか？これがリソースのプロンプトの目的です。

リソースプロンプトは、ブラウザに將來必要な特定のリソースを提供するように指示する一連の指示です。リストには、次のように5つのプロンプトが含??まれています

DNS-PREFETCH

reconnect

prefetch
preload
プレレンダー
これら5つの可能なオプションのうち、現(xiàn)在優(yōu)れたブラウザのサポートを備えている唯一のオプションはプリフェッチです。このプロンプトは、ユーザーが現(xiàn)在のページの後に要求する可能性が高いドキュメントをキャッシュするようにブラウザに指示します。これにより、その使用はキャッシュできる要素に制限されます。他の種類のリソースでそれを使用しても機(jī)能しません。
このトピックに興味がある場合は、詳細(xì)を提供するリソースをいくつか紹介します。
• リソースのヒント記事の記事
• プリフェッチ、プリロード、CSS-Tricksのプレビュー
KeyCDNブログのリソースのヒント
厳密な送信セキュリティ
HTTPSは新しいブラウジング標(biāo)準(zhǔn)になりつつあり、ますます多くのWebサイトが安全な接続のみを受け入れます。通常の接続（HTTP上）は通常、HTTPSバージョンにリダイレクトされ、通常どおりに進(jìn)みます。ただし、このアプローチは、ログイン資格情報を盜むために、リダイレクトが必要なWebサイト（通常は銀行Webサイト）にリダイレクトが発生する「中間」攻撃に対して脆弱です。
これは、厳格な送信セキュリティヘッダーが出てくる場所です。 HTTPSを使用して目的のWebサイトに初めて接続すると、ヘッダーがブラウザに送信されます。次に接続するとき、URLのHTTPバージョンのみを使用している場合でも、ブラウザはリダイレクトサイクルを通過せずにHTTPSバージョンに直接移動します。 HTTPには接続が確立されていないため、上記の攻撃は発生しません。
セキュリティヘッダーの厳密な送信の詳細(xì)については、次のWebサイトをご覧ください。

MDN

のHTTP Strict Transmission Security
• デバイスピクセル比
window.devicePixelratioは、現(xiàn)在のディスプレイデバイス上の物理ピクセルの（垂直）サイズの比率をCSSピクセルのサイズに戻す読み取り専用プロパティです。これにより、開発者は高密度畫面（AppleのRetinaディスプレイやハイエンドAndroid畫面など）を検出できます。メディアクエリとMatchMedia（上記について説明しました）で使用すると、このプロパティでは、最適なリソースを使用して最高のエクスペリエンスを可能にします。
mdn

のwindow.devicepixelratio

Webビデオテキストトラック
Webビデオテキストトラック（またはWebVTT）は、マルチメディアリソースのテキスト字幕をマークするために使用される形式です。 html5
要素で使用されており、同期的にメディア資産（オーディオまたはビデオ）に字幕、翻訳、タイトル、または説明を追加できます。このテキスト情報が存在すると、メディアリソースがアクセスしやすくなります。
この機(jī)能を始める方法については、次のリソースをご覧ください。

mdn<track></track>のwebvtt

dev.opera

でのwebvttおよび

の紹介
html5rocs
• のトラック要素の初心者
• 要約<track></track>
私たちはこのシリーズの最後に、簡単な知的演習(xí)から始まります。 ？」。 HTML、CSS、ネイティブJavaScriptであろうと、ポリフィルなしで自由にできるすべての新しいものまで、もはや必要とされていないテクニックやプラクティスから、幅広いトピックをカバーしています。パフォーマンスの最適化やセキュリティの強化など、より広範(fàn)なトピックに觸れました。
今すぐすべてのコードのリファクタリングを開始する必要がありますか？おそらくそうではありません。そのような決定は、再構(gòu)成されたコストと技術(shù)的債務(wù)のコストとのバランスに基づいて行われなければなりません。ただし、新しいプロジェクトを開始している場合は、過去ではなく、將來のためにそれを構(gòu)築してください。
インターネットエクスプローラーの退職後のネイティブJavaScript開発に関する

FAQ（FAQ）

インターネットエクスプローラー退職後のネイティブJavaScript開発の重要性は何ですか？

インターネットエクスプローラーの後のネイティブJavaScript開発は、開発者がより効率的で効率的なWebアプリケーションを作成できるため、重要です。インターネットエクスプローラーの非アクティブ化により、開発者は、通常そのブラウザに関連付けられている制約と互換性の問題に限定されなくなりました。現(xiàn)在、JavaScriptの完全な機(jī)能を使用して、最新の機(jī)能や更新を含む機(jī)能を使用して、よりダイナミックでインタラクティブでユーザーフレンドリーなWebアプリケーションを構(gòu)築できます。
ブラウザでJavaScriptを有効にする方法は？
ブラウザでJavaScriptを有効にするのは簡単なプロセスです。ほとんどのブラウザでは、設(shè)定または設(shè)定メニューでJavaScriptを有効または無効にするオプションを見つけることができます。通常、これには「セキュリティ」または「プライバシー」セクションに移動し、JavaScriptに関連するオプションを探します。より良い閲覧體験のために、必ず有効にしてください。
他のブラウザのインターネットエクスプローラーとJavaScriptの違いは何ですか？
はい、JavaScriptがInternet Explorerやその他のブラウザーでどのように機(jī)能するかには大きな違いがあります。 Internet Explorerには異なるJavaScriptエンジンがあり、互換性の問題と制限につながることがよくあります。 Chrome、Firefox、Safariなどの最新のブラウザは、最新のJavaScriptの機(jī)能と標(biāo)準(zhǔn)をサポートする、より高度なJavaScriptエンジンを使用して、パフォーマンスを改善し、互換性の問題を軽減します。
ライブラリやフレームワークの代わりにネイティブJavaScriptを使用することの利點は何ですか？

ネイティブJavaScriptの使用には、ライブラリまたはフレームワークを使用することと比較して、多くの利點があります。不要なコードの負(fù)荷と解析のオーバーヘッドがないため、より良いパフォーマンスが可能になります。また、開発者は特定のライブラリまたはフレームワークにバインドされていないため、コードをより多く制御できます。さらに、ネイティブJavaScriptを理解して使用すると、言語とその機(jī)能をより深く理解することができます。

インターネットエクスプローラーの無効化は、JavaScript開発にどのように影響しますか？

インターネットエクスプローラーの非活性化は、JavaScript開発に大きな影響を與えました。開発者は、インターネットエクスプローラーとの互換性を確保するために、追加または異なるコードを作成する必要がなくなりました。これにより、より効率的な開発プロセスと、JavaScriptの完全な機(jī)能を活用する能力につながります。また、ブラウザ全體でより一貫したユーザーエクスペリエンスにつながります。

開発でJavaScriptを使用できる最新の機(jī)能は何ですか？

JavaScriptは絶えず更新されており、新しい機(jī)能と改善が追加されています。最新の機(jī)能には、非同期操作を処理するための非同期/待望、拡張配列またはその他の反復(fù)オブジェクトの拡張構(gòu)文、およびより簡潔な関數(shù)構(gòu)文の矢印関數(shù)が含まれます。これらの機(jī)能は、JavaScriptの開発を大幅に強化し、より効率的で読みやすいコードを作成できるようにします。

JavaScriptコードがすべてのブラウザと互換性があることを確認(rèn)する方法は？

ブラウザの互換性を確保することは、JavaScript開発の重要な側(cè)面です。これを達(dá)成する1つの方法は、機(jī)能検出を使用することです。これには、ユーザーのブラウザが使用する前に機(jī)能をサポートするかどうかを確認(rèn)することが含まれます。別のアプローチは、PolyFillを使用することです。PolyFillは、それらをサポートしていない古いブラウザーに新しい機(jī)能を提供するスクリプトです。

インターネットエクスプローラーが引退した後のJavaScript開発の將來は何ですか？

インターネットエクスプローラーが引退した後のJavaScript開発の將來は有望に見えます。インターネットエクスプローラーの非アクティブ化により、開発者は互換性の問題を心配することなく、JavaScriptの完全な機(jī)能を活用することに集中できるようになりました。これは、言語の継続的な更新と改善と組み合わされ、JavaScriptがより効率的で、より強力で、より多用途の未來を告げます。

ネイティブのJavaScript開発についてもっと學(xué)ぶための良いリソースは何ですか？

ネイティブのJavaScript開発について詳しく知るための多くの優(yōu)れたリソースがあります。人気のあるオンラインプラットフォームには、Mozilla Developer Network（MDN）、FreeCodecamp、Codecademyなどがあります。これらのプラットフォームは、JavaScriptの包括的なガイドとチュートリアルを提供し、基本からより高度なトピックまですべてをカバーしています。

JavaScriptコードを効果的にデバッグする方法は？

デバッグは、JavaScript開発の不可欠な部分です。ほとんどの最新のブラウザには、デバッグに使用できるビルトイン開発ツールが付屬しています。これらのツールを使用すると、コードを介して、変數(shù)を確認(rèn)し、発生するエラーや例外を確認(rèn)できます。さらに、クリーンで簡潔なコードの書き込みやコードの注釈などの優(yōu)れたコーディングプラクティスを使用すると、デバッグプロセスを容易にすることもできます。

以上がインターネットエクスプローラーの後のネイティブJavaScript開発の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。