インターネットエクスプローラーの後のネイティブJavaScript開発-jsチュートリアル-php.cn

Native JavaScript Development after Internet Explorer

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

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

この記事は、

古いIE

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

キーポイント

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

や
constセキュリティとプライバシー最初に：Web Cryptography APIおよびコンテンツセキュリティポリシー（CSP）が完全にサポートされており、Webアプリケーションのセキュリティを強化するための強力なツールを提供します。 let
将来の安全なWeb開発：Internet Explorerの非アクティブ化により、開発者はレガシーブラウザーの互換性に限定されることなく、HTML5、CSS3、およびJavaScriptの潜在能力を最大限に活用できるため、より革新的で先見の明のあるWebアプリケーションになります。。

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

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

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

と言われているので、コードで定数変数とブロックレベルの変数を正しく使用する方法を確認してください。
- の定数
- mdnで
- let and const
- wes bos 'es6 let vs const変数
コンソールロギング

ほとんどのフロントエンド開発者は、スクリプトが異常に動作するとき、Webコンソールが最も便利なツールの1つであることに同意します。ただし、Internet Explorerは基本的に統合が遅く、バージョン10のみが完全なサポートを提供し始めます。現在、古いIE の引退により、この機能を最大限に活用することを妨げるものはありません。知識を更新したり、コンソールを使用する新しい方法を見つけたりする必要がある場合は、次の仕様をご覧ください。 MDN
のコンソール
クロスオリジンリソース共有（CORS）は、独自のドメイン外からのリソースのリクエストを許可するHTML5 APIです。これは、特定のアクセス許可を付与するときにブラウザとサーバーがリモートリソースを要求できるようにするHTTPヘッダーのセットについて説明します。次のリソースは、この機能を正しく使用する方法を学ぶための良い出発点です。

domアクセスコントロールを使用して、クロスオリジンリソース共有を使用してdev.opera
MDN
- web暗号API
- セキュリティとプライバシーは、最近のアプリケーションで最も求められている機能の2つです。つまり、良好な（そして高速）暗号化が高く評価されています。現在、すべての主流ブラウザは、IE11（古いバージョンの仕様を実装する）とSafari（Crypto.Webkitsubtleプレフィックスが必要です）を除き、Web暗号APIを一貫してサポートしています。幸いなことに、ランダム値の生成など、いくつかの特定の機能がより良く実装されています。したがって、ネイティブサポートを使用して暗号化された要素を実装することはこれまで以上に簡単です。これを正しく行う方法に関するいくつかのガイドは次のとおりです。
mdn
上の暗号オブジェクト mdn
のgetRandomValues Github shim
のレガシーブラウザ用の
Web暗号API
国際化（I18Nとも呼ばれる）は、特定のローカル言語や文化に簡単に適応できるように、製品とサービスを作成または変換するプロセスです。ローカリゼーション（L10Nとも呼ばれます）は、特定の地域または言語に対して国際化ソフトウェアを調整するプロセスです。言い換えれば、国際化は、複数の文化（通貨形式、日付形式など）をサポートするためにソフトウェアを適応させるプロセスであり、ローカリゼーションは1つ以上の文化を実装するプロセスです。

ブラウザのサポートは今年の初めよりわずかに優れており、Safari V10は9月にランクに加わりました。面白そうですか？軌道に乗るためのリソースは次のとおりです。
- の国際API
- で国際化を達成する方法
メディアクエリの処理

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

mdn
のmediasource api MSDNのメディアソース拡張機能
- HTML5メディアソース拡張機能：プロダクションビデオをWebに持ち込む（Smashing Magazine）
したがって、突然変異イベントは廃止され、突然変異観測者に置き換えられました。あなたは尋ねるかもしれません、違いは何ですか？第一に、そして最も重要なことは、オブザーバーは非同期です。彼らはあなたのスクリプトの実行を妨げません。それらは各突然変異でトリガーされていませんが、メインアクティビティが完了した後にバッチパスされます。さらに重要なことは、オブザーバーを微調整してノードのすべての変更を観察するか、特定のカテゴリの変更のみを観察することができます（サブリストのみまたは属性のみの変更など）。次のリソースを使用して、これを行う方法の学習を開始します。
- の
- 突然変異観測者を理解してください
ページの可視性
タブブラウジングは、ネットワークとの対話方法を変えました。多くの人が同時に数十ページを開くことは珍しくありません。各ページは、独自のアクションを実行し、スクリプトを実行し、所有するリソースをダウンロードします。一度に1つのタブのみをアクティブにできる場合でも、すべてのオープンページはCPU時間と帯域幅を消費します。一部のアプリケーションは、定期的に接続を介して更新を送信して受信する場合があります。ただし、[アクティビティ]タブでアプリを開かない場合、バックグラウンドでx秒ごとに更新する必要がありますか？少し無駄のようですね。特にモバイルデバイスとデータプランでは、すべてのリソースが価値があります。

これは、ページの可視性APIが機能する場所です。このインターフェイスにより、開発者はアプリケーションがアクティブなタブにあるのか、バックグラウンドにあるのかを知ることができます。例として更新を実行する前述のアプリケーションを取り上げましょう。ページVisibility APIを使用すると、アプリケーションがバックグラウンドにあるときに検出し、5秒または10秒ごとに更新を実行する代わりに、60秒またはそれ以下に行うことができます。ページが再び表示されると、通常の更新レートに戻ることができます。とてもかっこいいですね。

それで、あなたは何を待っていますか？次のガイドをチェックして、ページの可視性のためにアプリケーションの起動を開始してください。あなたのユーザーはあなたに感謝します：

mdn
ページ変換イベント

のページショー mdn

requestAnimationFrame
や

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

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

のrequestAnimationFrame mdn

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

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

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

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

MDN

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

SitePointでのナビゲーションタイミングAPI：ページの読み込みを効率的に分析する方法
- リソースのタイミング
- MDN
Google DevelopersブログでリソースタイミングAPIを使用してネットワークパフォーマンスを測定でのリソースタイミングAPIの紹介
user-timing-rum.jsおよびusertiming.js polyfill on github
で配列を入力しました

websockets

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

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

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

のWebSockets

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

MDNのWeb Workers API

xmlhttprequest高度な機能
XMLHTTPREQUESTの採用は、Web開発の新しい時代を示しています。これで、ページ全体をリロードせずに、ブラウザとサーバーの間でデータを交換できるようになりました。 Ajaxは、誰もが単一のページアプリケーションを持つことができる新しい標準です。

のformdata SitePointのHTML5 FormDataインターフェイスを使用してAJAXを簡素化します

「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はホワイトリストに基づいています。つまり、デフォルトではすべてが拒否され、指定されたリソースのみにアクセスできることを意味します。これは、ルールが微調整されている場合、悪意のあるスクリプトがサイトに挿入されても実行されないことを意味します。

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

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

これが、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ブログ）

http/2（cloudflare blog）

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

DNS-PREFETCH

reconnect

リソースのヒント記事の記事
プリフェッチ、プリロード、CSS-Tricksのプレビュー

MDN

デバイスピクセル比

のwindow.devicepixelratio

mdn<track></track>のwebvtt

でのwebvttおよび

のトラック要素の初心者
要約<track></track>

FAQ（FAQ）

インターネットエクスプローラー退職後のネイティブ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 サイトの他の関連記事を参照してください。