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

The basic knowledge topics that the front end must know.

1. What kinds of browser tests are commonly used? What kernels are there (Layout Engine)?

(Q1) browser: IE,Chrome,FireFox,Safari,Opera.

(Q2) kernel: Trident,Gecko,Presto,Webkit.

two。 What is the difference between down-line elements and block-level elements? Compatibility of inline block elements? (below IE8)

(Q1) inline elements: they will be arranged horizontally and cannot contain block-level elements. Setting width is invalid, height is invalid (line-height can be set), margin is invalid, padding is invalid.

Block-level elements: each occupy a row, arranged vertically. Start and end with a new line, followed by a line break.

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

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

(Q1)

(1) the parent div defines height.

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

(3) the parent div defines pseudo classes: after and zoom.

(4) the parent div defines overflow:hidden.

(5) the parent div defines overflow:auto.

(6) the parent div is also floating, so the width needs to be defined.

(7) the parent div defines display:table.

(8) add the br tag clear:both at the end.

(Q2) the better way is the third way, which is used by many websites.

4. What are the common attributes of box-sizing? What is the effect of the difference?

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

(Q2) content-box: width and height are applied to the content box of the element, respectively. Draw the inner margins and borders of the element beyond the width and height (the element default effect).

Border-box: any inner margins and borders specified by the element will be drawn within the set width and height. The width and height of the content can be obtained by subtracting the border and inner margin from the set width and height, respectively.

5. The function of Doctype? What is the difference between standard mode and compatibility mode?

(Q1) tell the browser's parser what document standard to use to parse the document. DOCTYPE does not exist or is not properly formatted, causing the document to be rendered in compatibility mode.

(Q2) both the standard mode of typesetting and the JS mode of operation run at the highest standards supported by the browser. In compatibility mode, the page is displayed in a loose, backward-compatible manner, simulating the behavior of older browsers to prevent the site from working.

6. Why does HTML5 only need to write?

HTML5 is not based on SGML, so you don't need to reference DTD, but you need doctype to regulate the behavior of browsers (let browsers run the way they should).

HTML4.01 is based on SGML, so you need to reference DTD to tell the browser what type of document the document is using.

7. What's the difference between using link and @ import when importing styles into a page?

(1) link belongs to the XHTML tag, which can also be used to define RSS and rel connection attributes in addition to loading CSS. @ import is provided by CSS and can only be used to load CSS.

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

(3) import is proposed by CSS2.1 and can only be identified above IE5, while link is a XHTML tag and has no compatibility problem.

8. Tell me about your understanding of the browser kernel?

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

Rendering engine: responsible for getting the content of the web page (HTML, XML, images, etc.), we form a big cow skirt in front of 471, organize messages (such as joining CSS, etc.), the middle is 027, and calculate the display of the web page, followed by a Wu 4, learning is added, not learning do not disturb. It is then output to the monitor or printer. Different browsers have different grammatical interpretations of web pages, so the rendering effect is also different. All web browsers, e-mail clients, and other applications that need to edit and display web content need a kernel.

JS engine: parse and execute javascript to achieve the dynamic effect of the web page.

At first, there was no clear distinction between the rendering engine and the JS engine, but then the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

9. What are the new features of html5? How to deal with the browser compatibility of new HTML5 tags? How to distinguish between HTML and HTML5?

(Q1)

HTML5 is no longer a subset of SGML, mainly about the increase of image, location, storage, multitasking and other functions.

(1) drawing canvas

(2) video and audio elements for media playback

(3) Local offline storage localStorage long-term storage data. The data will not be lost when the browser is closed.

(4) the data of sessionStorage is automatically deleted after the browser is closed

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

(6) form controls, calendar, date, time, email, url, search

(7) New technologies webworker, websocket, Geolocation

(Q2)

IE8/IE7/IE6 supports tags generated by the document.createElement method

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

After the browser supports the new tag, you also need to add the default style of the tag.

Of course, you can also directly use mature frameworks, such as html5shim

10. Briefly describe your understanding of the semantics of HTML?

Do the right thing with the right label.

The semantics of html makes the content of the page structured, the structure clearer, and makes it easy to parse browsers and search engines.

It is displayed in a document format even without a style CSS and is easy to read

Search engine crawlers also rely on HTML tags to determine the weight of context and keywords, which is good for SEO.

Make it easier for people who read the source code to block the site, making it easy to read and maintain and understand.

JavaScript

-

1. Introduce the basic data types of js

Undefined 、 Null 、 Boolean 、 Number 、 String

2. What are the built-in objects in js?

Data wrapper class objects: Object, Array, Boolean, Number, and String

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

3. Understanding of this objects

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

If there is a new keyword, this points to the object that comes out of new

In an event, this points to the object that triggered the event, and in particular, the this in the attachEvent in IE always points to the global object Window.

4. What does eval do?

Its function is to parse the corresponding string into JS code and run it.

You should avoid using eval, which is unsafe and performance-intensive (twice, once parsed into js statements, and once executed).

When converting a JSON string to a JSON object, you can use eval,var obj = eval ('('+ str +')').

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

/ / create a new node

CreateDocumentFragment () / / create a DOM fragment

CreateElement () / / create a concrete element

CreateTextNode () / / create a text node

/ / add, remove, replace, insert

AppendChild ()

RemoveChild ()

ReplaceChild ()

InsertBefore () / / insert a new child node in front of an existing child node

/ / find

GetElementsByTagName () / / by tag name

GetElementsByName () / / pass the value of the Name attribute of the element (IE is more fault tolerant and will get an array, including those with id equal to name)

GetElementById () / / through element Id, uniqueness

6. What's the difference between null and undefined?

Null is an object that represents "none" and 0 when converted to a numeric value. Undefined is a primitive value that represents "none" and NaN when converted to a numeric value.

Undefined:

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

(2) when calling the function, the parameter that should be provided is not provided, which is equal to undefined.

(3) the object has no property assigned to it, and the value of this property is undefined.

(4) when the function does not return a value, it returns undefined by default.

Null:

(1) as a parameter of a function, it indicates that the parameter of the function is not an object.

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

7. What exactly does the new operator do?

(1) create an empty object, which is referenced by the this variable, and inherit 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 implicitly returns this.

8. The understanding of JSON?

JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of JavaScript. The data format is simple, easy to read and write, and occupies a small bandwidth.

Format: key-value pairs, for example: {'age':'12',' name':'back'}

9. What is the difference and function between call () and apply ()?

The apply () function takes two parameters: the first is the context, and the second is an array of parameters. If the context is null, the global object is used instead.

For example, function.apply (this, [1J 2je 3])

The first argument to call () is the context, followed by the sequence of parameters passed in by the instance.

Such as: function.call (this,1,2,3)

10. How do I get UA?

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 does the HTTP status code know?

100 Continue continues. Generally, when sending a post request, the server will return this information to indicate confirmation after the http header has been sent, and then send specific parameter information.

200 OK normal return message

201 Created request succeeded and the server created a new resource

202The Accepted server has accepted the request but has not yet processed it

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

302 Found temporary redirection.

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

Not Modified the requested web page has not been modified since the last request.

The 400 Bad Request server cannot understand the format of the request, and the client should not try to initiate the request with the same content again.

401 Unauthorized request is not authorized.

403 Forbidden access is prohibited.

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

The most common server-side error of 500 Internal Server Error.

The Service Unavailable server is temporarily unable to process requests (possibly due to overload or maintenance).

two。 What performance optimization methods do you have?

(1) reduce the number of http requests: CSS Sprites, JS, CSS source code compression, image size control is appropriate; web Gzip,CDN hosting, data cache, picture server.

(2) JS+ data of the front-end template to reduce the bandwidth waste caused by HTML tags. The front-end uses variables to save the results of AJAX requests. Each time the local variables are operated without requests, the number of requests is reduced.

(3) innerHTML is used instead of DOM operation to reduce the number of DOM operations and optimize javascript performance.

(4) when there are a lot of styles to be set, set className instead of directly manipulating style.

(5) use less global variables and cache the results of DOM node search. Reduce IO read operations.

(6) avoid using CSS Expression (css expression), also known as Dynamic properties (dynamic attribute).

(7) preload the picture, put the stylesheet at the top and the script at the bottom with a timestamp.

3. What is elegant degradation and gradual enhancement?

Elegant downgrade: Web sites work in all newer browsers, and if users are using older browsers, the code checks to see if they work. Due to the unique box model layout problem of IE, the hack practice for different versions of IE has been gracefully degraded, adding candidates for browsers that do not support features, so that the experience of some form of degradation on older browsers will not fail completely.

Progressive enhancement: start with the basic features supported by all browsers, gradually add features that are supported only by newer browsers, and add additional styles and features that are harmless to the underlying browser. When browsers support them, they are automatically rendered and functioning.

4. What common actions can cause memory leaks?

A memory leak means that any object still exists after you no longer own it or need it.

The garbage collector periodically scans objects and calculates the number of other objects that reference each object. If the number of references to an object is 0 (no other object has ever referenced the object), or if the only reference to the object is circular, the memory of the object can be reclaimed.

If the first parameter of setTimeout uses a string instead of a function, it can cause a memory leak.

Closures, console logs, loops (a loop occurs when two objects refer to each other and retain each other).

5. The difference between threads and processes

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

The division scale of threads is smaller than that of processes, which makes multithreaded programs have high concurrency.

In addition, the process has an independent memory unit during execution, and multiple threads share memory, which greatly improves the running efficiency of the program.

There is a difference between a thread and a process during execution. Each independent thread has an entrance to the program, a sequential execution sequence, and an exit to the program. However, threads cannot execute independently and must be stored in the application, which provides multiple thread execution control.

From a logical point of view, the significance of multithreading is that there are multiple execution parts in an application that can be executed at the same time. However, the operating system does not regard multiple threads as multiple independent applications to achieve process scheduling and management and resource allocation. This is the important difference between processes and threads.

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.