Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slow down browser rendering

Is there a way to slow down browser DOM rendering and JS execution for development so we can see which parts of the website are too JS intensive and might be slow on slower machines? Maybe an extension for Chrome/Firefox for Linux/OSX?

Some clarification:

It's not about connection or testing the speed of the browser! It's just for our developers to see which parts of the page are rendered slowly or are "glitchy". For example when you use ajax and you are loading something you show a loader, but just after the loader is shown the loaded part is shown too. We want to see that in slow motion. Like when you press SHIFT in OSX when doing Expose.

PS. I did find some articles on delaying Internet connection, but that's not enough in this case.

PPS. Loading everything in VMs didn't work for us.

PPPS. Using slow down code like proposed in Javascript code for making my browser slow down is not the best option in my opinion.

like image 243
ddofborg Avatar asked Mar 14 '14 20:03

ddofborg


People also ask

How do I make my browser slower?

Press Control+Shift+J or Command+Option+J (Mac) Navigate to the Network Tab and open the Throttling dropdown which is set to Online by default. From the dropdown menu highlighted (as shown in the image above), select Slow 3G.

How does browser rendering work?

Render. Rendering steps include style, layout, paint and, in some cases, compositing. The CSSOM and DOM trees created in the parsing step are combined into a render tree which is then used to compute the layout of every visible element, which is then painted to the screen.

What is Web page rendering?

What does webpage rendering mean? Rendering a webpage is the process of turning HTML, CSS, and JavaScript code into an interactive page that website visitors expect to see when clicking on a link. Every website page is designed with the end user in mind.


2 Answers

Converting what @z0r said in the comments to an answer:


In Chrome, open devtools and select the Performance tab performance tab

Make sure Screenshots is checked

check screenshots

Press the record button (or hit Ctrl + E)

Do your activity

Stop recording

Hover over the timeline to see the screenshots of the screen as things change. view captured screenshots

like image 153
OozeMeister Avatar answered Oct 05 '22 06:10

OozeMeister


Use the timeline or profiler on your browser inspector. Here you can see, what functions take down the speed.

like image 25
Adrian Preuss Avatar answered Oct 05 '22 06:10

Adrian Preuss