How to test and optimize JS scripts. Checking accessibility for people with disabilities

3.6 out of 5

Hi all!

Today we will look at how you can test the performance of your JS code and, accordingly, optimize it.

A couple of months ago I wrote an article about, in which we looked at how to use this very console. Today we will use the console.profile() method and see how it can be used to test and then improve scripts.

First, let's create a small HTML document that will contain several elements and the code that we will test.

Testing the performance of JS scripts

Some text

• Some element with text

The code itself will be placed between console.profile() and console.profileEnd() .

It often happens that the same scripts are loaded for all pages of a site, so sometimes the necessary elements may not be present. Even though jQuery will not execute code for non-existent elements, it is still better to check for the existence of elements. Let's look at two code options and pay attention to their execution time. The first code doesn't do the check:

Console.profile();


$("#mainItem");
console.profileEnd();

As a result of executing this code, we get this picture in the Firebug console:

The second code checks whether the elements on which the action needs to be performed exist:

Console.profile() ;
var ele = $("#somethingThatisNotHere");
if (ele) (
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();

And it outputs this to the console:

As a result, we conclude that it is better to check for the existence of an element - the execution speed will be greater. But this does not mean that you need to check everything: usually, there is a main element of the group, without which all the others cannot exist anyway. This is what needs to be checked.

Most likely you have read mine. If not, then read it. There I talked about how browsers parse selectors and which selectors work at what speed. In short, the id selector works the fastest, and the universal ones work the slowest.

So let's do an experiment. Please note that script execution speeds may differ by different computers and browsers.

First, let's try to select elements by class:

Console.profile() ;
$(".selected");
console.profileEnd();

Console.profile() ;
$("li.selected");
console.profileEnd();

Result 0.291ms - decreased by 0.027ms. Now let's clarify the selector a little more: the elements we need must be inside the container with id="someList" :

Console.profile() ;
$("#someList .selected");
console.profileEnd();

0.283ms is a slight improvement. Let's clarify the selector with the name of the tag:

Console.profile() ;
$("#someList li.selected");
console.profileEnd();

We got 0.275ms. Now let’s select the element directly by id just for fun:

Console.profile() ;
$("#mainItem");
console.profileEnd();

0.165ms is our new record. Now I think it’s clear how best to write selectors.

Sometimes the code may contain constructions like:

// Some code
$(element).doSomething();

// Then more code
$(element).doSomethingElse();

// And more code
$(element).doMoreofSomethingElse();

Never do this. One item is requested over and over again. This is too expensive in terms of performance.

Let's take our sandbox and carry out some similar process in it:

Console.profile() ;
$("#mainItem").hide();
$("#mainItem").val("Hello");
$("#mainItem").html("Hello!");
$("#mainItem").show();
console.profileEnd();

The above code can also be done as a chain:

Console.profile();
$("#mainItem").hide().val("Hello").html("Hello!").show();
console.profileEnd();

When using a chain, the element is requested once and then a reference to it is passed to the methods. This reduces execution time.

You can also cache an element and perform actions on the already cached one:

Console.profile() ;
var elem = $("#mainItem");
elem.hide();
elem.val("Hello");
elem.html("Oh, hey there!");
elem.show();
console.profileEnd();

As you can see from the examples, caching and the use of action chains reduces script execution time.

DOM (Document Object Model) operations, such as getting or inserting elements, are known to be very resource-intensive. Let's see how we can speed up these operations.

No matter how strange it may seem, there are still users who disable JavaScript. And most Webmasters simply ignore them, however, sometimes you want to give advice so that the user can enable JavaScript. And here’s how to check: “Is JavaScript enabled?”, and if not, then display a line asking to enable it, I’ll tell you in this article.

The code below must be placed inside the body tag:

document.write("You have JavaScript enabled!");

You have JavaScript disabled...

Let me explain this code a little. If the user has JavaScript enabled, the write() method will work and print a string. If JavaScript is disabled, then the entire script tag will be ignored. However, next comes the noscript tag. This tag contains elements that will be shown by the browser if JavaScript is disabled. That is, the contents of the noscript tag are shown when JavaScript is disabled, but when enabled, the user does not see noscript.

It is in this simple way that Webmasters often write: " Please enable JavaScript", or they display some beautiful pictures with a similar request, or something else, because inside the noscript tag you can place any HTML tags. And now you can apply the acquired knowledge on your website, because it’s no secret that things are wrong now It's easy to find a site that doesn't use JavaScript at all.

Checks html code, either specified via a link to a page, or simply as an uploaded file or copied text. Gives a list of comments with recommendations for correcting them.
http://validator.w3.org/

Checks document styles or a style sheet located in a separate file.
http://jigsaw.w3.org/css-validator/

Checks that RSS and Atom feeds are working correctly.
http://validator.w3.org/feed/

Highlights errors on a given Page URLs e.
http://webmaster.yandex.ru/spellcheck.xml

Shows errors in the text copied into the verification window.
http://api.yandex.ru/speller/

Shows the structure of a web page. Relevant for checking HTML5 documents. The Cyrillic alphabet does not display correctly (:.
http://gsnedders.html5.org/outliner/

IN free version shows up to 10 pages on the Internet with partial text matches with your page.
http://www.copyscape.com

Checks the uniqueness of the text entered into the form. In the free version, you can wait for results.
http://www.miratools.ru/Promo.aspx

Checks the uniqueness of both the entered text and the text at the given URL, shows the level of uniqueness as a percentage. Has its own verification algorithm.
http://content-watch.ru

Desktop programs for checking the uniqueness of content from copywriting exchanges. They work for a long time, but with high quality. Etxt has versions for three operating systems: Mac, Linux and Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/

Shows sites with similar content and similar internal structure.
http://similarsites.com

Checks for signs of the most famous cms.
http://2ip.ru/cms/

Evaluates the ability to view the page from mobile devices and displays a list of comments and errors.
http://validator.w3.org/mobile/

Checking the site's usability for Google phones.
https://www.google.com/webmasters/tools/mobile-friendly/

Shows the site loading speed on mobile devices.
https://testmysite.withgoogle.com/intl/ru-ru

Exit emulator site with mobile phone. Shows the site through the eyes of the selected model.
http://www.mobilephoneemulator.com/

Page verification service for the visually impaired. Available online and as a plugin for Firefox.
http://wave.webaim.org/

Shows site text close to what the search indexer sees.
http://www.seo-browser.com/

Lynx text browser distribution for win32 systems. Before use, you need to edit lynx.bat, indicating in it the path to the directory with lynx.
http://www.fdisk.com/doslynx/lynxport.htm

Removes all markup and shows page text, meta tags and title tags, number of external and internal links. Shows a preview of the page in Google.
http://www.browseo.net

Shows a list of outgoing links for a URL and checks their responsiveness. It can check recursively, that is, move from one document to another independently.
http://validator.w3.org/checklink

Freeware tool for checking broken links. To work you need to install it on your computer. Recursively scans the site, makes reports, can be useful for creating a site map.
http://home.snafu.de/tilman/xenulink.html

Scans up to 500 website pages in the free version. Checks the number of external and internal links. Displays information about scanned pages: nesting, response codes, titles, meta information and headings.
http://www.screamingfrog.co.uk/seo-spider/

The program scans the site, builds a matrix of internal links, adds external (incoming) links from given URLs and, based on this data, calculates the internal weights of the site's pages. The program can be used to find external (outgoing) links for a list of website page URLs.

Checks server response codes, predicts page loading speed depending on the size of its data in bytes, shows content html tag head, internal and external links for a page, the contents of the page through the eyes of a search robot.
http://urivalet.com/

Checks server response codes. Makes it possible to check redirects (response codes 301, 302), Last-Modified header, etc.
http://www.rexswain.com/httpview.html

Shows the volume and content of data transferred when the page is loaded.
http://www.websiteoptimization.com/services/analyze/

Checks redirects, use of the canonical attribute, meta tags, and some aspects of site security. Gives recommendations for improving page loading.
http://www.seositecheckup.com

WHOIS service of the RU center domain registration center. Provides information on IP addresses and domains around the world. Sometimes it freezes.
https://www.nic.ru/whois/?wi=1

Whois service from RosNIIROS (RIPN). Provides information for domains in the RU zone and IP addresses from the RIPE database (Europe).
http://www.ripn.net:8080/nic/whois/

Determines where the domain is hosting and also shows the site's IP address.
http://www.whoishostingthis.com

Checking whether the IP address is included in the blacklist for sending emails.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/

Checking MX records for a domain. Examination SMTP servers for the domain. Checking IP in mailing lists.
https://mxtoolbox.com/

Search the database of registered trademarks in the USA.
http://tmsearch.uspto.gov/

Checks the availability of site pages for indexing by the Yandex robot.
http://webmaster.yandex.ru/robots.xml

Checks the correctness of the robots.txt file.
https://www.websiteplanet.com/webtools/robots-txt

Monitoring site availability. Allows you to connect one website for free with minimal verification options.
http://www.siteuptime.com

Checking site loading speed. Sends a report by email. It has paid services monitoring site availability.
http://webo.in

Checking the loading speed of website pages.
http://www.iwebtool.com/speed_test

Service showing keywords for a site for which it is in the TOP 20 (top twenty) Google results over time. Data on search and advertising traffic.
http://www.semrush.com/

Position in TOP50 Yandex and Google. Website Tits and PR home page, presence in important directories, visibility in the top for RF queries.
http://pr-cy.ru/

Checking the trustworthiness of the site. A service that claims that it measures trust for Yandex (no one can check it anyway :).
http://xtool.ru/

Checking the overlay of the Panda and Penguin filters from Google. The service allows you to visually determine whether a site crashed on the dates of Panda and Penguin updates.
http://feinternational.com/website-penalty-indicator/

Checking the Page Rank of site pages (when copying a URL into the tool, you need to erase the last letter and then write it again).
http://www.prchecker.net/

Shows the history of the site's development and makes it possible to view screenshots of old pages.
http://www.archive.org/web/web.php

History of site positions in TOP Google (key phrases, pages, headings), PR indicators, TIC, Alexa Rank, numbers backlinks for popular sites.
http://SavedHistory.com

SEO Doctor is an add-on for Firefox. Shows links on the page and provides a convenient interface to various SEO services.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake is an add-on for Firefox. Shows the most important characteristics of the site: TIC, PR, backlinks, Alexa Rank. Works with both Google and Yandex results. Provides the ability to quickly analyze competitors.
http://www.seoquake.com/

IEContextHTML - addition to Internet Explorer. Checks the indexing of links in Yandex and Google, shows a list of external and internal links, and allows you to import data from web pages.

An updated list of free proxy servers, including Russian ones.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/

An anonymous free proxy with the ability to introduce yourself from three countries. Works with Google search.
https://hide.me/en/proxy

Emulators Google search in different countries by specifying search parameters.
http://searchlatte.com/
http://isearchfrom.com/

The service allows for a deep check (up to 500) of a site’s position by region in Yandex.

Analyzes the site's link mass, generates slices based on various criteria: link type, anchors, pages. Shows the weight of backlinks. The service is available only to registered users.
http://ahrefs.com

Checks the presence of backlinks to the site in the proposed URL list(up to 100 pages).
http://webmasters.ru/tools/tracker

Shows the number of likes (plusone) on Google+. You can immediately enter a list of URLs to be checked.
http://www.plusonechecker.net/

Shows popularity on Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com

Shows the popularity of the site's first page on Twitter, Google+, Facebook, Delicious, StumbleUpon. For Russian sites, the data is sometimes incorrect.
http://www.coolsocial.net

Scans the site and generates reports "Shares" of the main foreign social networks for these pages. Registers users through a Twitter account. You can see reports the very next day.
https://socialcrawlytics.com

Checks the given URL for suspicious code, shows loaded scripts and the results of their check.
http://vms.drweb.com/online/

Checks URLs for viruses with 30 scanners.
https://www.virustotal.com/#url

Website protection system against viruses. Scans site files daily and sends a report on their changes by email.

| 10.07.2015

When working on code, it is very easy to overlook and miss a comma or parenthesis. And re-reading a long non-working code in search of such an error is generally a thankless task. In this case, checking the code with special software tools can help. Our selection is dedicated to several particularly popular validators for the JavaScript language.

« JSLint will hurt your feelings" - this warning can be seen on the website of the JSLint validator, created in 2002 by Douglas Crockford. And this is true, because very often JSLint finds many errors in perfectly working code. If you strive to improve your code and bring it to an ideal state, use this service.

JSHint is a more convenient and customizable and also more popular version of the JSLint validator. JSHint is favored by programmers for its ability to choose settings and rules for code review, and comes with good documentation. Easily integrated into editors.

This tool also has a sufficient number of custom rules, which can also have additional customizable parameters. Various plugins are available. ESLint is easy to understand and has many features not found in other services.

The JavaScript Code Style tool differs from previous ones in that it does not check the code for potential bugs and errors. The purpose of JSCS is to check and detect code style violations. There are many presets and ready-made configurations available to users, which you can start using immediately if you adhere to the same codestyle.

Modern trends and web applications have radically changed the capabilities of developers. There is no doubt that they need some kind of IDE to encode new files and save them for later placement. What if you just test code snippets? Fortunately, nowadays there are a great variety of different tools for this!

In this article we will talk about 15 web applications for online code testing. They all work as long as you are connected to the Internet; Some of them offer pro plans for an additional package of properties. Most of them will be useful when trying to find and debug parts of javascript or PHP.

1.Codepad

Created by Steven Hazel, is a unique web application that allows you to code syntactic constructions throughout the entire network. Apart from debugging, Codepad allows its users to copy/paste important parts of codes and share them online.

The output screen displays messages about any errors associated with your code. Using the buttons in the left menu, you can change the language (C/C++, Perl, PHP, Python, Ruby, etc.). Codepad is more designed for developers software who need to work together and debug the most problematic programs.

2.Write Code Online

The main website will redirect you to its Java Script editor. You can choose between JS, PHP and basic URL encoding. The application is not only safe and reliable, but also quite easy to use.

Interestingly, you will see the results of your work right below the text field. So if you click “run code”, the result will be displayed on the screen. Debugging large PHP scripts may be more complicated because it requires the inclusion of other files.

However, the application will provide you with indispensable assistance in testing a new idea for strength.

3.Tinkerbin

I can easily call it my favorite online resource for editing codes. It supports HTML5/CSS3/JS and outputs the result directly to the screen. The application is still in alpha development, but most of the tools work great and quickly find errors in programs.

The rendering engine supports languages ​​such as Coffeescript and Sass in CSS framework. They boast an advanced management system and support for many of the web design brands that you would prefer to use for further work.

One cannot ignore the fact that there are hotkeys for the most popular options. But such functionality is not found in all web applications, not to mention the code editors built into the browser. When you enter new tags, the IDE automatically fills in the new lines. Tinkerbin is a front-end tool that should definitely be in your web development tools.

4.JS Bin

For beginners, working with the interface may cause some difficulties. To avoid this, they can use . JS Bin offers a large number of libraries to choose from - jQuery, JQuery UI, jQM Prototype, MooTools, etc.

If you code various elements, projects will be saved automatically. In addition, you have the opportunity to download the final result of your work or save the source online. This system is better suited for exporting and saving your code than a regular template.

5.JsFiddle

Anyone who has visited Stack Overflow should know about . Their interface differs from JSBin by having more options offered.

Also supports libraries such as Prototype and jQuery. Moreover, you can enable additional external sources to JS/CSS files in any tested document. Incredibly, the app even supports XHP Ajax, where you can pass information from the server to the client's browser window and vice versa.

6.CSSDesk

We are moving from scripts to style language and . Everything looks roughly the same as in previous tools: the source text is on the left, the final web page is on the right. This web application is great for creating web page templates and testing CSS3 properties.

7.Jsdo.It

Some apps are in Japanese, which makes me think they were created somewhere in Asia. What I like most about their interface is the ability to upload newly created files and store them in a project. You can easily store entire web page layouts online and access and edit them from any computer.

8.Google Code Playground

I was surprised how many developers don't know about the existence of . You are getting full access to their API, and in the same window you can debug all your codes.

What I mean by API is that you can get data from Google's biggest products: posts from Blogger, landmarks from Google Maps and even videos straight from YouTube. When you click on the various options, the data in the window preview are also updated.

I would suggest keeping this tool as a resource only, as it won't be suitable for everything you write. However, Google is a large company with many source code data APIs. If you ever need material from YouTube or Google search engine, this tool will definitely come in handy.

9.IDEOne

– another tool for “deep” programming and software development. Their online editor supports highlighting syntactic elements for a number of important languages, including Objective-C, Java, C#, VB.NET, SQL and many others. etc.

10.Viper7 Codepad

This web application, also known as , is located on the site, where it redirects to the same online editor. Their tools are configured to debug the PHP output variable, which depending on your choice can vary between PHP5 and PHP4.

By creating an account, Codepad can be used as a personal storage system. Here, as in other online editors, you can name each PHP project and store it online for free. This code editor is different in that users do not need to install any software on their computer. As each script is interpreted, the editor will offer additional meta details such as browser call or response headers.

11.JSLint

It itself is a little strange, while the code editor works according to a completely standard scheme.

The options offered may puzzle you if you have not encountered these types of templates before. If you have a certain skill set, you can work with open source. However, many source codes do not even support syntax highlighting, which is a glaring omission given such a wide range of options. I would recommend giving it a try if you have some free time, but there is no guarantee that it will become your favorite javascript debugging tool.

12.SQL Fiddle

A little earlier we looked at a web application called jsFiddle. Now it's time to talk about, which works in the same vein, except SQL database syntax data. I managed to find a decent alternative for testing database code.

All output information from your SQL code will appear in a table under the editors. You can write new code to apply the data on the right and generate the diagram on the left. This database schema is SQL code that you can save to export your current database and re-install everything on the new server.

If you are not familiar with databases or the SQL language, then this application is unlikely to be useful to you. But for developers who are interested in learning about SQL, this tool is perfect!

13.Cloud9 IDE

In my opinion, is the best editor sources from all available on the network. This is not just an editor, but a whole system of tools and resources; on their servers you can store all your source code repositories.

Registration is free for all community projects. If you need personal space before development, it will cost $15 per month or $180 per year. You can share private code repositories with anyone you choose. This option allows developers to collaborate on different projects.

Every new project stored in a subfolder where you can create the actual physical files. HTMl, CSS, JS, PHP and everything you need for coding will be in your account. Over time, you will be able to send these files as a whole project or download them to your computer.

The range of possibilities that Cloud9 offers is very wide. I recommend looking around for 10-15 minutes in a free account, and you will immediately fall in love with how the UI works. The company continues to grow, so I hope to add new useful options over the next few years.

14.CodeRun

– online editor for any dynamic web application. Text editor very similar to Microsoft Visual Studio; you can even code in C# for ASP.NET. Their libraries include third-party resources such as Facebook Connect and Silverlight.

In addition to Microsoft-based web applications, you can code directly in javascript or PHP. The principle of CodeRun is not much different from Visual Studio: creating a new website project and working on separate files. At the bottom of the screen are debugging tools and results from the console window.

Indispensable if you have experience with Visual Studio. The interface is almost the same, and you can even download/upload project files to your computer. This is another tool that experienced web developers can take note of.

15.Compilr

The template is very similar to the template Windows applications. You can work with open documents and edit files on the go. However, before you can start creating new projects, you will have to register.

Since the page layout resembles a regular desktop application, it is quite easy to work with even for beginners. The tools support programming techniques such as C++, C# and Visual Basic. Overall, Compilr should be a fallback application for testing and debugging source code.

Finally

The number of computers connected to each other is growing, making it easier for developers to work together in the browser. New technologies are emerging through local applications, and who knows how far this will go.

I hope the collection of code testing tools presented in our article has made you think about modern space for development. Nowadays, it costs nothing to connect an HTML/CSS web project in a matter of minutes and get a small demo video. Please note that these tools are only intended to assist you in the process of creating the final product.