歡迎來到本系列的第三部分，也是最后一部分，我們將探討老IE的退役以及這一事件對前端開發(fā)領域的影響。到目前為止，我們已經(jīng)介紹了可以安全丟棄的過時技術(shù)，以及現(xiàn)在在主流瀏覽器中完全原生支持的HTML5和CSS3屬性。今天，我們將重點介紹原生JavaScript技術(shù)以及其他不屬于上述類別的內(nèi)容。

再次感謝CanIUse.com，它是一個非常寶貴的資源。我還將重申上次的免責聲明：

本文與是否放棄對老IE的支持的決定無關。您必須根據(jù)您網(wǎng)站或應用程序的具體細節(jié)自行做出決定。

話不多說，讓我們繼續(xù)！

關鍵要點

• 現(xiàn)代JavaScript API的采用：隨著Internet Explorer的退役，開發(fā)人員現(xiàn)在可以在主流瀏覽器中直接使用現(xiàn)代JavaScript API（例如Base64編碼和Blob構(gòu)建），而無需polyfill，從而提高性能和兼容性。
• 增強的通信功能：現(xiàn)代瀏覽器中Channel Messaging和WebSockets等API的可用性分別促進了更有效的腳本間通信和瀏覽器與服務器之間的持久連接。
• ES6語法的引入：對ES6特性（例如const和let用于塊級變量聲明以及箭頭函數(shù)的普及）的支持允許開發(fā)人員編寫更簡潔、更高效的代碼。
• 安全和隱私優(yōu)先：Web Cryptography API和內(nèi)容安全策略（CSP）現(xiàn)在已完全支持，為增強Web應用程序的安全性用戶隱私提供了強大的工具。
• 性能優(yōu)化：Page Visibility API和requestAnimationFrame等新功能提高了Web應用程序的效率，優(yōu)化了資源使用和動畫性能。
• 未來安全的Web開發(fā)：隨著Internet Explorer的停用，開發(fā)人員無需受限于舊版瀏覽器的兼容性，可以充分利用HTML5、CSS3和JavaScript的全部潛力，從而為更具創(chuàng)新性和前瞻性的Web應用程序鋪平道路。

1. JavaScript APIs

在本節(jié)中，我們將介紹相當多的JavaScript特性、API和功能。它們有什么共同點？它們都不能真正用于老IE，需要使用各種polyfill，或者必須通過各種其他框架和庫來實現(xiàn)其效果（如果可以實現(xiàn)的話）。在當前環(huán)境（IE11 Edge）中，它們具有內(nèi)置于瀏覽器的原生支持，這意味著可以直接使用它們。

Base64編碼和解碼（btoa和atob）

Base64是Web上非常有用的工具。你們中的許多人可能已經(jīng)用它將字體或圖像嵌入到CSS中。另一個常見的用法是處理通常會干擾傳輸協(xié)議的各種資源。一個很好的例子是基本訪問身份驗證，其中用戶名：密碼對使用Base64打包，然后發(fā)送到服務器。對編碼/解碼操作的原生支持意味著它們可以更快地執(zhí)行。以下是一些入門資源：

• MDN上的atob()和btoa()文檔
• Base64.js polyfill

Blob構(gòu)建

二進制大對象或BLOB是存儲在數(shù)據(jù)庫管理系統(tǒng)中的單個實體中的原始數(shù)據(jù)的集合。它可以是音頻剪輯或圖像，以Base64格式存儲。或者是一組圖像。在許多情況下，Blob字段用于數(shù)據(jù)結(jié)構(gòu)不如通過普通表或表模式（如JSON對象）表達得那么嚴格的數(shù)據(jù)。你們中的一些人可能還記得Blob接口的祖先，即BlobBuilder。但是，這種方法已被棄用，強烈建議所有Blob操作都應通過新的接口進行。

最重要的是，由于此集合與文件非常相似，因此Blob對象的原生接口已被用作File()接口的基礎。因此，有一個名為“Blob URL”的不錯功能，它允許開發(fā)人員為blob對象創(chuàng)建URL，這些URL可以在任何可以使用文件的地方使用。考慮到這一點，原生支持現(xiàn)在涵蓋所有主流瀏覽器，這一點非常令人贊賞。

• MDN上的BLOB
• MDN上的BLOB URL
• JavaScript Blob和文件接口簡介

Channel Messaging

通常，在不同瀏覽器上下文運行的兩個腳本被禁止相互通信，以避免許多安全陷阱。但是，有時這種通信不僅是需要的，而且是真正必要的。這就是Channel Messaging API發(fā)揮作用的地方。此接口允許我們的兩個腳本通過雙向管道相互通信。這就像在同一個頻道上為每個人提供一個對講機。很巧妙，不是嗎？

• Dev.Opera上的HTML5 Web Messaging簡介
• MDN上的MessageChannel

常量和塊級變量

const和let是ES6中定義數(shù)據(jù)的兩種新方法。雖然var定義具有全局或函數(shù)范圍的變量，但新增內(nèi)容具有塊級范圍。這意味著使用const和let創(chuàng)建的變量的范圍僅限于定義它們的括號對內(nèi)。

雖然let定義了一個（除了范圍之外）與經(jīng)典變量行為相同的變量，但常量（const）是對某個值的只讀引用。它不能重新賦值，不能重新定義，并且不能與同一范圍內(nèi)的任何其他變量或函數(shù)共享相同的名稱。唯一的例外是當常量是一個具有其自身屬性的對象時。這些屬性不受更改的保護，其行為類似于普通變量。

話雖如此，請查看在代碼中正確使用常量和塊級變量的方法：

• MDN上的常量
• MDN上的Let
• SitePoint上的準備ECMAScript 6：let和const
• Wes Bos的ES6 let VS const變量

控制臺日志記錄

大多數(shù)前端開發(fā)人員都會同意，當腳本行為異常時，Web控制臺是手中最有用工具之一。然而，Internet Explorer本質(zhì)上整合它的速度很慢，只有版本10才開始提供完全支持?，F(xiàn)在，隨著老IE的退役，沒有什么能阻止我們充分利用此功能。如果您需要刷新您的知識，甚至發(fā)現(xiàn)使用控制臺的新方法，請查看以下規(guī)范：

• MDN上的控制臺

跨源資源共享

跨源資源共享（CORS）是一個HTML5 API，它允許請求來自其自身域外部的資源。它描述了一組HTTP標頭，這些標頭允許瀏覽器和服務器在授予特定權(quán)限時請求遠程資源。以下資源是學習如何正確使用此功能的良好起點：

• Dev.Opera上使用跨源資源共享的DOM訪問控制
• MDN上的HTTP訪問控制（CORS）
• SitePoint上對CORS的深入了解

Web Cryptography API

如今，安全和隱私是任何應用程序中最受追捧的兩個特性，這意味著良好的（且快速的）加密技術(shù)非常受重視?，F(xiàn)在，所有主流瀏覽器都一致支持Web Cryptography API，但IE11（它實現(xiàn)了舊版本的規(guī)范）和Safari（它需要crypto.webkitSubtle前綴）除外。幸運的是，某些特定功能（如隨機值的生成）的實現(xiàn)更好。因此，使用原生支持實現(xiàn)加密元素比以往任何時候都更容易。以下是一些關于如何正確執(zhí)行此操作的指南：

• MDN上的Crypto對象
• MDN上的getRandomValues
• GitHub上用于舊版瀏覽器的Web Cryptography API shim

國際化

如今，互聯(lián)網(wǎng)訪問的普遍性意味著訪問您網(wǎng)站的訪問者可以來自世界各地。由于人們更信任熟悉的事物，因此最好以他們的語言和他們習慣的格式呈現(xiàn)所有信息。這就是您需要國際化（也稱為i18n）和本地化（或L10n）的地方。這聽起來像是胡言亂語嗎？讓我們引用Aurelio De Rosa在他關于如何在JavaScript中實現(xiàn)國際化（i18n）的文章中的話：

國際化（也稱為i18n）是創(chuàng)建或轉(zhuǎn)換產(chǎn)品和服務的過程，以便它們可以輕松地適應特定的本地語言和文化。本地化（也稱為L10n）是為特定區(qū)域或語言調(diào)整國際化軟件的過程。換句話說，國際化是使您的軟件適應支持多種文化（貨幣格式、日期格式等）的過程，而本地化是實現(xiàn)一種或多種文化的過程。

瀏覽器的支持比今年年初略好一些，Safari v10于9月份加入了行列。聽起來很有趣嗎？以下是一些讓您走上正軌的資源：

• MDN上的國際化API
• JavaScript國際化API – 簡要介紹
• 如何在JavaScript中實現(xiàn)國際化（i18n）

處理媒體查詢

響應式Web設計是當前高效網(wǎng)站的標準，使其成為可能的關鍵特性是媒體查詢的存在。matchmedia將媒體查詢從CSS引入JavaScript，為開發(fā)人員提供了更大的靈活性來優(yōu)化各種設備的內(nèi)容。一個很好的例子是處理移動電話和平板電腦從縱向模式到橫向模式以及反向模式的更改。雖然有一個API可以處理設備方向的檢測，但大多數(shù)瀏覽器的支持都是部分的，只有Microsoft Edge提供完全支持。以下是一些關于此主題的入門資源：

• MDN上的測試媒體查詢
• MDN上的Window.matchMedia
• SitePoint上如何在JavaScript中使用媒體查詢

媒體源擴展

媒體源擴展（MSE）在不使用插件的情況下向視頻和音頻元素添加額外功能。這為您提供了自適應媒體流、實時流、拼接視頻和視頻編輯等功能。自2013年9月以來，YouTube一直在其HTML5播放器中使用MSE。瀏覽器的支持也相當好，只有iOS Safari和Opera Mini缺少此功能。僅當在Windows 8 上使用時，IE11才具有完全支持。不幸的是，IE11/Win7用戶無法從這項技術(shù)中受益。無論您只是好奇還是真的想開始使用此API，您都會發(fā)現(xiàn)以下資源非常有用：

• MDN上的MediaSource API
• MSDN上的媒體源擴展
• HTML5媒體源擴展：將制作視頻帶到Web上（Smashing Magazine）

變異觀察器

JavaScript應用程序每天都在變得越來越復雜。作為開發(fā)人員，您需要控制頁面上發(fā)生的更改，尤其是在DOM樹更改或“變異”的時間。對這種監(jiān)控的需求并非新鮮事物，實際上已經(jīng)存在了一種解決方案——變異事件。此接口的問題在于，作為事件，它們既是同步的（在調(diào)用時觸發(fā)，并可能阻止其他事件觸發(fā)），也必須通過DOM捕獲或冒泡。這反過來又會觸發(fā)其他事件，從而使JavaScript線程過載，并在某些特殊情況下生成整個級聯(lián)故障，導致瀏覽器崩潰。

因此，變異事件已被棄用并替換為變異觀察器。您可能會問，有什么區(qū)別？首先也是最重要的一點是，觀察器是異步的。它們不會阻止您的腳本運行。它們不是在每次變異時觸發(fā)，而是在主要活動完成后批量傳遞結(jié)果。更重要的是，您可以微調(diào)觀察器以觀察節(jié)點的所有更改或僅觀察特定類別的更改（例如僅子列表的更改或僅屬性的更改等）。使用以下資源開始學習如何執(zhí)行此操作：

• MDN上的MutationObserver
• 了解變異觀察器
• SitePoint上正在發(fā)展的新變異

頁面可見性

選項卡瀏覽改變了我們與網(wǎng)絡交互的方式。許多人同時打開數(shù)十個頁面的情況并不少見。每個頁面都執(zhí)行自己的操作，運行其腳本，下載其擁有的資源等等。即使一次只能激活一個選項卡，所有打開的頁面都在消耗CPU時間和帶寬。某些應用程序可能定期通過連接發(fā)送和接收更新。但是，如果您沒有在活動選項卡中打開該應用程序，它是否需要在后臺每X秒更新一次？這似乎有點浪費，不是嗎？尤其是在移動設備和數(shù)據(jù)計劃中，每種資源都很寶貴。

這就是Page Visibility API發(fā)揮作用的地方。此接口允許開發(fā)人員知道他們的應用程序是否在活動選項卡中或在后臺。讓我們以我前面提到的執(zhí)行更新的應用程序為例。使用Page Visibility API，您可以檢測應用程序何時在后臺，然后不要每5或10秒執(zhí)行一次更新，而是每60秒甚至更少執(zhí)行一次。一旦頁面再次可見，您可以切換回正常的更新速率。很酷，不是嗎？

那么，您還在等什么？查看以下指南，開始為頁面可見性啟動您的應用程序。您的用戶會感謝您的：

• MDN上的頁面可見性API
• SitePoint上頁面可見性API簡介

頁面轉(zhuǎn)換事件

您是否曾經(jīng)使用過一個Web表單，當您嘗試離開或關閉頁面時，它會彈出一個消息，提示您有未保存的數(shù)據(jù)？如今，在您更改設置、個人資料詳細信息等的頁面上，這很常見。頁面中的腳本如何知道您要離開？他們監(jiān)聽pagehide事件。

pagehide及其合作伙伴pageshow是頁面轉(zhuǎn)換事件的主要主角。我們上面已經(jīng)看到第一個主要用于什么。pageshow的主要用途是確定頁面是從緩存加載還是直接從服務器加載。這不是最常見的用途，但是，如果您需要任一功能，請查看以下資源：

• MDN上的pageshow
• MDN上的pagehide

requestAnimationFrame

Web上的動畫已經(jīng)走了很長一段路，從早期的<marquee></marquee>和<blink></blink>，到動畫GIF、jQuery效果，再到當前的CSS、SVG、canvas和WebGL動畫。所有這些方法中的一個常數(shù)是需要控制動畫的流程并使其盡可能流暢。

最初的方法使用setInterval和setTimeout來控制動畫的步驟。問題是結(jié)果并非可靠地一致，動畫通常很粗糙。這就是為什么設計了一個新的接口——requestAnimationFrame。這種方法的主要優(yōu)點是瀏覽器可以自由地將請求與自身的繪制周期匹配，從而明顯地平滑動畫。與它的對應物cancelAnimationFrame一起，這兩種方法是現(xiàn)代JavaScript動畫的基礎。

像往常一樣，以下是一些讓您開始掌握此功能的資源。

• MDN上的requestAnimationFrame
• MDN上的cancelAnimationFrame
• SitePoint上使用requestAnimationFrame進行簡單動畫
• SitePoint上的觀看：使用requestAnimationFrame進行性能測試

定時API

在線性能是當今的熱門話題，每個人都盡最大努力減少資源，優(yōu)化腳本并充分利用他們掌握的所有工具。有兩種主要方法可以解決此問題：網(wǎng)絡性能（站點和資源的交付速度）和用戶性能（應用程序本身的執(zhí)行速度）。

網(wǎng)絡性能由兩個API提供服務：Navigation Timing和Resource Timing。它們都提供與網(wǎng)絡性能相關的所有類型的信息，例如DNS、CDN、請求和響應時間等。唯一的區(qū)別是Navigation Timing針對HTML頁面本身，而Resource Timing處理所有其他資源（圖像、腳本、媒體等）。

在用戶性能方面，我們有一個API：User Timing。此API處理兩個主要概念，稱為Mark（高度詳細的時間戳）和Measure（兩個Mark之間的時間間隔）。使用這些概念可以測量代碼的運行速度并識別需要優(yōu)化的位置。不幸的是，Safari仍然不支持此API，因此可能需要polyfill。

掌握這些接口的使用對于確保網(wǎng)站或應用程序的最佳性能至關重要。這就是為什么我們?yōu)槟峁┮恍W習資料的原因：

• Navigation Timing
  • MDN上的Navigation Timing API
  • SitePoint上使用Navigation Timing API分析頁面加載
  • SitePoint上Navigation Timing API：如何高效分析頁面加載
• Resource Timing
  • MDN上的Resource Timing API
  • Google Developers博客上使用Resource Timing API測量網(wǎng)絡性能
  • SitePoint上Resource Timing API簡介
• User Timing
  • SitePoint上發(fā)現(xiàn)User Timing API
  • HTML5Rocks上的User Timing API
  • GitHub上的user-timing-rum.js和UserTiming.js polyfill

類型化數(shù)組

JavaScript類型化數(shù)組是類似數(shù)組的對象，并提供了一種訪問原始二進制數(shù)據(jù)的方法。為了獲得最大的靈活性和效率，實現(xiàn)是沿著兩個概念進行的：緩沖區(qū)（原始數(shù)據(jù)的塊）和視圖（提供可以解釋緩沖區(qū)數(shù)據(jù)的上下文）。有許多使用類型化數(shù)組的Web API，例如WebGL、Canvas 2D、XMLHttpRequest2、File、Media Source或Binary WebSockets。如果您的代碼處理此類技術(shù)，您可能對以下資源感興趣：

• MDN上的JavaScript類型化數(shù)組
• 類型化數(shù)組：瀏覽器中的二進制數(shù)據(jù)（HTML5Rocks）

WebSockets

我們前面討論了Channel Messaging以及它如何使兩個不同的腳本可以直接相互通信。WebSockets與此類似，而且功能更多。使用此API可以在瀏覽器和Web服務器之間創(chuàng)建持久通信通道。

與HTTP一樣，WebSocket協(xié)議也有兩個版本：不安全的（ws://...）和安全的（wss://...）。它還考慮了代理服務器和防火墻，通過它們打開隧道。實際上，WebSocket連接以正常的HTTP連接開始，確保與現(xiàn)有基礎設施的兼容性。

WebSockets是一項引人入勝的技術(shù)（它們甚至有一個專門的網(wǎng)站），有很多東西需要學習。為了幫助您入門，以下是一些精選的資源：

• WebSocket.org上的關于WebSocket
• MDN上的WebSockets
• SitePoint上HTML5 WebSockets API簡介

Web Workers

默認情況下，所有JavaScript任務都在同一線程中運行。這意味著頁面中的所有腳本都必須共享相同的處理時間隊列。當處理器只有一個內(nèi)核時，這很好且簡單。但是，現(xiàn)代CPU至少具有雙核，某些型號的CPU甚至達到4、6或8個內(nèi)核。如果可以將某些任務移動到可以由可用額外內(nèi)核處理的單獨線程中，那不是很好嗎？這就是發(fā)明Web Workers的原因。

使用Web Workers API，開發(fā)人員可以將命名腳本文件委托給在單獨線程中運行的worker。worker只響應創(chuàng)建它的腳本，通過消息進行雙向通信，可以運行XMLHttpRequest調(diào)用，并且不與DOM或窗口對象的某些默認方法和屬性交互。在例外類別中，我們可以提到WebSockets（可以將WebSocket連接的管理分配給worker）或IndexedDB等數(shù)據(jù)存儲機制。擁有自己的助手來處理次要任務，而主線程專注于運行整個應用程序，沒有什么比這更好的了。

要開始使用此功能（包括可用于Web worker的函數(shù)和類的列表），請查看以下資源：

• MDN上的Web Workers API
• MDN上可用于Web Workers的函數(shù)和類
• SitePoint上使用HTML5 Web Workers進行JavaScript線程處理

XMLHttpRequest高級功能

XMLHttpRequest的采用預示著Web開發(fā)的新時代?，F(xiàn)在可以在瀏覽器和服務器之間交換數(shù)據(jù)，而無需重新加載整個頁面。AJAX是允許每個人都喜歡的單頁應用程序存在的新標準。

這種有用的技術(shù)將得到進一步發(fā)展，這很正常。這就是XHR獲得新功能的方式，例如文件上傳、傳輸進度信息或直接發(fā)送表單數(shù)據(jù)的能力。所有這些功能（在IE11或舊版Android的情況下存在細微的例外）在老IE退役后都受到主流瀏覽器的支持。

有關更多詳細信息，請隨時查閱以下資源：

• MDN上的FormData
• SitePoint上使用HTML5 FormData接口簡化Ajax

2. 其他功能

現(xiàn)代Web不僅僅是HTML、CSS和JavaScript。幕后還有許多看不見（和未被歌頌的）英雄辛勤工作，使我們的在線體驗盡可能出色。下面，我們將討論一些此類功能，這些功能與上述功能一樣，不能在老IE瀏覽器上使用（它們因其安全漏洞和缺乏對現(xiàn)代功能的支持而臭名昭著）。

使用“async”和“defer”的非阻塞JavaScript加載

每個Web開發(fā)人員都會學習腳本是“加載阻塞”的，并且會一直阻止整個頁面，直到它們加載完畢。我們都記得在之前加載jQuery的建議。但是，在單頁應用程序的情況下，這種方法是無用的，因為網(wǎng)站的所有行為都是由JavaScript驅(qū)動的。這讓我們回到了原點。

但事實是，在大多數(shù)情況下，您的網(wǎng)站或應用程序只需要它加載的所有JavaScript的一部分。其余部分將在以后需要，或者它們正在執(zhí)行不會影響DOM的操作。顯而易見的方法是以常規(guī)方式加載只有關鍵腳本，而以不會以負面方式影響應用程序的方式加載其余腳本。實際上，有兩種這樣的加載方法。

第一種方法是使用defer屬性，用于標記不會影響DOM并打算在解析文檔后執(zhí)行的腳本。在大多數(shù)情況下，這些腳本處理用戶交互，因此可以安全地以這種方式加載它們。第二種方法使用async屬性，并標記一個腳本，該腳本雖然并行加載，但將在下載后立即執(zhí)行。但是，不能保證加載順序與執(zhí)行順序相同。

這兩個參數(shù)帶來的所有好處，它們正成為提高網(wǎng)站和應用程序性能的重要工具。查看以下資源，了解有關如何以及何時使用此技術(shù)的更多信息：

• Google Developers上刪除渲染阻塞JavaScript
• SitePoint上使用HTML5 Async和Defer加載非阻塞JavaScript

內(nèi)容安全策略

從一開始，Web上的安全性就是圍繞“同源”模型構(gòu)建的，這意味著只有來自同一域的腳本才能與給定頁面交互。然而，隨著時間的推移，我們必須將第三方腳本集成到我們的頁面中：來自CDN的JavaScript庫、來自Facebook、Google 或Twitter的社交媒體小部件以及其他類似案例。這意味著我們打開了大門，并允許“來賓”腳本運行到我們的隱喻庭院中。當惡意腳本也潛入進來并像其他腳本一樣被執(zhí)行時，問題就來了——我們都知道的一種攻擊方法，稱為跨站點腳本或XSS。

內(nèi)容安全策略是對抗XSS的主要武器。此機制包含一組策略和指令，這些策略和指令指定允許執(zhí)行哪些腳本，可以從哪里加載資源，是否可以運行內(nèi)聯(lián)樣式或腳本等等。CSP基于白名單，這意味著默認情況下所有內(nèi)容都被拒絕，只有指定的資源才能訪問。這意味著，當規(guī)則微調(diào)后，即使惡意腳本插入到我們的站點中，它也不會被執(zhí)行。

以下是一些資源，可以幫助您更好地理解此機制：

• 內(nèi)容安全策略參考
• SitePoint上使用內(nèi)容安全策略提高Web安全性
• HTML5Rocks上內(nèi)容安全策略簡介

HTTP/2協(xié)議

從一開始，Web就運行在HTTP協(xié)議之上。然而，雖然第一個已經(jīng)發(fā)展得非?？欤獺TTP基本上保持不變。在現(xiàn)代網(wǎng)站和應用程序的復雜生態(tài)系統(tǒng)中，HTTP可能成為性能瓶頸。當然，有一些技術(shù)和實踐可以優(yōu)化此過程，但只能做這么多。

這就是為什么開發(fā)了協(xié)議的第二個迭代，名為HTTP/2，它基于Google的SPDY協(xié)議。它于2015年2月獲得批準，規(guī)范于2016年5月作為RFC 7540發(fā)布。到目前為止，主流瀏覽器僅通過加密連接支持HTTP/2，并且很有可能在可預見的未來它將保持這種狀態(tài)，以鼓勵站點所有者切換到HTTPS。

HTTP/2的采用不僅僅是更改一些配置設置的問題。一些用于增強HTTP性能的最佳實踐可能會影響HTTP/2上的性能。要確定您的網(wǎng)站是否已準備好使用HTTP/2，您可以查閱以下資源：

• 為HTTP/2做準備：面向Web設計師和開發(fā)人員的指南（Smashing Magazine）
• HTTP/2如何改變Web性能最佳實踐（New Relic博客）
• HTTP/2面向Web開發(fā)人員（Cloudflare博客）

資源提示：預取

Web性能是當今的熱門話題，而且有充分的理由。正如該領域的所有工作人員都知道的那樣，頁面加載時間的很大一部分是由資源下載占據(jù)的。如果可以在頁面加載后使用時間來預加載后續(xù)步驟的資源，那不是很好嗎？這就是資源提示的用途。

資源提示是一系列指令，它們告訴瀏覽器提前提供以后將需要的特定資源。該列表包含五個提示，如下所示：

• dns-prefetch
• preconnect
• prefetch
• preload
• prerender

在這五個可能的選項中，目前唯一具有良好瀏覽器支持的是prefetch。此提示告訴瀏覽器緩存用戶很可能在當前頁面之后請求的文檔。這將其用途限制為可以緩存的元素。將其與其他類型的資源一起使用將不起作用。

如果您對此主題感興趣，以下是一些提供更多詳細信息的資源：

• Medium上的資源提示文章
• CSS-Tricks上的預取、預加載、預瀏覽
• KeyCDN博客上的資源提示

嚴格傳輸安全

HTTPS正成為新的瀏覽標準，越來越多的網(wǎng)站只接受安全連接。普通連接（在HTTP上）通常會重定向到HTTPS版本，事情照常進行。但是，這種方法容易受到“中間人”攻擊，在這種攻擊中，重定向會改為發(fā)生到您想要的網(wǎng)站（通常是銀行網(wǎng)站）的欺騙克隆，以便竊取您的登錄憑據(jù)。

這就是嚴格傳輸安全標頭發(fā)揮作用的地方。第一次使用HTTPS連接到所需網(wǎng)站時，標頭將發(fā)送到瀏覽器。下次連接時，即使您只使用URL的HTTP版本，瀏覽器也會直接轉(zhuǎn)到HTTPS版本，而不會經(jīng)過重定向周期。由于沒有在HTTP上建立連接，因此前面描述的攻擊將無法發(fā)生。

有關嚴格傳輸安全標頭的更多詳細信息，請查看以下網(wǎng)站：

• MDN上的HTTP嚴格傳輸安全

設備像素比

Window.devicePixelRatio是一個只讀屬性，它返回當前顯示設備上一個物理像素的（垂直）大小與一個CSS像素的大小之比。這樣，開發(fā)人員可以檢測高密度屏幕（例如Apple的Retina顯示屏或高端Android屏幕）。與媒體查詢和MatchMedia（我們上面討論過）一起使用時，此屬性允許為最佳體驗提供優(yōu)化的資源。

• MDN上的Window.devicePixelRatio

Web視頻文本軌道

Web視頻文本軌道（或WebVTT）是一種用于標記多媒體資源文本字幕的格式。它與HTML5<track></track>元素一起使用，并允許以同步方式向媒體資源（音頻或視頻）添加字幕、翻譯、標題或描述。此文本信息的存在使媒體資源更容易訪問。

有關如何開始使用此功能的說明，請查看以下資源：

• MDN上的WebVTT
• Dev.Opera上WebVTT和<track></track>簡介
• HTML5Rocks上Track元素入門

總結(jié)

我們在這里，在本系列文章的結(jié)尾，該系列文章始于一個簡單的智力練習：“老IE消失了！讓我們慶祝吧?。ā瓗讉€小時后……）現(xiàn)在怎么辦？”。我們涵蓋了廣泛的主題，從不再需要的技術(shù)和實踐到我們現(xiàn)在可以自由地不做polyfill就能做到的所有新事物，無論是HTML、CSS還是原生JavaScript。我們甚至還涉及了更廣泛的主題，例如性能優(yōu)化和增強安全性。

您現(xiàn)在應該立即開始重構(gòu)所有代碼嗎？很可能不會。必須根據(jù)重構(gòu)成本與技術(shù)債務成本之間的平衡來做出此類決定。但是，如果您要啟動一個新項目，請務必為未來構(gòu)建它，而不是為過去構(gòu)建它。

Internet Explorer退役后關于原生JavaScript開發(fā)的常見問題解答（FAQ）

Internet Explorer退役后原生JavaScript開發(fā)的重要性是什么？

Internet Explorer退役后原生JavaScript開發(fā)至關重要，因為它允許開發(fā)人員創(chuàng)建更高效、更有效的Web應用程序。隨著Internet Explorer的停用，開發(fā)人員不再受限于通常與該瀏覽器相關的約束和兼容性問題。他們現(xiàn)在可以使用JavaScript的全部功能，包括其最新功能和更新，來構(gòu)建更動態(tài)、更交互式和更用戶友好的Web應用程序。

如何在我的瀏覽器中啟用JavaScript？

在瀏覽器中啟用JavaScript是一個簡單的過程。對于大多數(shù)瀏覽器，您可以在設置或首選項菜單中找到啟用或禁用JavaScript的選項。通常，這涉及導航到“安全”或“隱私”部分并查找與JavaScript相關的選項。確保啟用它以獲得更好的瀏覽體驗。

Internet Explorer和其它瀏覽器中的JavaScript之間有什么區(qū)別？

是的，Internet Explorer和其它瀏覽器中JavaScript的工作方式存在顯著差異。Internet Explorer具有不同的JavaScript引擎，這經(jīng)常導致兼容性問題和限制。Chrome、Firefox和Safari等現(xiàn)代瀏覽器使用更高級的JavaScript引擎，這些引擎支持JavaScript的最新功能和標準，從而提高性能并減少兼容性問題。

使用原生JavaScript而不是庫或框架的好處是什么？

與使用庫或框架相比，使用原生JavaScript具有許多好處。它允許獲得更好的性能，因為沒有加載和解析不必要代碼的開銷。它還提供了對代碼的更多控制，因為開發(fā)人員不受特定庫或框架的約束。此外，理解和使用原生JavaScript可以使您更深入地了解該語言及其功能。

Internet Explorer的停用如何影響JavaScript開發(fā)？

Internet Explorer的停用對JavaScript開發(fā)產(chǎn)生了重大影響。開發(fā)人員不再需要編寫額外或不同的代碼來確保與Internet Explorer的兼容性。這導致了更高效的開發(fā)流程以及能夠利用JavaScript的全部功能。它還導致了不同瀏覽器之間更一致的用戶體驗。

我可以在開發(fā)中使用JavaScript的一些最新功能是什么？

JavaScript不斷更新，并增加了新的功能和改進。一些最新功能包括用于處理異步操作的async/await、用于擴展數(shù)組或其它可迭代對象的擴展語法以及用于更簡潔函數(shù)語法的箭頭函數(shù)。這些功能可以極大地增強您的JavaScript開發(fā)，并允許您編寫更高效、更易讀的代碼。

如何確保我的JavaScript代碼與所有瀏覽器兼容？

確保瀏覽器兼容性是JavaScript開發(fā)的一個重要方面。實現(xiàn)此目標的一種方法是使用特性檢測，這涉及在使用特定功能之前檢查用戶瀏覽器是否支持該功能。另一種方法是使用polyfill，polyfill是為不支持它們的舊版瀏覽器提供較新功能功能的腳本。

Internet Explorer退役后JavaScript開發(fā)的未來是什么？

Internet Explorer退役后JavaScript開發(fā)的未來看起來很有希望。隨著Internet Explorer的停用，開發(fā)人員現(xiàn)在可以專注于利用JavaScript的全部功能，而無需擔心兼容性問題。這與語言的持續(xù)更新和改進相結(jié)合，預示著JavaScript開發(fā)效率更高、功能更強大、用途更廣泛的未來。

學習更多關于原生JavaScript開發(fā)的一些好的資源是什么？

有很多很棒的資源可用于學習更多關于原生JavaScript開發(fā)的知識。一些流行的在線平臺包括Mozilla Developer Network (MDN)、freeCodeCamp和Codecademy。這些平臺提供關于JavaScript的全面指南和教程，涵蓋從基礎知識到更高級主題的所有內(nèi)容。

如何有效地調(diào)試JavaScript代碼？

調(diào)試是JavaScript開發(fā)中必不可少的一部分。大多數(shù)現(xiàn)代瀏覽器都帶有內(nèi)置的開發(fā)工具，可用于調(diào)試。這些工具允許您逐步執(zhí)行代碼、檢查變量并查看發(fā)生的任何錯誤或異常。此外，使用良好的編碼實踐，例如編寫清晰簡潔的代碼并注釋代碼，也可以使調(diào)試過程更容易。

以上是Internet Explorer之后的本地JavaScript開發(fā)的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！