Front-end Questions JS and jquery

in a real interview, the interviewer often uses a hard-to-use routine, and JavaScript and jquery are the most critical, as well as some of the questions about the project and the technology used, which is your essential storage!

Javascript

What is a closure (closure) and why use it?

A closure is simply a variable that a function can access an external function, which is a closure that does not understand the code, such as:

function aa(x){       var num=1;      function bb(y){          console.log(x+y+(++num));     }}

The BB function in the AA function is the closure, the BB function can use the AA function of the local variables, parameters, the most typical closure should be the following, the function defined in the function as the return value

function aa(x){       var num=1;      function bb(y){          console.log(x+y+(++num));     }return bb;}

The other function of closures is to isolate scopes, see this code

for(var i=0;i<2;i++){      setTimeout(function(){              console.log(i);        },0);}

The result of this code is 2,2 instead of 0, 1, because when the for loop comes out, the value of I becomes 2 when the function in SetTimeout is executed.

Talk about the understanding of this object

• This is a keyword of JS, and the value of this will change as the function is used in different situations.
• But there is a general principle that this refers to the object that invokes the function.
• This is the general case: global object. As a method call, then this refers to this object

What is the event? What is the difference between IE and Firefox's event mechanism? How do I stop bubbling?

1. We have an action on the Web page (some actions correspond to multiple events). For example, when we click on a button, an event is generated. is a behavior that can be detected by JavaScript.
2. Event handling mechanism: IE is event bubbling, Firefox is event capture;
3. Ev.stoppropagation ();

The scope and scope chain of JavaScript?

JavaScript scope refers to the scope of the variable, the internal scope is the function of the parameters, arguments, local variables, function composition, internal scope and external scope of a layer of links to form a scope chain, when the function inside to access a variable, First find your own internal scope There is no this variable, if not to the object's prototype object to find, or not, to the scope of the scope of the search, until the scope of the window, each function at the time of declaration by default there is an external scope exists, the code is as follows:

var t=4;function aa(){       var num1=12;       funciton bb(){       var num2=34;       console.log(t+" "+num1+" "+num2);      }}

BB looking for t variable is the process of first to their own internal scope, found not found, and then to the BB is located in the nearest external variable to find, that is, the internal scope of AA, or not found, and then to the scope of the window to find the results

What do you mean, "use strict"? What are the advantages and disadvantages of using it?

ECMAscript 5 Adds a second mode of operation: "Strict mode" (strict). As the name implies, this mode allows JavaScript to run under stricter conditions.
The purpose of setting up a "strict mode" is mainly as follows:

Advantages:

1. Eliminate some unreasonable and unreasonable JavaScript grammar, reduce some strange behavior;
2. To eliminate some of the unsafe code operation, to ensure the security of code operation;
3. Improve compiler efficiency, increase running speed;
4. Pave the future for new versions of JavaScript.
   Note: Strict mode is not supported for tested ie6,7,8,9.

Disadvantages:

Now the site JS will be compressed, some files with strict mode, while others do not. At this time these are the strict mode of the file, the merge, this is merged into the middle of the file, not only does not indicate strict mode, but the compression after the waste of bytes.

What does the new operator do specifically?

1. Create an empty object, and the this variable references the object, and also inherits the prototype of the function.
2, properties and methods are added to the object referenced by this.
3. The newly created object is referenced by this and the last implicitly returns this.

var obj  = {};obj.__proto__ = Base.prototype;Base.call(obj);

JavaScript, there is a function, the execution of the object when looking, never go to find the prototype, this function is?

hasOwnProperty ()

What do you know about JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format.
It is based on a subset of JavaScript. Data format is simple, easy to read and write, occupy a small bandwidth {' age ': ' A ', ' name ': ' Back '}

What are the ways of JS lazy loading?

Defer and async, dynamically create DOM mode (most used), asynchronously load JS on demand

What is Ajax and what are the pros and cons?

Advantages:

1. Improved user experience through asynchronous mode
2. Optimizes the transfer between the browser and the server, reduces unnecessary data round trips, and reduces bandwidth consumption
3. Ajax runs on the client side, assuming some of the work that would otherwise have been done by the server, reducing the load on the server under a large user volume.

The biggest features of Ajax:
Ajax can be implemented dynamically without refreshing (partial refresh)

Disadvantages:
1, Ajax does not support the browser back button.
2. Security issues Ajax exposes the details of interacting with the server.
3, the support of the search engine is weaker.
4. The abnormal mechanism of the program is destroyed.
5, not easy to debug.

How do I troubleshoot cross-domain issues?

JSONP (using the cross-domain capabilities of the script tag) cross-domain, WebSocket (a new feature of HTML5, is a new protocol), set up a proxy server (requesting data from servers for us to non-homologous servers), CORS (cross-origin resource sharing, Resource sharing), IFRAME cross-domain, PostMessage (the page containing the IFRAME passes messages to the IFRAME)

How does modularity work? Execute functions immediately, without exposing private members

     var module1 = (function(){　　　　var _count = 0;　　　　var m1 = function(){　　　　　　//...　　　　};　　　　var m2 = function(){　　　　　　//...　　　　};　　　　return {　　　　　　m1 : m1,　　　　　　m2 : m2　　　　};　　})();

What are the ways to load asynchronously?

(1) Defer, only IE support
(2) Async:false, (default is True);
(3) Create script, insert into DOM, after loading callback

The difference between Documen.write and innerHTML

• Document.Write can only redraw the entire page
• innerHTML can redraw part of a page

What is the difference between. Call () and. Apply ()?

The example uses Add to replace Sub,add.call (sub,3,1) = = Add (3,1), so the result is: alert (4);
Note: The function in JS is actually an object, and the function name is a reference to a function object.

function add(a,b){    alert(a+b);}function sub(a,b){    alert(a-b);}add.call(sub,3,1);

What is the difference between jquery and jquery UI?

• *jquery is a JS library, the main features are selectors, property modification and event binding and so on.
• The *jquery UI is based on jquery and uses the extensibility of jquery to design plugins.
• Provides some common interface elements, such as dialog box, drag behavior, change size behavior, and so on.

How do I convert an array to a JSON string in jquery and then convert it back?

This feature is not available in jquery, so you need to write two jquery extensions first:

$.fn.stringifyArray = function(array) { return JSON.stringify(array)}$.fn.parseArray = function(array) { return JSON.parse(array)} 然后调用：$("").stringifyArray(array)

How to optimize for jQuery?

• Class-based selectivity has a high overhead relative to the ID selector because all DOM elements need to be traversed.
• Dom, which is frequently manipulated, is cached and then manipulated. Chained calls with jquery are better.
  For example: Var str=$ ("a"). attr ("href"); *for (var i = size; i < arr.length; i++) {}
  For loop each iteration looks for the. Length property of the array (arr), which sets a variable to store the number at the start of the loop, allowing the loop to run faster:
  for (var i = size, length = arr.length; i < length; i++) {}

Variable declaration promotion in JavaScript?

Variables declared with Var in the function are preloaded before the function body executes (the variables are pre-declared but not assigned)
If you look at the code, you'll understand.

var num=1;function aa(){  console.log(num);     //undeifned  var num=2;   console.log(num);  //2}aa();

Why the above results in the AA function, this is the JavaScript variable promotion, although the variable num is defined in the back, but the browser when parsing, will be the definition of the variable to the front, the AA function above the equivalent

function aa(){  var num;  console.log(num);   //undefined  num=2;   console.log(num);   //2}

Simple memory diagram

Do those operations cause a memory leak?

• A memory leak refers to any object that persists after you no longer own or need it.
• The garbage collector periodically scans the objects and calculates the number of other objects that reference each object. If an object has a reference quantity of 0 (no other object has referenced the object), or if the unique reference to the object is circular, then the object's memory is recycled.
• The first argument of SetTimeout uses a string instead of a function, which causes a memory leak.
• Closures, console logs, loops (a loop is generated when two objects are referenced to each other and reserved to each other)

How can I tell if the current script is running in a browser or node environment? (Ali)

The current script is not running in the browser by judging whether the global object is window or not window

Of course, in the interview, in addition to know these basic knowledge, many times need is your work experience, you have not? The next step is in the work, the project, the problems encountered, the solution, and some of the thinking routines.

Other questions (please refer to some of the questions I have met and summarized)

• What are some of the more difficult technical questions you've encountered? How did you deal with it?
• What are the commonly used libraries? Common front-end development tools? What applications or components have been developed?
• How does page refactoring work?
• Enumerate the features of IE that are not the same as other browsers?
• 99% of all sites need to be refactored is that book written?
• What do you mean by graceful demotion and progressive enhancement?
• What are the ways Web applications proactively push data from the server to the client?
• What role do you play in the current team and what is the obvious role?
• What other technologies do you know besides the front end? What are your most powerful skills?
• How to design burst large-scale concurrency architecture?
• What do you think is the All-end engineer (full Stack developer)?
• Introduce a piece of work that you are most proud of?
• What are your strengths? What are the drawbacks?
• How do I manage front-end teams?
• What are you studying recently? Can you tell me about your plans for the next 3 or 5 years?

Put forward your own views on node's strengths and weaknesses?

Advantages

• Because node is event-driven and non-blocking, it is well suited to handle concurrent requests, so the proxy server built on node is performing much better than other technology implementations such as Ruby. In addition, client-side code that interacts with the node proxy is written in the JavaScript language, so it's wonderful that both the client and server are written in the same language.

Disadvantages

• Node is a relatively new open source project, so it's not stable, it's always changing, and it's missing enough third-party library support. It looks like the way Ruby/rails was.

What are your performance optimization methods? (see Yahoo 14 performance optimization principles)

(1) Reduce the number of HTTP requests: CSS Sprites, JS, CSS source compression, picture size control appropriate; web Gzip,cdn hosting, data caching, image server.
(2) Front-end template js+ data, reduce the bandwidth wasted due to HTML tags, front-end with variables to save AJAX request results, each operation of local variables, no request, reduce the number of requests
(3) using innerHTML instead of DOM operation, reduce DOM operation times and optimize JavaScript performance.
(4) When you need to set a lot of styles, set classname instead of manipulating the style directly.
(5) Reduce the use of global variables, cache DOM node lookup results. Reduce IO read operations.
(6) Avoid using CSS expression (CSS expressions), also known as dynamic properties.
(7) Pre-load the picture, put the style sheet at the top, and put the script at the bottom of the timestamp.
(8) Avoid using table,table in the main layout of the page to wait for the content to be fully downloaded before it appears, showing slower than the div+css layout.

What are the HTTP status codes? What does it mean to be represented separately?

100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。400    1、语义有误，当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。500-599 用于支持服务器错误。 503 – 服务不可用

A page from the input URL to the page load display completed, what happened in this process? (The more detailed the process, the better)

• Find browser cache
• DNS resolves, locates the IP address of the domain name, redirects (301), and issues a second GET request
• Making an HTTP protocol session
• Client Send header (request header)
• Server Feedback Header (response header)
• HTML Document Start download
• Document Tree establishes a file that specifies the MIME type required according to the tag request
• File display
  {The work done on this side of the browser is broadly divided into the following steps:
  Load: According to the URL of the request for Domain name resolution, to the server to initiate requests, receive files (HTML, JS, CSS, images, etc.).
  Parsing: syntax parsing of loaded resources (HTML, JS, CSS, etc.), suggesting corresponding internal data structures (such as HTML DOM tree, JS (object) attribute table, CSS style rules, etc.)}

What are your common development tools and why?

You can answer the question of what editor you have used and the process and cause of the transformation, from the way you touch the front-end to the step-up learning process.

How do you understand the position of the front-end interface engineer? What is the future of it?

• The front end is the most user-close programmer, close to the backend, database, product Manager, operations, security.
  • Implement Interface interaction
  • Enhance the user experience
  • With node. js, the front end can implement some things on the service side
• The front-end is the most user-close programmer, the ability of the front end is to allow the product from 90 to 100 points, or even better,
• Participate in the project, fast and high-quality implementation, accurate to 1px;
• Communicate with team members, UI design, product manager;
• Good page structure, page refactoring and user experience;
• Handle hack, compatible, write graceful code format;
• Optimized for servers, embracing the latest front-end technology.

How do you manage your project in the usual way?

• The advance team must determine the global style (GLOBE.CSS), coding mode (UTF-8), etc.
• Writing habits must be consistent (for example, the use of inheritance, the single style is written in one line);
• Dimension style writer, each module is labeled in time (the place where the key style is called);
• The page is labeled (for example, the page module starts and ends);
• CSS is stored in parallel with the HTML sub-folder, and the naming is unified (for example, STYLE.CSS);
• JS Sub-folder for the name of the JS function of the English translation.
• Images using integrated images.png PNG8 format files are used as far as possible to integrate together to facilitate future management

Tell me about some of the most popular things lately, right? Which websites do you often visit?

node. js, MongoDB, NPM, MVVM, MEAN, three.js, angular, React, vue
GitHub, know-how, MDN, ES6, Bootstrap, git

Mobile (Android IOS) How to do the user experience?

• Clear visual longitudinal line, information grouping, the ultimate subtraction,
• Use selection instead of input, label and text arrangement,
• Rely on the plaintext to confirm the password, reasonable keyboard utilization,

In the interview, is actually an interactive link, not only to answer questions, but also seize the opportunity to get the initiative, want to ask some questions about the company?

Ask the company questions:

• What are the latest web front-end technologies (future development directions)?
• How does a front-end team work (implementing a product's process)?
• What does the company's salary structure look like? (Figuring out what level you're in)
• How is the company's promotion mechanism specific? (See your self-motivated stability)

Front-end Questions JS and jquery