Foreword
I graduated from Northeastern University, graduated from the University community move into the World Wide Web, front-end development engineer post. Technology stack: React the Node +, Github Address
Achievement
Hangzhou goal came very clear, manufacturers. In fact, Netease, Ali and drops. Fortunately, all three got the basic offer. The final decision to choose Ali p6.
Interview questions
A long process manufacturers, such as Ali to interview nearly three weeks. So also interviewed many other companies, start-up companies or listed companies during. Here I put my face questions asked summarize comb. Simple depth there. My personal experience is not rich, should the answer bad place please correct me.
HTML && CSS section
- Common CSS layout
CSS box model used layout div + css, which should be noted strange IE box model, we usually resolved by box-sizing. The traditional box model layout, we can be subdivided into the document flow layout, the floating layout, positioning layout. In ie10 + we can use flex layout, which we need to understand the concept of the core of the container and the shaft. Two-dimensional layout, we can use the Grid layout. For the three-column layout, a floating implementation, as well as Flying wing configuration and layout in addition to the Holy Grail. In fact, Flying wing is the Holy Grail of bug fixes layout of a upgrading. - BFC understand it?
BFC is the block-level formatting context. In Box normal stream belonging to one formatting box, or a block type may be inline. But not both simultaneously. And Block boxes in block formatting context in formatting, inline boxes formatted inline formatting context, any rendered elements belong to a box, not a block that is inline. Its general performance rules are divided into the following situations: 1, the BFC elements created in its child elements placed one after another in accordance with the document flow. Their vertical direction starting point is the top of a block containing both a vertical distance of neighboring elements depends margin characteristics. 2, in the BFC, each element in contact with the left outer left containing block. Timely presence of float as well. Unless this element also creates a new BFC. 3, BFC is an independent administrative area of the page. All browsers will put BFC floating element row of the remaining space. When the HTML satisfy any of the conditions to produce at BFC: float is not none, overflow is not hidden, display of table-cell, table-caption, inline-block any one. Position value is not relative or static. We usually use the BFC and the floating elements in order not to overlap. Clear internal floating elements. When the upper and lower elements adjacent to resolve overlaps. - Centering problems
are centered both vertically centered answer from the horizontal. Centered horizontally and vertically divided into a single element, a plurality of elements, width and height and the known width and height of the unknown answer - session, cookie, sessionStorage, localStorage differences
distinguish from Server client and answer session in the general session is and how to use precautions and security policy, cookie, sessionStorage and localStorage, respectively, from concept and answer similarities and differences. Finally, add the project usage - px / em / rem difference
px name suggests is what we usually say that the pixel size. em and rem are relative size, but em inherited the font size of the parent element, rem is relative to the size of the root element, this unit can be described as absolute and relative size is a size of one. It can be done by modifying only the root element can change all the font size, and font size layer by layer to avoid complex chain reaction. When rem to the browser with zoom, 1rem default is 16px. - animation and transition it used
wording: animation: name duration timing-function delay iteration-function direction .transition transition animation, this effect can be triggered in the event, and smooth animation effects to change the css property values. It is different from the transform, transform a 2D conversion (a very open question, as many of you know the answer) Note css write
this test usually encoded personal summary and constraints. Problems are more open, they can combine personal and team development experience bound to answer. 0 units without such later, to make use of abbreviations, the use of a sub-selector, rational use id like.JavaScript section
- JavaScript closures understand what
closure is the function, but we usually refer to the closure refers to the right to access and manipulate the function of other variables in the domain function role. General form of a function that returns for the function. Usually we have developed will be a lot of closures such as timers, event listeners, IIFE and so on. This question is the subject of a seized on the issue up points, we can talk about advanced use of closures, such as the use singleton mode, the throttle js and image stabilization can even talk about the operational mechanism of js, gc mechanism. - What are the front cross-domain solutions for
a lot of front-end cross-domain js, usually we give the scheme and should brief the advantages and disadvantages, such as the way there, jsonp, document.domain + iframe, window.name + ifram, location.hash + iframe , postMessage cross-domain, CORS cross-domain, websocket cross-domain, node agents and other agents across domains and NGINX way. Wherein the opening may be used for our description, such as the cross-domain CORS simple and non-simple request header field of the request, access-control-allow-origin , access-control-allow-headers, access-control-allow-method and other conventional field Description head. - JavaScript Inheritance
1, Es6 we can directly use extends keyword to inherit, inherited by rewriting the super complete, but in es5, the one who should go to the main elaborate. 2. prototype inheritance instance of a core class as a prototype parent subclass. Pros: Very pure inheritance, easy to use, the new parent prototyping prototype properties are accessible to subclasses. Cons: After you want to add properties and methods for the subclasses, we must put new Animal (), can not be put constructor, from the prototype object reference type is shared by all the strength, create a subclass can not pass argument to the constructor . 3. The constructor inheritance core: use the parent class constructor to enhance the advantages of a subclass instance: to solve the shared references type of problem, you can pass parameters in the constructor function, you can achieve multiple inheritance. Disadvantages: not the parent instance of a class instance, can only inherit the properties and methods of the parent class, can not inherit the methods and properties of the parent class prototype, can not achieve multiplexing function. 4, a combination of inherited core: structure by calling the parent class, the class inherits the properties of the parent and little retention parameters, by way of example as a sub-class parent class prototype, the multiplexing function is realized. Advantage: inherit attributes and methods and the properties and methods of the prototype, that is the instance of the subclass is the parent class instance attributes shared problem does not exist, the function can be multiplexed. Disadvantages: calling twice constructor, generated two examples. 5, a combination of the parasitic core inheritance: the parent class instance attributes of the cut, so that, when in the configuration of the parent class is called twice, the two will not initialize instance methods and properties, to avoid a combination of inherited disadvantages
es6 extends succession, in the ES5 inheritance, in essence, is to create a subclass of this on, then the parent class method to add on this, es6 is to create an instance of the parent class (must call super), and then modify this sub-class constructor. Does not call super, is not this the. - Throttling and anti-shake JavaScript in
principle anti-shake is after the trigger event execution time n if n time in the event is triggered again, in the time-triggered new standard, then execute n after the event
throttling principle in time for the event to keep firing, executed every once in a while. We can use the time line or timer to achieve, or a combination of both to achieve.
- JavaScript events you know what
this subject is usually the subject of openness, we can answer the first stage of the event, event bubbling, event capture, and the target stage. We can illustrate the problem at the event delegate use, and browser compatibility. - setTimeout is set to 0 what happened
this js mainly on enforcement mechanisms, can be answered from the event loop, including js single-threaded task queue microtask queue and so on. - Native to know what ajax request
- js Several methods of determining the data type
1, the most common typeof, return a String format. It can be determined function, but the Object is determined more annoying. 2, can be determined by known data types instanceof, instanceof attention must be behind the object type, and the case can not be wrong. 3.constructor way. But back when an error occurs inheritance, you need to manually modify. 4. General but tedious method prototype: Object.prototype.toString.call (a) - this point to question
1, the conventional title, from the default binding, implicit binding, as well as new binding specifically bind to answer. 2, the arrow es6 extended function, and the difference call, apply and bind to. - How do you see this JavaScript language
open new problem, from the reference "JavaScript language essence", to talk about the problems encountered in the development of their own, the most important thing is not the solution to Tucao but tasteless, such as inheritance of implementation, block-level scope, variable lift and the like. es6 used it? Talk about the realization of the promise
regarding es6 of knowledge will not repeat them here. Promise implementation mainly pub-sub mode. State and behavior of the phase separation difficult.
React part
- life cycle react related components
react component lifecycle withdrawals using the best encoding es5, wherein lifeline roughly divided into two routes, respectively getDefaultProps, getInitialState, componentWillMount, render, componentDidMount, (Running), and then divided into two Road, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render , componentDidUpdate and componentWillUumount. We generally getInitialState initialization state component data, an API, or request operation in componentDidMount componentWillMount the like, to optimize the components in shouldComponentUpdate. Which can expand and how to optimize the officially recommended PureRenderMixin and other implementations. As well as other aspects of the extended development of their own experience. - setState is synchronous or asynchronous
Usually we are asynchronous wording, but we really want to answer is when passed into the function to setState, in fact, the performance is synchronized. - ComponentDidMount componentDidMount parent component and sub-assembly which is executed first?
ComponentDidMount must be restricted sub-assemblies can be analyzed from the extended life cycle react components. DIFF algorithm react and virtual dom know how much?
React the render function returns a DOM description, only the result is lightweight js objects, reactjs when calling setState will update the DOM, and is the first update virtual dom, and then compare the actual dom, last updated dom. React powerful place not to say that he is faster than the speed of real dom, but how dare you change the data, I have to minimize the cost to update the view. My approach is to build a virtual dom use among new data in memory, and then compare the old DOM, find the differences, then update to the DOM node. When we modify a node on dom corresponding state, react immediately labeled him as "dirty state", only to re-render all the dirty nodes in the final event loop. In the actual code, the old and new trees will conduct a depth-first traversal, so that each node will have a unique tag, not to traverse a node, the node and put a new tree, and if there are differences on record into an object, and finally the real difference is applied to the DOM tree. Algorithm steps: js objects in the simulation with the DOM tree, the comparison between two virtual DOM, the real difference is applied to DOM tree, DOM DIFF is used in incremental update mode, similar to the patch. React need to add a node key to ensure the efficiency of the algorithm. Key attributes can help react to locate the correct node for comparison. Thus greatly reducing the DOM operations and improve performance.
- MVC and MVVM understand it? Generally speaking it can achieve two-way binding it?
Modal data layer represents the model, and may then modify operational data define modal logical layers, view representative of the UI layer, is responsible for converting the data into UI unfolded, viewModal synchronous and modal view objects. User operation view layer, view data is synchronized to vary modal, modal data changes to view immediately the reaction, viewModal view and to connect together by a bidirectional modal binding. The two-way binding, we can check mark from dirty to update to answer.
- Front-end routing implementations
from which we can react react router to talk about the use and principles, as well as h5 in historyAPI, pushState and replaceState to answer. - component b is a parent component of the component, the component is a parent component b c assembly, how the rendered at the same level b and c
does not return by react16 container assembly may be implemented, may be achieved by "Quxianjiuguo" approach . react SSR understand it
react ssr There are many ways to achieve, but the same principle, the purpose is to reduce the time to first screen black and white and have a good SEO. We can achieve for implementation from next.js and webpack-isomorphic-tools for.Browser-related
http three times to get the handshake how HTML is loaded?
The main assessment mechanism is a browser to load the page. Probably can get HTML from a browser, start parsing from top to bottom, divided into parsing DOM, analytical CSSOM, construction of the render tree, as well as the layout stage draw stage to illustrate. In fact, as specific as possible, such as when building DOM respectively by Bytes, characters, tokens, Nodes eventually to DOM and so on. Answer can also be extended repaint and reflow and other browser optimization.
Brief browser optimization
200 From cache and 200 OK What is the difference?
As the name suggests is a form cache buffer is strong, it does not communicate with the server, and the server is the correct 200OK processing results. This can be cached from a browser, enter the url enter, refresh the page and expand to explain aspects of force a refresh of the cache and other aspects.
- http2.0 new features to understand it
2 instead of binary text format, binary protocol more efficient to resolve.
2, the use of multiplexing, that is on the same tcp connection can create multiple http connection, in that case, we Sprite chart is not necessary.
3, the use of header compression, reducing overhead.
4. You can let the server take the initiative to push messages to the browser, support for server push, that is, the server can have multiple response to the client.
- post and get what is the difference?
1, GET the parameters included in the URL, POST passes parameters request body.
2, GET fallback in the browser is harmless, and POST will submit the request again. GET URL address can be generated Bookmark, and not POST. GET requests are active cache browser, POST will not, unless manually. GET request can only be url encoded, and POST supports multiple encoding. GET request parameters are intact in the browser history, and the POST parameters will not be retained. GET request parameters passed in the URL length is limited, but what there is POST. The data type of the parameter, GET accepts only ASCII characters, but there is no limit POST. GET more secure than POST, because the parameters directly exposed on the URL, it can not be used to transmit sensitive information. GET parameters passed via the URL, POST Request body in place.
3. What GET and POST are? Two methods for HTTP protocol to send the request.
4. What is HTTP? HTTP is based on the TCP / IP protocol on how to communicate data on how the World Wide Web. 5, the bottom layer of HTTP is TCP / IP. So the bottom GET and POST is TCP / IP, that is to say, GET / POST is a TCP connection. GET and POST can do is the same as the same. Plus you give GET request body, to bring POST url parameter, technically completely do the same in.
6, in my big World Wide Web world, there is another important role: transportation companies. A different browser (http request initiated) and server (http accept the request) is different transportation companies. Although theoretically, you could infinite stack of goods (url in unlimited additional parameters) on the roof. But the transportation company was no fool, loading and unloading is also a great cost, they will limit traffic to a single control risk, too much data to the browser and the server is a great burden. It is the industry's unwritten regulations, (most) browsers usually limit url 2K bytes in length, and (most of) the size of the server process up to 64K url. The part in excess will not be processed. If you use the GET service request body secretly hidden in the data, handling different servers it is different, some servers will help you unload, read data, and some server directly ignored, so, although the GET request body can take, nor guaranteed to be received, oh.
7, GET generates a TCP packet; generating the POST two TCP packets.
8, the GET request, the browser will http header and data sent together, the server response 200 (return data); for the POST, the browser transmits the first header, the server response 100 continue, then the browser data transmission, the server response 200 ok (return data). In other words, GET only need to put the car trip to deliver the goods, while the POST have to run twice, the first trip, go to the server and say hello, "Hey, I want to wait for the next shipment to delivery, you open the door to greet me, "and then send the goods back to the past. Because POST requires two steps, the time to consume a little more, it seems more effective than GET POST. So Yahoo team has recommended replacing POST with GET to optimize site performance. But this is a pit! Jumped need to be cautious. Why? 1. GET and POST has its own semantics, not just mixed. 2. According to the research, time and time difference between the two packages sent in the network environment is good, send a package basically ignored. And in the case of poor network environment, TCP packets over the two packet integrity verification, there is great advantage. 3. Not all browsers will send two packets during POST, Firefox is sent only once.
Building tools
- Webpack find out about compilation process?
Webpack running process is a serial process, the following procedures will be followed from start to finish, 1, initialization parameters: read parameters from configuration files and merge Shell statement, get the final parameters; 2, start the compilation: compiler spend parameter initialization step the obtained objects, loads all the plug-in configuration, RUN method starts execution object compile; 3, determining an inlet: inlet find all files based on the configuration of entry; 4, translation module: a file from the inlet departure, calling all Loader configuration of the module translation, then find the module dependent module, and then recursively this step until all files have been dependent on the entrance of the process in this step; 5, to complete the module compilation: after step 4 after completion of the translation of all modules using Loader to give the final content of each module after being translated and the dependencies between them; 6, output resource: the dependencies between the inlet and the modules, are assembled into one comprising a plurality of modules the Chunk, Chunk then converting each into a single output file on the list, this step is The last chance to modify the output content; 7, the output completion: After determining the content of a good output, depending on the configuration determine the output path and file name, the file contents are written to the file system. In the above process, Webpack will broadcast a special event at a specific point in time, after listening to plug in the event of interest will perform a specific logic, and plug-ins can call the API Webpack provide a change of operating results Webpack.
Plug it written a webpack
1, Webpack by Plugin mechanism make it more flexible to accommodate various application scenarios. Webpack run in the life cycle will broadcast many events, Plugin can listen to these events, change the output in the right time API provided by Webpack. 2, after the start Webpack, the process of reading the configuration will be executed first new BasicPlugin (options) to initialize a BasicPlugin examples obtained. After initialization compiler object, then call basicPlugin.apply (compiler) to pass compiler plugin instance object. Plug-in instance after obtaining the compiler object, you can compiler.plugin (event name, The callback function) to listen to the broadcast Webpack out of the event. And may go through the compiler operation Webpack object. 3, in the development of the two most commonly used objects Plugin is Compiler and Compilation, they are the bridge between Plugin and Webpack. Compiler and Compilation meanings as follows: Compiler object contains Webpack environment all configuration information, including options, loaders, plugins information, this object is instantiated in Webpack start time, which is globally unique, you can simply understand it examples of Webpack; compilation object contains the current resource module, compiled resource file and the like change. When Webpack run in development mode, the file every time a change is detected, a new Compilation will be created. Compilation object also provides many events callbacks for plug-ins do expand. Compilation can be read by the Compiler object. 4, the difference is that the Compiler and Compilation: Compiler represents the entire Webpack from start to close the life cycle, but Compilation only represent a new compilation. 5, need to pay attention to when developing plug-ins: As long as can get Compilation Compiler or an object, you can broadcast a new event, so the newly developed plug-in can also be broadcasting the event, to monitor the use of other plugins, passed to each plug-in Compiler Compilation and objects are the same reference. That modification in a plug-in on the property or Compiler Compilation objects, it will affect the back of the plug-ins, some events are asynchronous, asynchronous events accompanying these two parameters, the second parameter is a callback function, the plug-in You need to call a callback function to notify Webpack processed when the task will go to the next processes. Compiler Compilation and objects are the same reference. That modification in a plug-in on the property or Compiler Compilation objects, it will affect the back of the plug-ins, some events are asynchronous, asynchronous events accompanying these two parameters, the second parameter is a callback function, the plug-in You need to call a callback function to notify Webpack processed when the task will go to the next processes. Compiler Compilation and objects are the same reference. That modification in a plug-in on the property or Compiler Compilation objects, it will affect the back of the plug-ins, some events are asynchronous, asynchronous events accompanying these two parameters, the second parameter is a callback function, the plug-in You need to call a callback function to notify Webpack processed when the task will go to the next processes.What developed over webpack loader
1, Loader duty is a single, only need to complete a transformation. If the source file needs to undergo a multi-step conversion to normal use, the conversion will go through multiple Loader. When calling a plurality Loader to convert a file, each of the chain will be sequentially performed Loader, Loader will first get the original content to be treated, the result can be transferred to a next process Loader then processed, the final Loader will eventually processed results back to Webpack. 2 Therefore, when you develop a Loader, please keep the unity of their duties, you only care about input and output.
Sentiment
These problems include, but are not comprehensive in Hangzhou for the job. In general, your resume is your syllabus to the interviewer, so the resume must be true, timely interview process will not encounter the problem, but also calm thinking, will not have to take the initiative to admit, then it is best to put forward their own thinking and speculation. Do not pretend to understand! Do not pretend to understand! Do not pretend to understand!
Front-end, individuals still feel that the foundation is very important, from base to frame, from the frame to the principle, from the principle to the source, step by step. You must be confident, face the interviewer, to show their best. Do not be too aggressive colleagues, we must respect the interviewer politely.
Finally, still we hope that every job seeker, are able to get access to their favorite company successful, ~ the offer
PS: Should the article there is inappropriate, we welcome correction. Thank you ~
study Exchange
No public concern: [] daily featured front-end full-stack acquisition Good text recommended.
No reply within public [1], adding the whole front end of the stack learning group, with the exchange.
