2015 45th Friday IE11 Utility Development tools extract and set IE cache

The role of the UI response tool

The UI response tool, as its name implies, is a tool for viewing the UI response time, which helps us determine which components in our application are taking up CPU time, allowing us to optimize our applications more specifically to maximize application performance while improving development efficiency.

The UI response tool in IE11 displays HTML, CSS and JavaScript execution in an intuitive visual manner, as well as the impact on layout and garbage collection, which represents the CPU occupancy per point in time, and the graph below shows the FPS of the page, which is the number of frames per second , this is the most intuitive way for us to judge whether the page is dropped or not, that is, to see the page "card". You can accurately understand the responsiveness of your application and the smoothness of your presentation from your statistics to identify specific factors that affect your application's performance and to optimize your application more specifically. And there are detailed time usage below, as long as we open the UI response tool and then load the page IE11 will help us automatically collect the completion.

Getting started with the UI response tool (CTRL + 5)

Let's start with a specific UI response tool to test it. If there are too many animations or user interface elements on your site that result in a slow response, you can reduce the user's experience, and this time it is possible to optimize through the UI response tool.

After opening the Web page F12 enable developer tools, click the UI Response Tool button to start a detection, waiting for the page to stop after loading. In front of you will be a color column chart generated from the loading of the site, showing ups and downs over time.

7 Main Event categories are displayed on the timeline. The loading load times, scripting script runs, GC garbage collection, styling style loading, rendering rendering, image decoding picture decoding, and other events are respectively. When you select a time period above, the associated resources for the included, booted, and loaded pages that are loaded during this time period are decomposed into the current timeline detail chunks.

loads The events that are related to the bootstrap and load Web resources. The events collected within the load are:CSS parsing, HTML parsing, HTTP requests, inference downloads .

The script contains JavaScript events related to processing and execution. The events collected within the load are: animation callbacks, DOM events, script calculations, timers.

GC, when garbage collection, identifies and removes items from memory that they no longer need.

styles contain CSS styles and elements that are anchored to related events. The events collected within a style are: layout, style calculation.

renders an event that contains information about placing an element on the screen. The events collected within the rendering are: rendering, image decoding.

Other: miscellaneous with browser-related calculations.

Timeline Detail block support start time, duration two ways to display, you can adjust the display mode according to the development situation.

The UI responsiveness tool can help you maximize application performance by helping you understand which components are consuming CPU time. The tool visually displays HTML, CSS, and JavaScript execution, as well as important marginal effects on layout and garbage collection, to help you gain insight into the internal work of IE. You can strategically advantageous position and accurately understand the responsiveness of your application and the smoothness of your presentation. In order to identify the specific reasons affecting the performance of the application, more targeted to optimize the application.

Skilled use of the UI response tool can help us to quickly understand the load response time of the Web page, and it is aware of the CPU time, if you want to know the page load memory consumption we need to use the Memory analysis tool to view.

Source: >   The role of memory analysis

Although JavaScript has a well-developed garbage collection environment, if the objects referenced by the app are not released in time or cannot be released, it usually causes the application to consume too much memory. The memory utility can display information about each object in the page, whether it is a JavaScript object or a DOM object, to help you discover these problems. For example, with this information, you can see how much memory is taking up and which objects make it active. As a best practice, you can compare the differences between two snapshots, locate the points that have changed, and find out why the application is taking up too much memory and fix them.

Getting Started with memory analysis tools

(CTRL + 7)

If your webpage is open normally, but slowly or sometimes crashes, the memory usage of the page may be problematic.

After loading the page into the browser, find the memory tool in F12 (using the camera icon or CTRL + 7) to start the analysis.

If your page's memory problem occurs from the start, but the memory usage does not continue to increase, click Take a snapshot and click into the details view of the snapshot to see where the problem is. If your memory usage is increasing over time, you can then take a new snapshot to compare to the previous one to discover the problem.

In the details view above, you will see a small blue icon, hover to see a ToolTip, why this item has a potential problem. In the above example, the DOM node is not attached to the DOM. This can occur when a node has been removed from the DOM, but is referred to elsewhere.

Supports display of three view types

? The Dominator view displays all the individual HTML elements, DOM nodes, and JavaScript objects created by your code. This is the most detailed analysis view.

? The type view can view the group object through its constructors, and gives a count of each type. This makes it easier to know how many arrays, how many strings are there, and so on. These entries can be further expanded to view.

? The root view displays the primary root objects that you can expand to view the child objects associated with them.

In these three views, you can see the size of the object and the size of the reservation.

The size represents the amount of memory used by the object.

The reserved size represents the amount of memory reclaimed by the deleted object.

The memory analysis tools and the UI response tools in the previous article are important ways to understand the performance of our website, and now we can easily use them in IE11. The creation of the site is not the end of development, but the beginning of optimization, we all hope that our site can run more and more good, the resource consumption is getting lower, can be on more computers can express fluency.

So this requires us to know our site in particular, but many of the site's internal performance we are not able to express in the page, this time we need the developer tools to play their role, before IE11, want to see in IE Browser CPU time and memory usage is almost impossible, In IE11, Microsoft has added UI response and memory analysis tools so that we can easily understand how the site is performing.

Source: >  
1. Force no Caching Method: HTML page Head header add the following code<meta http-equiv= "Pragma" content= "No-cache" > <meta http-equiv= "Cache-control" content= "No-cache" >< Meta http-equiv= "Expires" content= "0" >
2.in IE, if the URL submitted by XMLHttpRequest is the same as history, the cache is used and is not submitted to the server side at all. Therefore, the data that was just submitted cannot be taken. The processing method is to increase the timestamp or the random number after the request. Ajax sends a request when the URL is followed by a timestampfunction Converturl (URL) {//This method returns the millisecond-level data, which can be said to be the only if (URL) {var timeStamp = (new Date ()). ValueOf ();            var temparray = Url.split ("?");            var temparraylength = temparray.length;            if (temparraylength==2) {//appends a timestamp to the URL above url = url+ "&timestamp=" +TIMESTAMP;            }else if (temparraylength==1) {url = url+ "? timestamp=" +timestamp;        } return URL; }    }


From for notes (Wiz)

2015 45th Friday IE11 Utility Development tools extract and set IE cache