Web Front-end interview questions, web interview questions

Web Front-end interview questions, web interview questions
Welcome to reprint, but please indicate the source: http://blog.csdn.net/sysuzjz/article/details/44562467

The following questions come from the questions I have asked when applying for an application from various companies. I have specially sorted out the questions. If you have any mistakes or different comments, I would like to comment on them. As the interviews for major companies are not over, this article does not disclose the specific sources of the questions and will disrupt the order.

Note: by default, both the Q & A and the Q & A browsers are mainstream browsers (IE, chrome, firefox, Safari, and Opera)

Technical Q &:

• What are common HTTP status codes? What do they mean?
  • 200: OK, everything is normal
  • 302: Redirection
  • 304: not modified
  • 403: Access prohibited from the server
  • 404: requested resource not found
  • 500: A server error occurs.

• What is the difference between 4 ** and 5 ** in the HTTP status code?
  • 4 ** indicates a request error, such as an unauthorized request (403), an incorrect request address (404), and an incorrect Request Method (405)
  • 5 ** indicates a server error, such as a script running error (500)
• In js dom, how do I bind and remove events?
  • Add all: domNode. onevent = function, for example, document. onclick = function (){}
  • All removed: domNode. onevent = null; for example, document. onclick = null;
  • Add non-IE: domNode. addEventListener ("event", function () {}), for example, document. addEventListener ("click", function (){})
  • Remove non-IE: domNode. removeEventListener ("event", function () {}), for example, document. removeEventListener ("click", function (){})
  • Add IE: domNode. attachEvent ("on" + "event", function () {}), for example, document. attachEvent ("onclick", function (){})
  • IE removal: domNode. detachEvent ("on" + "event", function () {}), for example, document. detachEvent ("onclick", function (){})
• What is the browser cache mechanism? Which field of the header is used for implementation?
  • Before requesting resources, check whether the cache contains the same resources that have not expired and have not been modified. If yes, obtain them directly in the cache instead of requesting them from the server. If no, the server allows the cache, the resource is cached locally.
  • Related Fields and functions:
    • Expires: the server allows the browser to use the resource cache before this time.
      
    • Cache-control: it is similar to Expires, but has a higher priority and has more value options. Values can be public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, and max-age. The max-age value is the most commonly used.
      • Public indicates that the response can be cached in any cache area.
        
      • Private indicates that the whole or part of the response message of a single user cannot be processed by the shared cache. This allows the server to only describe part of the user's response message, which is invalid for requests of other users.
        
      • No-cache indicates that the request or response message cannot be cached.
        
      • No-store is used to prevent the unintentional release of important information. Sending a request message does not cache the request and response messages.
        
      • Max-age indicates that the client can receive responses with a lifetime not greater than the specified time (in seconds.
        
      • Min-fresh indicates that the client can receive a response whose response time is earlier than the current time plus the specified time.
        
      • Max-stale indicates that the client can receive response messages beyond the timeout period. If the value of the max-stale message is specified, the client can receive response messages that exceed the timeout period.
    • Last-Modified/If-Modified-Since: used with Cache-Control.
      
      • Last-Modified: indicates the Last modification time of the response resource. When the web server responds to the request, it informs the browser of the last modification time of the resource.
        
      • If-Modified-Since: when the resource expires (max-age identified by Cache-Control), it is found that the resource has a Last-Modified declaration, if-Modified-Since is added to the request to the web server again, which indicates the request time. After receiving the request, the web server compares the header If-Modified-Since with the last modification time of the requested resource. If the last modification time is relatively new, it indicates that the resource has been modified, the system will respond to the content of the entire resource (written in the Response Message package), HTTP 200; if the last modification time is relatively old, if no new changes are made to the resource, the system responds to HTTP 304 (no package body is required, saving browsing) and notifies the browser to continue using the saved cache.
        
    • Etag/If-None-Match: must also be used with Cache-Control. Note that the priority of Etag is higher than that of Last-Modified, and the server will give priority to Etag.
      
      • Etag: indicates the unique identifier of the current resource on the server when the web server responds to the request ). In Apache, the value of ETag is obtained after the INode, Size, and MTime of the file are hashed by default.
        
      • If-None-Match: when the resource expires (using the max-age marked by Cache-Control), it is found that the resource has an Etage declaration, if-None-Match (Etag value) is added to the request to the web server again ). After receiving the request, the web server compares the existing header If-None-Match with the corresponding verification string of the requested resource and determines to return 200 or 304.
        
• What does HTML semantics mean? What is the function?
  • To put it simply, semantics is to let things that should be done do things. For example, titles at all levels in HTML, such as H1, can be implemented by adding various styles to div and span. However, it is equivalent to carrying customers with tractors, but it is not practical to be bloated. In the same example, there are headers, footer, and other labels.
  • Purpose:
    • First, the person who is friendly to the maintainer and maintains your code can easily understand your intention through your HTML code;
    • Secondly, the search engine is friendly, and the search engine does not capture your CSS attributes. Therefore, the semantic feature allows the search engine to better capture what you want to express, it is easier for search engines to understand your website architecture;
    • In addition, it is user-friendly. Of course, most users only view your website with their eyes, so they can achieve this through CSS styles. However, blind people cannot see it. They can only achieve it through auxiliary devices, but likewise, these devices can only recognize semantic HTML.
• How to Implement ajax?
  • Use the XMLHttpRequest (non-IE) or ActiveXObject (IE) object in the browser to send data asynchronously and execute a callback. The specific implementation code is as follows: (Code Source: http://www.jb51.net/article/23858.htm)

  • Function ajaxFunction () {var http_request; if (window. XMLHttpRequest) {http_request = new XMLHttpRequest ();} else if (window. activeXObject) {// IE try {http_request = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {try {http_request = new ActiveXObject ("Microsoft. XMLHTTP ");} catch (e) {alert (" your browser does not support Ajax "); return false ;}} http_request.onreadystatechange = alertContents; http_request.open ('get', url, true); http_request.send (null);} function alertContents () {if (http_request.readyState = 4) {if (http_request.status = 200) {alert (http_request.responseText );} else {alert ('There was a problem with the request. ');}}}

• Improved String concatenation Scheme
  • Write the string to be concatenated into the array arr and call arr. join ("");
• What is the difference between title and alt?
  • All are prompt words. To put it simply, the title is for people, and alt is for the engine.
• What are CSS selectors?
  • Wildcard selector (*), tag, class selector (. class), id selector (# id), attribute selector [attr = "val"]), descendant selector1 selector2, descendant selector1> selector2 ), adjacent selector1 ~ Selector2), pseudo elements (selector: first-child, etc.), pseudo classes (selector: hover, etc ). The name may not be the same, so I will give some examples for your reference.
• Function foo () {console. log (this) ;}; foo. call (null );
  
  • Window. The first parameter of call is null, so the caller is global, that is, the window, and this points to the caller
• Function and significance of DOCTYPE
  • To tell the browser what standards to parse the document. This is because some web pages do not follow the standard, or the old version of the standard is followed.
  • Specific usage, can refer to: http://www.jb51.net/web/34217.html
• What are readyState values? What are their representatives?
  • 0-(not initialized) The send () method has not been called
    
  • 1-(load) The send () method has been called and a request is being sent.
    
  • 2-(Loading completed) The send () method is executed completely and all response content has been received
    
  • 3-(interaction) parse the response content
    
  • 4-(complete) The response content has been parsed and can be called on the client
    
• Js closure concept
  • The local variables declared in js functions will be destroyed when they exit the function. The closure retains the reference to the local variable to keep it in memory for a long time.
• What are the more functions of HTML5 than HTML4? What more functions does CSS3 have than CSS2?
  • HTML5: Form Verification, websocket, semantic tags, etc.
  • CSS3: animation, computation, new attributes
• What is less? What are the features? How to determine the compatibility of less
  • Less is a CSS pre-compiler that introduces elements such as variables and functions on the basis of CSS, making CSS easier to maintain and expand.
  • Less is parsed by less. js, so it has nothing to do with browsers. IE6 + and other mainstream browsers can use less
• JS attributes can be defined either directly in the constructor or in the prototype. What is the difference between the two?
  • The former is defined to be written in the memory, while the latter is written in the hard disk.
• What is the result of Array (6). join ('A?
  
  • "Aaaaa ". Join is used to separate each item in an exponential group by the join parameter.
• 123456 ['string'] ['length'];
  
  • 1. Number. toString is a function with a length of 1
• {} + 'A' <{} + 'B ';
  
  • False. {} + "A" is converted into numbers and the result is NaN. NaN and NaN always return false
• Var arr = [1, 2, 3, 4, 5, 6]; arr. splice (1, 3); arr. toString ();
  
  • 156. Splice (index, length ). The first parameter indicates the subscript of start cutting, and the second parameter indicates the length of cut. Note that this cut is removed from the original array.
• Var arr = [,]; arr. slice () ['tostring'] ();
  
  • 23. Different from the preceding example, the first parameter of slice (index1, index2) indicates the subscript of the Start cut, and the second parameter is the subscript of the end cut (excluding ). And this cut returns the cut part.
• ({A: 1, B: 2, c: 3}) [['B'];
  
  • 2
• Write an hack style to use different colors in IE6, IE7, and firefox.
  
  • The following are implemented using conditional comments and attribute prefixes respectively.

  • /* Only effective under IE6 */<! -- [If IE 6]> color: #666; <! [Endif] -->/* takes effect only under IE7 */<! -- [If IE 7]> color: #777; <! [Endif] -->/* effective under non-IE */<! -- [If! IE]> color: # fff; <! [Endif] -->

  • color: #67f;    // firefox, IE6, IE7*color: #667; // IE6,IE7_color: #666; // IE6 only

Project planning questions:

• If you are the project owner, how do you plan the CSS file of the entire project?
  • Reset.css
  • Public.css
  • Each module allocates CSS by folder or directly divides CSS by module
• How can we avoid conflicts with other groups in the project? For example, the class name?
  • Add the module prefix to the class name. For example, the login submission button can be named "login-btn-submit" (for personal usage, We are welcome to discuss it differently)

Logic:

• What is the angle between the hour hand and the minute hand at 07:45?
  • 37.5 °
• Give you N apples and a balance, one of which is heavy, and the other is as heavy. Assuming that the other factors are the same, let's assume that there can be an unlimited number of apples on both sides of the balance. To find the heavier apple, you need to use the balance several times. Find the optimal solution in the worst case. (Design an algorithm to minimize the average number of times)
  • If you want to say that you are ready to go to 2333 for the second part, do not believe in N = 8 cases.
  • The best solution I can think of is three points, that is, N/3 and rounded up to * 2, and the rest is the third heap. That is, ceil (N/3) is used on both sides of each day ). As mentioned above, when N = 8, the first is, the second is, and the third is, three times in total. Using the three-point idea, the first is 3, 3, 2, and the second (worst) is, 1, and only two.

Code practice: drag-and-drop effect implementation (compatible with IE and chrome): overall idea: When you click the box, the status can be changed to drag-and-drop. Detects mouse movement and modifies the frame position based on the mouse movement. When the mouse is opened, the status changes to not dragging. Not to mention, the above Code:

<! DOCTYPE html> 

The general idea of right-click custom menu: shield the browser mail menu and hide the menu you have written. When right-click is detected, the menu is displayed; otherwise, the menu is hidden. Code:
<! DOCTYPE html> 

Determine whether a domain name is a company xx (Note: All Domain Names of the company are *** .xx.com, or xx.com). Train of Thought: Regular Expression
var exp = new RegExp(/^(.+\.)*qq.com(\W[\s\S]*$|$)/);var hostName = window.location.hostname;exp.test(hostName);

Frequently-used word search Description: This article describes how to use spaces to separate words into arrays. Note the delimiter (quotation marks, periods, and so on), convert words into lowercase words as key values, store them in the hash array, and finally make statistics. The code is too ugly. High-Precision addition Description: The two numbers are added. These two numbers are very large (close to Number. MAX_VALUE) and the result after the sum is obtained. Train of Thought: String input, string output, from low to high, one-bit addition, pay attention to carry. The Code is also unavailable. Subjective problem: the subjective problem is that the benevolent wise sees the wise. Here is just a reference. It should be noted that this part is generally human, but human doesn't know much about technology, so don't hold on to the technical discussion.

  

 
   
Self-Introduction 
    
 
     
I don't need to talk about this. Time is not the focus, but it should cover all timelines as much as possible.
 
    
 
   
What have you learned from your previous study/project? 
    
 
     
Just let it be said. It doesn't need to be too specific. For example, if you learn the prototype to inherit blabla, HR will be very depressing.
 
    
 
   
What do you want to learn in the future? 
    
 
     
You can say what you want to learn, teamwork and communication skills.
 
    
 
   
What are your requirements for your work location and department? 
    
 
     
Look at yourself.
 
    
 
   
What do you think are your greatest advantages and disadvantages? 
    
 
     
Answer "my biggest advantage is that there are no disadvantages, and my biggest disadvantage is that there are no disadvantages." There is no need to go to the interview if you die.
 
     
The advantage is to tell the truth, but you can pick it up. For example, you can say that you are good or not, and you do not need to be specific, for example, if you say that it is unnecessary for people to turn off the lights (you can say that environmental awareness is strong)
 
     
Downsides can be honest, but they must be retained and be good at converting the provisioning description into a provisioning description.
 
    
 
   
Others