インターネットエクスプローラーの後のネイティブJavaScript開発

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

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

この記事は、

古いIE

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

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

キーポイント

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

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

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

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

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

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

   blob build

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

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

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

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

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

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

   典型的な変数と同じように動作する変数（範囲を除く）を定義しますが、定数（const）は値への読み取り専用の参照です。再割り当てすることも、再定義することもできず、同じ範囲内の他の変数または関数と同じ名前を共有することはできません。唯一の例外は、定数が独自のプロパティを持つオブジェクトである場合です。これらのプロパティは、変更によって保護されておらず、通常の変数のように動作します。

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

   mdn
   • の定数
   • mdnで
   let SitePoint EcMascript 6の準備
   • let and const
   • wes bos 'es6 let vs const変数

   コンソールロギング

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

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

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

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

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

   上の暗号オブジェクト mdn

   のgetRandomValues Github shim

   のレガシーブラウザ用の

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

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

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

   のmediasource api MSDNのメディアソース拡張機能

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

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

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

   ページの可視性

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

のページショー mdn

のページハイド

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

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

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

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

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

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

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

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

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
  で配列を入力しました
典型的な配列：ブラウザ内のバイナリデータ（html5rocks）

websockets

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

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

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

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

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

MDNのWeb Workers API

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

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

「async」と「defer」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DNS-PREFETCH

reconnect

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

MDN

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

のwindow.devicepixelratio

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

mdn<track></track>のwebvtt

dev.opera

でのwebvttおよび

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

FAQ（FAQ）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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