Home > front end >  Before 2019 the latest face questions and answers
Before 2019 the latest face questions and answers

Time:10-10

1. How to use native js to bind a button onclick event?
Q: BTN addEventListener (" click ", hello);

2. The document. The difference between the write and innerHTML;
Q: the document. The write is to write directly to the page content flow, will lead to a page is rewritten, innerHTML content into a DOM node, will not lead to a page full redraw;

3. Ajax steps;
Q: (1) create the XMLHttpRequest object, that is, to create an asynchronous invocation object.
??
(2) to create a new HTTP requests, and specify the HTTP request method, URL and authentication information.
??
(3) set the response HTTP request change of state functions.
??
(4) sends an HTTP request.
??
(5) for asynchronous invocation returns data.
??
(6) using JavaScript and DOM implementation partial refresh.

4. What is the difference between XML and json;
Q: the json data volume is small, fast delivery, json and JavaScript interaction more convenient, easier to analytical processing, better data interaction, XML for data description is better;

5. Clear floating method; (common)
Q: (1). The parent div definition height; (if the height and the parent div is different, can produce problems)
(2). At the end add empty div tags clear: both;
(2). The parent div definition pseudo-classes: after and zoom; (more than Internet explorer and the IE browser to support: after)
(2). The parent div definition overflow: hidden; (cannot be used and the position)

6. The box - sizing properties in common use,
Q: the box - sizing: content - box; (the default attribute values, W3C)
The box - sizing: border - box; (IE box model)
The box - sizing: inherit;
(box - sizing properties in FireFox compatibility problems, so you need to use - moz - box - sizing do the compatible)

7. Undefined and null difference;
Q: null: null type, on behalf of the "null" is for an empty object pointer, use the typeof manipulations "object"
Undefined: undefined type, when a statement an uninitialized variable, got is undefined, (null, and undefined said "values gap", you can think is undefined said system-wide, unexpected or similar error value of vacancy, and null is on the order of presentation programs, normal or in the value of the expected gap,)

Common HTTP status code; 8.
Q: 2 at the beginning (request), 3 (request has been redirected) in the beginning, 4 at the beginning (request), 5 at the beginning (server)

9. The web site performance optimization;
Q: 1. JavaScript compression and module packaging

2. On-demand loaded resources


3. The cache

4. Use the index to accelerate database query

5. Use faster translation solutions

6. To avoid or minimize the use of JavaScript and CSS and block rendering

7. Image coding optimization

10. JS which operation will cause memory leaks;
Q: 1) the accident caused by the global variable memory leaks;
2) memory leaks caused by closure;
3) didn't clean the DOM element reference;
4) the forgotten timer or callback.
5) child elements caused by memory leaks;

11. What is a closure, how to use it, why do you want to use it;
Q: closure is to be able to read other functions of the internal variables function, because in the Javascript language, only function within a subroutine can read the local variables, so you can put the closure simply as "the function definition within a function". Due to the closure will make in the function variables are kept in memory, memory consumption is very big, so can't abuse closures, otherwise it will cause the performance of the web page, may lead to memory leaks in IE, the solution is, before the exit function, will not use the local variable delete all,

12. The homologous strategy of JavaScript;
Q: the same-origin policy regulation between cross-domain scripting is segregated, a domain of script cannot access and manipulate another domain of most of the attributes and methods,

13. The browser how to render a page;
Q: 1. The parsing HTML file, create a DOM tree,

? ? From top to bottom, any style (link, style) and script (script) are blocked (external style don't block the subsequent external script loading),


2. Analytical CSS, priority: the browser default Settings & lt; User Settings & lt; External style & lt; Inline style & lt; In HTML style style;


3. Incorporating the CSS and the DOM, constructs the Render Tree (Render Tree);

4. The layout and rendering, redraw (repaint) and rearrangement (reflow);

14. Enter the url to display the page, have experienced what;
Q: 1, first of all, enter the url in browser address bar


2, the browser cache - check the browser cache - system router cache, if there is, the cache will directly on the screen displays the page content, if no, skip to step 3,


3, before sending HTTP requests, needs to domain name resolution (DNS), analysis to obtain the corresponding IP addresses,


4, initiate a TCP connection to the server browser, establishing TCP three-way handshake with the browser, (TCP transmission control protocol (TCP), a TCP connection is a kind of Internet connection agreement sets,)


5, after the success of the handshake, the browser sends a HTTP request to the server request packet,


6, the server process request received, the data back to the browser


7, the browser receives the HTTP response


8, read the page content, the browser rendering, parsing HTML source code


9, generating a Dom tree, analytical CSS, js interaction


10, the client and server interaction


11, ajax queries

15. On & lt; Meta> Tags have what understanding, the role of meta
Q: can be used in the browser (how to display content, or reload the page), search engine (keyword), or other web services; In the meta data is for machine reading, tell the machine how to parse the page, there is a purpose is to add the server sends to the browser
the content of the HTTP headers
16. How to design a component encapsulation;
Q: 1) the purpose is to reuse components encapsulation, improve the development efficiency and code quality
2) low coupling, single responsibility, reusability, maintainability,
3) the front componentization design thinking

17. Thread, process
Q: (1) is the smallest thread execution unit, the process is the minimum resource management unit
2), a thread can only belong to a process and a process can have multiple threads, but at least one thread

18. Vue data of two-way data binding;
Q: vue two-way data binding is hijacked by data together publishers - sub way, through the Object. The defineProperty () to hijack the setter for each attribute, getter, release information to the subscriber when data changes, triggering the corresponding listen callback,

19. The difference between the get and post communication;
Q: 1). Get request to the cache, the Post can't;
2). Post relative to Get a little bit of security, because Get requests are included in the URL, and will be preserved by the browser history record, can't Post, but in the case of a grab bag is the same;
3). The Post can request body to transmit more data than the Get, Get the technology;
4). The URL length limitation, can affect a Get request, but the browser is the length limit, not specified by RFC;
5) support Post more code type and not limited to data types;

While importing style. 20 pages, what is the difference between using the link and @ import;
Q: (1) the link belong to XHTML tags, in addition to load the CSS, can also be used to define the RSS, define the rel connection properties, and so on; And @ import is CSS, can only be used for loading the CSS;
(2) when the page is loaded, the link will be loaded at the same time, the @ import referenced CSS will be finished until the page is loaded again loaded;
(3) the import is proposed by this, just above the IE5 can be identified, and the link is the XHTML tags, no compatibility,

21. The understanding of this object;
Q: this always points to the function of direct caller (rather than the indirect caller);
If there is a new keyword, this points to the new out of the object;
In the event, this point to trigger the event object, special, IE the attachEvent in this always points to the global object Window,

22. The eval is what to do;
Q: it is the function of the corresponding string parsed into JS code and run;
Should avoid using the eval, insecure, very consumption performance (2 times, a parsed into js statements, an executive),
The JSON string is converted to a JSON object can use eval, var obj=eval (' (' + STR + ') '),

23. -- -- -- -- -- -- -- -- -- -- -- -- -- -- what is graceful degradation and progressive enhancement -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Q: graceful degradation: build the complete function from the start, and then in view of the low version of the browser compatibility,
Progressive enhancement: in view of the low version of the browser to build pages, guarantee the most basic function, and then in view of the advanced browser effects, interaction to achieve improvements and additional features such as better experience effect,

24. If solve the problem of ajax can't retreat;
Q: 1). The HTML 5 introduces a new API, namely: the history. History. ReplaceState pushState,
2.) by pushState browser history and replaceSate interface, and change the current page URL
3). Onpopstate listening back

25. The event delegation;
Q: using the principle of bubble, add events to the parent, trigger execution effect
To save a lot of memory footprint, reduce event registration
Dynamically add and modify elements conveniently, and don't need because of the changes of element modify event binding

26. The difference between the let and const;
Q: let's statement variables can change, values and type can change, no restrictions;
Const variable declaration shall not be changed value;

27. The common ES6 grammar;
Q: the let, const, arrow function, string template, class class, modular, promise

28. Introduction to promise;
Q: what is an object that is used to pass the news of the asynchronous operation, has three states: pending (the), resolved (completed) and rejected (failure)
With promise object, it can be asynchronous operations in synchronous operation process, avoid the layers of nested callbacks

29. Father and son vue components communication;
Q: the parent communication is through the props attribute to the child components components, emit in child components, in the parent component to monitor;

30. The problem of mobile terminal compatibility;
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull
  • Related