Writing in the front
Why write this article
Technology research and development staff known as “workers” behind the scenes, the expression characteristic is quiet r&d work more than communication, and the interview is to express a view the process of research and development ability, therefore, can not understand the problems thoroughly, can express clearly, can extrapolate, determines the ability can be perfect, but also determines the final interview results. This paper aims to improve the ability to analyze problems, express problems and expand related knowledge when facing problems.
Content description
This article does not carry the old interview questions, will summarize the interview questions from a new Angle, from the beginning of the topic, teach you to summarize, induction, progressive, expansion, form their own knowledge system; In addition, this article will continue to be updated, suitable for collection, when opened again, the content of this article has grown from spring seedlings into towering trees.
What can you learn
Build front-end knowledge network, form their own front-end knowledge system, can draw inferences from one example, integrate through
The article structure
This article will be sorted by knowledge and can be read in the bookmark bar on the right side of PC. The content will be updated continuously. At the same time, no first, no second, if there are mistakes and mistakes, hope can be corrected.
HTML report
1. What page layout do you know? What are their strengths and weaknesses?
From the early front-end development to the present, we have gone through the development process: Table layout, position layout, floating layout, grid layout, Flex elastic box layout. Table layout: Advantages: do not need to use any CSS to build the topic layout; Compatibility, all browsers support this element; Disadvantages: Changing the layout properties of any cell will cause backflow of the entire table, costing performance; Different browsers implement different basic attributes of table and have different styles. Difficult to adapt to complex business requirements; Position layout: Advantages: Use the five attributes of position (static, relative, Absolute, fixed, sticky) to change the position of elements in the document flow, flexible use; Disadvantages: When setting location for an element, it often involves setting location for the parent element, which adds additional complexity. After the element is separated from the document flow, it may cause the height collapse of the parent element, and the parent element needs to be processed. The sticky attribute is not supported in some versions of browsers, and it is not supported in alipay mini program. Floating layout: Advantages: You can freely change the order of elements in the same group. Disadvantages: It is necessary to do follow-up work such as clearing float, otherwise it will cause the height collapse of the parent element and affect the layout of other elements. . There are differences in style; Difficult to adapt to complex business requirements; Grid layout: Advantages: I think it is an improved version of table layout, it is the same as table layout, introduced the concept of two-dimensional space rows and columns. The grid layout uses percentages and no basic style, avoiding the shortcomings of tables; Disadvantages: Native raster layout browsers do not support it well, but the bootStrap framework with raster layout is more compatible, so most use bootStrap as a layout tool. Flex Layout: Advantages: Mobile layout magic, can quickly form a layout without using any UI framework; A complete set of properties can be achieved to solve most layout problems; Disadvantages: Attributes introduced by CSS3, only applicable to IE9 and older versions, compatibility processing is required; At the same time, need to master cumbersome property Settings; The Flex property occupies the display property of the CSS. In some scenarios, you need to set a specific display property.
JS article
1. What is a prototype chain
A prototype is a function-specific property called: prototype. The Prototype property is an object that stores properties and methods that need to be shared to pass to the function instance when it acts as a constructor. The Prototype object has a built-in constructor property, which is a function pointer to the constructor of the instance object. The function also has an attribute: constructor, which is a pointer to the function constructor. Function instances can still be used as constructors to generate new function instances. The prototype relationship between constructors and function instances is called prototype chain. The function of prototype chain is to achieve method and attribute reuse, reduce repeated code, save storage space, which is called implementation inheritance. The disadvantage of stereotype inheritance is that if the shared property is a reference type, it causes all instances to change the constructor property, and another disadvantage is that when generating a function instance, there is no way to pass parameters to the constructor and customize the property values. Therefore, because of these two shortcomings, stereotypes and constructors are often used together to form composite inheritance, which is the most common pattern of JS inheritance.
Talk about closures
A closure is essentially a function that can access variables in the scope of another function. Closures are useful for: 1) avoiding variable contamination; 2) Simulate block-level scope, encapsulate private methods and expose public method attributes; 3) Simulated cache, local storage of data; Closure hazards: Mainly garbage collection and memory leaks. 1) Closure functions cannot be destroyed after execution and always exist in the environment; 2) Variables used in closures cannot be garbage collected, causing memory leaks.
3 What is a memory leak? What do you know?
A memory leak is a condition in which memory that is no longer being used cannot be reclaimed due to defects or errors, resulting in wasted memory. Common ones are: 1) unexpected global variables; 2) console.* Print method; 3) closure; 4) DOM leakage; 5) Uncleaned timer;
What are the ways to achieve animation in the front end? Why is requestAnimationFrame recommended
HTML provides canvas, SVG CSS provides Transition, animation JS provides: The requestAnimationFrame () method and setTimeout requestAnimationFrame are APIS proposed by HTML5, which have the following advantages: CPU saving: SetTimeout uses the way of asynchronous task queue to realize animation, which has the disadvantage of serious lag and frame loss. Secondly, a big problem is that even if the current page is minimized or suspended, the animation will still be executed, and at this time, because the user can not see it, it is completely meaningless, which greatly wastes CPU performance. RequestAnimationFrame is called by the system, that is, it refreshes images at intervals consistent with the frequency of screen refresh blow-ups, pauses when the page is minimized or suspended, and resumes where it was last paused when it is active again, saving CPU overhead. Automatic throttling: requestAnimationFrame ensures that the refresh function is executed only once in the refresh interval, without repeated execution resulting in good performance and without frame loss and smoothness. Disadvantages: RequestAnimationFrame is an API provided by HTML5, which has compatibility problems in some browsers and needs to be prefixed or not supported. Therefore, ployfill this method to achieve elegant degradation in incompatible situations. Until finally using setTimeout to implement the animation.
5 Explain the principles and implementation methods of deep copy and shallow copy
In JS, reference types are stored in the heap memory. When accessing them, they are accessed through Pointers in the stack memory. The problem of shallow copy for basic types does not exist. Shallow copy: generates a new pointer in stack memory to reference data in memory. Shallow copy implementation: 1) assignment; Var newArr = arr.concat(); Var newArr = arr.slice(); 4) var newObj = objcet.create (obj); 5) var newObj = objcet.assign ({},obj); Deep copy: Allocates space in the heap to store a new copy of data, and generates a new pointer in stack memory to the data in the heap. Var newObj = json.parse (json.stringify (obj)); When the attribute value is undefined or function, it is ignored, so use it with caution. 2) Recursive copy, can be encapsulated into a tool function, global use;
Exercises:
Talk about anti-shake and throttling
Anti-shake and throttling are aimed at the problem that the user frequently triggers or calls a certain function, which causes the client page to lag or consumes too much performance and server resources. Both methods are essentially delay processing for frequent triggering, but the way of processing is different. Here I write the anti-shake and throttling in detail, and give the encapsulation function, please go here: juejin.cn/post/684490…
7 Use ES5 to implement const
The difference between const and other variables is that the basic type defined by const cannot be changed, and the reference type defined by const cannot change the address to the heap.
To prevent a variable from being overwritten, if we can listen for a variable assignment, we can prevent the assignment. The problem translates to listening for assignment operations, and the first thing that comes to mind is the Object.defineProperty() method, which defines the base properties of Object attributes, including value assignments. But there’s a problem: this method is for objects, what about global variables? Note here that the global variable is actually a property of the global object Window
Talk about the relationship between stereotypes, implicit stereotypes, instances, and constructors
I’m sure the readers of this article have known these concepts before, but there is a feeling of clarity and vagueness, a feeling of: I understand, but I can’t explain it to you.
If you feel that way, congratulations, you’ve come to the right place. Today, I will transmit the secret to you, the first point of attention and praise, in case you suddenly forget.
Are you done? Here we go
1. First of all, why do we read so many articles about prototypes and still fail to explain them? There are three reasons: a) Because every time you watch it, you are very careful to remember the relationship and difference between single or scattered several. It is not clear how the relationship between these several big families is related. B) a time to understand for a long time, finally clear, later, and fuzzy, why? Because the memory is not deep c) every time, I have to understand and memorize words. When I review again, I have to review too much. It is not good to review, and I forget it over time. Today, the ultimate method to ~ first say the method: see the following picture 5 times, think 5 times, draw 3 times, recall twice a day, within a week, completely clear memory. Above:
Diagram description:
The. Constructor points to the constructor’s prototype Person.prototype via the prototype property
The.constructor prototype refers back to the constructor Person via the constructor property
The. Constructor Person generates instance Person with the new keyword
. Instance person points to the constructor’s prototype object with __proto__(read: double underline proto or dunder proto). Note here: the ECMA standard says to provide a property through which the stereotype can access the constructor’s stereotype object.
Note: to understand memory, review for many times, to achieve mastery.
Unfinished, to be updated… Be sure to click “Follow” and “like”
At the end of the article
Only write understandable, readable, valuable technical articles; After reading, if you feel you have gained something, click “like” and pay attention to it, the platform will recommend more high-quality articles for you.
Preparing for an interview? To communicate, every day to the interview questions to improve themselves; Ready to advance advanced full stack? Let’s talk about the way to progress, avoid detours; Tired of typing code? Let’s chat in the group to make our work more efficient.
Due to restrictions, it is over 200 at present and can only be joined by invitation, so, please search the public account [front advanced interview internal promotion] and I will invite you to join the group. Come here, find more like-minded front-end partners ~