This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

From May 9, 2021 began to update “front-end one hundred questions chopped”, at present finally achieved phased results, “front-end one hundred questions chopped” volume has been updated, including JS basic, browser, network, a total of 50 chapters, more than 50,000 words. Follow the public account “kite holder” and reply to “100 questions cut” to obtain the PDF version.

Writing this series of articles is for a certain reason, thinking gongjin when, Joe first married (err, off topic), as a mechanical professional programmer apes [(> retract,))], deeply aware of the pain and helplessness of self-learning, eager to have a systematic front learning interview notes, fully understand and master front frequency knowledge points. Combined with more than four years of self-study experience, I began to update the “front-end hundred questions cut” series of articles, the high frequency front-end knowledge points are refined and summarized, into the personal thinking, I hope to help each front-end beginners like me, learn from each other, and make progress together!

First, the front end of a hundred problem chopping mind map

Let’s take a look at the mind map of the first volume of “Front-end hundred questions chopped”, through the mind map can understand its main knowledge points, the key context of the interview have a clear understanding.

Two, the content summary

1. The typeof and instanceof

Typeof and instanceof are two key operators in JS, which are used to judge variable types. This section can understand their use and principles, and verify their principles through the combination of theory and practice.

2. Six ways to declare variables in js

There are six ways to declare variables in JS, which are var, let, const, function, class, and import. In this section, we will understand the use of these six ways and their corresponding characteristics.

3. Basic types and reference types

In this section, you’ll learn what basic types and reference types contain and what their characteristics are.

4. Wrap objects

The native will show you why strings, numbers, and bovels can call properties and methods, and what the underlying object execution process is.

5. Methods for traversing object properties

Object is the most common part of programming. In many cases, we need to traverse properties on this object. How many ways can we help us traverse properties on this object? Look at nine of them in this section.

6. JavaScript string to number

There are three main ways to convert string to number in JS: using conversion function, casting, and using weak type conversion of JS variables. This section will understand these three ways.

7. Four methods to judge js data types

Js has a variety of data types (Number (Number), String (String), Boolean (Boolean value), Null, Undefined, Symbol, Object, function, etc.), through this section of the four kinds of judgment methods perfect to solve the problem of type judgment.

8. Execution of JavaScript code

How does JavaScript execute in V8? When is the execution context generated? Is there machine code in the js execution? This section will provide a complete understanding of these issues.

9. Function execution process

How to execute a function in js, including the process of determining the execution environment, creating phase, execution phase, execution and waiting to be recycled, through this section will have a complete understanding of the whole process.

10. Execution context

In this article, you will get a complete understanding of the execution context by understanding the type of execution context, what it contains, the execution context lifecycle, the code execution process, and more.

11. Variable objects

In this article, you will learn about the creation of variable objects, their association with live objects, and global context variable objects.

12. Scope and scope chains

In this article, you’ll learn what a scope is and what a scope chain is, and connect these concepts in real life.

13. Closure

In this article, you’ll learn about the definition, implementation, use, pros and cons of closures, and some classic interview questions.

14. this

Through this article, we will understand the key knowledge points such as what is this, what is the function of this, what is the pointing of this, and how to change the pointing of this, so as to understand this clearly at one time.

15. Call, apply, bind

In this article, we will learn the basic knowledge and implementation principles of the three methods that change the point of this: call, apply, bind.

16. Prototype/constructor/instance

In this article, you’ll learn more about the relationship between prototypes, constructors, and instances.

17. The prototype chain

Through this article, we will understand what is the prototype chain, what is the search process of the prototype chain, and further find and modify the mechanism of attributes in the prototype chain.

The new operator

What new does is it creates an instance object through the constructor, so what happens during new? A new operator is implemented by testing such verification points in a validation manner.

19. Three methods in the array implementation principle

There are three common methods in arrays: map, Filter and Reduce. How do they work? Through this article you will have a deep understanding.

20. Five ways to implement the flat method in arrays

The flat method is new in ES6. It recurses through the array at a specified depth and returns a new array combining all elements with the elements in the subarray it traverses. What about environments that don’t support this method? This article will do this in five ways.

21. Anti-shaking and throttling

Performance is always a hot topic on the front end. One of the performance issues is that we frequently trigger events such as Mousemove, Scroll, resize, etc. Although the browser has been optimized for these events, it still affects performance if they are triggered frequently in a short period of time. That’s where the main characters of this article come in: damping and throttling, and use them to optimize and improve performance.

22. Three ways to convert a string to a hump

I’m sure you’ve all encountered the problem of converting a ‘-‘ concatenated string to a hump, such as hello word to helloWorld. This problem is simple, but if only one solution can not reflect their own ability, if you want to show a different way, it is necessary to use a variety of ways to solve. This paper will solve this problem in three ways.

23. Assignment, shallow copy, deep copy

No matter in the interview or in the job, we often encounter three data operation modes: assignment, shallow copy and deep copy. If we do not make these three clear, it is easy to make the system encounter bugs. This article will introduce these three modes in detail.

24. Six asynchronous schemes

In order to improve system performance, asynchronous has been introduced, so what are the asynchronous solutions? This article walks you through six asynchronous scenarios: callbacks, event listeners, publisheds-subscribe patterns, Promises, Generators, and async.

25. Promise principle and implementation

Promises are often used in programming, but in many cases they are limited to use without further understanding. In this article, you will learn what A Promise is, what are its advantages and disadvantages, what are the characteristics of the object, and how to implement A Promise according to the Promise/A+ specification.

26. Async principle implementation

In the development process of another commonly used asynchronous scheme is Async, through the introduction of Async function makes the asynchronous operation becomes more convenient, through this article will understand the implementation principle of Async.

27. Publish/subscribe implementation

The publish/subscribe pattern builds on the observer pattern by adding a scheduling center between the target and the observer. Subscribers (observers) register the event they want to subscribe to the scheduling center, and when the event is triggered, the publisher (target) publishes the event to the scheduling center, and the scheduling center uniformly schedules the processing code registered by subscribers to the scheduling center. This article will go from zero to a four-line publish/subscribe model.

28. Seven sorting algorithms

In this article, we will use seven sorting algorithms to achieve sorting, these seven sorting algorithms are: bubble sort, selection sort, insertion sort, merge sort, quick sort, heap sort, bucket sort.

29. Browser storage

In this article, you will learn about five types of storage supported by browsers: localStorage, sessionStorage, IndexedDB, WebSQL, and Cookie.

30. Getting to the bottom of questions is a cross-domain classification

Through in this article, we will know how the same-origin policy in DOM level, data level, network level to ensure that the browser security, but limit too much will make the programmer’s development work, so the browser that need to be done in the most strict the same-origin policy limit some concessions, these more concessions are in safety and convenience of trade-offs, The cross-domain solution is to give away part of the security to improve development ease.

31. Browsers give security away to create JSONP

In this article, you will understand the basic idea of JSONP, the implementation principle, and implement JSONP according to the principle.

32. An article on CORS

Through this article will be through the combination of theory and practice to help understand CORS, with a different way to deepen the understanding of CORS.

33. Three types of requests in the browser

Through the browser console, you can see that when accessing a page, multiple requests will be made, and this series of requests will be divided into multiple categories. This article summarizes the request into three types and five types: general request, Ajax request (XHR, Fetch, Axios), WebSocket request.

What are the browser processes

In this article, you’ll learn about the types of processes that a multi-process browser contains: browser processes, rendering processes, GPU processes, network processes, and plug-in processes.

35. Browser rendering flow

In this article, you’ll learn about the browser rendering process, including building a DOM tree, styling, layout stages, layering, layer drawing, blocking, rasterization, compositing, and display.

36. Redraw and reflux

“Redraw and backflow” will cause the browser to trigger an update that will render the drawing again. In this article, we will learn about both and explore solutions to reduce redraw and backflow.

37. Event loop

In this paper, we will understand the task classification (generalized classification, precise classification), event cycle flow (synchronous and asynchronous perspective, macro task and micro task perspective), and further understand the event cycle through a high-frequency interview question.

38. Network architecture

In this article, you will learn the criteria for dividing network architecture and the role of each layer in a seven-tier architecture.

39. HTTP0.9 — The evolution of HTTP3.0

In this article, you will learn about the evolution of HTTP. The entire process includes: HTTP/0.9, HTTP/1.0, HTTP/1.1, HTTP/2.0, and HTTP3.0.

40. HTTP caching mechanism

In this article, you’ll learn about HTTP caching mechanisms, including strong caching and negotiated caching.

41. Problems caused by strong cache and solutions

Strong cache resources because wouldn’t initiate a validation to the server, so there are some problems, which release resources update issues, update the resource, but every time the user requests from the cache to get the original resource, unless the user remove or refresh, otherwise can’t see the latest effect, in this article will explore the solution scheme.

42. Source of the requested content in the browser

Open the Network in the browser developer tool and look at the Size column and you will often see three things: memory cache, Disk cache, and the Size of the resource itself, which you will learn about in this article.

43. Differences between TCP and UDP

This paper compares TCP and UDP in five aspects (connection aspect, data transmission reliability aspect, real-time aspect, connection quantity aspect, resource demand aspect).

44. Flow control and congestion control in TCP

In this article, you will learn about two important policies in TCP: traffic control and congestion control, and further compare the differences between them.

45. The whole process of three handshakes and four waves in TCP

In this article, you will learn the whole process of three handshakes and four waves in TCP.

46. The HTTP protocol consists of request packets and response packets

Through this article, you will understand the composition of the request packet and response packet in the HTTP protocol, so that you can read the meaning of the request and response contents in the debugger.

47. Distinguish status codes 301 and 302

The 301 and 302 status codes both represent redirection. In this article, you’ll learn more about these two status codes and their differences.

48. HTTPS stuff

This article will take a closer look at the key technical points and the entire process of HTTPS, starting with the shortcomings of HTTP.

49. Two attack modes (XSS, CSRF)

In this article, we will learn that there are two common attacks in the interview: XSS and CSRF.

50. What happens from the browser output of a URL to the page display

This article will show the full flow from the browser to the page with 15 detailed diagrams.

1. If you think this article is good, please share and like it so that more people can see it

2. Pay attention to the public number of kite holder, get the first volume of “Front hundred Questions chopped” PDF version