Recently I saw a very interesting list of front-end knowledge integration, and then the idea of emmmm…. was born

I drew a new diagram from the list, and then decided to integrate the knowledge points listed in the chart below (the desire to conquer ignited). After work, xiaobian spent about a week to sort out, the length is long, it is recommended to collect slowly and carefully.

Javascript based

Variables and Types

1. The variable

Js variables, in plain English, are a ‘container’ for storing data. We need to pay attention to the following points when defining variables:

  • Variable name size is sensitive to uppercase and lowercase letters;
  • Variable names must start with a letter$And the _ symbol, but not recommended);

Type 2.

Boolean, String, Number, Null, Undefined, bigInt, Symbol, Object

  • There are six basic types:Boolean.String.Number.Null.Undefined.Symbol
  • There is one type of reference data type:ObjectIn JS, everything except the basic data types are objects,Data.function.Array, regular expressions are objects.)

Note: Symbol is a new raw data type introduced in ES6 that represents unique values.

Extension: On the differences and similarities between null and undefined. Similar to null and undefined to some extent, but slightly different.

Null means’ no object ‘, meaning there should be no value there. (It can also be understood that null is defined but the value is empty, allocated memory);

  • As an argument to a function, indicating that the argument to the function is not an object.
  • As the end point of the object prototype chain.

Undefined means undefined, a special value, usually used to indicate that the variable has not yet been assigned, and its value is undefined.

  • When a variable is declared but not assigned, it is equal toundefined(more common).
  • When the function is called, the argument that should be provided is not provided, which is equal toundefined.
  • Object has an unassigned property whose value isundefined.
  • Function returns no value by defaultundefined.

Prototypes and prototype chains

When we talk about prototypes and prototype chains, we have to talk about constructors.

Constructors are a special kind of method. This is used to initialize objects when they are created. Each constructor has a prototype property. Constructors were created to solve the problem of creating a large number of repeating objects with Object constructors and literal notation. Here’s an example:

function func(name){
this.name=name;
this.sayHello=function(){
  alert('my name is '+this.name);
}
}
var f=new func('phoebe');
f.sayHello();
Copy the code

Where f is a constructor after func is instantiated, new is a means to instantiate the function. Function func(name){} is equivalent to var func = function (name){}. By this point you’ve probably figured out what a constructor is.

Now that we know the concept of constructors, let’s talk about prototypes and prototype chains.

1. The prototype

  • prototype

Each constructor automatically creates a Prototype property to which we can add new properties and methods that can be used by the function. Instantiated instances of this function can also use the newly added properties and methods. The object to which this Prototype property points includes its own properties as well as the properties and methods that we add. The set of contents of the object to which it points is called the prototype of the constructor.

Note that prototype is a property of the constructor.

  • __ proto __

__proto__ is a property that comes with every object. The value of the property is the prototype of the class to which the current instance belongs. The prototype object has a property called constructor that points to the function object.

Here’s an example:

  function Example() {}
  var ExampleOne = new Example()
  console.log(ExampleOne.__proto__ === Example.prototype) // true
  console.log(Example.prototype.constructor===Example) // true// Example is an instance object with the __proto__ attribute, and Example is a constructor with the __proto__ attributeCopy the code

Illustration:

  • constructor

Each function will have a stereotype object with a constructor property that points to the function itself that created the object. In addition, all instance objects have access to the Constructor property, which is a reference to the function that created the instance object.

2. The prototype chain

Typically, each object will have a prototype __proto__, which will have its own prototypes, linking them together to form a chain of prototypes. When looking for a particular property, it looks in the object, if it doesn’t, it looks in its prototype, and if it doesn’t, it looks in its prototype. This search operation is delegated over the entire prototype chain, which we call the prototype chain.

Illustration:

Here’s an example:

function Example(){} var ExampleOne = new Example(); //new instantiate console.log(exampleone. __proto__ === example.prototype); //true
console.log(Example.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Example.__proto__ == Function.prototype; //true
console.log(Function.prototype)// functionVar number = new Array() console.log(number.__proto__ == array.prototype) //true
console.log( Array.prototype.__proto__ == Object.prototype) // trueLog (array.prototype) // [] (this is an empty Array) console.log(object.prototype.__proto__) //null console.log(array.__proto__) == Function.prototype)//true
Copy the code

Summary:

  1. __proto__Is a property of an object,prototypeIs a property of the constructor,__proto__The total points toprototype;
  2. prototypeWhen the constructor is created, it will always be__proto__Pointing to.

Scope and closure

1. Scope

Let’s talk about the scope of variables first. There are two types of scope for variables: global scope and local scope.

Global scope: A variable defined in the outermost layer of a function, accessible from within any function.

For example,

var a = '1';
function change() {
    console.log(a)
};
change()  // 1
Copy the code

Local scope: Unlike global scope, local scope allows only internal calls to variables, not external functions.

Such as:

function num() {
  var b='2'
};
num();
console.log(b) // b is not defined
Copy the code

When declaring a variable inside a function, you must remember to use var, otherwise you are declaring a global variable.

Such as:

function change() {
    num=2;
}
change();
console.log(num) // 2
Copy the code

It is important to note that there is a variable promotion problem within the function.

Let’s start with the following example:

var num1 = 1;
function one() {
    console.log(num1);  // undefined
    var num1 = 2;
    console.log(num1) // 2
}
Copy the code

The above example is equivalent to:

var num1 = 1;
function one() {
  var num1
  console.log(num1);  // undefined
  num1 = 2;
  console.log(num1) // 2
}
Copy the code

It is not difficult to see that this is a phenomenon that exists within the function.

If you’re a little confused about the first example, you might think that the first print should be 1, not undefined (send slipper warning once).

Why is that? If num1 is not declared internally, one() will retrieve the global variable num1. If num1 is not declared internally, one() will retrieve the global variable num1.

However, after num1 is declared locally, the variable num1 is promoted. For example, in the first example, when console.log(num1) is first used, it is equivalent to var num1, which defines a variable but does not assign a value. The second print will print the assigned value of num1, as in the second example above.

Extend: Here, I want to extend a few common ways to declare variables.

  • varIf a variable is declared inside the current function, the scope is inside the function; If declared in the outermost layer, it is a global variable. If not in usevarIf a variable is defined directly, an error will be reported.
  • const: has block-level scope. In a scope, variable names can be declared only once, and there is no variable promotion.constThe declared variable must be constant.
  • let: withconstAlmost the same, but the main difference isletIt declares a variable,constThe declared must be a constant.

Differences:

* Var has variable promotion, let and const do not;

  • varThe same variable can be declared repeatedly inside a function, and within the same block-level scope,letandconstYou can only declare it once, andconstThe declaration is a constant and cannot be modified.
  • varThe declared variable belongs to the scope of the function,let 和 constDeclared variables belong to the block-level scope

2. The closure

In simple terms, closures serve two purposes: one is a function that can read variables inside other functions (i.e., variables outside of its own function). The other is to keep these external variables in memory.

Closures avoid using global variables and prevent variable contamination, but overuse can cause memory leaks.

For example, I want to get a variable inside a function:

var num = 200;
function f1() {
    var num = 100;
    return num
};
f1() // 100
var fn = f1(); 
fn() // fn is not a function
Copy the code

This is obviously not going to work. Fn can’t get variables inside f1. At this point we can consider returning a function inside f1 to see the result:

var num = 200;
function f1() {
    var num = 100;
    return function () {
        return num
    }
};
var fn = f1(); 
fn() // 100
Copy the code

By returning a function inside a function, the outer function can retrieve the variables inside the original function based on the returned function, which is the purpose of a closure.

For more insight, welcome the jab:

Developer.mozilla.org/zh-CN/docs/…

Enforcement mechanism

Javascipt is a single-threaded descriptive scripting language, different from Java or C# and other compiled languages, it does not need to be compiled into an intermediate language, but dynamically parsed and executed by the browser. Therefore, it is necessary to understand its enforcement mechanism.

Because javascript is single-threaded, ‘synchronous task’ and ‘asynchronous task’ are derived to prevent the page loading process from blocking due to large files such as pictures and music. We can take a look at the following flowchart first:

Through the figure above, the process of task execution can be clearly seen.

In addition to synchronous and asynchronous tasks, there are two types of ‘macro tasks’ and’ micro tasks’ defined when tasks are executed. Generally speaking:

  • macro-task(Macro task) : includes the overall codescript.setTimeout.setInterval;
  • micro-task(Microtask) :Promise.process.nextTick(node. Js);

When a task is executed, it is placed in the corresponding Event Queue. The sequence of event loops determines the execution order of the JS code. After entering the overall code (macro task), start the first loop. Then perform all the microtasks. Then start from the macro task again, find one task queue to execute, then execute all microtasks.

Although js is single threaded, it is not simply sequential execution. Through the above mentioned execution sequence, I believe you should have a general idea in mind (slipper warning 2). Look at an example (search on the Internet, have to explain can take over) :


console.log('1');
 
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')})setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')})Copy the code

The order of the final output is: 1,7,6,8,2,4,3,5,9,11,10,12. Did it go the way you expected? If so, congratulations to this child shoes, you have roughly mastered the js implementation mechanism. If not, look down.

The first round of event cycle process is analyzed as follows:

The overall script enters the main thread as the first macro task, encounters console.log, and prints 1.

When setTimeout is encountered, its callback function is distributed to the macro task Event Queue. Let’s call it setTimeout1.

When process.nexttick () is encountered, its callback function is distributed to the microtask Event Queue. Let’s call it process1.

If a Promise is met, the new Promise is executed, and output 7. Then is distributed to the microtask Event Queue. Let’s call it then1.

We’ve encountered setTimeout again, and the callback function is distributed to the macro task Event Queue, which we’ll call setTimeout2.

Macro task (Event Queue) Microtask (Event Queue)
setTimeout1 process1
setTimeout2 then1

The above table shows the Event queues at the end of the macro task of the first round of Event loop, at which point 1 and 7 have been output.

We found two microtasks, process1 and then1.

Execute process1 and output 6.

Execute then1, output 8.

The first round of the event loop is officially over. The result of this round is output 1,7,6,8. So the second round of the time loop starts with the setTimeout1 macro task:

First, output 2.

Next we encounter process.nexttick (), which is also distributed to the microtask Event Queue, denoted as process2. The new Promise executes output 4 immediately, and then is also distributed to the microtask Event Queue, denoted as THEN2.

Macro task (Event Queue) Microtask (Event Queue)
setTimeout2 process2
then2

The second round of event loop macro tasks is over, and we find that process2 and then2 have two microtasks to execute.

The output of 3.

The output of 5.

The second round of event loop ends, and the second round outputs 2,4,3,5.

The third round of the event loop begins. At this point, only setTimeout2 is left. Execute.

Output 9 directly.

Distribute process.nexttick () to the microtask Event Queue. Remember to process3.

Execute new Promise directly, output 11.

Distribute the THEN to the microtask Event Queue, denoted as THEN3.

Macro task (Event Queue) Microtask (Event Queue)
process3
then3

The third round of event loop macro task execution completes, executing two microtasks process3 and then3.

The output of 10.

The output of 12.

9,11,10,12 is displayed in the third round of the event loop.

In the end, the whole code, three event loops, the complete output is 1,7,6,8,2,4,3,5,9,11,10,12.

(Note that the node event listener depends on Libuv, which is not the same as the front-end environment. The output order may be incorrect.)

As a final note, keep in mind that javascript is a single-threaded language, and Event Loop is javascript’s execution mechanism.

Grammar and API

I won’t go into much of the syntax and API of javascript here. I have attached a few links to look at them in detail:

  • W3school: www.w3school.com.cn/js/index.as…
  • Novice tutorial: www.runoob.com/js/js-synta…
  • Juejin. Im /post/684490…

HTML and CSS

HTML

HTML, hypertext Markup Language, is an identifying language. It is an important part of the frame structure that holds up the page.

The CONTENT of the HTML section is more basic, and the front end is certainly familiar. But it still need to attach a link: www.w3school.com.cn/html/html_j…

CSS

CSS, cascading Style sheets, is used to decorate pages. In addition to the basic usage of CSS, I want to document some of the most hardcore style questions that are frequently asked in interviews.

1. Common layout methods

  • Fixed layout: the outermost box is fixed width and cannot be moved, and the modules inside are fixed width instead of percentage. Regardless of the resolution of the visitor’s screen, the page appears to be the same width as the other visitor.
  • Flow layout (adaptive layout) : Box width and height in percentage (hence also called percentage layout).
  • Positioning layout: Use layouts that determine positioning, relative positioning, and fixed positioning
  • Floating layout: Usefloat:left;andfloat:right;Set the layout and clear the float.
  • Responsive layout (media query) : Use@mediaFor details, please refer to:www.runoob.com/cssref/css3…
  • Elastic layout (scale layout) : nguyen other teacher’s careful analysis documentation: www.ruanyifeng.com/blog/2015/0…
  1. aboutBFC

  • What is landing

    Block Formatting Context (BFC) is a rendering area used to lay out Block boxes. The BFC is the part of the CSS visual rendering of a Web page that determines the layout of the block box and an area where the float interacts.

  • Landing the role of

    The BFC is an isolated, independent container on the page, and the child elements inside the container do not affect the outside elements, and vice versa.

    We can use BFC to prevent elements from being overwritten by floating elements, prevent multi-column layout wrapping caused by browser rounding, prevent margin merging of adjacent elements, etc. The BFC can also contain floating elements.

  • BFC constraint rules

    (1) The internal elements are placed vertically one after the other. When calculating the height of the BFC, it is necessary to note that floating elements are also involved in the calculation.

    (2) The vertical distance of Box is determined by margin. Note: Margins of two adjacent boxes belonging to the same BFC will overlap;

    (3) In the generated child elements of BFC elements, the margin of each child element is in contact with the left border of the containing block (for left-to-right formatting, otherwise it is the opposite), even in the floating;

    (4) The BFC region does not overlap with the float box.

    (5) BFC is equivalent to an isolated and independent container on the page. The child elements inside the container will not affect the outside elements. The opposite is also true.

  • What problems can BFC solve

    Margin overlap problem, text does not surround floating elements problem, wrap floating elements have no height problem (parent element collapse problem), etc.

  • BFC triggering mode (one is ok)

    (1) Float is not none;

    (2) overflow value is not visible;

    (3) Display value is one of table-cell, Tabble-caption and inline-block;

    (4) Position is not static or releative;

  • The BFC layout is different from the normal document flow layout

    General document flow layout rules

    (1) Floating elements are not height calculated by the parent;

    (2) Non-floating elements overwrite the position of floating elements;

    (3) Margin will be passed to the parent;

    (4) Margins of two adjacent elements will overlap;

    BFC layout rules

    (1) Floating elements are height calculated by the parent (which triggers the BFC);

    (2) Non-floating elements do not override floating element positions (non-floating elements trigger BFC);

    (3) Margin is not passed to the parent (the parent triggers BFC);

    (4) The upper and lower margins of two adjacent elements will overlap (add a parent to one of the elements, and then let its parent trigger BFC);

3. New features of CSS3

Added various CSS selectors, added border-RADIUS, multi-column layout, shadow and reflection, text-shadow, linear Gradient, Transform as well as zoom, position, tilt, animate, multi-background, etc.

4. Optimize the CSS performance

  • Try to avoid using itexpressionexpression[IE]As well asfilterattribute[IE];
  • CSSStyles are abbreviated whenever possible, such as to boxmargin.paddingValues, etc.;
  • Minimize the use of unnecessary parallelism rules, such ascontent.left{... }.content.right{... }And so on.left{... }..right{... }Substitution will be faster;
  • Minimize the number of layers of rules. The more layers, the slower the positioning (very slow), using a semantic selector can often achieve better efficiency;
  • Make good use of inheritance mechanism;
  • Minimize relayouts and redraws;

5. CSS pretreatment

The CSS preprocessor uses a specialized language to style a web page and then compiles it into a normal CSS file for use by the project. Using the CSS preprocessing language makes the CSS more concise, easy to modify, readable, adaptable to new and easier to maintain code.

(Updated here)

Computer Fundamentals

Compilation principle

Network protocol

In fact, the most important front-end network protocols are TCP, UDP, HTTP, FTP, IP, ICMP, IGMP, ARP, RARP and other protocols. We can take a look at the following image (from the web page, mainly for description) :

1. Layer the corresponding protocol

  • In the transport layer, there are mainlyTCP/UDPAgreement;
  • In the application layer, there are mainlyHTTP.FTPAgreement;
  • At the network layer, there are mainlyIP.ICMP.IGMPAgreement;
  • At the network interface layer, there are mainlyARP.RARPAgreement;

2.TCP three handshakes and four waves (picture from Baidu)

First look at the three handshakes:

First handshake: The client sends the data segment containing the SYN flag bit to the server for a request link.

Second handshake: The server responds to the client with a data segment with an ACK and SYN flag bit.

Third handshake: After the client receives the data, it sends a data segment to acknowledge receiving the data segment from the server. The server confirms the data received and starts to transmit the actual data.

Four waves:

First wave: The client sends a FIN and a SEQ to close the data transfer between the client and the server. The client enters the FIN_WAIT1 state.

Second wave: After receiving the FIN, the server returns an ACK to the client, and returns the SEQ value +1 as the acknowledgement number (acknowledgement number is receiving number +1). The server enters close_WAIT state;

Third wave: The server sends a FIN and a SEQ (value n) to the client to close data transfer on the server. The server enters the last_wait state.

Fourth wave: After receiving the FIN, the client enters the TIME_wait state and then sends an ACK and a SEQ (n+1) to the server. The server enters the CLOSE state and completes the fourth wave.

3. The question about three handshakes to build a link and four handshakes to close it.

After receiving a SYN request packet from a client, the server can directly send a SYN+ACK packet. ACK packets are used for response and SYN packets are used for synchronization. However, when the server closes the connection, it may not close the socket immediately after receiving a FIN packet. In this case, it can only reply an ACK packet to inform the client that “THE FIN packet you sent was received”. The FIN packet can be sent only after all packets on the server are sent. Therefore, the FIN packet cannot be sent together. So you need a four-step handshake.

Design patterns

I don’t know much about this, but I feel that every programming language has a different design pattern. Design patterns emphasize a solution to a design problem and can be understood as a set of repeated, known, cataloged code design experiences. (Have wrong place to look big guy to correct). Common design patterns include: singleton pattern, observer pattern, constructor pattern, factory pattern, prototype pattern and so on.

There is a difference between design patterns and frameworks and architectures:

  • In terms of frameworks, design patterns refer to design ideas and solutions to a single problem. A pattern can be applied to different frameworks and implemented by different programming languages. A framework, on the other hand, is an application architecture, a mixture of one or more design patterns and code. The idea of design patterns can be applied to framework design.
  • In terms of architecture, design patterns are not only the design ideas and solutions to a single problem, but also a relatively small category. And architecture is a kind of high-level design ideas for architecture, the category is relatively large. The idea that multiple design patterns can occur within an architecture.

Data structures and algorithms

JS compilation capability

Manually realized front end wheels

The data structure

algorithm

In these parts above, emmm should read a good book, use more brain and more hands, and improve slowly.

Runtime environment

Regarding the operating environment, the title alone may subconsciously be a bit of a monk scratching his head. It may be that the scope is too large, or the concept is vague, in fact, small make up is also the same. However, xiaobian has read an article before, which briefly introduces the operating environment, which can be divided into the following points:

  1. The form of loaded resources

    There are two types of input URL (or jump page) to load HTML and load static resources in HTML.

  2. The process of loading a resource

    First, the browser obtains the IP address of the domain name from the DNS server. Then, it sends an HTTP request to the machine with this IP address. The server receives, processes and returns the HTTP request.

  3. The process by which a browser renders a page

    First, the browser generates DOMTree based on the HTML structure, then CSSOM (view module) based on the CSS, then DOM and CSSOM are integrated into RenderTree (RenderTree), and then render and display based on RenderTree. Note that when script is encountered, rendering is executed and blocked.

  4. Enter the URL into the process of getting the HTML

    The browser gets the IP address of the domain name from the DNS server -> sends an HTTP request to the machine at this IP address -> the server receives, processes and returns the HTTP request -> the browser gets the content returned.

  5. Window. onLoad is different from DOMContentLoaded

    window.addEventListener('load'.function() {... }) / / page loading all the resources to perform the document. The addEventListener ('DOMContentLoaded'.function() {... })// The DOM may not be loaded yetCopy the code

  6. Performance optimization

  • Using memory, caching, or other methods;
  • To reduceCPUComputing, reducing network requests;

To achieve the above two optimizations, we can start from two aspects:

  • Optimize resource loading: for example, static resource compression, static resource caching, and usagecdn, the use ofssrBack-end rendering, database output directly tohtml;
  • Optimized rendering: When placing styles and script code, it is best to place styles inside the head tag,scriptPlace in the last (rendering mechanism, JS will hinder rendering, not friendly to loading page), use image lazy loading, reduceDOMThe query,DOMQueries are cached and reducedDOMOperations, as many operations as possible together, event throttling (do not trigger frequently), early operation.
  1. security

  • Cross-site Scripting (XSS)

    Is a website application security vulnerability attack, is a kind of code injection. It allows malicious users to inject code into web pages so that other users are affected as they view them. Such attacks typically include HTML as well as client-side scripting languages.

  • Cross-site Request Forgery (XSRF)

    Is a malicious use of the website. Unlike XSS, which exploits trusted users within a site, CSRF exploits trusted sites by disguising requests from trusted users. CSRF is more dangerous than XSS.

Precautions: There are three kinds of Token authentication, Referer authentication and hidden Token.

The browser API

Recommend children’s shoes in need to MDN to understand.

Attached link: developer.mozilla.org/zh-CN/docs/…

Browser Principles

Not long ago, Xiaobian just saw an article about the principle of browser written by a certain big guy in Zhihu. I felt that it was easy to understand and analyzed thoroughly. Anyone who wants to know can also go to understand it.

Attach a link: zhuanlan.zhihu.com/p/47407398

Node

Node, simply javascript running on the server, is a platform built on the Chrome javascript runtime and an event-driven I/O server-side javascript environment based on Google’s V8 engine. The V8 engine executes javascript very fast and performs very well.

Want to get a general idea of the node can refer to the link: www.runoob.com/nodejs/node…

Those who want to understand comprehensively can turn their eyes to: nodejs.cn/api/assert….

The front-end engineering

The project build

When building a front-end project, you need to think about how to set up the front-end framework. Generally speaking, there are two ways: one is to use the existing front-end framework (more time saving and convenient, later just need to fill in the business logic as required); The second is to build the framework yourself.

Ant Design and Element are some of the component libraries that are often used by the front end, and there are also good front end framework templates. Examples of common templates include create-Reacted -app, React-starter -kit,react-bolierplate,ant-design-pro, etc. Generally speaking, the provided template will have a relatively unified document specification, these children’s shoes in need can go to ant Design’s official website to understand, xiaobian here do not compose.

Ant. Design/Components /…

As to how to use it, there is a detailed explanation on the official website. In addition, when you clone it locally from Git, you need to initialize it before you run it. If you’re new to the front end and want to start experimenting with this section, you need to be familiar with Node.js.

The following is a simple framework that xiaobian set out to build a long time ago, how many pits or their own feet to step on, ability to improve. The detailed steps of the article have been written, there are questions where welcome to leave comments (shortcomings welcome to point out). Attached link: juejin.im/post/684490…

nginx

  1. nginxThe concept of
  • NginxIt was written by a Russian programmerlgor SysoevDeveloped a high-performanceHTTPAnd reverse proxy server, also oneIMAP/POP3/SMTPProxy server;
  • It’s a lightweightWebServer/reverse proxy server as well as email proxy server and in oneBSD-likeIssued under this agreement;
  • Its characteristics are less memory, concurrency ability is strong, in factnginxThe concurrency capability is indeed better in the same type of web server;
  • It is compared withApache\lighttpdIt has the advantages of less memory, high stability, and is famous for its strong concurrent ability, rich module library and friendly and flexible configuration.
  • inLinuxOperating system,nginxuseepollThe event model, thanks to this,nginxinLinuxOperating system efficiency is quite high. At the same timeNginxinOpenBSDorFreeBSDThe operating system is similar toEpollThe efficient event model ofkqueue;
  • It serves as a load balancing service:NginxBoth can be directly supported internallyRailsandPHPProcedures for external services, can also support asHTTPThe proxy service provides external services.NginxusingCTo write, whether it’s system resource overhead orCPUUse efficiency ratioPerlbalMuch better;
  • Reverse proxy, load balancing. When the number of visits to a website reaches a certain level and a single server cannot meet the requirements of users, multiple server clusters are requirednginxBe a reverse proxy. In addition, multiple servers can share the load evenly, so that one server will not break down due to high load and one server will become idle.
  1. nginxApplication scenarios of
  • Applied to the virtual host, can be implemented in a server virtual out of a number of websites.
  • Applied to thehttpThe server,NginxIs ahttpServices can be provided independentlyhttpService. Can do web static server.
  • Reverse proxy, load balancing. When the number of visits to a website reaches a certain level and a single server cannot meet the requirements of users, multiple server clusters are requirednginxBe a reverse proxy. Multiple servers can share the load evenly, so that one server does not break down due to high load and become idle.

Development speed

In the process of writing the project, we need to consider the load rate and performance optimization of the project in addition to completing the project within the specified project cycle. Making the page look and feel good is a small step for front-end developers.

In front end development, there are several things you need to do to make your pages more secure and faster:

  • To reducehttpRequests;
  • Merge script files;
  • The specifiedExpiresorCache-Control;
  • The cacheajaxRequests;
  • Remove duplicate JS;
  • Avoid redirection;
  • useCDN;
  • Reduce the volume of returned data (availablegzipCompress the returned data, minimizejsFiles andcssThe file will becssandjsIndependent as an external file);
  • To optimize thecookie(reducingcookieVolume, reasonable settingCookieDomain, set reasonablycookieExpiration time, using domain separation)
  • Optimized browser loading (willcssAt the top of the page,jsLoad at the bottom of the page)

Continuous integration

What is continuous integration? Continuous integration is a software development practice in which teams integrate their parts of a project into one place as they develop a project. Integrate at least once a day with each member and possibly multiple times a day. Each integration is validated by automated builds (including compilation, release, and automated testing) to detect integration errors early.

The simplest example is a project Git commit and build. A front-end project is run by two front-end developers, each responsible for a portion, and the project has a master branch on Git. The developer pulls the code locally and needs to create a local branch such as dev. In the process of development, when part of the content is completed and needs to be submitted, the developers will pull the latest version of the code and submit the locally established branch content to Git to ensure that the code is correct, and merge it into the master branch, and finally build the project. Xiaobian probably understand is like this.

Continuous integration reduces risk and reduces duplication. At the same time, it is not controlled by time and place, and can generate the deployed software at any time, so as to improve the development efficiency.

Version control

Version control is also an important part of front-end development.

For example, after the developer pulls the most recent code, merges and commits, and finds a problem, you can roll back to the previous version. In the same way, the main branch can fall back on any version of the original if a problem is discovered or requirements suddenly change to the original version. To some extent, this facilitates emergent situations during development.

Another example: During development, it often becomes content, such as page styles and JS. At the beginning, you define a file called one.css and one.js and introduce:

<link rel="stylesheet" href="one.css"></link>
<script src="one.js"></script>
Copy the code

Once the build is committed, the browser opens, and for caching reasons, the browser will cache the style and js. Then the requirements change, you change a part of the style, and when you’re done building, you open it and you see that the style hasn’t changed. The reason is that the browser has cached the previous style and JS and has not updated it. At this point, you can choose to add a version number to the changed style and js:

<link rel="stylesheet" href="one.css? V = 0.01"></link>
<script src="one.css? V = 0.01"></script>
Copy the code

But having to manually change the version number every time you update the code doesn’t make sense. At this point, we can consider using the generated hash value to determine whether the contents of the file have changed.

It should be noted that when we release the project, the resource file and the master file are developed separately. The resource file is deployed in the CDN, and the master file is deployed in the server. During the release, the resource file becomes an unoverwritten release to solve the problem of coexistence of new and old resource files. Then send the resource file first. After the resource file is successfully deployed, send the master file. This avoids many problems.

<link rel="stylesheet" href="one.o3289.css"></link>
<script src="one.o3289.js"></script>
Copy the code

What the code looks like at the end.

Got it? Huh? Still do not understand the words….

Framework/class library

TypeScript

As for TypeScript, I also took advantage of this summary to learn the documents written by Mr. Ruan Yifeng, and gained a lot.

Attached is a link: ts.xcatliu.com/

React

If you have a JS base, you can go to the React official website to get familiar with the use of react, code specifications and life cycle.

Attached link: reactjs.org/

If you just touch the front of the children’s shoes, you can turn around and read the book written by Teacher Ruan Yifeng first, and then study with the react website.

Link: caibaojian.com/es6/

Vue

Vue xiaobian is not very good at it, before I went to its official website to read the document, now I feel ok, but because the current project is generally used react, in fact, now it is in a fog, forget almost, harmful.

Attach a link: cn.vuejs.org/

Interested children’s shoes can go to look at.

The development of diverse

For multi-end development, xiaobian understanding is actually like this:

When the requirements of a project are defined, there is a great deal of synergy in the development process. For example, a product, in addition to the background and web development, also need to develop small programs and apps, which requires multi-end cooperation.

The traditional way of development will take more time and write more code. There will be a certain time limit for the launch and release of the project. If it cannot be released at the same time, it needs to write the corresponding code for each end of the development. While consuming more time and resources, the development was not as fast and effective as expected. However, in the current development framework, there have been a lot of multi-end development framework, this is basically for mobile development. For the current development needs, is greatly improve the speed of developers, and greatly reduce the project multi-end distribution of the development of the short board.

At present, most projects involve a high probability of multi-end development. For example, xiaobian recently finished testing this project, which is the development of the Web end combined with wechat small program (friction between React and wechat small program, forced to switch freely). But in general, a front end rarely has a person responsible for multiple development (also is the general situation of small edition understanding, do not rule out a small company when multiple people). In a project, only the web side is responsible for the Web side, and those responsible for small programs are assigned additional people.

But as a front-end programmer, you need to have a conceptual understanding of multi-end development.

Data flow management

Since xiaobian is currently using React, here we will focus on the data flow part of React.

Simply put, React is a top-down, unidirectional data stream that changes state by setState. React is often used in conjunction with Redux for managing data flows, which effectively avoids component bloat. It also enables cross-component communication, state synchronization and state sharing, handles asynchronous data flows, and makes components predictable.

Redux is an evolutionary version of Flux, derived from flux. Redux has three principles: unique data source, read-only state, and data state can only be achieved through pure functions.

Redux provides three apis: Store, Action, and Reduce:

  1. store(ReduxThere is only one single applicationstore)
  • Maintenance applicationstate;
  • providegetState()Methods to obtainstate;
  • providedispatch(action)Methods the updatestate;
  • throughsubscribe(listener)Register listeners;
  • throughsubscribe(listener)The returned function unlogs the listener
  1. action
  • Transfer data from the application tostoreOf the payload. It is astoreThe only source of data that generally passesstore.dispatch() 将 actiontostore.
  1. reduce
  • Specifies how to respond to changes in the application stateactionsAnd sent tostore ，storereceivedactionAfter that, you need to give a new status to update the pagestateThe calculation of theta is calledreducer.

Data flow process description: in simple terms, the user in the interface through the dispatch, triggers the action; Store calls Reducer with the current state and action, updates the state and returns the new state. Update the view.

Utility library

Here, the main list of xiaobian currently used and understand the library, after all, ah, there are a lot of component library framework, but the practical is certainly the most often used and used more easily.

1. Front-end UI component library

  • ant design
  • element
  1. The front frame
  • dva
  • Bootstrap
  • jQuery Mobile
  1. Front-end automated build tool
  • Jenkins
  • Gulp – The streaming build system
  1. Front-end automation module management tool
  • Component
  • Browserify
  • RequireJS
  1. Front-end automation CSS preprocessor
  • Less
  • Sass
  1. Js framework
  • Ractive.js
  • Query
  1. Front frame template (ready to eat out of the box)

  • Ant Design Pro

    More: landing. Ant. The design /

  1. diagramming
  • Echarts
  • Highcharts
  • Chart.js
  • Fusioncharts
  • ichartjs
  1. Date formatting
  • Moment.js: Great.
  1. Icon component
  • Ali Icon Library
  • Font Awesome

The above is small make up more often used at present practical library.

In addition, attach recently saw a more comprehensive and practical library of link: www.luoxiao123.cn/1196.html

Develop test

As for the front-end development test, xiaobian’s understanding is that after writing the code, check whether the realized function meets the project requirements, and whether the interface style layout meets the UI design, etc.

Front-end testing can be classified into the following types:

  • Unit testing
  • Integration testing
  • Style tests
  • E2Etest
  • Test coverage and code variation testing
  • Code variation testing

About this part, it is good to know, after all, there are test group is not little brother little sister of yao hehe

Projects and Business

The back-end skills

As a front-end, it is necessary to know a related backend language, such as Java/PHP/Python, etc. Now when many companies interview will require at least to master or understand a backstage language, technology is not pressure body, learn to understand more to improve their skills is the hard truth.

Mainly, I have mastered basic background skills. When writing front-end projects, it is relatively convenient for me to communicate with the back-end when I encounter problems.

Performance optimization

The main purpose of performance optimization is to make the page load faster, more responsive to user operations, and bring a better user experience for users. For developers, optimization can reduce the number of page requests and save resources.

About performance optimization, the front xiaobian has been introduced, there are forgotten children’s shoes can flip up.

The front security

In terms of front-end security, the most common attacks are XSS (cross-site scripting) and CSRF (cross-site request forgery), which have been explained in more detail in these two articles.

One thing to note here is clickjacking.

Concept: Clickjacking refers to a third-party website embedding a certain website through iframe, setting the iframe to be transparent and invisible, and overlaying it on other disguised DOM. The disguised clickable DOM (button, etc.) is the same as the clickable DOM of the actual embedded website. When the user clicks on the disguised DOM, You actually click on the DOM of the web page embedded in the iframe to trigger the request. The most important feature of clickjacking is that the user triggers the click event without knowing it.

Solution:

  • Javascript disallows embedding
  • X-frame-options cannot be embedded
  • Other auxiliary means such as adding verification code

Business related

As a front end worker, here are some things related to the front end business:

  • Good team communication skills, able to implement related functions according to the product prototype, according toUIDesign drawings given by the designer to achieve the layout;
  • Have a certain aesthetic, the interface color collocation, style layout and other good control and design;
  • Will usePSAnd cut diagram software and other related tools (can not encounter a little style problems to find the designer, if they will change faster, small make up);

At present, xiaobian think about these a few, if you think there is a leak, welcome to leave a comment below.

conclusion

So that’s pretty much the end of it. In the process of sorting out, I searched some examples on the Internet to explain some conceptual things because I was afraid that I could not understand them.

Xiaobian young and frivolous, before the wild words, set a flag said every two weeks out of an article, harm. But every time the knowledge points are sorted out, xiaobian can harvest a lot, and I hope to help those in need. Or inside the old saying, if there is insufficient, please leave a message to point out. If it helps you, emmmmm