Microsoft has highlighted the synergy between its Edge and Office development teams which helped it build better products for everyone.
Microsoft’s Office apps are available on a variety of platforms, and they get updated with new features quite frequently. Perhaps the most accessible way to leverage them is through their web variants where you can use apps like Word, PowerPoint, and Excel directly in your browser without having to pay anything. Of course, you may not always get the full feature-set that Office has to offer, but you will be covered for most, if not all, of your basic needs. Now, Microsoft has explained how it is making the Office experience on the web even better through collaboration between the Office and Edge teams.
Microsoft has emphasized that Office apps are particularly complex to implement on the web, similar to messaging and video conferencing apps. This because they host thousands of CSS modules and a couple of thousand nodes in the Document Object Model (DOM) tree, and send lots of HTTP requests on page loads. As such, it is important to build them in a way such that they offer the best possible performance without compromising on functionality. To cater to this requirement, the Edge development team programmed several new DevTools capabilities specifically to diagnose and fix performance issues in Office.
For starters, the team noticed that while profiling and recording CPU usage on PowerPoint launches on the web, CPU utilization increased drastically. Upon further investigation through Event Tracing for Windows (ETW), Edge developers realized that this was a bug in the implementation of the CPU profiler in Chromium because it was using a busy waiting approach, whereby it was running code even when it should have been waiting for the triggering of the next event. This might not have been detected when profiling simple applications, but was noticed during PowerPoint’s testing, due to its complexity. The Edge team was able to fix the issue, reducing CPU sampling overhead by 95% and knocking down CPU utilization by 71% while profiling. Overall, this aided the PowerPoint team in getting a more accurate picture of their load performance, while also benefiting everyone else who uses these DevTools.
Next, source maps are now supported in Performance and Memory tools on Edge too. In particular, the former automatically displays un-minified function and file names, which makes it a lot easier to debug issues. This un-minification process has enabled the PowerPoint team to quickly pinpoint problems in the code such as bad patterns of programming. In addition, support for Azure Pipelines has been introduced, which means that you can easily publish source maps during the build process.
In the same vein, when the Microsoft Word team was investigating the performance of the app on the web, they spotted a 75ms styling recalculation delay, which was slowing down the launch of Word. By leveraging Performance tools in Edge, the developers were able to identify that this was due to an inefficient implementation of a JavaScript function, which they were then able to resolve. Microsoft has also highlighted Selector Stats in Edge DevTools which facilitates web developers by letting them know which CSS selectors could be impacting their application’s performance negatively.
There are tons of other improvements that have been made in the Memory tool in Edge too: it can load larger heap snapshot files, the generation of heap snapshots over 1GB in size is 70-86% faster, you can compare two snapshots by retainer path, and navigate them more easily too.
Microsoft says that this synergy between the Edge and Office development teams empowered it to build better products that not only benefit these two teams but other web developers and end-users who utilize their products too. If you have any other feature request or spot a bug, you can mention it in the dedicated GitHub repository here.