DirtyInformation

Change Classes not Styles

05 Nov 2010

I’ve been working with some javascript lately and wanted to see if it made a difference if I was changing the class or inline style of an element. I had heard that changing classes was faster, but can it really make a big difference?

YES!!!

I coded up a quick example. Here are the results in ms(all on osx):

• Safari 5.0.2
  • changing style:123
  • changing class:15 - 87.8% faster
• Chrome 7.0.517.44
  • changing style:115
  • changing class:16 - 86.1% faster
• Firefox 3.0.15
  • changing style:333
  • changing class:99 - 70.3% faster
• Firefox 3.6.12
  • changing style:261
  • changing class:60 - 77% faster
• Opera 10.10
  • changing style:554
  • changing class:111 - 80% faster

I really didn’t expect those kinds of results. Kind of amazing!

The Past

• Testing Named Agents 03 Feb 2017
• Two Duplication Refactorings in Elixir 18 Jan 2017
• B is for BigDecimal 24 Sep 2014
• A is for Abbrev 02 Sep 2014
• Missed Chances 15 Aug 2014
• Style Guides are Failures 15 Jun 2014
• What is BDD anyway? 15 Apr 2014
• An Agile Contract 31 Mar 2014
• What Do I Want 23 Mar 2014
• Just the Tip 16 Mar 2014
• Important Partnerships 11 Mar 2014
• Lost in Translation 03 Mar 2014
• Story Splitting Revisited 23 Feb 2014
• Let your yes be yes and your no be no 16 Feb 2014
• Lethal Injection 09 Feb 2014
• Smaller is Better 02 Feb 2014
• A Second Time 26 Jan 2014
• Introspective 20 Jan 2014
• Self Reflection for the Win 06 Dec 2013
• Why? Why? Why? 30 Sep 2013
• A New Gig 18 Sep 2013
• Exceptional Comments 15 Jun 2013
• Role Objects in Acceptance Tests 30 Apr 2013
• Open Closed Ruby Woes 28 Apr 2013
• Write Something 12 Apr 2013
• A Great Cast of Characters 06 Mar 2012
• When is the Release Party? 19 Aug 2011
• Single Responsibilty, How Did I Forget You 12 Apr 2011
• Change Classes not Styles 05 Nov 2010
• My MongoDB Cookbook Recipe 20 Jul 2010
• Agile Says What? 05 Nov 2009
• Inject & Me - BFFs 07 Sep 2008