Front-end optimization (not including framework optimization strategy)

Reference answer

Reduce request volume: merge resources, reduce HTTP requests, Minify/gzip compression, webP, lazyLoad.

Speed up the request: pre-resolving DNS, reducing the number of domain names, parallel loading, CDN distribution.

Cache: HTTP protocol cache request, offline cache manifest, offline data cache localStorage.

Rendering: JS/CSS optimization, loading order, server-side rendering, pipeline.

GET and POST

Reference answer

The GET argument is passed through the URL, and the POST is placed in the request body.

Get requests pass parameters in the URL with length limits, whereas POST does not.

Get is less secure than POST because parameters are directly exposed in the URL and therefore cannot be used to pass sensitive information.

Get requests can only be url encoded, while POST supports multiple encoding methods

Get request parameters are retained in the browser history, while POST parameters are not.

GET and POST are essentially TCP links and are no different. However, due to HTTP regulations and browser/server restrictions, they are applied differently.

GET generates a TCP packet; POST generates two TCP packets.

How to draw a triangle

Reference answer

div {
    width:0px;
    height:0px;
    /* If you want a triangle in that direction, set the opposite direction to opaque */
    border-top:10px solid red;
    border-right:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:10px solid transparent;
}
Copy the code

You type in a URL in the address bar, and when this page comes up, what happens?

Reference answer

After entering the URL, you need to find the server IP address of the URL domain name. To find the IP address, the browser searches the cache to check whether there is a record in the cache. The cache search record is as follows: Browser cache – system cache – Router cache. If there is no record in the hosts file of the system, query the DNS server. After obtaining the IP address of the server, the browser constructs an HTTP request based on the IP address and the corresponding port number. The request message will include the requested information, mainly is the request method and request instructions and accompanying the number According to, and will this HTTP request encapsulated in a TCP packet, the TCP packets will in turn after the transport layer, network layer, data link layer and physical layer to the server, the server parses the request to respond, Returns the corresponding HTML to the browser

Because HTML is a tree structure, the browser builds the DOM tree based on this HTML. During the DOM tree construction process, if it encounters JS scripts and external JS connections, it will stop building the DOM tree to execute and download the corresponding code, which will cause blocking. This is why the recommended JS code should be placed behind the HTML code, and then build a CSS object model tree CSSOM tree according to the external style, internal style and inline style, and merge the DOM tree into the render tree after construction. What is mainly done here is to exclude non-visual nodes. Such as script, meta tags and excluding nodes with display of None, and then layout, which determines the position and size of each element, and then render the page

Because HTML files contain images, videos, audio and other resources, in the process of DOM parsing, these will be parallel downloads, browsers have a certain limit on the number of parallel downloads per domain, generally 4-6, of course, in all these requests we also need to pay attention to caching, The Cache is controlled by header fields such as cache-Control, last-modify, and Expires. The difference between cache-Control and Expires is that cache-Control uses relative time, whereas Expires uses absolute time on the server. Because of time differences, cache-control is usually used. If not, the local cache is used directly. If the file is expired, the request is made and the server verifies whether the file has been modified. If the ETag value was set in the last response, the request will be sent to the server as if-none-match. If they are consistent, last-Modified is verified. If ETag is not set, last-Modified is verified directly, and then 304 is returned.

CSRF and XSS network attack and defense

Reference answer

CSRF: Cross-site request forgery, can be understood as the attacker steal the user’s identity, to send the evil in the name of the user Request, such as user login a web site, immediately in another TAB page views the attacker used in the manufacture of attack site, require access to this site just landing site, and send a malicious request, At this time, CSRF comes into being. For example, the attack site uses a picture, but the link of this picture can modify the database. At this time, the attacker can operate the database in the name of the user.

XSS: Cross site scripting attacks, it is said the attacker by injecting malicious scripts, attack on when users browse the web, such as cookies, or other user identity information, can be divided into storage type and reflection type, storage type is attack Some witnesses the input data and stored in the database, to attack other visitors to see, Reflective calls are not stored in the database. They are often displayed as attack codes placed in the request parameters of URL addresses. In case of defense, httpOnly attributes are set for cookies, and user input is checked and special character filtering is carried out.

How to see the performance of the site

Reference answer

Generally, there are two ways to detect page loading time. One is passive measurement: the script or probe is placed on the detected page. When the user visits the page, the probe automatically collects data and sends it back to the database for analysis

Another way of active monitoring is to actively build a distributed controlled environment, simulate the page access request initiated by users, and actively collect and analyze performance data. In terms of accuracy of detection, professional third-party tools, such as performance geeks, are more effective.