如果您是Web开发人员并且患有偏头痛，那可能是因为跨浏览器兼容性。
在所有主要的Web技术中，没有其他技术像JavaScript那样被证明具有跨浏览器兼容性。尽管纯HTML和CSS取得了进步，但如果没有它，您无法轻松构建Web应用程序或网站。
在本文中，我们将研究JavaScript的跨浏览器兼容性问题以及解决问题的方法。在我们开始讨论实际主题之前，重要的是我们要研究JavaScript的基础和演变。
潜入JavaScript
在过去十年中，随着各种设备（桌面设备，智能手机，平板电脑等）的出现，网络开发发生了迅速的变化。用于上网的网络浏览器数量也在增加。这给设计人员和开发人员带来了不同的挑战，因为不同的浏览器可以以不同的方式解释CSS和HTML代码。背后的原因是每个浏览器都有一个独特的渲染引擎，负责以与其他浏览器不同的方式呈现Web元素。CSS，HTML和JavaScript是三层渐进增强。 渐进式增强 是一种用于创建跨浏览器兼容的Web应用程序的技术，其中最高优先级是核心网页，而其他复杂的附加组件和功能仍然是次要的。当在20世纪90年代引入JavaScript时，由于每个浏览器开发公司都有自己的脚本实现，因此存在主要的跨浏览器兼容性问题，这主要是为了获得市场主导地位。虽然现在不会出现这样的问题，但处理JavaScript的跨浏览器兼容性问题仍然会给开发人员带来噩梦。
当开发人员使用不支持旧浏览器的网页中的功能，使用不正确的DOCTYPE或使用不完整/不正确的浏览器嗅探代码实现时，主要会出现JavaScript代码问题。除非实现用于处理JavaScript（或其他脚本语言）的标准机制，否则JavaScript的跨浏览器兼容问题将继续存在。让我们看看这些与JavaScript的跨浏览器兼容性问题，并了解一下修复它们的机制。
常见的JavaScript问题
在我们研究JavaScript的跨浏览器兼容性问题之前，我们必须先了解一些常见的JavaScript问题。假设您已经了解JavaScript并且具有JavaScript的先前实现经验。
- 内存泄漏 是开发人员面临的常见问题之一。内存泄漏只是意味着不再使用应用程序以前使用的内存。但是，由于某种原因（例如，错误处理全局变量，DOM引用等）; 分配的内存不会返回到“免费”内存池。内存泄漏的一些常见原因是不正确地处理全局变量和DOM引用。'用于Chrome的分析工具'可用于内存分析以及识别内存泄漏。以下是Chrome内存分析的实例快照。
- JavaScript按照文档中出现的顺序执行代码。因此，仅在加载代码时引用代码变得很重要。如果在加载代码之前引用代码，代码将导致错误。
- 与其他语言不同，如果将“错误数量的参数”传递给JavaScript中的函数，则不会引发错误。如果这些参数是可选的，那么您的代码将毫无问题地执行。在函数中使用这些参数时可能会导致问题，而不使用它们会改变功能。建议使用统一的命名约定，以便轻松识别此类问题。
- 等式运算符 是JavaScript的基础，但它们必须精确使用。'assign / equals operator'（=）和'strict equals operator'（==）之间存在差异。这些主要用于条件语句，并且意外地使用 = 而不是 == 可能导致功能问题。需要进行彻底的代码演练，以便查看这些愚蠢而又代价高昂的错误。
- 变量 按其范围（本地和全局）使用。确保对不同类型的变量使用一致的命名约定，以便更容易维护代码。确保您的源代码没有任何 语法问题。
- 在JavaScript中添加DOM元素被认为是一项代价高昂的操作。在某些情况下，您需要连续添加DOM元素，但这样做并不是一个好习惯。在这种情况下，您可以使用文档片段，因为它具有卓越的效率和性能。
- JavaScript数组中的起始索引 为0而不是1.如果要创建包含10个元素的数组，则应声明索引为9而不是10的数组。引用超出绑定的数组元素将导致错误。
- 在同步操作中实现耗时的任务可能会降低网页/ Web应用程序的性能。确保将该逻辑移动到异步操作，这样就不会占用CPU。由于操作本质上是异步的，因此在使用该操作中使用的变量时必须要小心，因为它们可能不会反映最新值（因为异步操作执行可能仍在进行中）。建议开发人员使用promise 返回异步操作完成状态（成功/失败）的 对象。示例代码 promise 如下所示：
- 错误地使用'内部循环函数'会导致功能中断。
常见的跨浏览器JavaScript问题
到目前为止，我们已经研究了一些基本的JavaScript问题; 让我们看一下解决这些问题的一些机制：
Library使用
所有浏览器可能都不支持许多库（本机和第三方）。在使用库之前，建议您在浏览器支持，功能支持等方面进行全面分析。您还应该检查库的“开发历史记录”，因为不应该发生很少的更新。图书馆，一旦你使用图书馆，它没有更新！
使用用户代理和浏览器嗅探
每个浏览器都有一个用户代理字符串，用于标识用户为访问您的网站/ Web应用程序而使用的浏览器。开发人员使用浏览器嗅探代码来根据所使用的浏览器调整UI / UX功能。下面提到了一些常见的用户代理字符串。
开发人员可以使用 navigator.userAgent.indexOf（'user-agent'） ，其中user-agent是用户代理字符串（在上表中提到）。下面是代码的快照，开发人员可以根据浏览器的类型提出功能。
JavaScript特性的特征检测
在处理错误和无法识别的功能时，JavaScript不被视为HTML和CSS。当遇到不正确使用的语法，缺少大括号或分号等时，JavaScript肯定会发出错误信号。
在ECMAScript 6（ES6）/ ECMAScript下实现了许多新功能Next标准和许多旧浏览器不支持这些功能。例如，
promise 我们之前讨论过的 对象不适用于旧版本的浏览器。'Typed Arrays'是另一个例子。“箭头函数”是ES6中引入的一个非常有用的功能，它提供了一种在JavaScript中编写函数的简洁方式。箭头函数内的上下文是静态定义的。现代JavaScript开发人员大量使用此功能，但旧浏览器/旧版本的浏览器（如IE，Firefox，Chrome等）也不支持此功能.Safari浏览器不支持“箭头功能”。
那么，您如何确保JavaScript功能在旧版浏览器上无缝连接？解决方案是验证旧浏览器是否支持所使用的功能。您可以使用像caniuse这样的在线资源来验证相同的 内容 ; 只需键入功能名称即可显示支持该功能的浏览器版本。例如，下面是“箭头功能”的情况。红色条目表示不支持该功能。
根据目标受众，您应该为所有最新浏览器和一些旧版本的浏览器提供支持（取决于您的初始市场研究）。您可以查看这些 网站分析工具 ，它可以帮助您更好地了解您的客户。您还可以选择条件执行，以便在用户使用旧浏览器时始终存在回退机制。有许多旧版本的浏览器不支持WebRTC（视频会议），Maps API等。在下面的示例中，我们使用Geolocation API ;
navigator 对象的geolocation属性 用于此目的。如果浏览器不支持Maps API，则会为用户提供使用静态地图的选项（作为后备选项）。
开发人员必须简单地导入许多JavaScript库才能使用其功能。关于用法的好处是开发人员不再需要从头开始编写所有代码，因为库已经支持这些功能。
JavaScript Transpiling
如果您想为旧浏览器提供支持，但又不想使用浏览器嗅探，功能检测等，可用的便捷选项称为转换。简单来说，转换有助于将可能使用最新ES6 / ECMAScript功能的JavaScript代码转换为可在旧版浏览器上运行的代码。
您可以使用像Babel这样的流行JavaScript转换工具 ，只需在左侧输入最新的JavaScript代码，然后在右侧输出转换后的代码。
Polyfills
与增强功能和缩短开发时间的第三方库类似，polyfill也包含可在项目中使用的第三方JavaScript文件。然而，使polyfill与库不同的是polyfill能够提供根本不存在的功能。例如，您可以使用polyfill来支持WebRTC /
promise/其他基于ES6的功能，只需使用该功能的等效polyfill即可。
您可以查看 此列表 ，其中包含有关JavaScript功能的polyfill等效项的详细信息。我们来看一个例子吧。下面显示的是一个代码片段，我们使用polyfill来支持startsWith ES6中引入的 功能。
解决常见的JavaScript问题
JavaScript调试器
断点通常用于调试目的，当命中断点时，执行将暂停，开发人员可以查看各种详细信息，如调用堆栈，监视变量，内存信息等.JavaScript有一个关键字 debugger ，当关键字是遇到了，JavaScript代码的执行停止了。这类似于在代码中插入断点。
或者，您也可以使用传统的调试方法在Chrome中使用JavaScript控制台来调试代码。
Browser Developer Tools
浏览器开发人员工具可用于删除JavaScript代码中的警告和错误。它对调试代码也很有用，因为开发人员可以在代码中的特定位置插入断点。
如果您使用的是Chrome或Firefox，只需在加载代码后右键单击窗口，然后单击 “检查元素”。 Browser Developer Tools还有 “Debugger选项卡” ，开发人员可以在其中插入断点，检查callstack，添加变量以观察窗口等。
以下是Firefox浏览器内置的开发人员工具的快照。
开发人员还可以使用Console API在开发阶段打印日志。建议将不同类型的控制台日志用于不同目的。例如，
console.log() 可用于调试， console.assert() 可以使用 ，如果你想发出断言，并且 console.error() 可以在错误方案中使用。
代码编辑器插件
有许多编辑器具有内置和可*载下**的linter插件，可用于纠正JavaScript代码中的警告和错误。Atom是一个流行的开源IDE，具有用于linting代码的插件。开发人员可以安装lint，jslint和linter-jshint插件来提示他们的源代码。这些插件会在开发窗口底部的单独面板中发出代码中出现的警告和错误。下面是Atom IDE的快照，它在源代码中显示警告。Atom IDE可以从这里*载下** 。
Linters
Linters用于确保代码具有更好的质量，正确对齐，并且代码中没有错误。无论JavaScript文件的大小如何，JavaScript的Llinters都有助于维护代码质量。Linters可以根据不同级别的错误/警告报告进行自定义。一些JavaScript的广泛使用棉绒是 JSHint 和 ESLint。
解决一般JavaScript问题
除了我们到目前为止讨论的JavaScript问题，开发人员还需要解决许多一般性问题。一些常见问题是：
- 用于变量，函数名称等的错误的套管/拼写。许多有经验的开发人员意外地使用具有错误的套管/拼写的内置函数。例如，您可以使用 getElementByClassName() 而不是getElementsByClassName()。
- 在执行代码审查时，审阅者应确保在return 语句之后没有代码， 因为该代码是冗余的（或无法访问）。
- Object 与普通赋值不同，您需要检查对象的成员名是否用逗号（,）分隔，成员名是否用冒号（:）分隔。
- 虽然这是一个非常基本的练习，但请检查分号（;）是否在正确的位置使用。
JavaScript开发的最佳实践
下面给出了一些JavaScript开发的最佳实践：
- 始终在顶部有声明。
- 遵循变量，函数等的正确命名约定。
- 在整个代码中始终使用注释。
- 使用var 关键字声明局部变量 。
- 始终初始化变量。
- 不要声明String，Number或Boolean对象。
- 在switch ... case语句中始终有一个默认大小写。
- 仔细看看= 和 ==运营商的使用情况 。确保它们在正确的位置使用。
- 仔细看看= 和 ==运营商的使用情况 。确保它们在正确的位置使用。
- 将脚本放在页面底部。
用于克服跨浏览器兼容性问题的JavaScript框架
众所周知，您的网络应用或网站会出现跨浏览器兼容性问题，无论其规模或复杂程度如何。正如我们从上面提到的观点看到的，当JavaScript使用不当时，跨浏览器兼容性问题可能会被放大。但这并不意味着你应该避免使用JavaScript！
存在多个JS框架，便于开发跨浏览器兼容的网站。一些最着名的是：
- React.js
- Angular
- Vue.js
- Ionic
- Ember.js
这些框架有助于解决JavaScript的跨浏览器兼容性问题。它们还可以帮助开发人员创建一个兼容不同浏览器（Google Chrome，Mozilla Firefox，Safari等）的单页面应用程序。