Microsoft Edge - Making the web smoother with independent rendering

Status
Not open for further replies.

Bot

AI-powered Bot
Thread author
Verified
Apr 21, 2016
3,317
Independent rendering allows the browser to selectively offload graphics processing to an additional CPU thread, so they can be rendered with minimal impact to the user interface thread and the overall visible performance characteristics page, such as silk-smooth scrolling, responsive interactions, and fluid animations. This technique was pioneered in Internet Explorer 11, and is key to providing a fluid experience.


Today, we’re excited to share major improvements to the independent rendering pipeline in Microsoft Edge which will make pages significantly faster in EdgeHTML 16 and the Windows 10 Fall Creators Update.

Independent rendering is transformative to the user experience — but historically there have been a few elements that could disable it entirely when present on a page.

  • <select> control
  • <canvas> element
  • certain <svg> elements

Starting with EdgeHTML 16, we’ve enabled independent rendering on more sites by adding full support for the elements listed above. These investments greatly improve actual and perceived performance of a huge number of apps and sites, as these elements are very common on the web. You can preview these changes in recent builds via the Windows Insider Program – read on to learn more about the impact of these changes!

Visualizing independent rendering improvements


Independent rendering noticeably improves performance in several common scenarios: content processing, such as loading the page or adding significant portions of dynamically generated content; iterative operations or experiences with tight frame budgets, such as games, script-driven animations, and data visualizations; and scrolling while the main thread is processing script, where the rendering thread can continue displaying available content even if main thread is busy

Getting to the screen faster when processing content


By offloading rendering to a separate (parallel) thread, independent rendering can improve page load and dynamic content updates, while more efficiently utilizing multicore CPUs.

The visualizations below show simplified examples of modern browsers using the CPU as content is loaded, either as part of page load or as part of dynamic content updates. The first stage of this process is content processing, which involves downloading, parsing, creating the DOM, and laying out elements on the page. This is followed by the actual rendering process — drawing content on the screen.

While the browser has always tried to utilize the rendering thread wherever possible, as previously mentioned, it often could not be used due to the presence of the certain elements on the page. This resulted in a more saturated main thread, as the content processing and rendering operations had to be performed sequentially:

c74ab6b5dcbeb010e2e46825201f0e3e-1024x336.png

Figure 1. CPU activity sequence required to display a web page in EdgeHTML 15. Note that the rendering thread is available, but is not always used due to the presence of certain elements on the page.


Now that EdgeHTML 16 supports independent rendering of these elements, rendering can happen independently of content processing:

b31599d56b2e1bdc9022971afe088787-1024x336.png

Figure 2. CPU activity sequence required to display a web page in EdgeHTML 16.


By leveraging multiple CPU cores, parallelized rendering results in faster page load times across the sites you use daily while using a similar amount of total CPU time.

Allowing applications to do more per frame


Another scenario that often benefits from independent rendering is script driven animations such as those present in games or complex visualizations. A typical rendering pipeline for such applications is as follows:

  • Setting up the frame – updating model, view
  • Requesting updated view to be rendered
  • Getting a callback for the next available frame and repeating the sequence

Similar to the previous page load and content update scenarios, the following visualization shows how the frame by frame rendering updates can be performed more efficiently by offloading rendering to a separate thread. When the duration of each frame is time constrained (e.g. to achieve a framerate of 60 frames per second, each frame can be no more than 16.7ms long), every millisecond saved helps your applications achieve their target framerates.

9f730e4da1b0f61e9f38e80376e69095-1024x336.png

Figure 3. CPU activity sequence required to process frame updates – can lead to missing frame targets.

417c728d97718c36bc949e7e27696a9b-1024x336.png

Figure 4. CPU activity sequence required to process frame updates – can improve frame rates by freeing up main thread.

Faster vector graphics with independently rendered <svg> elements


In EdgeHTML 16 we’re introducing independent rendering support for the following SVG elements:

  • Clip-path
  • Gradients
  • Markers
  • Masks
  • Patterns

These elements have already been supported in Windows Insider Preview builds for some time, and we are going to introduce support for independently rendered SVG filters in an upcoming Windows Insider Preview build.

Our telemetry shows that these SVG elements were the main reason that independent rendering was disabled on the top 100 sites. We’re excited to see these sites rendered even faster as a result of these improvements!

Faster 2D graphics with independently rendered <canvas> elements


In addition to the improvements outlined above, we are also introducing independent rendering for 2D <canvas> content.

Supporting independent rendering for canvas was critical to improving the performance of many demos, games and other interactive content on the web. Our telemetry showed 2D <canvas> was the leading cause of independent rendering being disabled across in browsing sessions by volume.

Common canvas APIs are now significantly faster in the EdgeHTML 16:

91b62df83170edd8f8aac2e026982888-1024x545.png

Figure 5. Canvas APIs Performance (ms; 75 percentile) shows improvements in EdgeHTML 15 to EdgeHTML 16.

Other improvements


We’re also happy to report that our work to make apps and sites faster also accrues to benchmarks. We’ve run the MotionMark benchmark on two identical Surface Book laptops and measured a 43% overall score improvement!

9b29ece94bf1c3d199aec937e5dbd7cd-1024x727.png

Figure 6. Overall 43% improvement in MotionMark score from EdgeHTML 15 to EdgeHTML 16.


We couldn’t be more excited to see web content get dramatically faster in EdgeHTML 16 on a wide variety of hardware. We look forward to seeing web developers deliver an even faster and more graphical web soon!

Bogdan Brinza, Matt Kotsenas, and Scott Low
Program Managers, Microsoft Edge

Source
 

samit

Level 12
Verified
Nov 4, 2011
830
Personally, the only problem I had with MS Edge is none of the google products works well with it. For example, file upload doesn't work in google drive. However, I find MS edge much better browser than other browsers I have used and also it has all the extension I need. So, I have been using MS Edge as a default browser. There are things though which I want MS Edge team to improve are better developer tools and availability to use extensions in private mode and I wish MS put extension tab in Windows Store for better accessibility.
 

mlnevese

Level 26
Verified
Top Poster
Well-known
May 3, 2015
1,531
Personally, the only problem I had with MS Edge is none of the google products works well with it. For example, file upload doesn't work in google drive. However, I find MS edge much better browser than other browsers I have used and also it has all the extension I need. So, I have been using MS Edge as a default browser. There are things though which I want MS Edge team to improve are better developer tools and availability to use extensions in private mode and I wish MS put extension tab in Windows Store for better accessibility.
That's part of the better support I was talking about. It's not simple to find available extensions right now.
 

Moi61

Level 2
Verified
Mar 19, 2016
61
At least, I am not alone here in using Microsoft Edge. The only drawback for me right now is that Bitdefender Wallet is still not available for Microsoft Edge. I hope it will be available soon. I think its faster than Google Chrome at some point. But the lack of support for extensions really makes it inferior than any other browser. But at least, there are available ad blockers for Microsoft Edge now. And, I really like the Bing homepage that changes its background. Hehehe.
 

Azure

Level 28
Verified
Top Poster
Content Creator
Oct 23, 2014
1,712
I have been using Edge as my default browser since a long time ago. It's fast, stable and the dark theme looks nice especially combine with sites with their own dark theme like MalwareTips. Video players play in HD quality smother in Edge than in Chrome (at least that seem to be the case from my initial experience, don't know if Chrome has improve in that regard)

It already has a decent amount of extension.
Probably not going to use it much either but is the improvement now active in Edge?
Was it in an Update? I see no reference.
This is for the Fall Creators Update

If it gets better plugin/extension support I may actually start to use it.
What extensions do you want it to have?
 

mlnevese

Level 26
Verified
Top Poster
Well-known
May 3, 2015
1,531
Xma
I have been using Edge as my default browser since a long time ago. It's fast, stable and the dark theme looks nice especially combine with sites with their own dark theme like MalwareTips. Video players play in HD quality smother in Edge than in Chrome (at least that seem to be the case from my initial experience, don't know if Chrome has improve in that regard)

It already has a decent amount of extension.

This is for the Fall Creators Update


What extensions do you want it to have?
Xmarks or other bookmark synchronization extension and a download assistant that may capture all links in a page like down them all, for instance
 

samit

Level 12
Verified
Nov 4, 2011
830
That's part of the better support I was talking about. It's not simple to find available extensions right now.
I agree with that and it is also made worse by MS by not allowing developers to publish extension in store easily. Like, IDM developers can't publish extension in the store so currently we have to enable IDM extension in Edge through extension developer features.
 
Status
Not open for further replies.

About us

  • MalwareTips is a community-driven platform providing the latest information and resources on malware and cyber threats. Our team of experienced professionals and passionate volunteers work to keep the internet safe and secure. We provide accurate, up-to-date information and strive to build a strong and supportive community dedicated to cybersecurity.

User Menu

Follow us

Follow us on Facebook or Twitter to know first about the latest cybersecurity incidents and malware threats.

Top