Shulou(Shulou.com)06/02 Report--

This article mainly introduces the web front-end development interview questions, the article is very detailed, has a certain reference value, interested friends must read it!

1. What is a box model?

In a web page, the amount of space occupied by an element consists of several parts, including the content of the element (content), the inner margin of the element (padding), the border of the element (border), and the outer margin of the element (margin). In the space occupied by these four parts, some parts can display the corresponding content, while some parts are only used to separate adjacent areas or areas. Together, the four parts constitute the box model of the elements in css.

two。 What are the elements in the line? What are the block-level elements? What are the void elements?

Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea

Block-level elements: div, ul, li, dl, dt, dd, p, h2-h7, blockquote

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

3. Explain how to use css sprites?

CSS Sprites actually integrates some background pictures in the web page into a picture file, and then uses the combination of "background-image", "background- repeat" and "background-position" of CSS to locate the background. Background-position can use numbers to accurately locate the location of the background picture.

CSS Sprites saves bandwidth for some large websites and improves the loading speed and user experience of users without the need to load more pictures.

4. How do I bind two onclick events to a button using native js?

/ / event listener binds multiple events

Var btn = document.getElementById ("btn"); btn.addEventListener ("click", hello1); btn.addEventListener ("click", hello2); function hello1 () {alert ("hello1");} function hello2 () {alert ("hello2");}

5. What events will be used by dragging?

Dragstart: this event is triggered on the dragged element at the beginning of the drag. The listener needs to set the data needed for drag and drop. This event is not triggered when dragging files from the operating system to the browser.

Dragenter: triggered on an element when the mouse is dragged into the element, used to set visual feedback for dragged and dropped elements, such as highlighting

Dragover: triggered when the mouse moves over the target element when dragging. The listener sets the element to a draggable element by blocking the browser's default behavior.

Dragleave: triggers on the target element when the mouse moves out of the target element when dragging. At this point, the listener can cancel the previously set visual effects.

Drag: triggers continuously on the dragged element during dragging

Drop: when the mouse is released over a drag-and-drop target, it is triggered on a drag-and-drop target. At this point, the listener needs to collect data and perform the required operations. If you are dragging and dropping files from the operating system to the browser, you need to cancel the browser default behavior.

Dragend: triggers on a drag element when the mouse is released over a drag-and-drop target. This event is not triggered when you drag and drop an element from the browser to the operating system.

6. Please list the selectors in jquery:

# id,.class,element,:first,:even,:eq (index),: contains (text)

Links: jQuery selector

7. Briefly describe the difference between src and href

A href is a link that points to the location of a network resource and establishes a link to the current element (anchor) or current document (link) for hyperlinks.

Src is the location that points to external resources, and the content pointed to will be embedded in the current tag location in the document; when a src resource is requested, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frame and other elements. When the browser parses to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as pictures and frames, similar to embedding the pointed resource in the current tag. This is why the js script is placed at the bottom instead of the header.

What are the timers in 8.Javascript? What is the difference and usage between them?

SetTimeout only executes once

SetInterval will repeat it all the time.

9. Please describe the difference between cookies sessionStorage and localstorage

(1) similarities: all are stored in the client

Differences: 1. Storage size

The size of cookie data cannot exceed 4k.

SessionStorage and localStorage also have storage size limits, but they are much larger than cookie, which can reach 5m or more.

(2) effective time

LocalStorage stores persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted.

SessionStorage data is automatically deleted after the current browser window closes.

The cookie expiration time set by cookie is valid until the window or browser is closed

(3) the interaction between the data and the server

The data of cookie is automatically passed to the server, and the server can also write cookie to the client.

SessionStorage and localStorage do not automatically send data to the server, but only save it locally.

10. Write a method to remove duplicates from the array?

Var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d']; / / define a new array var s = []; / / traverse the array for (var I = 0 (responsible for receiving user input)-> Controller (business logic processing)-> Model (data persistence)-> View (feedback the results to View). MVC is widely used, such as the SSH framework in JavaEE.

(2) MVVM (Model-View-ViewModel)

If MVP is a further improvement of MVC, then MVVM is a complete change of thinking. It takes the idea of "two-way binding of data model data" as the core, so there is no connection between View and Model, and the interaction between Model and ViewModel is bi-directional, so the change of the view data will modify the data source at the same time, and the change of the data source data will immediately reflect the view. WeChat Mini Programs uses mvvm at the front end.

The difference between 20.px and em

Px stands for pixels (a point on the computer screen: 1px = 1/96in). It is an absolute unit and does not change due to the size of other elements.

Em represents the font size relative to the parent element. Em is a relative unit, not a fixed measure, but a relative value determined by the size of other elements.

21. Elegant degradation and gradual enhancement

Progressive enhancement (Progressive Enhancement): build pages for low-version browsers from the beginning, complete basic functions, and then achieve a better experience with effects, interaction, and additional functions for advanced browsers.

Elegant downgrade (Graceful Degradation): build the full functionality of the site from the start, and then test and fix it for browsers. For example, it starts with building an application using the features of CSS3, and then gradually hack each major browser so that it can browse normally on a lower version of the browser.

In fact, gradual enhancement and elegant degradation is not a new concept, but the old concept has a new meaning. In traditional software development, the concepts of upward compatibility and downward compatibility are often mentioned. Progressive enhancement is equivalent to upward compatibility, while elegant degradation is equivalent to downward compatibility.

Which operations of 22.JS will cause memory leak?

(1) memory leak caused by unexpected global variables.

Function leak () {

Leak= "xxx"; / / leak becomes a global variable and will not be recycled

}

(2) memory leak caused by closure.

(3) DOM element references that are not cleaned up.

(4) forgotten timer or callback 5) memory leak caused by the presence of child elements.

23. What is a closure, how to use it, and why?

A closure is a function that can read internal variables of other functions. Because in the Javascript language, only the subfunctions inside the function can read local variables, the closure can be simply understood as "a function defined inside a function".

So, in essence, a closure is a bridge that connects the inside of a function to the outside of a function. Closures can be used in many places. It has two greatest uses, one is to read variables within the function mentioned earlier, and the other is to keep the values of these variables in memory all the time.

Note the use of closures:

Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so the closure should not be abused, otherwise it will cause performance problems of web pages and may lead to memory leakage in IE. The solution is to delete all unused local variables before exiting the function.

The closure changes the value of the internal variable of the parent function outside the parent function. So, if you use the parent function as an object (object), the closure as its common method (Public Method), and the internal variable as its private property (private value), you must be careful not to change the value of the internal variable of the parent function.

24. Please explain the homologous policy of JavaScript.

In client programming languages, such as javascript and ActionScript, homology policy is a very important security concept, which is of great significance in ensuring the security of data. The homology policy stipulates that scripts across domains are isolated, and scripts in one domain cannot access and manipulate most of the properties and methods of another domain. So what is the same domain and what is the different domain? When two domains have the same protocol, the same port, and the same host, then we can think of them as the same domain. The same origin policy should also deal with some special cases, such as restricting access to scripts under the file protocol. The local HTML file is opened in the browser through the file protocol. If the script can access any other files on the hard disk through the file protocol, there will be security risks. At present, there are such hidden dangers in IE8.

25. How do I add, remove, move, copy, create, and find nodes?

(1) create a new node

CreateDocumentFragment () / / create a DOM fragment

CreateElement () / / create a concrete element

CreateTextNode () / / create a text node

(2) add, remove, replace, insert

AppendChild () / / add

RemoveChild () / / remove

ReplaceChild () / / replace

InsertBefore () / / insert

(3) find

GetElementsByTagName () / / by tag name

GetElementsByName () / / pass the value of the Name attribute of the element

GetElementById () / / through element Id, uniqueness

twenty-six。 How does the browser render the page?

The process of rendering is as follows:

1. Parse the HTML file and create the DOM tree.

From top to bottom, any styles encountered (link, style) and scripts (script) block (external styles do not block the loading of subsequent external scripts).

two。 Parse CSS. Priority: browser default settin

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.