{"id":307618,"date":"2020-04-26T06:30:21","date_gmt":"2020-04-26T13:30:21","guid":{"rendered":"https:\/\/css-tricks.com\/?p=307618"},"modified":"2020-04-26T06:30:22","modified_gmt":"2020-04-26T13:30:22","slug":"the-cost-of-javascript-frameworks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-cost-of-javascript-frameworks\/","title":{"rendered":"The Cost of Javascript Frameworks"},"content":{"rendered":"\n

I expect this post<\/a> from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than non-JavaScript-framework-powered sites. Angular is the beefiest and React is hardest on the CPU. But as Tim says:<\/p>\n\n\n\n

… it says very little about the performance of the core frameworks in play and much more about the approach to development these frameworks may encourage<\/p><\/blockquote>\n\n\n\n

Another big caveat is that there isn’t data here on-site usage after<\/em> first-load, which is a huge aspect of “single-page app” approaches. <\/p>\n\n\n\n

Still, while you can<\/em> be performant with frameworks (although even that top 10% isn’t super encouraging), the frameworks aren’t doing much to help what has turned into a bad situation. It mimics exactly what we talked about recently<\/a> with accessibility. It’s not the frameworks “fault” exactly, but they are also the best positioned to stop the bleeding.<\/p>\n","protected":false},"excerpt":{"rendered":"

I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than non-JavaScript-framework-powered sites. Angular is the beefiest […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[432,1076,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":282922,"url":"https:\/\/css-tricks.com\/the-bottleneck-of-the-web\/","url_meta":{"origin":307618,"position":0},"title":"The Bottleneck of the Web","date":"March 5, 2019","format":false,"excerpt":"Steve Souders, \"JavaScript Dominates Browser CPU\": Ten years ago the network was the main bottleneck. Today, the main bottleneck is JavaScript. The amount of JavaScript on pages is growing rapidly (nearly 5x in the last 7 years). In order to keep pages rendering and feeling fast, we need to focus\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/ship-bottle.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333262,"url":"https:\/\/css-tricks.com\/components-server-side-vs-client-side\/","url_meta":{"origin":307618,"position":1},"title":"Components: Server-Side vs. Client-Side","date":"January 28, 2021","format":false,"excerpt":"Building a website in 2021? I\u2019m guessing you\u2019re going to take a component-driven approach. It\u2019s all the chatter these days. React and Vue are everywhere (is Angular still a thing?), while other emerging frameworks continue to attempt a push into the spotlight. Over the last decade or so we\u2019ve seen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/s_B88F21F40E255B01805BDE26E3615C774E5A4E88B986EDD4271F833852A3D101_1610624153511_server-vs-client-comps-ssr-render.jpg?fit=910%2C613&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":235005,"url":"https:\/\/css-tricks.com\/the-cost-of-frameworks-recap\/","url_meta":{"origin":307618,"position":2},"title":"The Cost of Frameworks Recap","date":"November 20, 2015","format":false,"excerpt":"A classic blog-and-forth, my favorite form of internet discussion. Paul Lewis does some research on the performance of differnet frameworks, pitting each of their TodoMVC versions against one another: For me the results are pretty clear: there appears to be a pretty hefty tax to using Frameworks on mobile, especially\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310812,"url":"https:\/\/css-tricks.com\/5-myths-about-jamstack\/","url_meta":{"origin":307618,"position":3},"title":"5 Myths About Jamstack","date":"June 9, 2020","format":false,"excerpt":"Jamstack isn't necessarily new. The term was officially coined in 2016, but the technologies and architecture it describes have been around well before that. Jamstack has received a massive dose of attention recently, with articles about it appearing in major sites and publications and new Jamstack-focused events, newsletters, podcasts, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336024,"url":"https:\/\/css-tricks.com\/web-frameworks-why-you-dont-always-need-them\/","url_meta":{"origin":307618,"position":4},"title":"Web Frameworks: Why You Don\u2019t Always Need Them","date":"March 9, 2021","format":false,"excerpt":"Richard MacManus explaining Daniel Kehoe's approach to building websites, which he calls \"Stackless\": There are three key web technologies underpinning Kehoe\u2019s approach: ES6 Modules: JavaScript ES6 can support import modules, which are also supported by browsers. Module CDNs: JavaScript modules can now be downloaded from third-party content delivery networks (CDNs).\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/6d65f352-painter-2798557_1280-1024x576-1.jpg?fit=1024%2C576&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":279985,"url":"https:\/\/css-tricks.com\/javascript-to-native-and-back\/","url_meta":{"origin":307618,"position":5},"title":"JavaScript to Native (and Back!)","date":"December 13, 2018","format":false,"excerpt":"I admit I'm quite intrigued by frameworks that allow you write apps in web frameworks because they do magic to make them into native apps for you. There are loads of players here. You've got NativeScript, Cordova, PhoneGap, Tabris, React Native, and Flutter. For deskop apps, we've got Electron. What's\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/running-legs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307618"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=307618"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307618\/revisions"}],"predecessor-version":[{"id":307628,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/307618\/revisions\/307628"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=307618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=307618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=307618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}