Front-end interview questions, interview questions

Front-end interview questions, interview questions

 

1.what is the difference between XHTML and html?

HTML is a basic WEB page design language. XHTML is an XML-based markup language.

Major differences:

XHTML elements must be correctly nested.

The XHTML element must be disabled.

The tag name must contain lowercase letters.

XHTML documents must have root elements

2. Briefly describe the differences between src and href:

Href is a link between the current element (Anchor) or current document (Link) that points to the location of the network resource. It is used for hyperlinks.

Src is the location pointing to external resources. The content to which src is directed is embedded in the current tag location in the document. When a src resource is requested, the resource to which src is directed is downloaded and applied to the document, for example, js scripts, img images, frames, and other elements. When the browser parses this element, the download and processing of other resources will be suspended until the resources are loaded, compiled, and executed, as will the images and frameworks, it is similar to embedding the resource to the current tag. This is why JavaScript scripts are placed at the bottom rather than the header.

3. What are the elements in the row? What are the block-level elements? What are the null (void) elements?

Line Elements: a, B, span, img, input, strong, select, label, em, button, textarea

Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote

Empty element: HTML elements without content, such as: br, meta, hr, link, input, img

4. What are the meanings of the action and method attributes in form? What are common values of method?

The action attribute is used to specify the background program address for form submission, and the method attribute is used to specify the method for form submission.

Common methods include get and post.

5. What are the new attributes of form elements?

Required: required

Placeholder: a message is displayed. clicking the input content will disappear.

Pattern: Regular Expression Validation

Antofocus: automatically obtains the focus

Aotucomplete: Automatic completion

6. How can I submit data to a specified server?

Ajax Form

URL? Parameters

$ HTTP of AngularJS

JQ Ajax: $. POST (,) $. GET (,) $. Ajax ({})

JS Ajax: Step 5. (Refer to the 25 questions)

7. Write a function to clear spaces before and after the string. (Compatible with all browsers)

Function trim (str ){

If (str & typeof str = "string "){

Return str. replace (/(^ \ s *) | (\ s *) $/g, ""); // remove the leading and trailing Spaces

}

}

8. How can I eliminate repeated elements in an array?

Var arr1 = [1, 2, 2, 3, 3, 3, 4, 5, 6],

Var arr2 = [];

For (var I = 0; I <arr1.length; I ++ ){

If (arr2.indexOf (arr1 [I]) <0 ){

Arr2.push (arr1 [I]);

}

}

Document. write (arr2); // 1, 2, 3, 4, 5, 6

9. Describe the differences between cookies, sessionStorage and localStorage.

SessionStorage is used to locally store data in a session. The data can be accessed only on pages in the same session. When the session ends, the data is also destroyed. SessionStorage is not a persistent local storage, but a session-level storage. LocalStorage is used for persistent local storage. Unless data is actively deleted, the data will never expire.

Differences between web storage and cookie

The concept of Web Storage is similar to that of cookie. The difference is that it is designed for larger Storage capacity. The Cookie size is limited, and the Cookie will be sent every time you request a new page. This will result in a waste of bandwidth. In addition, the cookie also needs to specify the scope, cross-origin calls are not allowed.

In addition, Web Storage has methods such as setItem, getItem, removeItem, and clear. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie by themselves. However, cookies are indispensable: cookies interact with servers and exist as part of HTTP specifications. Web Storage is only used to "Store" data locally.

10. What is the difference between cookie and session?

The Cookie is saved on the client;

The Session is stored on the server;

Contact: The session id is in cookie.

11. What is the difference between using link and @ import for page import styles?

1). link belongs to the XHTML label, while @ import is provided by CSS;

2) When the page is loaded, link colleagues will be loaded, and the CSS referenced by @ import will be loaded after the page is loaded;

3). import can only be identified in IE5 and later versions, while link is an XHTML tag and there is no compatibility problem;

4). link style weight> @ import weight

12. Positioning Position in a brief description:

Relative: Relative positioning. The original DOM space is retained relative to its original location;

Absolute: Absolute positioning. Positioning Relative to the first non-static positioning ancestor element will delete the original DOM space;

Fixed: Fixed the locator window to locate; will delete the DOM Space

Static: default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right z-index Declaration ).

Inherit: specifies that the value of the position attribute is inherited from the parent element.

13. What values does display have? Describe their role.

Blocks are displayed as block elements.

Default Value of none. Display as the element type in the row.

The inline-block is displayed as a row element, but its content is displayed as a block element.

List-item is displayed as a block type element and a style list flag is added.

Table: This element is displayed as a block-level table.

Inherit specifies that the value of the display attribute should be inherited from the parent element.

14. In jquery, how do I convert an array into a json string and then convert it back?

$. ParseJSON

$. Fn. stringify = function (){

Return JSON. stringify (this );

}

Use: $ (array). stringify ();

15. What about JSON?

JSON (JavaScript Object Notation) is a lightweight data exchange format.

It is a subset based on JavaScript. The data format is simple, easy to read/write, and the bandwidth usage is small.

For example: {"age": "12", "name": "back "}

Convert a JSON string to a JSON object:

Var obj = eval ('+ str + ')');

Var obj = str. parseJSON ();

Var obj = JSON. parse (str );

Convert a JSON object to a JSON string:

Var last = obj. toJSONString ();

Var last = JSON. stringify (obj );

16. What is responsive design? What is the basic principle of responsive design?

Based on the screen size, resolution, and direction of different devices, the website is displayed as different results.

Move first. You can use JS to jump to different mobile stations and PCs. You can use MediaQuery to check the properties of different devices and display different CSS. You can use various responsive front-end frameworks.

Advantage: good user experience, especially on mobile phones.

Disadvantage: it contains a large amount of redundant code, causing high development costs (but far lower than the development mode of mobile phone station + PC station)

17. What is the difference between visibility: hidden and display: none?

After hidden using display: none, the space of the elements is released, and other elements can occupy space;

Visibility: The hidden element is invisible, but the space of the element remains occupied, and other elements cannot be used.

18. List common methods related to Arrays

Push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19Common Methods for listing strings

IndexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

20,What are common browser kernels?

Trident kernel: IE, MaxThon, TT, The World, 360, sogou browser, etc. [MSHTML]

Gecko kernel: Netscape6 and later versions, FireFox (FireFox), MozillaSuite/SeaMonkey, etc.

Presto kernel: Opera7 and later. [Original Opera kernel: Presto, now: Blink;]

Webkit kernel: Safari (Apple's browser), Chrome (Google), etc. [Chrome: Blink (WebKit Branch)]

21.What are the differences between title and h1, B and strong, and I and em?

The title attribute does not have a clear meaning. It only indicates a title, and H1 indicates a title with a clear hierarchy, which also has a great impact on page information capturing;

Strong indicates the key content with enhanced tone. when reading the network using a reading device, <strong> reread the content, while <B> indicates the emphasized content.

I. The content is displayed in italic, and em indicates the emphasized text;

22,What is the Web verification code for? It is to solve any security problems.

A fully automated public program that distinguishes a user from a computer or a person. Prevents malicious password cracking, ticket refreshing, and Forum bumping;

This effectively prevents hackers from constantly trying to log on to a specific registered user using brute force cracking of specific programs.

23. How do you understand the front-end engineer position?

A. the front-end is the programmer closest to the user. The front-end capability is to make the product evolve from 90 to 100, or even better.

B. participate in the project, quickly complete the implementation with high quality, accurate to 1px;

C. Communicate with team members, uidesign, and product managers;

D. Complete Page Structure, page reconstruction, and user experience;

E. Handle hack and be compatible with and write beautiful code formats;

F. Optimize servers and embrace the latest front-end technologies.

24. What is closure? Why should I use it?

A closure is a function that has the right to access the variables in another function scope. The most common way to create a closure is to create another function in one function and access the local variables of the function through another function, using closures, you can break through the function chain and pass the internal variables and methods of the function to the outside. The closure can be simply understood as "a function defined in a function"

Closure features:

1. nested functions in the function

2. Internal functions can reference outer parameters and variables.

3. Parameters and variables are not recycled by the garbage collection mechanism.

// The onclick event of the li node correctly pops up the currently clicked li Index

<Ul id = "test">

<Li> index = 0 </li>

<Li> index = 1 </li>

<Li> index = 2 </li>

<Li> index = 3 </li>

</Ul>

<Script type = "text/javascript">

Var nodes = document. getElementsByTagName ("li ");

For (I = 0; I <nodes. length; I + = 1 ){

Nodes [I]. onclick = function (){

Console. log (I + 1); // if no closure is required, the value is 4 each time.

} (I );

}

</Script>

25. What Is Ajax? How to create an Ajax?

Ajax is called Asynchronous javascript and XML, that is, Asynchronous JavaScript and xml, also known as the page refreshing technology. The asynchronous method can be simply understood as: when sending a request to the server, we do not have to wait for the result, but can do other things at the same time, when the result is returned, it will perform subsequent operations according to the settings. At the same time, the page will not be refreshed on the whole page, improving the user experience.

How to create an Ajax?

(1) Create an XMLHttpRequest object, that is, create an asynchronous call object.

(2) create a new HTTP request and specify the method, URL, and authentication information of the HTTP request.

(3) set the function to respond to HTTP Request status changes

(4) Send an HTTP request

(5) obtain the data returned by an asynchronous call

(6) use JavaScript and DOM for partial refresh

26. What is the difference between window. onload of native JS and $ (document). ready (function () {}) of Jquery? How to use native JS to implement the Jq ready method?

The window. onload () method is executed only after all elements including images in the page are loaded.

$ (Document). ready () is executed after the DOM structure is drawn. You do not have to wait until the loading is complete.

27. (design question) want to drag a node on the page? How to do it? (Use native JS)

Just answer the concept. The following are some key points:

Bind the mousedown, mousemove, and mouseup events to the nodes to be dragged.

After the mousedown event is triggered, start dragging

During mousemove, you must use event. clientX and clientY to obtain the drag position and update the position in real time.

During mouseup, the drag ends.

28What are the differences between apply, call, and bind?

All three can apply a function to other objects. Note that the call is directly executed instead of its own object. The bind is bound, and the execution needs to be called again.

The difference between apply and call is that apply accepts arrays as parameters, while call accepts an unlimited list of multiple parameters separated by commas,

Code demo

Function Person (){

}

Person. prototype. sayName () {alert (this. name );}

Var obj = {name: 'michaelqin'}; // note that this is a common object and it is not an instance of Person.

1) apply

Person. prototype. sayName. apply (obj, [param1, param2, param3]);

2) call

Person. prototype. sayName. call (obj, param1, param2, param3 );

3) bind

Var sn = Person. prototype. sayName. bind (obj );

Sn ([param1, param2, param3]); // bind needs to be bound before executing

Sn (param1, param2, param3); // bind needs to be bound before executing

29. What are the disadvantages of iframe?

* Iframe blocks the Onload event on the home page;

* Search engines cannot interpret such pages, which is not conducive to SEO;

* The iframe and the Home Page share the connection pool, and the browser has limits on the connections to the same domain, which affects parallel page loading.

Before using iframe, consider these two shortcomings. If you need to use iframe, it is best to use javascript

Dynamically Add the src attribute value to the iframe so that the above two problems can be bypassed.

30. How can I solve cross-origin ajax problems?

Jsonp, iframe, window. name, window. postMessage, set proxy page on the server

Your own practices:

Use of ajax in jQuery

$. Ajax ({

DataType: 'jsonp'

})