first, what is the front-end
performance optimization from the user access resources to the full display of resources in the process of the user, through technical means and optimization strategy, shorten the processing time of each step to improve the overall resource access and rendering speed. second, why to do the front-end performance excellentimprove website performance and enhance user experiencethird, the principle of front-end performance optimization1. Local conditions2, not the bug Iv. What are the stages of a browser-initiated request to a page that can be viewed normallypreprocessing-->dns parsing --building a connection--initiating a request--waiting for a response----data--and processing elements--layout renderingFive, the specific method of performance optimizationa) content level
1, DNS resolution optimization (DNS cache, reduce DNS lookups, keep-alive, appropriate host domain name)
2. Avoid redirection
3. Slicing to multiple domain names
4, eliminate 404II) network transmission phase
1. Reduce the size of the entity during transmission Please reduce the basic principle of HTTP request: When we request the webpage file has many pictures, CSS, JS even music and other information, will be frequently connected with the server, and release the connection, which will inevitably cause the waste of resources, and each HTTP request will have a performance burden on the server and browser. Workaround: See 2nd.
1) Cache 2) cookie optimization Because the cookie is a local disk file, each browser will read the corresponding cookie, so it is recommended to remove unnecessary coockie, so as to minimize the Coockie volume to reduce the impact on user response;
When using cookies to operate across domains, be aware of setting Coockie on the domain name of the adaptive level so that the subdomain is not affected;
Cookies are life-cycle, so please be aware that setting a reasonable expiration time, reasonably expire time and not removing coockie prematurely, will improve the user's response time.3) file compression (accept-encoding:g-zip) the biggest key to picture data is compressing pictures1) Image format 2) Use Base64 (convert to binary encoding) Embedding principle: Introduce picture path, convert to binary by Base64, (define a function), in which a new picture is drawn through the coded canvas of the transformation3) Compress pictures and use picture Sprite technologyFundamentals:
Note: In fact, compressed picture and Picture Wizard is two aspects of the technology, but since all is about the optimization of the picture or put a piece of it.
Now because of the breakdown of the work, professional front-end engineers have little chance to cut the picture, but about the image compression still have to understand slightly, the general picture compression methods are:
1. Reduce the image resolution;
2. Change the image format;
3. Reduce the quality of picture preservation
2, reduce the number of requests 1) Proper merging of documents2) Sprite Chart
3, asynchronous loading (concurrency, Requirejs)
4, pre-load, delay loading, load on demand
5. Please understand Repaint and Reflow correctly
Note: Repaint and Reflow are redrawing and rearrangement
Basic principle:
Repaint (redraw) occurs when the appearance of an element is changed, but without changing the layout (wide height), such as changing visibility, outline, background color, and so on.
Reflow (Reflow) is the DOM changes affect the geometry of the element (and height), the browser will recalculate the geometry of the element, will invalidate the affected part of the rendering tree, the browser will verify all the other nodes on the DOM tree visibility properties, This is also the cause of reflow inefficiency. Such as: Change the size of the window, change the size of the text, change the content, browser window changes, style property if the reflow too often, the CPU usage will be the increase of miso, so the front end also need to know Repaint and reflow knowledge.III) Rendering phase
1, JS put the bottom, CSS put the top
Fundamentals:
Note: This is a very basic and must follow the knowledge point, but for the integrity of the article to add in it, hey.
The benefits of introducing external files are obvious, and it is necessary to do so when the project is slightly more complex.
Easy to maintain, easy to expand, easy to manage and reuse.
The right way:
JavaScript is the Overlord in the browser, why do you say so, because in the browser when executing JavaScript code, do not do other things at the same time,that is, each time the page waits for the parsing and execution of the script (whether JavaScript is inline or out of the chain), the JavaScript code executes,to continue rendering the page. This is also the JavaScript blocking feature.
Because of this blocking feature, it is recommended to put JavaScript code before the tag, which can effectively prevent JavaScript blocking, but also make the HTML structure of the page can be released faster.
2. Reduce repainting and reflow
3, the use of Viewport and other meta-head
4, reduce the operation of the DOM Rationale: The cost of DOM manipulation is high, which is often a performance bottleneck in Web applicationsin high-performance JavaScript, the analogy: "Think of Dom as an island, and JavaScript (ECMAScript) as another island, connected by a toll bridge." so every visit to the DOM teaches a bridge fee, and the more times you visit, the more money you pay. Therefore, it is generally recommended to minimize the number of bridges. reduces query and modification of DOM elements, which can be assigned to local variables when queried.
Note: In IE: hover will slow down the responseIV) data transmission type
use JSON format for data exchange
Basic principle:
JSON is a lightweight data interchange format that is ideal for data interchange in a completely language-independent text format. At the same time, JSON is a native JavaScript format, which means that working with JSON data in JavaScript does not require any special APIs or toolkits.
Compared to XML serialization, JSON serialization typically results in smaller data volumes than XML serialization, so JSON is used as a way of exchanging data in well-known websites such as Facebook. JS Operation JSON:
In JSON, there are two kinds of structures: objects and arrays.
An object ends with "{" Starting with "}". Each "name" is followed by a ":" and "," (comma) separated by the name/value pair. The name is enclosed in quotation marks, and if the value is a string, it must be enclosed in quotation marks, and the numeric type is not required. Such as:
var obj={"name": "Darren", "age": $, "location": "Beijing"}
An array is an ordered collection of values (value). An array ends with "[" Start, "]". Use "," (comma) to separate values. Such as:
var jsonlist=[{"name": "Darren", "age": +, "location": "Beijing"},{"name": "Weidong.nie", "Age": $, "location": "Hunan" }];
The operation of this array and object literal is very convenient and efficient. If you know the JSON structure in advance, it is wonderful to use JSON for data passing, and you can write very useful, aesthetically readable code. If you are a purely front-desk developer, you will love json very much.( v) script execution phase
1, cache nodes, minimize the search of nodes
2, reduce the operation of the node (InnerHTML)
3, avoid unnecessary circulation, break, continue,return the appropriate use
4. Event delegation(see three) below 4)
principle:Event Delegation is the ability to manage all events of a certain type by using event bubbling to specify only one event handler. (simply delegate to the parent element)
Web Front End performance optimization
