JavaScript跨浏览器兼容问题以及如何解决

A good application or website, of late, has become much more than a static collection of division elements. Modern websites are interactive, high performing applications that help in completion of complex end to end business processes. JavaScript has a major contribution in bringing us to this level. It is hugely popular among developers yet it not supported equally by all browsers. Developing cross browser compatible webpages running javascript sometimes a challenge. To help developers in this challenge was one of the driving force behind our development of browser compatibility testing platform.

JavaScript Cross Browser Compatibility

Various reasons such as using incorrect DOCTYPEs, vendor-specific CSS styling and outdated browser correction have been cited for the same and some possible solutions have also been proposed.

JavaScript开发人员从未对浏览器功能给予太多关注，因此，只要出现这种语言，就会出现JavaScript错误。 就正确支持JavaScript而言，甚至某些非常流行的Web浏览器也落后一两年。

所有浏览器对脚本的处理方式都不同。 因此，所有报告JavaScript错误的方式都不同。 不幸的是，直到所有网络浏览器开发人员就处理JavaScript或其他任何脚本语言的一套标准达成共识，我们才会看到JavaScript错误。

关于相同的更多说明，在这里，我们将首先讨论一些常见的JavaScript问题，然后特别讨论跨浏览器的JavaScript问题。

Solving Common JavaScript Problems

使用短绒 遵循HTML和CSS的脚步，Linters可以为您提供更好的质量和更少的错误代码。 他们还会显示有关不良做法的警告，并且可以对其进行严格或宽大的定制。

üsing The JavaScript Debugger And Other Browser Developer Tools
Browser Developer Tools have been found quite helpful in debugging JavaScript. For starters, the JavaScript console will report errors in your code. A distinguishing feature of such tools is the ability to add breakpoints to code. At breakpoints, you can conveniently judge the environment in its current state and see what is going on and what course of further actions is needed.

其他一些性能问题 使用Browserify之类的工具制作一捆脚本可以节省加载不必要的JavaScript的麻烦。 此外，还发现减少HTTP请求的数量对于提高性能非常有效。 在使用API​​时，建议在不积极使用API​​功能时将其关闭，因为它们确实会增加电源负担。 同样，动画对性能的要求可能很高。 许多JavaScript库提供由JavaScript编程的动画功能，但是更好的方法是使用本机浏览器功能来制作动画。

Solving Cross Browser JavaScript Problems

Feature Detection
HTML and CSS are known for their permissive nature but JavaScript doesn’t have much room when it comes to errors. If the JavaScript engine spots a mistake or unrecognized syntax, most probably it will display an error message. A number of modern features of the language do not work in old browsers. ‘Promises’ and ‘Typed Arrays’ are two good examples of the same. Similarly, ‘Arrow Functions’ lend a shorter and more convenient syntax for writing anonymous functions. However, Internet Explorer and Safari do not support it and if you are using it in your code, it is likely to cause you problems.

这个想法是首先运行一个测试，以判断活动浏览器是否支持某个功能。 接下来是代码的有条件执行，以为所有浏览器提供所需的体验，无论它是否支持该功能。

Using Libraries
When choosing a library for coding, the developer must make sure that it works across the set of browsers you want the application to support, and test the implementation thoroughly. Additionally, you should make sure that the library is popular and well-supported, and isn’t likely to go out of fashion anytime soon!

填充胶 实际上，Polyfill是一段代码或一个插件，可提供浏览器本应支持的技术。 它们通常由外部JavaScript文件组成，您可以在自己的项目中随时使用它们。 但是，它们与库有很大不同。 一方面，库往往会补充现有功能并为开发人员带来更轻松的生活，而另一方面，polyfills提供根本不存在的功能支持。

开发人员在想使用现代JavaScript功能时已经开始探索的另一个选择是将具有ECMAScript 6 / ECMAScript 2015功能的代码转换为与旧版浏览器兼容的版本。 这称为JavaScript Transpiling。

错误的浏览器嗅探代码 Web浏览器具有用户代理字符串，其功能是确定浏览器是什么。 回到以前，当Netscape或Internet Explorer曾经是唯一的选择时，开发人员利用“浏览器嗅探代码”来找出用户所使用的浏览器，并为其提供合适的代码以在其上工作。

Cross browser compatibility is no longer an option for developers. It is an essential part of the development process and demands equal attention (if not more!) as styling or scripting. JavaScript is simple. Just a little bit of attention to the details and you are all set to launch a rocking app that will run perfectly well on all available platforms!

Source: LambdaTest Blog

from: https://dev.to//lambdatesting/javascript-cross-browser-compatible-issues-and-how-to-solve-them-oe8