Photo by on Victor Xok Unsplash Like another day, while reading some interesting blogs in , some janky things while loading the site caught my attention. Uber Engineering You know how our eyes are powerful to get jerky things easily? Usually, our devices render 60 frames per second, which means it renders 1 frame in 16.66ms (Interval may vary on low configured devices). If things are not rendered within the specified time frame, we get jerky things in our visiting site. And this is what happened when I visited today. Uber Engineering Browser Render Optimisation. With a short introduction on Browser Render Optimisation, I would like to take it further for the better understanding of this article. Browser’s Rendering Pipeline So, this is what a typical frame looks like. Consider it a BROWSER’S RENDERING PIPELINE. Normally, we use JavaScript to handle work that will result in visual changes. — You make a visual change either with JavaScript or CSS JavaScript — The browser must recalculate the styles of the elements that were affected. Style — Now if you change the layout property like width, offsetHeight etc, the browser will have to check all the other elements and reflow the page. Layout — Any affected areas will need to be repainted. Paint — And the final painted elements will need to be composited back together. Composite Hope you get some insights about the frame lifecycle. If you would like to know further, take a look at Browser Render Optimisation courses. _This course will demystify the browser's rendering pipeline and make it easy for you to build high performance web…_in.udacity.com Browser Rendering Optimization | Udacity How jQuery affects Uber? Straight to the topic, let me start listing out the jerky things that were happening while loading . eng.uber.com Check the video first for the jerks. What happens in the video? Can you spot some jerks? While loading an article. Forced reflow — Performance bottleneck. While loading an article, you may see an alert in the performance tab in Google Chrome Inspector citing, is a likely performance bottleneck — while recalculating the style. Forced reflow What it is? As per the pipeline, we need to calculate the elements geometric (using JavaScript) before Style & Layout. After reverse engineering (Couldn’t get the apt word at that time) , I came to know that (b.offsetWidth in an image) takes seconds to load at cases. Remember, we need to load one frame in 16.66ms. jQuery v1.12.4 div.offsetWidth Function to set body.style.zoom Here, jQuery executes the aforementioned function to set body.style.zoom property. As per the , zoom property is and is not on a standards track. It should not be used in production sites. CSS guidelines non-standard Solution. To overcome this, either they can use the property at the CSS level or upgrade jQuery which I hope could have been addressed in the next versions. [transform: scale()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale "The documentation about this has not yet been written; please consider contributing!") Why has been used? Magnific Popup What it is? Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing the best experience for user with any device(for jQuery or Zepto.js). I couldn’t find exact reasons like why this popup plugin has been used (Maybe there are some cases, which I am not aware of) but I can assure you that you are compromising your site’s performance a bit. can be used instead of setInterval requestAnimationFrame Here, the setInterval keeps calling a method called which calculates geometric (clientWidth) of the elements with respect to the browser and iterates this function at a point using setInterval and might cause low-quality animations. detectChanges, Solution. Here, Magnific Popup is still using setInterval, when we have latest Web API called . requestAnimationFrame API produces high-quality animation completely elimination flicker and shear that can happen when using setTimeout or setInterval. requestAnimationFrame Check for better clarity. Why is requestAnimationFrame better than setInterval or setTimeout 92.78% of users use requestAnimationFrame worldwide (Source: ). When coming to browser compatibility, I may be wrong where Magnific Popup might be built keeping older browsers in mind. CanIUse I just want Uber to let them know this is the case and most browsers support requestAnimationFrame and as a Frontend Engineer, I suggest the same. Likewise, I could spot many performance bottlenecks around the site while scrolling, navigating etc., also in UberEats which could be fixed by removing jQuery or by hiring a Frontend developer like me who could make sites running at 60fps who is currently unemployed. Even in , I find some performance issues while tracking the order I have ordered. Frames were not rendered within 60fps which causes the map junk when the rider moves. UberEats As an Uber enthusiast and a Frontend developer, Uber’s changeover in technology from jQuery to React-Redux is a good move. I don’t know how far has been made use of in their stack which could improve their performance drastically. Web Workers I personally love Uber and see how it’s been progressing in day-day life. As a lifelong enthusiast of frontend technologies, I am positive I can help with your frontend upcoming challenges. I just want these things to reach out to Uber so that they should care about their tech enthusiast too. Configurations of the machine tested. Google Chrome Version: 69.0.3497.100 (Official Build) (64-bit) iMac (Retina 5K, 27-inch, 2017) macOS High Sierra. Version 10.13.4. (FYI, Uber Engineering site was loaded in Google Chrome’s Incognito mode so that I do not want to blame any extension.) : I have written this article with the best of my knowledge and request you to correct me wherever I am wrong. I am curious to learn those things as well. Disclaimer Thank you.

Too Long; Didn't Read

Making security fun one episode at a time

How jQuery is killing Uber Engineering?

Too Long; Didn't Read

Balasubramani M

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How jQuery is killing Uber Engineering?

Too Long; Didn't Read

Balasubramani M

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES