Some understanding of front-end optimization
in Note with 0 comment
Some understanding of front-end optimization
in Note with 0 comment

Since I started web development, I have been trying to understand and even achieve performance optimization. I have never written an article to sort out these. So today I have this article

First of all, performance optimization is a very big topic. The content of this article is just a sub topic of the topic of performance optimization - front-end performance optimization. Front end performance optimization is a very broad concept

The ultimate purpose of front-end optimization is to improve user experience and page performance. Violation of these two points is not front-end optimization.

This article will focus on what is front-end performance and how to understand and evaluate front-end page performance

Front end performance

First, start with a common formula···

$$ view = f(data) $$

View is the page you see or execute a page action f(data) The function of

The front-end performance can be understood as a real-time indicator for users to obtain the required page data or execute a page action. If we use the time complexity concept of algorithm to describe, the time complexity of f (data) is a measure of page performance.

Further understand through the following formula

$$ views = n * view $$

A complete page views can be obtained from a fixed number of views, that is, a complete page is composed of many views f(data) To jointly decide

More on that

A simple view is used to determine the f(data) Further decomposition will make the situation more complicated

To sum up, the front-end performance has f(data) Both the depth and the breadth of the view, and almost all indicators are based on these two basic points

The performance indicators are generally measured by time, which is generally measured by the time interval between the user's desired data acquisition operation and the user's actual data acquisition

Front end performance test

The performance of a page can be obtained and measured mainly through the following aspects: Performance Timing API, Profile tool, page burying timing, resource loading timing chart analysis, etc. This section only introduces the Performance Timing API.

Performance Timing API

What is the Performance Timing API? It is a mechanism that supports IE9 and above, as well as the webkit kernel browser, to record the key time points in the page loading and parsing process. It can record the specific operation time points in the process of each page resource from the start of loading to the completion of parsing in detail, so that the time spent in the whole process can be calculated based on the start and end timestamps

Specific standard reference W3C , the figure below is from W3C

 timing-overview.png

The figure above shows the schematic diagram of recording key points in the process of performance timing resource loading and parsing

It can be seen from the figure that the browser's detailed process of loading and parsing an HTML file has gone through several stages: unload, redirect, App Cache, DNS, TCP, Request, Response, Processing, and onload. Browser Usage performance.timing To record the critical time stamp at the beginning and end of each process. In this way, we can get the time consumed by each process in the page based on this record and simple calculation

 function performanceTest(){ let timing = performance.timing, readyStart = timing.fetchStart - timing.navigationStart, redirectTime = timing.redirectEnd  - timing.redirectStart, appcacheTime = timing.domainLookupStart  - timing.fetchStart, unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart, lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart, connectTime = timing.connectEnd - timing.connectStart, requestTime = timing.responseEnd - timing.requestStart, initDomTreeTime = timing.domInteractive - timing.responseEnd, domReadyTime = timing.domComplete - timing.domInteractive, loadTime = timing.loadEventEnd - timing.navigationStart; Console. log ('Time spent preparing new pages: '+readyStart); Console. log ('Redirect redirection time: '+redirectTime); Console. log ('Appcache Time: '+appcacheTime); Console. log ('document time before unload: '+unloadEventTime); Console. log ('DNS query time: '+lookupDomainTime); Console. log ('TCP connection time: '+connectTime); Console. log ('request request time: '+requestTime); Console. log ('the request is completed until the DOM is loaded: '+initDomTreeTime); Console. log ('Interpretation time of dom tree: '+domReadyTime); Console. log ('load event duration: '+loadEventTime); Console. log ('Total time from start to load: '+loadTime); }

Through the time stamp calculation above, we can get the time consumed by several key steps. The processes that are meaningful to the front end are: time consuming for parsing DOM trees, time consuming for load events, and time consuming for the whole process

Performance also provides some other functions, as follows:

 Performance.memory//The specific data of memory usage Performance. now()//Returns the time from performance timing to the current page, which can be accurate to microseconds Performance. getEntries()//Get the performance timing of all loaded resources on the page Performance. navigation//Provide user behavior information, such as network request type and redirection times Performance.navigation.reditCount//Records the number of redirects to the current page

Of course, there is still much to be said and added, which will be continued in the next article~

Not much content, about that~

Responses