2 Bad Things About the Facebook App Setup

 by Kai "kaidez" Gittens

For the Almay/Facebook project I recently worked on, I had to create a Facebook app under their new set of rules, which was interesting.

Creating Facebook apps, which are basically web pages, used to require the Facebook Markup Language (FBML) which is simply a flavor of XML. Facebook recently changed this, saying that developers now simply need to create FB app web pages with HTML, CSS, JavaScript, etc., then host the pages on their own web server. These pages then get fed to Facebook via an iframe.

This is an easier web development process and all the page content displays fine. But I’m in a headspace of creating page code that’s as optimized and as fast-loading as I can get it….my current “thinking mobile” process. That being said, there are two things about the Facebook app setup which, I think, could be made better from a page optimization standpoint.

And it all points back to a JavaScript file named “all.js” that needs to be installed on your web pages in order for the app to work:

1. CSS Expressions

According to my app page’s YSlow report, this “all.js” file is capable of inserting three inline CSS expressions on to the page. Affecting Internet Explorer 8 and lower only, CSS expressions are CSS selectors that are updated and manipulated with JavaScript. Here’s the CSS expression example from YDN page:

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

Basically, this code updates the background color ever hour; however, it runs much more frequently then that. Simple things like scrolling and mouse movements can fire this code off, which slows down the page overall.

This sucks, but no where NEAR as bad as…

2. Render Tree Reflows

According to Safari’s Activity Monitor, the “all.js” dynamically adjusts lots of DOM properties when scrolling the page. One simple scroll changed the following DOM properties on the fly:

  • clientWidth
  • clientHeight
  • scrollLeft
  • scrollTop
  • offsetLeft
  • offsetTop

Changing properties like this triggers a render tree reflow, the recalculation of a web page’s layout and geometry. All of this takes time and browser resources, meaning all of this slows down a page…no good.

Paul Irish discusses this in his most-recent how-to video, “HTML5, CSS3, and DOM Performance” that’s listed below. He alludes to Stoyan Stefanov’s brilliant reflow/relayout article, which is the end-all-be-all discussion on the subject.

So Facebook apps are now easier to create but, I feel, still need improvement in terms of page optimization. Feel free to comment and agree or disagree.