Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Is JS faster than CSS?
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Is JS faster than CSS?

letloverletlover Member
edited July 2022 in General

Just compared two sites using pingdom test.
One is next based, another one is rich in css and html, with some js.
For the same 1 Mb homepage, the first one is about twice faster.
Is it possible that the first one is using premium network, or is it just js faster than css?

Comments

  • That would depend on which pingdom test you were running, and as their software is running any JS and rendering the CSS then the performance is dependent on that so performance in a user browser may be quite different.

    For the same 1 Mb homepage

    If one is heavy in CSS and the other heavy in JS, they are not the same page. Unless you just mean the same content in which case the additional data around the content may vary a lot.

    If you want useful answers rather than idle speculation, you'll probably need to describe in more detail how you generated each site to test. Or better still, give links to them so we can see the difference(s) directly instead of a back & forth asking for extra little bits of info or throwing “maybe X, maybe Y, or, you never know, perhaps Z” answers at you.

  • CalmDownCalmDown Member
    edited July 2022

    Is your WiFi faster than your neighbour's WiFi?

  • yoursunnyyoursunny Member, IPv6 Advocate
    edited July 2022

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    @CalmDown said:
    Is your WiFi faster than your neighbour's WiFi?

    My WiFi is slower than my neighbor's WiFi.
    I run the WiFi in a 20 MHz narrow channel, while the neighbor picked a 80 MHz wide channel.

  • exception0x876exception0x876 Member, Host Rep, LIR

    @yoursunny said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    Cheetah has electrons too.

    Thanked by 2emgh mrTom
  • @letlover - google, bing, duckduck are your friend.

  • FAT32FAT32 Administrator, Deal Compiler Extraordinaire

    Try HTML, it is generally faster than JS or CSS.

  • yoursunnyyoursunny Member, IPv6 Advocate

    Try plain text, it is generally faster than HTML.

  • HxxxHxxx Member
    edited July 2022

    I believe there is some confusion. I'll try to help.
    Todays websites, usually (in the frontend) have HTML5+ CSS3 + JS.

    -Use HTML for the templating.
    -Use the CSS to add style to the HTML elements / components, etc.
    -Use JS to add dynamic behavior.

    Following best practices:
    -You should put your JS before the end of the body tag not in the header to avoid any delay rendering.

    -Your JS dynamic loading of data should be async.

    -Minimize your JS files.

    -Minimize your CSS.

    I'm assuming we are strictly speaking of websites and not apps, even thought all the above applies, with frameworks such as Angular everything loads via JS (component loading, injection, etc).

    In most cases slow rendering is due to:
    -Browser waiting for some JS function to finish due to unoptimized coding or it being loaded in header instead of the end of body.
    -Big images...

    -Backend , in cases such as PHP being used in the front-end, waiting for some section querying DB to echo it, etc.
    ...

  • @Hxxx said:
    I believe there is some confusion. I'll try to help.
    Todays websites, usually (in the frontend) have HTML5+ CSS3 + JS.

    -Use HTML for the templating.
    -Use the CSS to add style to the HTML elements / components, etc.
    -Use JS to add dynamic behavior.

    Following best practices:
    -You should put your JS before the end of the body tag not in the header to avoid any delay rendering.

    -Your JS dynamic loading of data should be async.

    -Minimize your JS files.

    -Minimize your CSS.

    I'm assuming we are strictly speaking of websites and not apps, even thought all the above applies, with frameworks such as Angular everything loads via JS (component loading, injection, etc).

    In most cases slow rendering is due to:
    -Browser waiting for some JS function to finish due to unoptimized coding or it being loaded in header instead of the end of body.
    -Big images...

    -Backend , in cases such as PHP being used in the front-end, waiting for some section querying DB to echo it, etc.
    ...

    Thank you very much for your insightful reply, much better than electron and cheetar. :)

  • Just dump everything inline and precompress it into gzip and brotli files

  • ralfralf Member

    @yoursunny said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    I couldn't throw an iPhone at a cheetah faster than a cheetah could run away from it, hence the cheetah is faster.

  • ralfralf Member

    @yoursunny said:
    Individual electrons in an iPhone charger move at millions of kilometers per hour.

    On a serious note, it depends what you mean by move. The electrons themselves move very slowly on a macro scale, in the order of 1cm per second. However,individually, they do move from one atom orbit to the next quite quickly, but then they stay on each atom a long time.

    It's like if you had 100 balls in a channel so they were all in a line touching each other. If you push one end, the ball at the other end moves almost instantly, but the balls themselves are moving slowly.

    Thanked by 1yoursunny
  • emghemgh Member

    @ralf said:

    @yoursunny said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    I couldn't throw an iPhone at a cheetah faster than a cheetah could run away from it, hence the cheetah is faster.

    But how fast could the iPhone charge while being throwed at a cheetah with the charger charging until the charger disconnects from the iPhone?

  • quanhua92quanhua92 Member
    edited July 2022

    @Hxxx said:
    Following best practices:
    -You should put your JS before the end of the body tag not in the header to avoid any delay rendering.

    This is incorrect. You should put the JS script tag in the header and add the "defer" attribute. In that case, the JS can be downloaded when the browser parses the HTML.

  • HxxxHxxx Member

    @quanhua92 said:

    @Hxxx said:
    Following best practices:
    -You should put your JS before the end of the body tag not in the header to avoid any delay rendering.

    This is incorrect. You should put the JS script tag in the header and add the "defer" attribute. In that case, the JS can be downloaded when the browser parses the HTML.

    Actually I'm not incorrect. JS should be placed in the body before the /body tag. Is common good practice.

  • ailiceailice Member

    I dont know how pingdom test, but I assume why next was faster because content loaded async not sync like normal html page

    Thanked by 1letlover
  • ralfralf Member

    @emgh said:

    @ralf said:

    @yoursunny said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    I couldn't throw an iPhone at a cheetah faster than a cheetah could run away from it, hence the cheetah is faster.

    But how fast could the iPhone charge while being throwed at a cheetah with the charger charging until the charger disconnects from the iPhone?

    Ummm, tough to say. Is the cheetah also charging?

  • emghemgh Member
    edited July 2022

    @ralf said:

    @emgh said:

    @ralf said:

    @yoursunny said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Individual electrons in an iPhone charger move at millions of kilometers per hour.
    A cheetah moves at 80 miles per hour.
    Hence, an iPhone charger is faster than a cheetah.

    I couldn't throw an iPhone at a cheetah faster than a cheetah could run away from it, hence the cheetah is faster.

    But how fast could the iPhone charge while being throwed at a cheetah with the charger charging until the charger disconnects from the iPhone?

    Ummm, tough to say. Is the cheetah also charging?

    It depends.

  • @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Have iPhone chargers ever been fast?

  • armandorgarmandorg Member, Host Rep

    @sangdogg said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Have iPhone chargers ever been fast?

    Yes, iPhone fast chargers.

    Thanked by 1emgh
  • emghemgh Member

    @sangdogg said:

    @emgh said:
    What's faster, an iPhone charger or a cheetah?

    Have iPhone chargers ever been fast?

    Yes they have. Didn’t say Apple.

  • SiliCloudSiliCloud Member, Patron Provider, LIR
    edited August 2022

    It also depends on browser core version and brand. :#

Sign In or Register to comment.