Last week, I participated in three interviews, one telephone interview and two on-site interviews of Tencent front-end school recruitment. The breadth of knowledge asked is very comprehensive, the depth of the people also a little helpless, most of the things usually do not go into the deep, the deep research may just look at other people’s blogs, not their own code to achieve, asked will be a little vague, the answer is not very good. Especially the third side, let Tencent big man asked speechless, was really want to cry without tears. After two days of rest, I am ready to sort out the knowledge points of the front-end interview and share them with you. There are also many Internet companies behind me. I hope you can also find a good job.
If you like this article, please give it a thumbs up. It will be long and I suggest you save it for future review
I will list all the knowledge points here and attach complete answers, but some questions have too many answers to explain one sentence or another. I will link the answers that I think are good so that you can use them as needed
— — — — — — — — — — – is at the bottom of the update — — — — — — — — — — — — — — — 9.26 — — — — — — — — — — — — — — — — — — — — — on the three questions below — — — — — — — — — — — — —
The following topics cover the basics (HTML+CSS),JavaScript(including Node and Angular), and front-end knowledge (HTTP, caching, performance optimization, performance monitoring, cross-domain, etc.)
Basic knowledge of
1. What are the new features and elements removed from HTML5? New features (1) More semantic content elements, such as article, footer, header, nav, section, form controls, Calendar, Date, Time, Email, URL, search; (2) Some functional labels, such as painting canvas, are used for video and audio elements of media playback; (3) Local offline storage localStorage stores data for a long time. Data is not lost after the browser is closed. SessionStorage data is automatically deleted after the browser closes; (4) New technologies, such as Webworker, websocket, and Geolocation; Basefont, Big, Center, font, S, Strike, tt, u; (2) Elements that negatively affect usability: Frame, Frameset, Noframes;
Cookies,sessionStroage and localStorage are on the client side, while session is on the server side. Session mechanism on the server. Session object data is stored on the server. In implementation, only the session ID is transmitted between the server and the browser, and the server finds the corresponding user’s session object according to the session ID. Session data is valid only for a period of time, which is the session validity period set on the server. Second, the differences between cookies, sessionStroage and localStorage (1) Cookie data is always carried in the same HTTP request (even if it is not needed). Cookies are passed back and forth between the browser and the server. However, sessionStorage and localStorage do not automatically send data to the server and only store data locally. (2) The storage size limit is also different. Cookie data cannot exceed 4K. At the same time, because each Http request carries cookies (it may also be asked where the cookie is in the Http packet, a: Cookies are carried in the Http request head), Therefore, cookies are only suitable for saving very small data, such as session identification sessionStroage and LocalStroage, although they have size limits, they are much larger than cookies, which can reach 5M. (3) Data validity period is also different, cookie is valid within the set validity period (server setting), regardless of whether the window or browser is closed, sessionStroage is only valid before the current browser window is closed (that is, as long as the browser window is not closed, even if the page is refreshed or enter another page of the same origin, The data is still there. SessionStorage is destroyed after closing the window); LocalStroage is always active and saved when the window or browser is closed. (4) Web storage supports the event notification mechanism, which can send the notification of data update to the listener. As follows:
window.addEventListener("storage".function (e) {
alert(e.newValue);
});Copy the codeBenefits of Web Storage: Reduces network traffic: Once data is stored locally, data requests to the server are avoided. Therefore, unnecessary data requests are reduced and data is transferred back and forth between the browser and the server unnecessarily. Fast display of data: Performance is good, reading data from the local is much faster than getting data from the server over the network, local data can be instantly available. Plus the web page itself can be cached, so the entire page and data can be displayed immediately if they are local. Temporary storage: In many cases, data only needs to be used while the user is browsing a set of pages and then discarded after the window is closed. SessionStorage is very convenient in this case.
3. What are the meta tags?Click here
4. LayoutRefer to this one
5. Concept and use of BFCBFC concept and usage
6.flexbox Nguyen half-stretching
7. How to center the CSSThere are seven ways to implement CSS in the middle
JavaScript
1. The data type of judgment Especially the Object. The prototype. ToString, is an artifact more here
var a = "iamstring.";
var b = 222;
var c= [1.2.3];
var d = new Date(a);var e = function(){alert(111); };var f = function(){this.name="22"; }; alert(Object. Prototype. ToString. Call (a) = = = '[objectString] ') -- -- -- -- -- -- -- >true;
alert(Object. Prototype. ToString. Call (b) = = = '[objectNumber] ') -- -- -- -- -- -- -- >true;
alert(Object. Prototype. ToString. Call (c) = = = '[objectArray] ') -- -- -- -- -- -- -- >true;
alert(Object. Prototype. ToString. Call (d) = = = '[objectDate] ') -- -- -- -- -- -- -- >true;
alert(Object. Prototype. ToString. Call (e) = = = '[objectFunction] ') -- -- -- -- -- -- -- >true;
alert(Object. Prototype. ToString. Call (f) = = = '[objectFunction] ') -- -- -- -- -- -- -- >true;Copy the code2.XHR specific underlying principles (handwritten Ajax required)
function ajax(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
}
// Check the execution status
xmlhttp.onreadystatechange = function(){
/* readyState 0: the request is not initialized 1: the server connection is established 2: the request is received 3: the request is being processed 4: the request is completed and the response is ready Status 200: the request is successful 404: Not found 500: an internal error */
if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText;// Get the response data as a string
}
}
xmlhttp.open("Get"."url".true);
// Set the header information
xmlhttp.setRequestHeader("Content-type"."application/x-www-form-urlencoded");
// Send the information to the server
xmlhttp.send();
}Copy the code3.Js event mechanism? What’s the difference between Internet Explorer and Google or Firefox? The following code is compatible with all browsers, with special attention being paid to the fact that the arguments for the removal event must be the same as those for the binding. In particular, callback functions cannot use anonymous functions
var EventUtil ={
addHandler: function(element, type, handler){
if(element.addEventListener){// WebKit, ff
element.addEventListener(type, handler, false);
}
else if(element.attachEvent){//ie
element.attachEvent('on' + type,handler);
}else{
element['on'+ type] = handler; }},removeHandler: function(){
if(element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = null; }}}Copy the codeIt’s best to find javascript Advanced Programming, which has a chapter on events and I’ll talk about the event mechanism of JS
4. What are closures? What’s the difference between stack overflow? Memory leak? Which operations cause memory leaks? How to prevent memory leaks? Closures: Functions that can read variables inside other functions. Stack overflow: When too much data is written to a local block of data, regardless of the size allocated in the stack, causing the data to overwrite other data. It often happens in recursion. A memory leak refers to a situation in which dynamic storage is used to allocate the memory space of a function and the memory unit is not released after it is used. Until the end of the program. Refers to any object that exists after you no longer own or need it. Memory leak: The first argument to setTimeout uses a string instead of a function, causing a memory leak. Closures, console logging, loops (a loop is created when two objects refer to and retain each other) prevent memory leaks: (1) Do not dynamically bind events; (2) Do not bind events to dynamically added or dynamically removed DOM, and use event bubbling to listen for events in the parent container; If you want to violate the above principle, you must provide the destroy method to ensure that events are removed after removing the DOM. This can be done by referring to the source code of Backbone. (4) Singleton, less DOM creation, fewer tied events. Learn Javascript closures
5. Js inheritance this piece is the focus of JS, requires to be able to handwritten JS inheritance several ways to put the js prototype, inheritance this piece to figure out, you can take a look at this series of articles in-depth understanding of javascript prototype and closure
6. Es6 variables defined by let and const const cannot be modified and must be initialized. (1) The advantage of let is that it is strict to declare variables. It does not allow you to declare variables repeatedly in the same scope. At the same time, it also adds the concept of block-level scope, such as if(*){let is a scope} and for(){let a =}; Each a declared in the body of the loop is independent of each other and belongs to different scopes; (2) Const lets are used for more than one reason: const gets an error when changing a value or pointer.
7. Implement a Promise by yourself. Here’s how to implement a complete Promise
Express vs. KOA: Node.js express vs. KOA: Node.js Express vs. KOA
Angular bidirectional binding implementation builds its own AngularJS, Part 1: Scope and Digest
10. Regular matching JS regular expressions complete tutorial
In JavaScript, this can be a global object, a current object, or any object, depending on how the function is called. The object bound to this is the context in which the function is executed. If a function has this, but it is not called by a higher level object, then this refers to window(in non-strict mode, in strict versions this is not window by default, but undefined) case 2: If a function has this, and the function is called by a higher-level object, then this refers to the higher-level object. Case 3: If a function has this, it contains multiple objects, and even though the function is called by the outermost object, this refers only to the object above it
// called as an object method
var test = {
a : 5.b : 6.sum : function () {
return this.a + this.b; // this = test
}
}
alert(test.sum()); / / 11Copy the code// called as a function
a = 4;
b = 3;
function sum(){
return this.a + this.b; // this = window
}
alert(sum()); / / 7Copy the codevar o = {
a:10.b: {a:12.fn:function(){
console.log(this.a); / / 12
}
}
}
o.b.fn();Copy the codevar o = {
a:10.b: {// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();Copy the codevar o = {
a:10.b: {a:12.fn:function(){
console.log(this.a); //undefined
console.log(this); //window}}}var j = o.b.fn;
j();Copy the codeFor constructors, this refers to the instance of new
function Fn(){
this.user = "Meng ye";
}
var a = new Fn();
console.log(a.user); / / of the yeCopy the codeIf the return value is an object, this refers to the returned object. If the return value is not an object, this refers to an instance of the function.
function fn()
{
this.user = ' 'ye';
return 1;
}
var a = new fn;
console.log(a.user); / / of the yeCopy the codefunction fn()
{
this.user = ' 'ye';
return function(){};
}
var a = new fn;
console.log(a.user); //undefinedCopy the codeHow to change
- The new operator changes the orientation of this. First the new keyword creates an empty object, and then the apply method is automatically called to refer this to the empty object. In this case, this inside the function is replaced by the empty object.
- Apply or call, bind
The difference between a bind and a call is that it does not call immediately. If a bind is called more than once, any number of times will be invalid
Both are used to change the reference of the function’s this object. The first argument is the object to which this refers, and can be passed with subsequent arguments.
Take the example above and change itvar a = { user:"Meng ye".fn:function(){ console.log(this.user); / / of the ye}}var b = a.fn; var c = b.bind(a); c();Copy the codeFront-end comprehensive knowledge
1 cross domain
The same origin policy is a famous security policy proposed by Netscape. It is the core and basic security function of the browser. It restricts the interaction between the loaded text or script in one origin and resources from other sources
The same protocol, domain name, and port are the same.
Simply put, a domain name is a domain name only when the protocol, domain name, and port are the same. Otherwise, cross-domain processing is required.
The solution
- JSONP(Script tag) (Post not supported)
- Access-control-allow-origin (CORS) (Compatible with Internet Explorer 10 or higher) Cross-domain resource sharing CORS description
- Server Proxy(when you need to have a cross-domain request operation to send the request to the backend, let the backend for you, and finally send you the result)
- Location. hash+iframe(the data is directly exposed in the URL and is of limited size and type)
- window.name
- postMessage
- Document.domain refer to this article, and everything you want to know about cross-domains is here
2.HTTP Comprehensive knowledge (1) Status code An HTTP response contains a status code, which indicates the result of the response from the server to the client.
The status code generally consists of three bits:
1xx: Indicates that the request is accepted and continued processing. 2xx: Indicates that the request has been processed. 3xx: redirection. 4xx: An error occurs on the client and the request cannot be implemented. 5xx: Usually a server error.Copy the codeFor example, a common status code:
200 OK The client request is successful. 301 Moved Permanently Requested Permanently redirection. 302 Moved Temporarily Requesting a temporary redirection. The 304 Not Modified file is Not Modified. You can use the cached file directly. 400 Bad Request The client Request has a syntax error and cannot be understood by the server. 401 Unauthorized The request is Unauthorized and cannot be accessed. 403 Forbidden The server receives the request but refuses to provide the service. The server usually gives the reason for not providing the service in the response body. 404 Not Found The requested resource does Not exist, for example, an incorrect URL was entered. 500 Internal Server Error An unexpected Error occurs on the Server. As a result, the client request cannot be completed. 503 Service Unavailable The server cannot process client requests. The server may recover after a period of time.Copy the codeSee this article for the basics of the HTTP protocol
3. Cache mechanism Details about the HTTP cache mechanism
4. What does the browser do when we enter www.baidu.com/** to visit Baidu
First Chrome searches its OWN DNS cache. (If baidu's IP address is found in the DNS cache, it will skip the next step to find the IP address and directly access the IP address.) Search the OPERATING system's own DNS cache. (The browser did not find the cache or the cache is invalid.) Read the host file on the hard disk, which records the mapping between domain names and IP addresses in /etc/hosts on the Mac. The browser makes a DNS resolution request to the broadband carrier server or DNS server. The server can resolve the request in two ways, which will be discussed later. After that, the browser gets the IP address of baidu's home page. Once the IP address is given, the browser establishes a TCP connection (a three-way handshake) to the server that hosts the IP address. Once the connection is established, the browser can make an HTTP request to the server. After receiving the request, the server returns the result of processing to the browser according to the path parameters and some background processing. If it is the Baidu home page, the complete HTML page code can be returned to the browser. Browser got baidu home page complete HTML page code, kernel and JS engine will parse and render this page, JS, CSS, images and other static resources through one HTTP request to load. The browser renders the page based on the resources it receives, eventually presenting the complete page to the user. If there is no subsequent request from the browser, then TCP disconnects from the server (that is, four waves).Copy the codeWhat happens from the time you enter the URL until the page loads? 5. Performance optimization Performance optimization must refer to yahoo’s 35 catch-22 for front-end optimization
This article is the work of Tali Gaher, an Israeli developer. It is a highly recommended and in-depth article on how browsers work
So far, I’ve covered most of the content, but if you want to see the basics, you can click here to see the basics of HTML + CSS, JS
This article is mainly aimed at the theory more, for the interview request handwritten some cases, or some small algorithms, this article is only slightly involved, I hope to be able to help you in the school recruitment interview
Some of the questions I didn’t include in my article are mainly because I haven’t practiced them myself. I will list them below and you can share the good answers. 1. Front-end performance monitoring 3. Js inheritance + closure, handwritten combination inheritance 4. Js bidirectional binding 5. Why express instead of KOA? 6. Project Architecture Figure 7. Load balancing 8
If you like this article, please give it a thumbs up. It will be long and I suggest you save it for future review
If there is any mistake, welcome to correct! If you have any questions, please let me know! Call for articles on mining technology