Questions and answers to web front-end faces

1. What kinds of browser tests are used? What are the kernel (Layout Engine)?

For:

(Q1) Browser: Ie,chrome,firefox,safari,opera.

(Q2) Kernel: Trident,gecko,presto,webkit.

2. What is the difference between the elements in the line and the block-level elements? is the compatibility of inline block elements used? (below IE8)

For:

(Q1) Inline elements: will be in the horizontal direction, can not contain block-level elements, set width is invalid, the height is invalid (can be set line-height), margin is invalid, padding up and down invalid.

Block-level elements: each occupy one row, arranged in a vertical direction. Start at the beginning of the new line and then a break.

(Q2) Compatibility: display:inline-block;*display:inline;*zoom:1;

　　

3. What are the ways to clear the float? Which is the better way?

For:

(Q1)

(1) Parent div defines height.

(2) Add empty div tag clear:both at the end.

(3) Parent Div defines pseudo-classes: after and zoom.

(4) Parent div definition Overflow:hidden.

(5) Parent div definition Overflow:auto.

(6) The parent Div also floats and needs to define the width.

(7) Parent div definition display:table.

(8) Add BR tag Clear:both at the end.

(Q2) The better is the 3rd way, a lot of sites are so used.

　　

4. What are the commonly used attributes of box-sizing? What are the roles of each?

For:

(Q1) Box-sizing:content-box|border-box|inherit;

(Q2) Content-box: The width and height are applied to the element's content box, respectively. Draws the inner margin and border of an element outside the width and height (the element default effect).

Border-box: Any padding and borders specified by the element are drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and padding from the set width and height.

5. doctype role? What is the difference between standard mode and compatibility mode ?

For:

(Q1) tells the browser parser to parse this document with what documentation standards. DOCTYPE does not exist or is incorrectly formatted to cause the document to render in compatibility mode.

(Q2) Standard mode of typesetting and JS operation mode are all supported by the browser to the highest standards of operation. In compatibility mode, pages are displayed in a relaxed, backwards-compatible fashion, simulating the behavior of older browsers to prevent sites from working.

6. why HTML5 only need to write <! DOCTYPE html>?

For:

HTML5 is not SGML-based and therefore does not require references to DTDs, but requires DOCTYPE to regulate the behavior of the browser (let the browser run the way they should).

HTML4.01 is based on SGML, so a reference to the DTD is required to tell the document type used by the browser document.

7, when the page import style, use Link and What's the difference between @import?

For:

(1) Link is XHTML tag, in addition to loading CSS, can also be used to define RSS, define the Rel connection properties, and @import is provided by CSS, can only be used to load CSS;

(2) When the page is loaded, link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded and then loaded;

(3) Import is CSS2.1 proposed, only in IE5 above to be recognized, and link is XHTML label, no compatibility problem.

　

8, introduce your understanding of the browser kernel?

For:

It is divided into two main parts: the rendering engine (layout engineer or rendering engine) and the JS engine.

Rendering Engine: Responsible for obtaining the content of the Web page (HTML, XML, images, etc.), organizing the message (such as adding CSS, etc.), and calculating how the Web page is displayed, and then outputting it to the monitor or printer. The browser's kernel is different from the syntax of the Web page, so the effect of rendering is not the same. The kernel is required for all Web browsers, e-mail clients, and other applications that need to edit and display Web content.

JS Engine: Parsing and executing JavaScript to achieve the dynamic effect of Web pages.

The first rendering engine and the JS engine are not clearly distinguished, and then the JS engine becomes more independent, the kernel tends to refer only to the rendering engine.

　　

9. What are the new features of HTML5? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5? 　　

For:

(Q1)

HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.

(1) Painting canvas;

(2) video and audio elements for media playback;

(3) Local offline storage localstorage long-term storage data, the browser is closed after the data is not lost;

(4) Sessionstorage data is automatically deleted after the browser is closed;

(5) Semantically better content elements, such as article, footer, header, nav, section;

(6) Forms control, calendar, date, time, email, url, search;

(7) New technical Webworker, WebSocket, geolocation;

(Q2)

IE8/IE7/IE6 supports labels generated by the Document.createelement method,

You can use this feature to enable these browsers to support HTML5 new tags,

After the browser supports the new tab, you also need to add a default style for the label.

Of course, you can also use mature frameworks, such as Html5shim,

　　

10, briefly describe your an understanding of HTML semantics? 　　

For:

Do the right thing with the right label.

HTML semantics to make the content of the page structured, clearer structure, easy to browser, search engine analysis;

It is displayed in a document format even in the absence of CSS, and is easy to read;

Search engine crawler also relies on the HTML tag to determine the context and the weight of each keyword, in favor of SEO;

Make it easier for people who read the source code to block the site and maintain understanding of the site.

　　

JavaScript Part

1. Introduction basic data type of JS　　

Answer: Undefined, Null, Boolean, number, String

　　

2. What are the built-in objects for JS? 　

A: Data encapsulation Class objects: Object, Array, Boolean, number, and String

Other objects: Function, Arguments, Math, Date, REGEXP, Error

　　

3. understanding of this object　

Answer: This always points to the direct caller of the function (not the indirect caller);

If there is a new keyword, this points to the new object;

In the event, this points to the object that triggered the event, and, specifically, the this in the attachevent in IE always points to the Global object window.

　　

4. What does eval do? 　

A: Its function is to parse the corresponding string into JS code and run;

You should avoid using eval, unsafe, very performance-consuming (2 times, parsing into JS statements at a time, executing once).

A JSON string can be converted to a JSON object using Eval,var obj =eval (' (' + str + ') ').

　　

5. How Dom adds, removes, moves, copies, creates, and finds nodes

For:

Create a new node

Createdocumentfragment ()//Create a DOM fragment

CreateElement ()//create a specific element

createTextNode ()//Create a text node

Add, remove, replace, insert

AppendChild ()

RemoveChild ()

ReplaceChild ()

InsertBefore ()//Insert a new child node before the existing child node

Find

getElementsByTagName ()//by tag name

Getelementsbyname ()//through the value of the element's Name property (ie is more tolerant of fault tolerance, it will get an array that includes the ID equals the name value)

getElementById ()//through element ID, uniqueness

　　

6. null and the difference between undefined?

For:

Null is an object that represents "none", and a value of 0;undefined is a primitive value that represents "none", and a value of Nan when converted to a number.

Undefined

(1) The variable is declared, but when it is not assigned, it is equal to undefined.

(2) when calling a function, the argument that should be supplied is not provided, which equals undefined.

(3) The object does not have an assigned property, and the value of this property is undefined.

(4) When the function does not return a value, undefined is returned by default.

Null:

(1) As a function parameter, the parameter of the function is not an object.

(2) As the end point of the object prototype chain.

7. What exactly did the new operator do? ?

For:

(1) An empty object is created, and the this variable references the object and also inherits the prototype of the function.

(2) The 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.

8. What is JSON?

For:

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 small bandwidth.

Format: Use key-value pairs, for example: {' age ': ' + ', ' name ': ' Back '}

9. Call () and What are the differences and effects of apply ()?

For:

The Apply () function has two parameters: the first argument is the context, and the second parameter is an array of arguments. If the context is null, the global object is used instead.

such as: Function.apply (this,[1,2,3]);

The first parameter of call () is the context, followed by the sequence of arguments passed in by the instance.

such as: Function.call (this,1,2,3);

　　

10. How to obtain UA?

For:

function Whatbrowser () {

Document. Browser.name.value=navigator.appname;

Document. Browser.version.value=navigator.appversion;

Document. Browser.code.value=navigator.appcodename;

Document. Browser.agent.value=navigator.useragent;

}

Other

　　

1. What do HTTP status codes know?

For:

Continue continue, generally when the post request is sent, the HTTP header is sent after the server will return this information, indicating confirmation, and then send the specific parameter information

OK normal return information

201 Created Request succeeds and the server creates a new resource

202 Accepted Server has accepted the request but has not processed

301 Moved Permanently The requested page has been permanently moved to a new location.

302 Found Temporary redirection.

303 See other temporary redirection, and always use GET to request a new URI.

304 not Modified The requested Web page has not been modified since the last request.

The request server cannot understand the requested format, and the client should not attempt to initiate the request again using the same content.

401 Unauthorized request is not authorized.

403 Forbidden prohibit access.

404 Not Found Could not find a resource to match the URI.

The most common server-side error for the Internal server error.

The 503 Service unavailable server side is temporarily unable to process requests (possibly overloading or maintenance).

2. What are your performance optimization methods?

For:

(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.

　　

3. What is graceful downgrade and progressive enhancement?

For:

Graceful downgrade: The Web site works in all modern browsers, and if the user is using an older browser, the code checks to see if they work correctly. Because of the unique box model layout problem of IE, the hack practice of different versions of IE has been degraded gracefully, adding candidates for browsers that cannot support functionality, so that it can degrade the experience in some way on the old-fashioned browser without completely invalidating it.

Progressive enhancement: Add features that are only supported by modern browsers, starting with the basic features supported by all browsers, and adding extra styles and functionality to the page that are harmless to the underlying browser. When browsers support them, they are automatically rendered and functioning.

4. What common operations can cause memory leaks?

For:

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).

5. The difference between threads and processes

For:

A program has at least one process, and a process has at least one thread.

The thread's dividing scale is smaller than the process, which makes the multi-thread procedure high concurrency.

In addition, the process has a separate memory unit during execution, and multiple threads share memory, which greatly improves the efficiency of the program operation.

Threads are still different from the process during execution. Each separate thread has a program run entry, sequence of sequence execution, and exit of the program. However, threads cannot be executed independently, and must be dependent on the application, which provides multiple threads of execution control.

From a logical point of view, the meaning of multithreading is that in an application, multiple execution parts can be executed concurrently. However, the operating system does not consider multiple threads as separate applications to implement scheduling and management of processes and resource allocation. This is the important difference between processes and threads.

Questions and answers to web front-end faces