If you're a web developer and you suffer from migraines, it's probably because cross-browser compatibility. Hopefully this post can serve as a panacea.
Join the DZone community and get the full member experience.Join For Free
- Memory Leaks are one of the common problems faced by developers. Memory leak simply means that memory that was previously being used by the application is no longer being used. However, for some reason (e.g. incorrect handling of global variables, out of DOM references, etc.); the allocated memory is not returned back to the ‘free’ pool of memory. Some of the common reasons for memory leaks are incorrect handling of global variables and out of DOM references. ‘Profiling Tools for Chrome’ can be used for memory profiling as well as identifying memory leaks. Below is a sample snapshot of Chrome Memory Profiling in action.
- Variables are used as per their scope (local and global). Ensure that you use consistent naming conventions for different types of variables so that it is easier to maintain the code. Ensure that your source code does not have any syntax issues.
- Implementing a time-consuming task in a synchronous operation could slow down the performance of your web page/web application. Ensure that you move that logic to an asynchronous operation so it does not hog the CPU. Since the operation is asynchronous in nature, you have to be careful while using variables used in that operation since they might not reflect the latest value (as the async operation execution might still be in progress). Developers are advised to use the
promiseobject that returns the status (success/failure) of the completion of an async operation. Sample code with
promiseis shown below:
- Incorrect use of ‘functions inside loops’ results in the breaking of functionality.
There are many libraries (native and third-party) that might not be supported by all browsers. Before using a library, it is recommended that you do a thorough analysis in terms of browser support, feature support, etc. You should also check the ‘development history’ of the library as it shouldn’t happen that there are very few updates to the library and once you use the library, there are no updates to it!
Using User Agents and Browser Sniffing
Every browser has a user-agent string which identifies the browser that the user has used in order to access your web site/web application. Developers use browser sniffing code in order to tweak the UI/UX functionalities based on the browser in used. Some of the common user-agent strings are mentioned below.
Developers can use navigator.userAgent.indexOf(‘user-agent’) where the user-agent is the user-agent string (mentioned in the table above). Below is a snapshot of code where developers can come up with functionalities based on the type of browser.
There are many new features that are implemented under ECMAScript 6 (ES6)/ECMAScript Next standards and many old browsers do not support these features. For example, the
Based on the target audience, you should provide support for all the latest browsers and some older versions of browsers (depending on your initial market study). You can check out these web analytics tool that can help you understand your customers in a better way. You can also opt for conditional execution so that there is always a fallback mechanism in place in case the user is using an old browser. There are many old versions of browsers that do not support WebRTC (video conferencing), Maps API, etc. In the below example, we are using the Geolocation API; the geolocation property of the
navigator object is used for that purpose. If the browser does not support the Maps API, the user is given an option to use Static Maps (as a fallback option).
promise/other ES6-based features by simply using the equivalent polyfill for that feature.
startsWith feature that was introduced in ES6.
var x = 6 * 5; debugger; /* Logic here */
Browser Developer Tools
In case you are using Chrome or Firefox, just right-click in the window after loading the code and click on ‘Inspect Element.’ Browser Developer Tools also have the ‘Debugger tab’ where the developer can insert breakpoints, check the callstack, add variables to watch a window, etc.
Below is the snapshot of the Developer Tools built into the Firefox browser.
Developers can also use the Console API for printing logs during the development phase. It is recommended that different kinds of console logs are used for different purposes. For example,
console.log() can be used for debugging,
console.assert() can be used if you want to issue an assert, and
console.error() can be used in error scenarios.
Code Editor Plugins
- Incorrect casing/spelling being used for variables, function names, etc. Many experienced developers accidentally make use of built-in functions with the wrong casing/spelling. For example, you might use
- While performing a code review, the reviewer should make sure that there is no code after the
returnstatement since that code is redundant (or unreachable).
- Objectnotation is different from normal assignments and you need to check whether the member names of the object are separated by a comma (
,) and member names are separated from their values by colon (
- Though this is a very basic practice, check whether the semicolon (
;) is being used at the right place.
- Always have declarations at the top.
- Follow proper naming conventions for variables, functions, etc.
- Use comments consistently throughout the code.
- Declare the local variables using the
- Always initialize variables.
- Do not declare String, Number, or Boolean objects.
- Always have a default case in switch... case statements.
- Have a close look at usage of '==' and '===' operators. Ensure that they are being used in the right place.
- Place scripts at the bottom of the page.
There exist multiple JS frameworks that facilitate development of cross-browser compatible websites. Some of the most renowned ones are:
Published at DZone with permission of Harshit Paul, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.