Internet Explorer之后的本机JavaScript开发

欢迎大家光临本系列的第三和最后一部分，致力于过时的歌曲，退休和改变了这种事件在前端开发领域。到目前为止，我们所覆盖的，可以安全地丢弃已经过时的技术和现在有沿主流浏览器全面原生支持HTML5和CSS3特性。今天，我们将专注于本地JavaScript技术和其他任何不适合在前面提到的类别。

一旦多了，大量的信贷去CanIUse.com谁被证明是一种宝贵的资源。我也将重申从上次我的声明：

这篇文章无关的决定是否要放弃对老古董支持。你和你一个人必须根据您的网站或应用程序的具体细节这一决定。

这一切虽这么说，让我们继续！

1.的JavaScript API

在本节中，我们将要经历的JavaScript功能，API和功能相当的列表。他们都有什么共同点呢？他们没有能够真正使用的过时的歌曲 ，或者需要使用各种polyfills或它们的效果必须通过其他各种框架和库来实现（如果它可以在所有完成）。在目前情况下（IE11 + EDGE），他们有原生支持内置浏览器，这意味着它们可以被用来直接开箱。

base64编码和解码（BTOA和ATOB）

Base64是Web应用的一种非常有用的工具。你们中许多人已经习惯它可能嵌入字体或图像转换成CSS。另一种常见的用法是处理通常会与传输协议干扰的各种资源。这方面的一个很好的例子是基本的接入认证，其中username:password对使用Base64编码，然后发送到服务器的包装。具有编码的原生支持/解码操作意味着他们可以做了很多更快。这里有一些资源，让你开始：

ATOB（）和BTOA（）上MDN文档
Base64.js填充工具

斑点构建

一个二进制大对象或BLOB是存储在一个数据库管理系统中的单个实体的原始数据的集合。它可以是一个音频剪辑或图象时，存储在Base64格式。或图像的集合。在许多情况下，斑点字段用于未作为严格的结构，以通过正常或多个表的模式，像一个JSON对象来表示的数据。你们当中有些人可能还记得，而不是Blob接口，即始祖BlobBuilder 。这种方法虽然被否决，但强烈建议斑点的所有操作通过新的接口发生。

最重要的是，因为这个系列是如此的相似到一个文件中，对BLOB对象的本地接口已被用作基地File()接口。其结果是，有一个名为“一滴网址”一个不错的功能，它允许开发人员创建可在任何地方使用，可以使用的文件的blob对象的URL。考虑到这一点，它的大加赞赏的是原生支持涵盖了所有的主流浏览器现在。

频道消息

通常，在不同的浏览器上下文中运行的两个脚本被禁止进行沟通彼此，避免了很多安全隐患的。有次虽然当这样的沟通，不仅有希望的，但真的有必要。这是在该通道消息API的用武之地。该接口允许我们这两个脚本，并通过双向管互相沟通。它像给每一个对讲机集合在同一个通道。整洁的，是不是？

常量和块级变量

const和let在ES6定义数据两种新方式。虽然var定义具有全局或函数范围的变量，新增加的有一个块级范围。这意味着与创建的变量const和let在范围上不限于所述一对它们在被定义括号内。

而let定义了一个变量（除范围）的行为等同于典型的变量，一个常数（ const ）是一个只读引用到一定值。它不能被重新分配，则不能被重新定义，它不能共享相同的名称作为在同一范围内的任何其他变量或函数。唯一的例外是当常数是有自己的属性的对象。这些属性未保护的改变和行为像正常的变量。

这是说，看看使用常量和块级变量在代码中的正确方法：

Console日志

最前端的开发商会同意，Web控制台是最有用的工具之一手边当你的脚本的行为不因为他们应该。然而，IE浏览器，由于其性质，是将其集成到他们的代码很慢，只有10版开始提供全面支持。现在，随着过时的歌曲退休了，没有什么作出最该功能的阻止我们。如果你需要更新你的知识，甚至发现使用控制台的新方法，看看下面的规格：

控制台上MDN

跨来源资源共享

跨域资源共享（CORS）是一个HTML5 API，它使资源从自己的域之外的请求。它描述了一组HTTP标头允许浏览器和服务器当一个特定的权限授予请求远程资源。下列资源是一个很好的起点在学习如何正确使用此功能：

网络加密API

如今，安全和隐私是两个最抢手的任何应用程序的功能，这意味着良好的（和快速）加密是真正的赞赏后。现在，所有的主流浏览器对网页加密API的一贯支持，与IE11的异常（它实现了老版规范）和Safari（这需要crypto.webkitSubtle前缀）。幸运的是，一些特定的功能（如随机值的生成）的更好实现。其结果是，它比以往来实现原生支持加密的元素更容易。下面是关于如何做正确的几个原则：

国际化

访问你的网站可以来自所有世界各地的互联网接入手段如今无处不在。至于人们更相信的东西他们熟悉的，这是一个很好的做法，目前所有的信息都在他们的语言和他们所熟悉的格式。你需要的是国际化的（也称为i18n ）和本地化 （或L10n ）。这听起来像废话给你？让我们报价奥雷利奥·德·罗萨从他的文章如何实现JavaScript的国际化（i18n）：

国际化 （也称为国际化）是创建或改造的产品和服务，使他们能够很容易地适应当地的具体语言和文化的过程。位置（也称为L10N）是适应国际化软件特定的地区或语言的进程。换句话说，国际化是适应您的软件，支持多种文化（货币格式，日期格式，等等）的过程，而本地化是实现一个或多个文化的过程。

浏览器支持是略好于它是在今年年初，Safari浏览器V10在9月加入行列。听起来很有趣，够吗？这里有一些资源，让你在正确的道路上：

处理媒体查询

自适应网页设计是高性能网站和关键功能，使得它有可能是媒体查询是否存在现行标准。 matchmedia带来了媒体的质疑，从CSS到JavaScript使开发人员优化为所有类型的设备的内容更多的灵活性。一个很好的例子是处理来自纵向到横向模式之间来回变动为手机和平板电脑。虽然是处理的API 检测设备方向的，支持是局部的大多数浏览器，而只有微软Edge提供全面支持。这里有一些让你对这个话题开始的资源：

媒体来源扩展

媒体来源扩展（MSE），而无需使用插件添加额外的功能，以视频和音频内容。这给了你这样的事情自适应流媒体，流媒体直播，视频拼接，以及视频编辑。 YouTube一直使用与其HTML5播放器MSE九月以来2013年的浏览器支持也相当不错，只有iOS的Safari和Opera Mini的缺少此功能。 IE11对基于Windows 8+使用时才全力支持。不幸的是，IE11 / Win7的用户无法从这项技术中获益。无论你是只是好奇，还是真的要开始这个API的工作，你会发现下面的资源非常有用：

突变观察

JavaScript的应用程序每天都在越来越大，越来越复杂。作为开发人员，你需要在网页上所发生的变化停留在控制，特别是对DOM树更改时间或“变异”。对于需要这种监测是不是新的，确实有已经得到了解决 - 突变事件。与此接口的问题是，随着事件的，他们都是同步的（被解雇调用时并可以防止烧等事件），并且必须被捕获或者通过DOM冒泡。这反过来，可以触发其他事件超载的JavaScript线程，并产生，在某些特殊情况下，整个级联故障，导致浏览器崩溃成碎片。

其结果是，突变事件已被弃用，并与突变观察家所取代。有什么区别，你可能会问？首先，也是最重要的是，观察者是异步的。他们不从运行忍住你的脚本。而不是在每一个突变被解雇，他们提供一批结果的主要活动完成后。更何况，你可以微调观察员观察或者所有节点或变化而变化的只是特定类别（如只改变孩子的，或者只是属性等的列表）。开始学习如何与下面的资源做到这一点：

网页浏览权限

标签浏览改变了我们的方式与网络进行交互。它的情况并不少见许多人有几十个在同一时间打开的网页。每个页面做自己的事情，他们的运行脚本，下载他们等什么资源。即使有可能在给定时间只有一个选项卡**时，所有打开的网页都消耗CPU时间和带宽。一些应用程序可能会被发送和跨定期连接接收更新。然而，如果你没有该应用在活动标签，它需要在后台每X秒更新？似乎有点浪费，不是吗？特别是在移动设备和数据计划，其中每个资源是非常宝贵的。

这就是网页浏览权限API的用武之地。该接口允许开发人员知道他们的应用程序是否处于活动选项卡或背景。让我们的应用程序做更新，我前面提到的情况。随着网页浏览权限API，你可以检测时，应用程序是在后台的，而不是做了一次更新5或10秒，你做的每60秒甚至更短。只要页面可见再次，你可以切换回更新的正常率。很酷，不是吗？

那你还在等什么？看一看下面的指南和启动应用程序的页面的可视性。你的用户会感谢你的：

网页过渡活动

你有没有使用Web表单，当你试图搬走或者关闭网页，它弹出一个消息，说您有未保存的数据吗？这是很常见的时下，您更改设置页面，配置文件等方面的细节如何在页面知道的脚本，你要离开？他们听pagehide事件。

pagehide及其合作伙伴pageshow是网页过渡活动的主角。我们已经看到上面什么的第一个主要用于。对于主要使用pageshow是，以确定是否页面已经从高速缓存或直接从服务器加载。这不是最常见的用途，但是，如果你需要任何功能，看看下面的资源：

requestAnimationFrame

在网络动画有很长的路要走，从初期<marquee>和<blink> ，通过对GIF动画，jQuery效果，目前的CSS，SVG，画布和WebGL动画。所有这些方法中的常量是需要控制动画的流动，使其尽可能顺利。

初始方法中使用setInterval和setTimeout控制动画的步骤。问题是，结果是不可靠和一致的动画往往是粗糙的。这就是为什么新的接口被设想- requestAnimationFrame 。这种方法的主要优点是，浏览器可以*匹配请求自己的绘画周期，平滑下降明显动画。连同其对应， cancelAnimationFrame ，这两种方法都是现代JavaScript动画的基础。

像往常一样，下面是一些资源，帮助您掌握此功能启动。

定时的API

在线性能是今天的主题，每个人都倾力于资源瘦下来，优化脚本和他们所有的工具，最好使用在他们的处置。有接近这个话题主要有两种方式：网络性能（网站和资源的速度有多快交付）和用户性能（应用程序本身如何快速执行）。

：网络性能是由两个API服务Navigation Timing和Resource Timing 。他们两个给所有相关的网络性能各种各样的信息，如DNS，CDN，请求和响应时间等。唯一的区别是Navigation Timing目标的HTML页面本身，而Resource Timing与所有交易的其他资源（图片，脚本，媒体等）

在用户端的表现，我们有一个API： User Timing 。这具有两个主要的概念的API的交易，称为Mark （非常详细的时间戳）和Measure （两个标记之间的间隔）。摆弄周围的这些概念允许开发者衡量他们的代码运行速度有多快，并确定需要优化的地方。不幸的是，这个API仍然不支持在Safari所以可能需要填充工具。

掌握使用这些接口成为追求一个至关重要的技能，以确保您的网站或应用的最佳性能。这就是为什么我们给你一些材料的开始学习：

导航计时
资源定时
用户计时
- 发现在SitePoint用户计时API
- 上的HTML5Rocks用户计时API
- 用户定时rum.js和UserTiming.js在GitHub polyfills

类型数组

的JavaScript类型数组是阵列状物体，并提供用于访问原始二进制数据的机制。为了获得最大的灵活性和效率，实现如下沿着两个概念分割：缓冲器（原始数据的块）和视图（谁提供上下文，其中缓冲数据可以被解释）。有一些网络API，它们使用类型数组，如WebGL的，画布2D，XMLHttpRequest2中，文件，媒体源代码或二进制的WebSockets。如果有这样的技术代码的交易，你可能有兴趣在下面的资源：

的WebSockets

我们大约频道消息谈到早前，以及它如何使两个不同的脚本直接彼此通信。 WebSockets的是类似的，很多不止于此。使用此API创建的浏览器和Web服务器之间的持久通信信道。

就像HTTP，WebSocket协议有两个版本：无担保（ ws://... ）和安全（ wss://... ）。它也考虑到代理服务器和防火墙，通过他们打开隧道。事实上，WebSocket连接开始作为一个正常的HTTP连接，确保与现有基础设施的兼容性。

的WebSockets是一个迷人的一块技术的（他们甚至有一个专门的网站），有很多东西需要学习它们。为了让您一开始，这里有一些选择的资源：

网络工作者

默认情况下，所有的JavaScript任务运行到同一个线程。这意味着，在一个页面中的所有脚本都共享同一个队列处理时间。这是很好的和简单，当处理器有单核。但是，现代的CPU至少具有双核处理器，达到了4个，6个或8在某些机型上。那岂不是很好，如果有些任务可以移到可能通过提供额外的核心处理单独的线程？这就是网络的工人被发明。

使用Web工人API，开发者可以委托一个名为脚本文件，以一个工人在一个单独的线程运行。工人回答只有创建它的脚本，通过信息沟通是双向的，可以运行XMLHttpRequest调用和使用DOM或一些默认的方法和属性就没有任何接触window对象。在异常类别，我们可以提到WebSockets （一个可分配WebSocket连接到一个工人的管理）或数据存储机制像IndexedDB 。没有什么比拥有自己的爪牙处理次要任务，而主线程专注于运行整个应用程序。

为了让您使用这一功能（包括功能，可用于网络工作者类的列表）开始，检查下面的资源：

XMLHttpRequest的高级功能

的通过XMLHttpRequest预示着网络发展的新时代。数据现在可以浏览器和服务器之间，而无需重新加载整个页面交换。 AJAX是新标准，允许一个页面的应用程序的存在，每个人都喜欢今天。

这是正常的，这样的一个有用的技术将进一步推进。这是XHR如何获得了新的功能，例如上传文件，在传输进度或将表单数据直接发送信息的能力。而所有这些功能（在IE11或旧版本的Android的情况下，除了少数例外）都支持过时的歌曲，退休后的主流浏览器。

有关详细信息，请随时仔细阅读以下资源：

2.其他功能

现代Web不仅仅是HTML，CSS和JavaScript。有许多看不见的（和幕后）英雄劳作在幕后使我们的在线体验尽可能大。下面，我们将讨论几个这样的特征，正如上面的，不能在浏览器过时的歌曲使用（谁是臭名昭著的安全漏洞和缺乏现代功能的支持）。

非阻塞的JavaScript加载与“异步”和“延迟”

每个web开发得知脚本是“负载阻塞”，直到他们完成加载将持有整个页面人质。我们都记得在推荐之前加载jQuery的权</body> 这样的做法是在单页的应用程序，在网站的所有行为是由JavaScript驱动的情况下，虽然没用。它发送我们又回到了起点。

但事实是，在大多数情况下，你的网站或应用程序需要只是一个所有的JavaScript IT负载的一部分。其余部分将需要在路上或他们正在做的事情，不影响DOM。最明显的方法是只加载关键脚本以正常的方式和方式休息，不会影响应用程序以消极的方式。事实上，有两个这样的加载方法。

第一种是使用defer属性，用于标记一个脚本，不会影响DOM，并意味着文件已经被解析后执行。在大多数情况下，这些脚本处理用户的交互，使他们安全地装载这种方式。第二个使用async属性和标记的脚本，而在并行加载，将尽快在下载执行。谁也不能保证，虽然该加载顺序将是一样的执行顺序。

有了这两个参数带来的所有好处，他们正在成为在提高网站和应用程序性能的重要工具。有一个看看下面详细了解如何以及何时使用这一技术的资源：

内容安全策略

从一开始，在网络上的安全性是“同根同源”的模型周围建，这意味着从同一个域只脚本可以与给定的页面交互。随着时间的推移，虽然，我们不得不向第三方脚本集成到我们的网页：从CDN的JavaScript库，从Facebook，Google+或Twitter和其他类似案件的社交媒体小部件。这意味着我们打开大门，让“客人”的脚本运行到我们的隐喻庭院。问题是当恶意脚本滑行内部以及和正在就像其他执行-的攻击方法，我们都知道的跨站点脚本 XSS或。

内容安全策略是打击XSS作斗争的主要武器。该机制包含了一组指定脚本允许执行，从那里可以加载资源，如果它可以运行内嵌样式或脚本等政策和指令。 CSP是基于白名单，这意味着在默认情况下都被拒绝，只有指定的资源可以被访问。这意味着，当规则微调，即使恶意脚本插入到我们的网站，它不会被执行。

这里有一些资源，这将有助于你理解这个机制更好：

HTTP / 2协议

从一开始，网络已在HTTP协议之上运行。然而，虽然第一个已经大大进化，HTTP仍大多是不变的。在现代的网站和应用程序的复杂的生态系统，HTTP可以是一个性能瓶颈。当然，也有可以优化工艺技术和做法，但只有这么多可以做。

这就是为什么该协议的第二次迭代，命名为HTTP/2 ，开发，基于谷歌SPDY协议。它被批准在2015年2月和规范已作为RFC 7540在五月2016年至今的主流浏览器都支持HTTP / 2只通过加密连接，并极有可能将保持这样可预见的未来，鼓励网站所有者切换到HTTPS。

HTTP / 2的通过是在不改变某些配置设置的一个简单的事情。一些用于增强对HTTP性能的最佳实践可以对性能比HTTP / 2的影响。要了解，如果你的网站是准备好HTTP / 2，您可以咨询以下资源：

资源提示：预取

Web性能是所有时下的热潮，并有很好的理由。大家都在外地工作的人都知道，一个页面的加载时间一个很好的协议采取的是资源下载。那岂不是很好，如果一个页面加载预紧力资源，为接下来的步骤后，一个可以使用的时间？这正是资源的提示是。

资源的提示是一系列指令，告诉浏览器，使可用的，提前的时间，这将需要特定资源以后的道路。该列表包含五个提示，如下所示：

DNS预取
PRECONNECT
预取
预紧
预渲染

出于这五个可能的选项中，只有一个在这一刻好浏览器支持prefetch 。这提示告诉浏览器缓存文件，用户最有可能在当前页之后的请求。这限制了它的使用可以被缓存的元素。与其他类型的资源的使用，它不会工作。

如果你有兴趣这个主题，这里的资源来提供更多详细信息的列表：

严格传输安全

HTTPS正在成为浏览和越来越多的网站只接受安全连接的新标准。（关于HTTP）正常连接通常会被重定向到HTTPS版本，而事情像往常一样。然而，这种方法很容易受到“中间人中间人”攻击，其中重定向发生，而不是你想要的网站（通常是一个银行网站）的恶搞克隆为了窃取你的登录凭据。

这就是严格传输安全头发挥了作用。您连接到使用HTTPS所需网站的第一次，头被发送到浏览器。您下次连接时，即使你只使用URL的HTTP版本，浏览器会直接进入到HTTPS版本，而无需通过重定向循环下去。由于没有连接上的HTTP制作，攻击前面所述是不可能发生的。

有关严格传输安全性头更多详情，请访问以下网站：

HTTP严格，运输和安全性上的MDN

设备像素比

Window.devicePixelRatio是一个只读属性，返回一个物理象素的电流显示装置一个CSS像素的尺寸上（垂直）大小的比率。这样，开发者可以检测高密度屏幕（如苹果或高端的Android屏幕视网膜显示器）。有媒体查询和MatchMedia（我们上面所讨论的）一起使用，这个属性允许最佳的体验交付优化的资源。

Window.devicePixelRatio上MDN

网络视频文本轨道

网络视频文本轨道（或WebVTT插入）是用于标记的多媒体资源的文本字幕格式。它与HTML5一起使用<track>元件和使得能够字幕，翻译，字幕或描述存在下以同步方式的媒体资源（音频或视频）。这个文本信息的存在使得媒体资源很多更方便。

有关如何开始使用此功能启动说明，请参见以下资源：

包装的东西最多

我们在这里，在这个系列的文章，开始作为一个简单的智力活动的结尾：“ 过时的歌曲已经一去不复返了！狂欢吧！ （...小时后......）现在怎么办？”。我们涵盖了广泛的议题，从已不再需要所有的新东西，我们现在可以不用polyfills*地做技术和做法，无论是HTML，CSS或本地JavaScript。我们甚至谈到了类似的性能优化和加强安全更广泛的话题。

如果你只是跳现在开始重构所有的代码？最有可能不是。这样的决定必须根据与重构技术的债务成本的成本之间的平衡来考虑。但是，如果你正在开始一个新的项目，通过各种手段，构建它的未来，而不是过去。

From: https://www.sitepoint.com//native-javascript-development-after-internet-explorer/