歡迎來到本系列的第三部分，也是最後一部分，我們將探討老IE的退役以及這一事件對前端開發領域的影響。到目前為止，我們已經介紹了可以安全丟棄的過時技術，以及現在在主流瀏覽器中完全原生支持的HTML5和CSS3屬性。今天，我們將重點介紹原生JavaScript技術以及其他不屬於上述類別的內容。
再次感謝CanIUse.com，它是一個非常寶貴的資源。我還將重申上次的免責聲明：
本文與是否放棄對老IE的支持的決定無關。您必鬚根據您網站或應用程序的具體細節自行做出決定。
話不多說，讓我們繼續！
const和let用於塊級變量聲明以及箭頭函數的普及）的支持允許開發人員編寫更簡潔、更高效的代碼。 在本節中，我們將介紹相當多的JavaScript特性、API和功能。它們有什麼共同點？它們都不能真正用於老IE，需要使用各種polyfill，或者必須通過各種其他框架和庫來實現其效果（如果可以實現的話）。在當前環境（IE11 Edge）中，它們具有內置於瀏覽器的原生支持，這意味著可以直接使用它們。
Base64是Web上非常有用的工具。你們中的許多人可能已經用它將字體或圖像嵌入到CSS中。另一個常見的用法是處理通常會干擾傳輸協議的各種資源。一個很好的例子是基本訪問身份驗證，其中用戶名：密碼對使用Base64打包，然後發送到服務器。對編碼/解碼操作的原生支持意味著它們可以更快地執行。以下是一些入門資源：
二進制大對像或BLOB是存儲在數據庫管理系統中的單個實體中的原始數據的集合。它可以是音頻剪輯或圖像，以Base64格式存儲。或者是一組圖像。在許多情況下，Blob字段用於數據結構不如通過普通表或表模式（如JSON對象）表達得那麼嚴格的數據。你們中的一些人可能還記得Blob接口的祖先，即BlobBuilder。但是，這種方法已被棄用，強烈建議所有Blob操作都應通過新的接口進行。
最重要的是，由於此集合與文件非常相似，因此Blob對象的原生接口已被用作File()接口的基礎。因此，有一個名為“Blob URL”的不錯功能，它允許開發人員為blob對象創建URL，這些URL可以在任何可以使用文件的地方使用。考慮到這一點，原生支持現在涵蓋所有主流瀏覽器，這一點非常令人讚賞。
通常，在不同瀏覽器上下文運行的兩個腳本被禁止相互通信，以避免許多安全陷阱。但是，有時這種通信不僅是需要的，而且是真正必要的。這就是Channel Messaging API發揮作用的地方。此接口允許我們的兩個腳本通過雙向管道相互通信。這就像在同一個頻道上為每個人提供一個對講機。很巧妙，不是嗎？
const和let是ES6中定義數據的兩種新方法。雖然var定義具有全局或函數範圍的變量，但新增內容具有塊級範圍。這意味著使用const和let創建的變量的範圍僅限於定義它們的括號對內。
雖然let定義了一個（除了範圍之外）與經典變量行為相同的變量，但常量（const）是對某個值的只讀引用。它不能重新賦值，不能重新定義，並且不能與同一範圍內的任何其他變量或函數共享相同的名稱。唯一的例外是當常量是一個具有其自身屬性的對象時。這些屬性不受更改的保護，其行為類似於普通變量。
話雖如此，請查看在代碼中正確使用常量和塊級變量的方法：
大多數前端開發人員都會同意，當腳本行為異常時，Web控制台是手中最有用工具之一。然而，Internet Explorer本質上整合它的速度很慢，只有版本10才開始提供完全支持。現在，隨著老IE的退役，沒有什麼能阻止我們充分利用此功能。如果您需要刷新您的知識，甚至發現使用控制台的新方法，請查看以下規範：
跨源資源共享（CORS）是一個HTML5 API，它允許請求來自其自身域外部的資源。它描述了一組HTTP標頭，這些標頭允許瀏覽器和服務器在授予特定權限時請求遠程資源。以下資源是學習如何正確使用此功能的良好起點：
如今，安全和隱私是任何應用程序中最受追捧的兩個特性，這意味著良好的（且快速的）加密技術非常受重視。現在，所有主流瀏覽器都一致支持Web Cryptography API，但IE11（它實現了舊版本的規範）和Safari（它需要crypto.webkitSubtle前綴）除外。幸運的是，某些特定功能（如隨機值的生成）的實現更好。因此，使用原生支持實現加密元素比以往任何時候都更容易。以下是一些關於如何正確執行此操作的指南：
如今，互聯網訪問的普遍性意味著訪問您網站的訪問者可以來自世界各地。由於人們更信任熟悉的事物，因此最好以他們的語言和他們習慣的格式呈現所有信息。這就是您需要國際化（也稱為i18n）和本地化（或L10n）的地方。這聽起來像是胡言亂語嗎？讓我們引用Aurelio De Rosa在他關於如何在JavaScript中實現國際化（i18n）的文章中的話：
國際化（也稱為i18n）是創建或轉換產品和服務的過程，以便它們可以輕鬆地適應特定的本地語言和文化。本地化（也稱為L10n）是為特定區域或語言調整國際化軟件的過程。換句話說，國際化是使您的軟件適應支持多種文化（貨幣格式、日期格式等）的過程，而本地化是實現一種或多種文化的過程。
瀏覽器的支持比今年年初略好一些，Safari v10於9月份加入了行列。聽起來很有趣嗎？以下是一些讓您走上正軌的資源：
響應式Web設計是當前高效網站的標準，使其成為可能的關鍵特性是媒體查詢的存在。 matchmedia將媒體查詢從CSS引入JavaScript，為開發人員提供了更大的靈活性來優化各種設備的內容。一個很好的例子是處理移動電話和平板電腦從縱向模式到橫向模式以及反向模式的更改。雖然有一個API可以處理設備方向的檢測，但大多數瀏覽器的支持都是部分的，只有Microsoft Edge提供完全支持。以下是一些關於此主題的入門資源：
媒體源擴展（MSE）在不使用插件的情況下向視頻和音頻元素添加額外功能。這為您提供了自適應媒體流、實時流、拼接視頻和視頻編輯等功能。自2013年9月以來，YouTube一直在其HTML5播放器中使用MSE。瀏覽器的支持也相當好，只有iOS Safari和Opera Mini缺少此功能。僅當在Windows 8 上使用時，IE11才具有完全支持。不幸的是，IE11/Win7用戶無法從這項技術中受益。無論您只是好奇還是真的想開始使用此API，您都會發現以下資源非常有用：
JavaScript應用程序每天都在變得越來越複雜。作為開發人員，您需要控制頁面上發生的更改，尤其是在DOM樹更改或“變異”的時間。對這種監控的需求並非新鮮事物，實際上已經存在了一種解決方案——變異事件。此接口的問題在於，作為事件，它們既是同步的（在調用時觸發，並可能阻止其他事件觸發），也必須通過DOM捕獲或冒泡。這反過來又會觸發其他事件，從而使JavaScript線程過載，並在某些特殊情況下生成整個級聯故障，導致瀏覽器崩潰。
因此，變異事件已被棄用並替換為變異觀察器。您可能會問，有什麼區別？首先也是最重要的一點是，觀察器是異步的。它們不會阻止您的腳本運行。它們不是在每次變異時觸發，而是在主要活動完成後批量傳遞結果。更重要的是，您可以微調觀察器以觀察節點的所有更改或僅觀察特定類別的更改（例如僅子列表的更改或僅屬性的更改等）。使用以下資源開始學習如何執行此操作：
選項卡瀏覽改變了我們與網絡交互的方式。許多人同時打開數十個頁面的情況並不少見。每個頁面都執行自己的操作，運行其腳本，下載其擁有的資源等等。即使一次只能激活一個選項卡，所有打開的頁面都在消耗CPU時間和帶寬。某些應用程序可能定期通過連接發送和接收更新。但是，如果您沒有在活動選項卡中打開該應用程序，它是否需要在後台每X秒更新一次？這似乎有點浪費，不是嗎？尤其是在移動設備和數據計劃中，每種資源都很寶貴。
這就是Page Visibility API發揮作用的地方。此接口允許開發人員知道他們的應用程序是否在活動選項卡中或在後台。讓我們以我前面提到的執行更新的應用程序為例。使用Page Visibility API，您可以檢測應用程序何時在後台，然後不要每5或10秒執行一次更新，而是每60秒甚至更少執行一次。一旦頁面再次可見，您可以切換回正常的更新速率。很酷，不是嗎？
那麼，您還在等什麼？查看以下指南，開始為頁面可見性啟動您的應用程序。您的用戶會感謝您的：
您是否曾經使用過一個Web表單，當您嘗試離開或關閉頁面時，它會彈出一個消息，提示您有未保存的數據？如今，在您更改設置、個人資料詳細信息等的頁面上，這很常見。頁面中的腳本如何知道您要離開？他們監聽pagehide事件。
pagehide及其合作夥伴pageshow是頁面轉換事件的主要主角。我們上面已經看到第一個主要用於什麼。 pageshow的主要用途是確定頁面是從緩存加載還是直接從服務器加載。這不是最常見的用途，但是，如果您需要任一功能，請查看以下資源：
Web上的動畫已經走了很長一段路，從早期的<marquee></marquee>和<blink></blink>，到動畫GIF、jQuery效果，再到當前的CSS、SVG、canvas和WebGL動畫。所有這些方法中的一個常數是需要控制動畫的流程並使其盡可能流暢。
最初的方法使用setInterval和setTimeout來控制動畫的步驟。問題是結果並非可靠地一致，動畫通常很粗糙。這就是為什麼設計了一個新的接口——requestAnimationFrame。這種方法的主要優點是瀏覽器可以自由地將請求與自身的繪製週期匹配，從而明顯地平滑動畫。與它的對應物cancelAnimationFrame一起，這兩種方法是現代JavaScript動畫的基礎。
像往常一樣，以下是一些讓您開始掌握此功能的資源。
在線性能是當今的熱門話題，每個人都盡最大努力減少資源，優化腳本並充分利用他們掌握的所有工具。有兩種主要方法可以解決此問題：網絡性能（站點和資源的交付速度）和用戶性能（應用程序本身的執行速度）。
網絡性能由兩個API提供服務：Navigation Timing和Resource Timing。它們都提供與網絡性能相關的所有類型的信息，例如DNS、CDN、請求和響應時間等。唯一的區別是Navigation Timing針對HTML頁面本身，而Resource Timing處理所有其他資源（圖像、腳本、媒體等）。
在用戶性能方面，我們有一個API：User Timing。此API處理兩個主要概念，稱為Mark（高度詳細的時間戳）和Measure（兩個Mark之間的時間間隔）。使用這些概念可以測量代碼的運行速度並識別需要優化的位置。不幸的是，Safari仍然不支持此API，因此可能需要polyfill。
掌握這些接口的使用對於確保網站或應用程序的最佳性能至關重要。這就是為什麼我們為您提供一些學習資料的原因：
JavaScript類型化數組是類似數組的對象，並提供了一種訪問原始二進制數據的方法。為了獲得最大的靈活性和效率，實現是沿著兩個概念進行的：緩衝區（原始數據的塊）和視圖（提供可以解釋緩衝區數據的上下文）。有許多使用類型化數組的Web API，例如WebGL、Canvas 2D、XMLHttpRequest2、File、Media Source或Binary WebSockets。如果您的代碼處理此類技術，您可能對以下資源感興趣：
我們前面討論了Channel Messaging以及它如何使兩個不同的腳本可以直接相互通信。 WebSockets與此類似，而且功能更多。使用此API可以在瀏覽器和Web服務器之間創建持久通信通道。
與HTTP一樣，WebSocket協議也有兩個版本：不安全的（ws://...）和安全的（wss://...）。它還考慮了代理服務器和防火牆，通過它們打開隧道。實際上，WebSocket連接以正常的HTTP連接開始，確保與現有基礎設施的兼容性。
WebSockets是一項引人入勝的技術（它們甚至有一個專門的網站），有很多東西需要學習。為了幫助您入門，以下是一些精選的資源：
默認情況下，所有JavaScript任務都在同一線程中運行。這意味著頁面中的所有腳本都必須共享相同的處理時間隊列。當處理器只有一個內核時，這很好且簡單。但是，現代CPU至少具有雙核，某些型號的CPU甚至達到4、6或8個內核。如果可以將某些任務移動到可以由可用額外內核處理的單獨線程中，那不是很好嗎？這就是發明Web Workers的原因。
使用Web Workers API，開發人員可以將命名腳本文件委託給在單獨線程中運行的worker。 worker只響應創建它的腳本，通過消息進行雙向通信，可以運行XMLHttpRequest調用，並且不與DOM或窗口對象的某些默認方法和屬性交互。在例外類別中，我們可以提到WebSockets（可以將WebSocket連接的管理分配給worker）或IndexedDB等數據存儲機制。擁有自己的助手來處理次要任務，而主線程專注於運行整個應用程序，沒有什麼比這更好的了。
要開始使用此功能（包括可用於Web worker的函數和類的列表），請查看以下資源：
XMLHttpRequest的採用預示著Web開發的新時代。現在可以在瀏覽器和服務器之間交換數據，而無需重新加載整個頁面。 AJAX是允許每個人都喜歡的單頁應用程序存在的新標準。
這種有用的技術將得到進一步發展，這很正常。這就是XHR獲得新功能的方式，例如文件上傳、傳輸進度信息或直接發送表單數據的能力。所有這些功能（在IE11或舊版Android的情況下存在細微的例外）在老IE退役後都受到主流瀏覽器的支持。
有關更多詳細信息，請隨時查閱以下資源：
現代Web不僅僅是HTML、CSS和JavaScript。幕後還有許多看不見（和未被歌頌的）英雄辛勤工作，使我們的在線體驗盡可能出色。下面，我們將討論一些此類功能，這些功能與上述功能一樣，不能在老IE瀏覽器上使用（它們因其安全漏洞和缺乏對現代功能的支持而臭名昭著）。
每個Web開發人員都會學習腳本是“加載阻塞”的，並且會一直阻止整個頁面，直到它們加載完畢。我們都記得在之前加載jQuery的建議。但是，在單頁應用程序的情況下，這種方法是無用的，因為網站的所有行為都是由JavaScript驅動的。這讓我們回到了原點。
但事實是，在大多數情況下，您的網站或應用程序只需要它加載的所有JavaScript的一部分。其餘部分將在以後需要，或者它們正在執行不會影響DOM的操作。顯而易見的方法是以常規方式加載只有關鍵腳本，而以不會以負面方式影響應用程序的方式加載其餘腳本。實際上，有兩種這樣的加載方法。
第一種方法是使用defer屬性，用於標記不會影響DOM並打算在解析文檔後執行的腳本。在大多數情況下，這些腳本處理用戶交互，因此可以安全地以這種方式加載它們。第二種方法使用async屬性，並標記一個腳本，該腳本雖然並行加載，但將在下載後立即執行。但是，不能保證加載順序與執行順序相同。
這兩個參數帶來的所有好處，它們正成為提高網站和應用程序性能的重要工具。查看以下資源，了解有關如何以及何時使用此技術的更多信息：
從一開始，Web上的安全性就是圍繞“同源”模型構建的，這意味著只有來自同一域的腳本才能與給定頁面交互。然而，隨著時間的推移，我們必須將第三方腳本集成到我們的頁面中：來自CDN的JavaScript庫、來自Facebook、Google 或Twitter的社交媒體小部件以及其他類似案例。這意味著我們打開了大門，並允許“來賓”腳本運行到我們的隱喻庭院中。當惡意腳本也潛入進來並像其他腳本一樣被執行時，問題就來了——我們都知道的一種攻擊方法，稱為跨站點腳本或XSS。
內容安全策略是對抗XSS的主要武器。此機制包含一組策略和指令，這些策略和指令指定允許執行哪些腳本，可以從哪裡加載資源，是否可以運行內聯樣式或腳本等等。 CSP基於白名單，這意味著默認情況下所有內容都被拒絕，只有指定的資源才能訪問。這意味著，當規則微調後，即使惡意腳本插入到我們的站點中，它也不會被執行。
以下是一些資源，可以幫助您更好地理解此機制：
從一開始，Web就運行在HTTP協議之上。然而，雖然第一個已經發展得非常快，但HTTP基本上保持不變。在現代網站和應用程序的複雜生態系統中，HTTP可能成為性能瓶頸。當然，有一些技術和實踐可以優化此過程，但只能做這麼多。
這就是為什麼開發了協議的第二個迭代，名為HTTP/2，它基於Google的SPDY協議。它於2015年2月獲得批准，規範於2016年5月作為RFC 7540發布。到目前為止，主流瀏覽器僅通過加密連接支持HTTP/2，並且很有可能在可預見的未來它將保持這種狀態，以鼓勵站點所有者切換到HTTPS。
HTTP/2的採用不僅僅是更改一些配置設置的問題。一些用於增強HTTP性能的最佳實踐可能會影響HTTP/2上的性能。要確定您的網站是否已準備好使用HTTP/2，您可以查閱以下資源：
Web性能是當今的熱門話題，而且有充分的理由。正如該領域的所有工作人員都知道的那樣，頁面加載時間的很大一部分是由資源下載佔據的。如果可以在頁面加載後使用時間來預加載後續步驟的資源，那不是很好嗎？這就是資源提示的用途。
資源提示是一系列指令，它們告訴瀏覽器提前提供以後將需要的特定資源。該列表包含五個提示，如下所示：
在這五個可能的選項中，目前唯一具有良好瀏覽器支持的是prefetch。此提示告訴瀏覽器緩存用戶很可能在當前頁面之後請求的文檔。這將其用途限制為可以緩存的元素。將其與其他類型的資源一起使用將不起作用。
如果您對此主題感興趣，以下是一些提供更多詳細信息的資源：
HTTPS正成為新的瀏覽標準，越來越多的網站只接受安全連接。普通連接（在HTTP上）通常會重定向到HTTPS版本，事情照常進行。但是，這種方法容易受到“中間人”攻擊，在這種攻擊中，重定向會改為發生到您想要的網站（通常是銀行網站）的欺騙克隆，以便竊取您的登錄憑據。
這就是嚴格傳輸安全標頭髮揮作用的地方。第一次使用HTTPS連接到所需網站時，標頭將發送到瀏覽器。下次連接時，即使您只使用URL的HTTP版本，瀏覽器也會直接轉到HTTPS版本，而不會經過重定向周期。由於沒有在HTTP上建立連接，因此前面描述的攻擊將無法發生。
有關嚴格傳輸安全標頭的更多詳細信息，請查看以下網站：
Window.devicePixelRatio是一個只讀屬性，它返回當前顯示設備上一個物理像素的（垂直）大小與一個CSS像素的大小之比。這樣，開發人員可以檢測高密度屏幕（例如Apple的Retina顯示屏或高端Android屏幕）。與媒體查詢和MatchMedia（我們上面討論過）一起使用時，此屬性允許為最佳體驗提供優化的資源。
Web視頻文本軌道（或WebVTT）是一種用於標記多媒體資源文本字幕的格式。它與HTML5<track></track>元素一起使用，並允許以同步方式向媒體資源（音頻或視頻）添加字幕、翻譯、標題或描述。此文本信息的存在使媒體資源更容易訪問。
有關如何開始使用此功能的說明，請查看以下資源：
<track></track>簡介我們在這裡，在本系列文章的結尾，該系列文章始於一個簡單的智力練習：“老IE消失了！讓我們慶祝吧！（……幾個小時後… …）現在怎麼辦？”。我們涵蓋了廣泛的主題，從不再需要的技術和實踐到我們現在可以自由地不做polyfill就能做到的所有新事物，無論是HTML、CSS還是原生JavaScript。我們甚至還涉及了更廣泛的主題，例如性能優化和增強安全性。
您現在應該立即開始重構所有代碼嗎？很可能不會。必鬚根據重構成本與技術債務成本之間的平衡來做出此類決定。但是，如果您要啟動一個新項目，請務必為未來構建它，而不是為過去構建它。
Internet Explorer退役後原生JavaScript開發至關重要，因為它允許開發人員創建更高效、更有效的Web應用程序。隨著Internet Explorer的停用，開發人員不再受限於通常與該瀏覽器相關的約束和兼容性問題。他們現在可以使用JavaScript的全部功能，包括其最新功能和更新，來構建更動態、更交互式和更用戶友好的Web應用程序。
在瀏覽器中啟用JavaScript是一個簡單的過程。對於大多數瀏覽器，您可以在設置或首選項菜單中找到啟用或禁用JavaScript的選項。通常，這涉及導航到“安全”或“隱私”部分並查找與JavaScript相關的選項。確保啟用它以獲得更好的瀏覽體驗。
是的，Internet Explorer和其它瀏覽器中JavaScript的工作方式存在顯著差異。 Internet Explorer具有不同的JavaScript引擎，這經常導致兼容性問題和限制。 Chrome、Firefox和Safari等現代瀏覽器使用更高級的JavaScript引擎，這些引擎支持JavaScript的最新功能和標準，從而提高性能並減少兼容性問題。
與使用庫或框架相比，使用原生JavaScript具有許多好處。它允許獲得更好的性能，因為沒有加載和解析不必要代碼的開銷。它還提供了對代碼的更多控制，因為開發人員不受特定庫或框架的約束。此外，理解和使用原生JavaScript可以使您更深入地了解該語言及其功能。
Internet Explorer的停用對JavaScript開發產生了重大影響。開發人員不再需要編寫額外或不同的代碼來確保與Internet Explorer的兼容性。這導致了更高效的開發流程以及能夠利用JavaScript的全部功能。它還導致了不同瀏覽器之間更一致的用戶體驗。
JavaScript不斷更新，並增加了新的功能和改進。一些最新功能包括用於處理異步操作的async/await、用於擴展數組或其它可迭代對象的擴展語法以及用於更簡潔函數語法的箭頭函數。這些功能可以極大地增強您的JavaScript開發，並允許您編寫更高效、更易讀的代碼。
確保瀏覽器兼容性是JavaScript開發的一個重要方面。實現此目標的一種方法是使用特性檢測，這涉及在使用特定功能之前檢查用戶瀏覽器是否支持該功能。另一種方法是使用polyfill，polyfill是為不支持它們的舊版瀏覽器提供較新功能功能的腳本。
Internet Explorer退役後JavaScript開發的未來看起來很有希望。隨著Internet Explorer的停用，開發人員現在可以專注於利用JavaScript的全部功能，而無需擔心兼容性問題。這與語言的持續更新和改進相結合，預示著JavaScript開發效率更高、功能更強大、用途更廣泛的未來。
有很多很棒的資源可用於學習更多關於原生JavaScript開發的知識。一些流行的在線平台包括Mozilla Developer Network (MDN)、freeCodeCamp和Codecademy。這些平台提供關於JavaScript的全面指南和教程，涵蓋從基礎知識到更高級主題的所有內容。
調試是JavaScript開發中必不可少的一部分。大多數現代瀏覽器都帶有內置的開發工具，可用於調試。這些工具允許您逐步執行代碼、檢查變量並查看發生的任何錯誤或異常。此外，使用良好的編碼實踐，例如編寫清晰簡潔的代碼並註釋代碼，也可以使調試過程更容易。
以上是Internet Explorer之後的本地JavaScript開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
