javascript - Using JS, jQuery, ajax, & json, I need help optimizing page load speed -
i building user profile page, using jquery, pulling json type database. inexperienced @ using ajax populate page, right now, page load takes far long. if refining code, optimize , speed page load, appreciate it.
goal: trying take info json database built number of users multiple data points capture. here example of json data. have information displayed once it's tab has been selected. there large amount of data within each profile, publications. user can have amount of pubs, , code loops through of data before writing page.
{ "error": false, "cached": false, "profile": { "firstname": "john", "lastname": "smith", "preferredname": "", "email": "johnsmith@example.com", "gender": "", "phonenumber": "1234567890", "office": "todd hall addition 570b", "endowedposition": "major position #1", "biography": "this biography", "appointments": [ { "title": "title 1", "workingtitle": "", "rank": "", "department": "department1", "start": "2014-01-01", "end": "" }, { "title": "", "workingtitle": "", "rank": "rank 1", "department": "department2", "start": "2014-01-01", "end": "" }, { "title": "title 2", "workingtitle": "", "rank": "", "department": "", "start": "2014-01-01", "end": "" } ], "intellectualcontributions": [ { "type": "book", "typeother": "", "includeprofile": "yes", "status": "published", "title": "titlemain", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "published", "title": "titlemain", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "manuscript", "typeother": "", "includeprofile": "yes", "status": "published", "title": "titlemain", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "book review", "typeother": "", "includeprofile": "yes", "status": "published", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": ["author1"] }, { "type": "newspaper", "typeother": "", "includeprofile": "yes", "status": "published", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [ "author 1", "author 2", "author 3", "author 4" ] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "published", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "published", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "published", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": ["author 1"] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "submitted", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] }, { "type": "journal article", "typeother": "", "includeprofile": "yes", "status": "working paper", "title": "title", "titlesecondary": "", "firstname": null, "middlename": null, "lastname": null, "role": null, "journalname": "", "publisher": "", "volume": "", "issuenum": "", "pagenum": "", "webaddress": "", "casenum": "", "yearpub": "", "authors": [] } ], "education": [ { "degreetype": "phd", "degreeother": "", "school": "university", "major": "major 1", "focusarea": "focus area", "dissertationtitle": "dissertation title", "highest": "yes" }, { "degreetype": "mba", "degreeother": "", "school": "university", "major": "major 1", "focusarea": "", "dissertationtitle": "", "highest": "" }, { "degreetype": "bba", "degreeother": "", "school": "university", "major": "major 1", "focusarea": "", "dissertationtitle": "", "highest": "" } ], "present": [ { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3", "author4" ], "date": "2014" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3" ], "date": "2014" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3", "author4", "author5" ], "date": "2013" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3", "author4", "author5" ], "date": "2013" }, { "title": "presentation title", "type": "paper", "name": "name", "authors": [ "author1", "author2", "author3", "author4", "author5" ], "date": "2012" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3", "author4", "author5" ], "date": "2012" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3" ], "date": "2012" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2" ], "date": "2012" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", ], "date": "2012" }, { "title": "presentation title", "type": "oral presentation", "name": "name", "authors": [ "author1", "author2", "author3" ], "date": "2012" } ], "departments": [ "department1", "department2" ], "research": [ "research1", "research2", "research3", "research4", "research5" ], "teaching": [ "teaching1", "teaching2", "teaching3", "teaching4" ] } }any , appreciated!
i believe question wide, , doesn't fit as stackoverflow ideal question. take answer sort of long comment formatting: can't solve issue , i'm afraid no 1 can information provided.
how many time means 'too long' in question?
when 'page load' takes long, mean page load, or user information load? different things. i bet you're referring time needed load user information, , i'll try answer so. whole page loading being slow issue should have nothing bringing data ajax -in fact, data in separate request alleviates initial document load-.
how many time database query consume? how many time network request take? -you can use network tab in chrome developer tools check that-. i'm pretty sure either database query or networking main cause of bottleneck. while jquery code looping through data heavy , long, networking/database better candidates performance bottlenecks runtime execution.
if db query takes long, should check , maybe post sql related question. maybe you're grabbing info @ once, maybe you're firing many consecutive unneeded queries against db... it's not jquery matter.
if query consumes little time, server still takes long give response, there nothing can tell here: it's problem related platform , web server.
if both query , network work fine, still javascript code in client taking time render data -i don't believe can case... well, knows-, should try reproduce issue with no http/db request interaction:
you should isolate code parses response , render dom function, , call fake response, , see how many time needs work. in such situation can fire stackoverflow question reproducible, folks here can easier :-)
i tried set such, in fact, found unexpected token else here:
else{ //continue original if statements check publishedtype } if code behaving slow, sure it's different 1 pasted here, since it's giving syntax error. if problem syntax error, has nothing performance.
btw, sure code benefit refactor ;-)
wiki
Comments
Post a Comment