This is the first AJAX website I constructed. I am trying to have information generated according to the name that user types in.It works well but I have some problem with the slow performance. Is there anything I can do to improve the performance of this code please?HTML:    <body background = http://starecat.com/content/wp-content/uploads/my-code-doesnt-work-i-have-no-idea-why-my-code-works.jpg>    <section id=fetch>         <input type=text placeholder=Please enter your name here id=term />         <button type= button id=search>ENTER</button>    </section>    <section id=content>        <div id = figures>        </div>        <div id =name>            <div id = nameBox>            </div>            <div id = nameText>            </div>        </div>        <div id = clickBox>        CLICK ME!        </div>        <div id = message>                    <div id = messageBox>            </div>            <div id = greetingText>            </div>            <div id = messageText>            </div>        </div>    </section>    <section id=email>         <input type=text placeholder=Please enter your email here id=emailBox />         <button type= button id=emailEnter>ENTER</button>    </section></body>jQUERY:$(document).ready(function(){$('#content').hide();$('#email').hide();$('#term').focus(function(){    var full = $(#content section).length ? true : false;     if(full == false){    $('#content').hide();    }});var getFigures = function(type){    if(type == mf){        $('#figures').prepend('<img src = images/mf.png height = 500px width = 500px />');        console.log(mf found);    } else if (type == mm){        $('#figures').prepend('<img src = images/mm.png height = 500px width = 500px />');        console.log(mm found);    } else if (type == ff){        $('#figures').prepend('<img src = images/ff.png height = 500px width = 500px />');        console.log(ff found);    } else if (type == male){        $('#figures').prepend('<img src = images/male.png height = 500px width = 500px />');        console.log(male found);    } else if (type == female){        $('#figures').prepend('<img src = images/female.png height = 500px width = 500px />');        console.log(female found);                                    }                   };var displayMessage = function(message){    console.log(box clicked);         $('#clickBox').hide();    $('#message').show();}    var displayContent = function(){    $('#fetch').hide();    $('#message').hide();    $('#content').show();    var content = $('#term').val();     content = content.toLowerCase().replace(/\b[a-z]/g, function(letter){        return letter.toUpperCase();            });       console.log(Name entered:  + content);    var googleApi = https://api.com/;    var googleKey = googleKeyHere;    var googleSecret = googleSecretHere;    var data = [];    $.ajax({        url: googleApi,        headers: {            Authorization: Basic  + btoa(googleKey + : + googleSecret)        },        data: data,        dataType: 'json',        type: 'GET',        success: function(data) {                var data = data || [];                var results = data.filter(function(element, index, array){                    if (element.name === content){                        return (true);                    }                    return (false);                    });                    if (results[0]){                        // user name is identified                        console.log (results[0]);                            var name = results[0].name;                                             $('#nameText').text(name);                            console.log(Name:  + name);                            var greeting = results[0].greeting;                            $('#greetingText').text(greeting);                            console.log(Greeting:  + greeting);                            var type = results[0].type;                            console.log(Type:  + type);                            getFigures(type);                            console.log(FIGURES PRINTED);                                                             $('#clickBox').show();                                      $('#clickBox').click(displayMessage);                            var message = results[0].message;                            $('#messageText').text(message);                            console.log(Message:  + message);                             return;                    } else {                        // user name is unidentified: new user                                                  console.log(new user);                            var name = content;                                             $('#nameText').text(name);                            console.log(Name:  + name);                                           var greeting = data[0].greeting;                            $('#greetingText').text(greeting);                            console.log(Greeting:  + greeting);                            console.log('input#term');                                                  $('input#term').genderApi({key: genderAPIKeyHere}).on('gender-found', function(e, result) {                                if (result.accuracy >= 60) {                                    var gender = result.gender;                                    console.log('Gender found: ' + gender);                                    var type = gender;                                    console.log(Type:  + type);                                       getFigures(type);                                    console.log(FIGURES PRINTED);                                     if (type == gender){                                        $('#email').show();                                    } else if (type == item.type){                                        $('#email').hide();                                    }                                }                            });                             console.log(should have printed figures yo);                            $('#clickBox').show();                                      $('#clickBox').click(displayMessage);                            var message = data[0].message;                            $('#messageText').text(message);                            console.log(Message:  + message);                         }                               return false;        },        error: function(xhr,status,error) {            console.log(ERROR:  + xhr.responseText);            console.log(ERROR:  + status);            console.log(ERROR:  + xhr.status);            console.log(ERROR:  + error);        }    });     };$('#search').click(displayContent); $('#term').keypress(function(event){            if(event.which == 13){        displayContent();    }    console.log(SEARCH);});console.log(waiting for name to be entered);});
A first AJAX search page
javascript;performance;jquery;html;ajax