Front-end interview knowledge and interview knowledge

Front-end interview knowledge and interview knowledge

HTML Problems

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.
The XHTML document must have the root element.
2. What is semantic HTML?

Intuitive understanding of tags is good for search engines to capture and use the correct tags to do the right thing!
Html semantics is to make the page content structured to facilitate analysis of browsers and search engines;
It is displayed in a document format without style CCS and is easy to read. Search engine crawlers rely on tags to determine the weights of context and keywords, which is conducive to SEO.
It makes it easier for people who read the source code to block the website for easy reading, maintenance, and understanding.
3. What are common browser kernels?
Trident kernel: IE, MaxThon, TT, The World, 360, sogou browser, etc. [Also known as MSHTML] Gecko kernel: Netscape6 and later versions, FF, MozillaSuite/SeaMonkey, etc.
Presto kernel: Opera7 and later. [Opera kernel: Presto, now: Blink;] Webkit kernel: Safari, Chrome, etc. [Chrome: Blink (WebKit Branch)]
4. What are the new features of HTML5 and those elements removed? How can I solve the browser compatibility problem of HTML5 new labels? How to differentiate HTML and HTML5?

HTML5 is no longer a subset of SGML, mainly about the addition of functions such as image, location, storage, and multitasking.
Painting canvas
Video and audio elements used for media playback
Local offline storage localStorage stores data for a long time. data will not be lost after the browser is closed;
SessionStorage data is automatically deleted after the browser is closed
More semantic content elements, such as article, footer, header, nav, and section
Form Control, calendar, date, time, email, url, search
New technologies: webworker, websockt, Geolocation
Removed Element
Pure representation elements: basefont, big, center, font, s, strike, tt, u;
Elements that negatively affect availability: frame, frameset, noframes;
Supports HTML5 new labels:
IE8, IE7, and IE6 support tags generated using the document. createElement method,
This feature allows these browsers to support HTML5 new tags,
After the browser supports the new tag, you also need to add the default tag style:
5. What is the difference between cookie, sessionStorage and localStorage?

Cookies are passed back and forth between the browser and the server. SessionStorage and localStorage do not
SessionStorage and localStorage have a larger storage space;
SessionStorage and localStorage have more rich and easy-to-use interfaces;
SessionStorage and localStorage are independent buckets;
6. How to implement communication between multiple tabs in the browser?

Call local storage methods such as localstorge and cookies
7. Why does HTML5 only need to be written! Doctype html?

HTML5 is not based on SGML, so you do not need to reference DTD, but you need doctype to regulate browser behavior (let the browser run as they should). HTML4.01 is based on SGML, therefore, you must reference the DTD to inform the browser of the document type used.
8. What is the role of Doctype? What are the differences between standard and compatible modes?

! The DOCTYPE declaration is located in the first line of the HTML document, before the html Tag. Inform the browser about the standard document used by the parser to parse this document. If the DOCTYPE does not exist or the format is incorrect, the document is displayed in compatibility mode.
Standard-mode typographical and JS operating modes are all run according to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loose and backward compatible manner, simulating the behavior of older browsers to prevent sites from working.
9. Doctype? Strict mode and hybrid mode-how to trigger these two modes and distinguish between them?
Html/Xhtml is generally a framework-based html document.
The XMl declaration can be triggered, and the parsing method is changed to IE5.5 with IE5.5 Bug.

10. What is the difference between cookie, sessionStorage and localStorage?

Cookies are passed back and forth between the browser and the server. SessionStorage and localStorage do not
SessionStorage and localStorage have a larger storage space;
SessionStorage and localStorage have more rich and easy-to-use interfaces;
SessionStorage and localStorage are independent buckets;
11. How can we implement communication between multiple tabs in the browser?

Call local storage methods such as localstorge and cookies

CSS Problems

1. CSS achieves vertical and horizontal center

There are many implementation methods for a classic problem:
HTML structure:

<Div class = "wrapper">
<Div class = "content"> </div>
</Div>

CSS:

. Wrapper {position: relative ;}
. Content {
Background-color: # 6699FF;
Width: 200px;
Height: 200px;
Position: absolute; // relative positioning of the parent Element
Top: 50%;
Left: 50%;
Margin-top:-100px; // The height of 1/2, width
Margin-left:-100px;
}

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

Block type. The default width is the width of the parent element. You can set the width and height to display with line breaks.
Default Value of none. Display as the element type in the row.
The element type in the inline line. The default width is the content width. The width and height cannot be set.
The default width of inline-block is the content width. You can set the width and height to display them in the same row.
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.

3. What are the elements in the row? What are the block-level elements? CSS box model?
Block-level elements: div, p, h1, form, ul, li;
Row Element: span>, a, label, input, img, strong, em;
CSS box model: content, border, margin, padding

4. What methods does CSS introduce? What is the difference between link and @ import?
Inline external link Import
Difference: loading at the same time
The former is not compatible, and the latter is not supported by the following browsers: CSS2.1
Link supports using javascript to change the style. The latter cannot

5. What are CSS Selection Characters? What attributes can be inherited? How is the priority algorithm calculated? Which of the following is the highest priority for inner and important?
Tag selector class selector id Selector
It is better to specify the Id> class> label selection for inheritance.
The latter has a high priority.

6. Several Methods for clearing float by CSS (at least two)

Use an empty element with the clear attribute
Use the overflow attribute of CSS;
Use the: after pseudo element of CSS;
Use Adjacent Elements for processing;
7. CSS Center (including horizontal and vertical center)

Inline element center Scheme
Horizontal center settings:
1. Line Element

Set text-align: center;
2. Flex Layout

Set display: flex; justify-content: center; (flexible use, supports Chroime, Firefox, IE9 +)
Vertical center settings:
1. Single Line Text (Inline element) with a fixed parent element height)

Set height = line-height;
2. Multi-line text (Inline element) with the parent element height determined)

A: insert the table (the insertion method is the same as the horizontal center), and then set vertical-align: middle;
B: Set display: table-cell and vertical-align: middle;
Block-level element center Scheme
Horizontal center settings:
1. Fixed-width block elements
Set the left and right margin values to auto;

2. undefined block elements

A: Add a table label (complete, including table, tbody, tr, and td) to the element, write the element in td, and set the margin value to auto;
B: Set the displa: inine method for this element;
C: Set position: relative and left: 50% for the parent element, and set position: relative and left: 50% for the child element;
Vertical center settings:

Use position: absolute (fixed) to set the properties of left, top, margin-left, and margin-top;
With the position: fixed (absolute) attribute, do not forget margin: auto;
Use the display: table-cell attribute to vertically center the content;
Use the new property transform: translate (x, y) of css3;
Use: before element;
8. What problems should I consider when writing highly efficient CSS?
Reset. Refer to the answer to the above question "describes the role of the" reset "CSS file and the benefits of using it.
Standard name. Pay special attention to the class value assigned to html tags without semantics, such as div.
Extract reusable parts and pay attention to the "Priority" of the stacked style sheet ".

 

JS Problems

1. Talk about the JavaScript scope chain
When a JavaScript code (Global Code or function) is executed, the JavaScript engine creates a scope for it, also known as the Execution Context ), after the page is loaded, a global scope is created first, and each time a function is executed, a corresponding scope is created, forming a scope chain. Each scope has a corresponding scope chain. The chain header is a global scope, and the chain end is the current function scope.

The scope chain is used to parse identifiers. When a function is created (not executed ), this, arguments, named parameters, and all local variables in the function are added to the current scope. When JavaScript needs to find the variable X (this process is called variable parsing ), it first searches for whether there are X attributes at the end of the chain in the scope chain, that is, the current scope. If the attribute is not found, it proceeds with the scope chain until the chain header is found, that is, if the global scope chain does not find the variable, it is deemed that there is no x variable in the scope chain of the code and a ReferenceError is thrown.

 

2. How to understand the JavaScript prototype chain
Every object in JavaScript has a prototype attribute, which we call as a prototype. The prototype value is also an object, so it also has its own prototype, which concatenates a prototype chain, the prototype of the prototype chain is an object. Its prototype is special and its value is null.

Prototype property of function A is an object. When this function is used as A constructor to create an instance, the prototype attribute of this function will be assigned to all object instances as the prototype. For example, if we create an array, the array method will inherit from the prototype of the array.

When you access a property of an object, first find the object and then return the result. If not, then continue to search for the properties of the prototype object (if not found, it will actually search up the prototype chain until it reaches the root ). as long as it is not overwritten, the attributes of the object prototype can be found in all instances. If the entire prototype chain is not found, undefined is returned.

 

3. How does JavaScript implement inheritance?
Construct inheritance
Prototype inheritance
Instance inheritance
Copy inheritance
The prototype mechanism or the apply and call methods are easy to implement. We recommend that you use the constructor and the prototype hybrid method.
Function Parent (){
This. name = 'wang ';
}

Function Child (){
This. age = 28;
}
Child. prototype = new Parent (); // inherits the Parent.
Var demo = new Child ();
Alert (demo. age );
Alert (demo. name); // get the inherited attribute

4. What data types are returned by typeof JavaScript?

Object number function boolean underfind;
5. are three forced conversions and two implicit conversions?

Force (parseInt, parseFloat, number) Implicit (=-= );
6. Differences between split () join ()

The former is the form of cutting into an array, and the latter is to convert the array into a string

7. array method pop () push () unshift () shift ()

Add pop () and delete at the end of Push ()
Unshift () header add shift () header Delete

8. Differences between IE and DOM Event streams
Different execution sequence,
Different parameters
Event addition without on
This points to the problem

9. Differences between get and post methods in ajax requests
One is placed behind the url in the virtual carrier
Limited size
Security Questions
Different applications are requested only for forums and so on, and one is similar to changing passwords.

10. Compatibility between IE and standards
Var ev = ev | window. event
Document.doc umentElement. clientWidth | document. body. clientWidth
Var target = ev. srcElement | ev.tar get

11. How to interpret json data during ajax requests

Using eval parse is more reliable in view of security considerations;
12. What is event Delegate?

Let's use the principle of event bubbling to let the event triggered by ourselves Replace the execution with its parent element!
13. What Are closures, what are their features, and what are their influences on pages? A Brief Introduction to the closures you understand

A closure is a function that can read internal variables of other functions.
14. add, delete, replace, and insert to a contact

Obj. appendChidl ()
Obj. innersetBefore
Obj. replaceChild
Obj. removeChild

15 .. "=" and "=" are different

The former will automatically convert the type, and the latter will not

16. Compile a method that B inherits from.

Function A (name ){
This. name = name;
This. sayHello = function () {alert (this. name + "say Hello !");};
}
Function B (name, id ){
This. temp =;
This. temp (name); // equivalent to new ();
Delete this. temp;
This. id = id;
This. checkId = function (ID) {alert (this. id = ID )};
}

17. How to Prevent event bubbles and default events

Function stopBubble (e)
{
If (e & e. stopPropagation)
E. stopPropagation ()
Else
Window. event. cancelBubble = true
}
Return false

18. What kind of results will pop up after the following program is executed?

Function fn (){
This. a = 0;
This. B = function (){
Alert (this.)
}
}
Fn. prototype = {
B: function (){
This. a = 20;
Alert (this. );
},
C: function (){
This. a = 30;
Alert (this. );
}
}
Var myfn = new fn ();
Myfn. B ();
Myfn. c ();

19. Let's talk about the understanding of This object.

This is a keyword of js. The value of this varies with the function usage.
But there is a general principle that this refers to the object that calls the function.
This is generally the Global object. As a method call, this indicates this object.

20. The following program results

Function fun (n, o ){
Console. log (o)
Return {
Fun: function (m ){
Return fun (m, n );
}
};
}
Var a = fun (0); a. fun (1); a. fun (2); a. fun (3 );
Var B = fun (0). fun (1). fun (2). fun (3 );
Var c = fun (0). fun (1); c. fun (2); c. fun (3 );

// Answer:

// A: undefined, 0, 0
// B: undefined, 0, 1, 2
// C: undefined, 0, 1

21. output results of the following program

Var name = 'World! ';
(Function (){
If (typeof name = 'undefined '){
Var name = 'jack ';
Console. log ('Goodbye '+ name );
} Else {
Console. log ('hello' + name );
}
})();

22. Do you know about Node? What are the application scenarios of Node?

High concurrency, chat, and real-time message push
23. Introduce the most commonly used framework

Jquery, rn, angular, etc;
24. Do you know about front-end automated building tools? Brief Introduction

Gulp, Grunt, etc;
25. What is the same-source JavaScript policy?

A script can only read the properties of windows and documents from the same source. The same source here refers to the combination of host names, protocols, and port numbers.

Code Problems

1. Do you want to talk about the most popular things recently? Which websites do I visit?

Node. js, MVVM, React-native, Angular, Weex, etc.
CSDN, Segmentfault, blog Park, nuggets, Stackoverflow, Bole online, etc.
2. What if you plan to master a new technology this year?

By developing a single-page webapp technology.
SAP can be a seamless connection between pages to avoid the emergence of white pages with dynamic effects and improve user experience. At the same time, SAP has JavaScript rendering pages, and then obtains a small amount of data from the server for display, so repeatedly, the requested data does not need to be processed by the server, reducing the server load.
SAP has high technical requirements. The loading of the first screen is too long. Low-end mobile phones should be considered for the animation effect. For garbage collection, you need to release resources on your own to avoid page card changes.