I'm trying to figure out why my application performs very bad. So I did a performance record within DevTools and I can see that frames usually takes about 150 ms which is too long.
However I don't understand why the frame takes so much time. There is some javascript handling an input event, some DOM manipulation and some paint. It all takes about 60 ms. So why is the frame 150 ms long?
EDIT I've enabled some timeline-related devtools experiments as wOxxOm suggested. There is some kind of Update Layer task.
2 Answers
Answers 1
I would have said it came from too much nodes in your layer, but with some research we can now find that someone already had your problem before. To quote the answerer :
In your case, I would guess that you are triggering a fundamental layer invalidation that is forcing it to update a layer high up on the tree hierarchy which is then trickling down the tree and causing each of those layers to be updated. Although its hard to say without looking at your code.
Either way if this long Update Layer Tree is consistently happening before the Layout is being recalculated, it's most certainly related to that.
I'll advise checking the ressource pointed by Alexander J. Ray, especially the HTML5 Rocks article.
Answers 2
i cannot give your direct answer for the question because you have not provided any cause however , i can write you steps to check which can resolve your issue .
first : please visit this site and use the java script library to detect what is cause's you have on your website that makes it slow
it’s important that all elements in the section are pre-loaded, before the visitor sees anything in browser,
then all subsequent elements are ordered to load in a logical way. Any JavaScript inside the section can slow down a page’s rendering , additionally you may use min loaded java scripts files .
second enhance the way you write java scripts function for example if you write this
function myfunction(node) { var parent = node.parentNode; if (0) { alert( "Hello am using stack over flow" ); } else { alert( " i use it too" ); } return; alert( 1 ); } After enhancement:
function myfunction(){alert("i am using stack over flow")} The variable parent will never need to be used, so it gets deleted;
third
Asynchronous loading or the type of sync loading. might loads in a multi-streamed way.
for example take a look at this code:
<html> <head> <script src="big.js"></script> </head> <body> This text will not be present until big.js is loaded. </body> </html> Instead, you can add an async tag to the JavaScript so that creation of the DOM model happens in parallel, and won’t be interrupted while the JavaScript is loading and executed.
<html> <head> <script src="big.js" async></script> </head> <body> This text will be present and it’s not dependent with big.js loading progress. </body> </html> four remove unused js libraries and replace your java script from links to external to use it within your website hosting as
<script src = "./js/yourjsfile.js" > five use http/2 encreption protocol , this could make huge different to site loads . also consider using gzip technology
There are modules for some of the most famous web servers, including Apache and Nginx.
Because JavaScript can be used not only for front-end development but back-end development as well (thanks to Node.js), you can compress JS files with the zlib module for Node.js.
It’s super fast and easy to set up:
const zlib = require('zlib'); Use it a few ways, like the following:
const gzip = zlib.createGzip(); const fs = require('fs'); const inp = fs.createReadStream('input.txt'); const out = fs.createWriteStream('input.txt.gz'); inp.pipe(gzip).pipe(out); finally
MOVE SOME THE CSS AND JAVASCRIPT CODE OF YOUR FIRST SCREEN TO THE TOP OF YOUR CODE FOR FASTER LOADING You may as well convert your current CSS to Css3 , additionally and defenitly , you shoud use caching on your website , it would really make huge different on site loading .
0 comments:
Post a Comment