Advised others countless times, let others drink chicken soup, help others to fill the pit, but fell into the pit

1. Introduction

In front end learning, many people focus on learning code (HTML, CSS, JS). Or frameworks, libraries (jquery, Vue, React), or tools (Webpack, gulp). In previous articles, or in conversations with others, I have suggested that others practice more, don’t just write code, learn more about the principles, learn the ideas. But besides code, what else should be extended as a front end? Below is a brief list of recent learning resources. If you have any more suggestions, please leave them in the comments section.

The following knowledge may not need to be too in-depth and detailed, but it must be understood, so that when encountering problems in development, it will be the icing on the cake, if not the icing on the cake.

2. The HTTP, HTTPS

On the front end, you inevitably have to deal with interfaces. In addition to interface with the background, request data, render the page. To HTTP request, also want to have an understanding, for example HTTP protocol, request mode, request process, result status code and so on. Understanding these, the development of the time may encounter problems, you can probably know how the problem is generated, faster to know how to solve, avoid.

2 to 1. The request

The first is a request, which contains the request header, the request line, and the request body. How to see the following code

axios({
  method: 'post',
  url: '/user/12345',
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'  
  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'}});Copy the code

As mentioned above

Method and URL are the request line for this request. The attributes in headers are the request header. The attributes in headers are all contained in the request header. It is a way for the server to obtain the client version, cache and other information. Data corresponds to the body of the request, also known as the parameters.

2 – (2) the response

When a request is sent and the response has come back, the immediate message can be divided into response lines, response headers, and response bodies.

Response line

The following code is the response line for the request. It returns the HTTP protocol and version of the request, the status code, the request status, and so on.

Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1 Request Method:GET Status Code:200 OK Remote Address: 117.23.61.221:443Copy the code

Response headers

The response header is in the same format as the request header, and the version and cache information are returned.

In response to the body

The most common contact is the response body, which is the data needed for daily development. Once the developer gets the data, they process it accordingly.

2-3. About the HTTPS

About HTTPS. To understand the disadvantages of HTTP, HTTPS is an encryption process based on HTTP.

1. The communication is in plain text and not encrypted, which may be eavesdropped 2. The identity of the communicating party is not verified, which may be disguised 3. Packet integrity cannot be verified and may be tampered

2-4. Relevant information

About HTTP and HTTPS on the simple here, detailed recommendations to see the following data.

HTTP tutorial

HTTP protocol 【 解 析 】 — a classic interview question

A story tells HTTPS

3. Response status code

I mentioned the response status code above, but I’ll just write it down here. In the front end, the request interface may be exposed to a variety of situations, the following are common, how should be solved, is a specific problem, specific analysis.

Status code meaning
200 The request is successful
400 Parameter error
403 Deny or deny access (no access)
404 Address does not exist
405 The method in the client request is disabled.
500 Server error
502 Request timed out, invalid gateway
503 The server is overloaded or under maintenance and cannot respond

3-1. Resources

For details about the status code, see the following.

The HTTP status code

4. Front-end security

4-1.XSS

Cross Site Scripting (XSS) is a cross-site Scripting attack. To distinguish CSS, it is abbreviated as XSS. XSS attack is to insert malicious JavaScript code into the Web page. When the user browses the Web page, the inserted code is executed to achieve the purpose of attack.

One of the more common applications is in some common interactive areas of the web page. For example, in the search text box, in addition to some keywords can be entered, but also some JavaScript code can be entered, once the code click search, the code will be executed to achieve the purpose of attack. The following example

<script>alert(document.cookie); </script>Copy the code

Enter the above code in the text box, then click Submit, and the user’s cookie pops up.

To prevent XSS

1. Mark important cookies as HTTP ONLY, so that JavaScript code cannot call them and ONLY HTTP can call them. Or you can store important information in the session.

2. Only allow the user to enter the data we expect. Such as consumption amount box can only input numbers and decimal points.

3. Encrypt the data.

4. Filter or remove special HTML tags, filter JavaScript code, etc.

4-2.CSRF

Cross-site Request Forgery (CSRF) is cross-site request forgery. Unlike XSS, which takes advantage of a trusted user within a site, CSRF steals information by pretending to be from a trusted user on a trusted site. In effect, the attacker steals the victim’s identity and sends malicious requests to the site in the victim’s name.

The idea of CSRF attack

Reference a diagram of CSRF attack principle and defense to explain.

Image from CSRF Attack Principle and Defense

According to the steps, look at the picture, I believe it is not difficult to understand, is in a website to retain cookies, and then visit some dangerous websites, and then be dangerous websites to steal user information.

CSRF defense

1. Add a Hash value to the form to verify that the request is indeed sent by the user, and then perform the Hash value authentication on the server side.

2. Verification code: Each user submission requires the user to fill in a random string on the picture in the form.

3. Modify or add important information, such as passwords and personal information, and try to use POST. Avoid using GET to expose information to urls.

4 – (3) the crawler

Unlike the previous XSS and CSRF attacks, anti-crawler is designed to prevent important website data from being taken away by others, such as the transaction volume of e-commerce, the box office statistics of movie websites, and the reviews of music websites.

Counter crawlers, how much imagination can front-end engineers have?

5. Rendering process, principle

1. The browser uses DNS to parse the URL and find the corresponding IP address.

2. Initiates a network request to an IP address and initiates an HTTP session: The client sends a header (request header) and the server sends a response header (response header).

3. The server according to the request, to the background processing, processing is completed after the return of file data, the browser to receive file data (HTML, JS, CSS, images, etc.); Return a page (retrieved from the resend request based on the URL of the external link on the page)

4. After the browser receives the file, it parses the loaded resources and provides the corresponding internal data structure (page rendering).

6. Cross domain

In terms of cross-domain, we don’t have much contact with each other. We also have to let the background allow cross-domain (cross-domain resource sharing). However, this cross-domain is also an inescapable topic.

6-1. Situation analysis

URL instructions Whether to allow communication
http://www.example.com/a.js, http://www.example.com/lab/b.js Same domain name, different file or path allow
http://www.example.com:8000/a.js, http://www.example.com/b.js Same domain name, different port Don’t allow
http://www.example.com/a.js, https://www.example.com/b.js Same domain name, different protocol Don’t allow
http://www.example.com/a.js, http://192.168.2xx.2x/b.js The domain name corresponds to the same IP address Don’t allow
http://www.example.com/a.js, http://x.example.com/b.js, http://domain.com/c.js The same primary domain, but different subdomains Don’t allow
http://www.example.com/a.js, http://www.demo.com/b.js Different domain name Don’t allow

6-2. Solution

There are a lot of solutions on the Internet for cross-domain, everyone reference to see good. Despite this list, I’ve only used two.

1, the json

Document.domain + iframe

Location. hash + iframe

4、 window.name + iframe

5、 postMessage

6. Cross-domain Resource Sharing (CORS)

7. Nginx Agent

8. Nodejs middleware proxy

9. WebSocket protocol

6-3. Resources

Common cross-domain solutions on the front end (full)

Front-end cross-domain knowledge summary

7. Optimize performance

Here only talk about a general, specific operation to rely on their own ask search engines.

7-1. Optimize the first screen

On demand loading, non-first screen images using preloading or lazy loading, DNS, compression code, merging images, reducing requests, etc.

7-2. Algorithm optimization

Reduce redundant code, control the number of cycles, avoid huge functions, etc.

8.SEO

As a front-end developer, you should be exposed to a lot of SEO. Front end aspect, pay attention to SEO point also many. Below simple write down, in my development of the project, there are also a few projects need to do SEO, personal suggestions are as follows:

8-1. Meta tags

Define keywords, site description

< meta name="keywords" content="Keyword 1, Keyword 2" />

< meta name="description" content="Descriptor 1, descriptor 2." />
Copy the code

8-2. Semantic HTML tags

On the one hand, use HTML tags to achieve semantic purposes, such as lists using UL, OL. Use tables, etc. It is not recommended to use divs for all elements.

The other is to use the semantically oriented tags that HTML5 provides whenever possible.

Before writing

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
Copy the code

Suggest writing

<header></header>
<main></main>
<footer></footer>
Copy the code

The level of 8-3. HTML nesting should not be excessive

The point is to try to make HTML as flat as possible and avoid too much nesting, but this is relatively difficult.

8-4. The four attributes of the img tag cannot be saved

<img src="" alt="Picture description" width="" height=""/>
Copy the code

The Alt attribute is designed to allow the text to be displayed when the image fails to display due to slow network speed, incorrect SRC reference, browser disabling image, user using screen reader, etc., so that the user can get a general idea of what the image is.

The width and height are used to prevent the page from being rerendered, or the layout of the page from being mislaid, because the image cannot be displayed.

8-5. Use of labels H1-H6

1. It is recommended that only one H1 tag appear on a page, and it is usually used on the page log.

2. The h2 tag is usually used for the main heading of the details page. The details page has no logo and uses h1 for the title. If there are subheadings, use H3.

3. H1-h6 labels are loaded with weights. If you only want to set font size or distinguish styles, you should not use H1-H6.

8-6. Other aspects

Other ways about SEO, on the Internet to see such a method, but I did not try to do so above the development, here is a simple list, everyone reference below.

Avoid the iframe tag

Use display:none;

The a tag tries to add the title attribute

Use the layout to put the important HTML code first

Use the “rel=nofollow” attribute to centralize the site weights

It’s been very popular for a while now to split back and forth, and single-page apps. But it’s not clear how to do SEO with separation and single-page applications (as far as I know, it can’t be done). Our current practice is to do SEO projects, the front end is only responsible for cutting the picture, and then the background shop data, server rendering, not front-end rendering.

9. Heap? Stack?

The stack (stack) automatically allocates memory space and automatically releases it. Dynamically allocated memory of variable size that is not automatically freed from the heap.

Basic types: Undefined, Null, Boolean, Number and String. These 5 basic data types can be directly accessed. They are allocated according to the value, stored in the stack (stack) memory.

The following example

let a=1;
let b=a;
Copy the code

If I change b

b=2;
Copy the code

Although b is initially assigned by a, a and B are stored separately in stack memory, and modifying one has no effect on the other.

Reference types: objects that are stored in the heap. What the variable actually holds is a pointer to another location.

The following example

let a={name:'wait'};
let b=a;
Copy the code

If I change b

b.name='sh';
Copy the code

If b is assigned by a, a and B share the same heap memory. Modifying a or B directly changes the heap memory value, which affects the other.

10. Responsive and adaptive

I don’t hear much about these two concepts now. Maybe it’s because the mainstream is now that PC and mobile are separate projects, or maybe it’s because these two concepts are more of a blueprint job. The last time I talked to anyone about this was about a year ago, when I was a kid.

But as for the difference between the two concepts, it’s good for you to know, and you can probably understand it by looking at two pictures.

What’s the difference between responsive and adaptive? (This article is also probably plagiarized, but since I can’t find the source of the picture, I will declare this.)

In short:

Adaptive: a web page that changes as the width of the screen changes. There’s only one set of code. On individual screens, typography is ugly, but design and development costs are low.

Responsive: A web page that displays different effects depending on the width of the screen, usually two or more sets of code. It looks good on all screens, but it’s expensive to design and develop.

Adaptive instance: Ctrip

Reactive instance: SegmentFault

11. A summary

The reason why I want to post this piece to summarize these concepts is because when I talk to others, there is always a “yes” rather than “no” concept. So RECENTLY I took the time to look at some of these concepts and share some of this knowledge with you. These concept knowledge, may just understand, probably know good, some may want in-depth understanding, this depends on individual needs. Finally, if there are any other concepts that you would like to recommend that are important to know, please leave a comment in the comments section.

— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — —

For more information, please follow my wechat official account: Shoushuge