Make writing a habit together! This is the second day of my participation in the “Gold Digging Day New Plan · April More text challenge”. Click here for more details.
The introduction
As a qualified front end engineer, browser-related principles are the cornerstone of our performance optimization. This article takes a look at some of the important issues in browsers. The chapters are organized from easy to difficult, and readers are advised to read them in chapter order. Hope that the reader read this article, there is a certain inspired thinking, to make up for the omissions, to have a better grasp of the working principle of the browser.
The author will also stand in the perspective of the interviewer to answer the following questions, and appropriate analysis.
1. Talk about the difference between Http and Https
HTTPIs not secure, whereas HTTPS is secureHTTPThe standard port is 80, while HTTPS’s standard port is 443HTTPCannot be encrypted, and HTTPS encrypts data over SSLHTTPNo certificate is required, whereas HTTPS requires an SSL certificate issued by the CA
2. Talk about your understanding of the TCP three-way handshake
- First handshake: the client sends a connection request. The server can only accept the segment of the packet sent by the client
- Second handshake: The server sends a link to the customer service to confirm that the customer service has received the packet
- Third handshake: The server confirms that the client has received the packet segment
3. Talk about cookie, sessionStorage, localStorage difference
- First of all, cookies, sessionStorage and localStorage are stored in the client
- Size limits: cookie data cannot exceed 4kb. SessionStorage and localStoragelocalStorage support a maximum of 5MB
- Different data validity periods:
- Cookies are valid within the validity period set by the server, regardless of whether the window and browser are closed
- SessionStorage only lasts until the current browser window closes, close and destroy (temporary storage)
- LocalStorage is always valid and must be manually destroyed to become invalid
LocalStorage: used for long-term login and is suitable for data stored locally for a long time. SessionStorage: one-time login with sensitive accounts. Cookies interact with the server.
4. What’s the difference between GET and POST?
-
From a caching perspective, GET requests are actively cached by the browser and leave a history, whereas POST requests are not cached by default.
-
From a parameter perspective, GET is generally placed in the URL and therefore is not secure, while POST is placed in the request body and therefore is more secure.
-
From a TCP perspective, a GET request sends the request packet at once, while a POST is split into two TCP packets, with the header part first and the body part if the server responds with 100(continue).
5. Common HTTP status codes
| Status code | describe |
|---|---|
| 200 | The request is successful |
| 301 | Permanent redirection |
| 302 | Temporary redirection |
| 304 | The requested resource is not modified. You can use the cached resource instead of fetching it from the server |
| 400 | Request has syntax error |
| 401 | No access |
| 404 | The requested resource does not exist |
| 500 | The server had an internal error and could not complete the request |
| 503 | The request was not completed due to server overload, downtime, or maintenance |
6. Can you talk about caching
Caches are classified into strong cache and negotiated cache. The strong cache is not the server. The negotiation cache needs to pass the server. The negotiation cache returns the status code 304. Both types of caching mechanisms can exist at the same time, with strong caching taking precedence over negotiated caching. When a strong cache is executed, if the cache hits, the data in the cache database is directly used without cache negotiation.
Strong cache
The first step is to check for strong caching, which does not require sending an HTTP request.
Strong caching has two main attributes: Expires and cache-control
- Expires: The Exprires value is the expiration time of the data returned by the server. When the request time is less than the return time, the cache data is directly used, but there are some disadvantages because the absolute time is used. If the server time is inconsistent with the client time, it will lead to the cache hit bias, so it is rarely used.
- Cache-control: The most commonly used attribute is max-age, which can set the specific Cache time. Strong caches use this attribute.
Negotiate the cache
Negotiation caches require comparison to determine whether caches can be used. The first time the browser requests data, the server responds with the cache id along with the data to the client, which backs it up to the cache. When requested again, the client sends the cached identity to the server, which determines based on this identity. If not, the 304 status code is returned and the browser can use the cached data directly.
The negotiated cache has two main attributes: Last-Modified and Etag
Last-modified: When the server responds to a request, it tells the browser when the resource was Last Modified.
If the browser receives the request and requests it again, it will carry the if-Modified-since field in the request header. The value of this field is the last modification time sent by the server. When the server receives the if-Modified-since field in the request header, it will be compared with the last modification time of the resource in the server. However, it has some disadvantages because it is based on the unit of seconds. If the operation is millisecond, there may be some error, so it is rarely used.
Etag: This field tells the browser the unique identity of the current resource generated by the server when the server responds to a request.
If the browser receives the if-none-match field and requests it again, it will carry the if-none-match field in the request header. The value of this field is the unique identifier generated by the server. When the server receives the if-none-match field in the request header, it will compare it with the unique identifier in the server. This property is commonly used by negotiation caches.
7. Common Web security and defense principles
SQL injection
SQL code is an attack in which SQL code is disguised as input parameters and passed to the server for parsing and execution.
Guard:
Verify user input. 2. Do not use dynamic concatenation SQL
XSS (Cross-site scripting attacks)
Insert malicious HTML tags or JS code into web pages.
Guard:
1. Try to use POST instead of GET to submit the form. 2
CSRF(Cross-site Request Masquerade)
Take an example of masquerading a request from a trusted user.
Guard:
Add pseudo random number in the customer service page, through the verification code
recommended
If you want to continue to learn about CSS, you can watch the author of another article (interview treasure guide) CSS chapter – Nuggets (juejin. Cn)
If you want to continue to learn the Vue principle of readers, you can watch another article by the author [interview treasure guide] high frequency front end questions of Vue principle of readers – nuggets (juejin. Cn)
If you want to continue to learn the JS principle of readers, you can watch the author of another article [interview treasure guide] high frequency front end questions of JavaScript principle – nuggets (juejin. Cn)
If there are readers who want to continue to learn the common method of handwriting JS, you can watch the author of another article [interview treasure guide] high frequency front end questions of handwriting commonly used JS method – digging gold (juejin. Cn)
conclusion
This article is the author’s personal study notes, if there are fallacies, please inform, thank you! If this article has been helpful to you, please click the “like” button. Your support is my motivation to keep updating.