Web front end questions must see

69.Javascript which data types are returned by the TypeOf, listing 3 coercion type conversions and 2 implicit type conversions

1 ) return data type

Undefined

String

Boolean

Number

Symbol (ES6)

Object

Function

2) Forcing type conversions

Number (parameter) converts any type to a numeric type.

parseint (parameter 1, parameter 2) converts a string to an integer

Parsefloat () Converts a string into a floating-point number

String (parameter): can convert any type to a string

A Boolean () can convert a value of any type to a Boolean value.

3) Implicit type conversions

1. Arithmetic

The addition operator + is the binocular operator, so long as one is of type string, the value of the expression is a string.

For other arithmetic, only one of the number types is the value of the expression.

For illegal characters, the condition usually returns Nan:

' 1 ' * ' a '//= = Nan, because the parseint (a) value is nan,1 * nan or Nan

2. Judgment statement

The judging condition in the judgment statement needs to be a Boolean type, so the conditional expression is implicitly converted to Boolean. Its transformation rule is the same as the Boolean constructor. Like what:

var obj = {};if (obj) {

while (obj);

3.Native code calls

The JavaScript hosting environment provides a large number of objects that are often implemented by JavaScript. The parameters that JavaScript passes to these functions are also implicitly converted. For example, the alert method provided by the BOM accepts arguments of type string:

Alert ({a:1}); = = [Object Object]

1. Write 3 Typical applications that use this

function Thing () {}

Thing.prototype.foo = "Bar";

Thing.prototype.logFoo = function () {

Console.log (This.foo);

}

Thing.prototype.setFoo = function (Newfoo) {

This.foo = Newfoo;

}

var thing1 = new Thing ();

var thing2 = new Thing ();

Thing1.logfoo (); Logs "Bar"

Thing2.logfoo (); Logs "Bar"

Thing1.setfoo ("foo");

Thing1.logfoo (); Logs "Foo";

Thing2.logfoo (); Logs "Bar";

Thing2.foo = "Foobar";

Thing1.logfoo (); Logs "Foo";

Thing2.logfoo (); Logs "Foobar";

2.

function Thing1 () {}

Thing1.prototype.foo = "Bar";

function Thing2 () {

This.foo = "Foo";

}

Thing2.prototype = new Thing1 ();

function Thing3 () {}

Thing3.prototype = new Thing2 ();

var thing = new Thing3 ();

Console.log (Thing.foo); Logs "Foo"

3.

function Thing () {}

Thing.prototype.foo = "Bar";

Thing.prototype.logFoo = function () {

function DoIt () {

Onsole.log (This.foo);

}

Doit.apply (this);

}

function doitindirectly (method) {

Method ();

}

var thing = new Thing ();

doitindirectly (Thing.logFoo.bind (thing)); Logs Bar

How do you understand the position of the front-end interface engineer? What is the future of it?

Front-end engineers belong to a relatively new technology, a variety of technologies, with the importance of customer experience front-end need to master the skills are more and more, the front-end requirements are more and more, and we are close to customers, in addition to mastering the necessary skills to master the user's psychology, belonging to communication. Prospects: The future is undoubtedly worthy of recognition, and we need to keep an eye on the latest technology, which is a time to learn the road

2. JQuery Delegate functions of the function? For example, please explain

The delegate () method adds one or more event handlers for the specified element (which is a child of the selected element) and specifies the function to run when these events occur

For example, click on the P tag in the div to make a popup window

$ (' div '). Delegate (' P ', ' click ', function () {alert ()}

3. Eval functions of the function

Eval can execute a string generation statement, typically executing a dynamic JS statement.
The use of eval: Sometimes we don't know what statement to execute in advance, and only when the conditions and parameters give us the idea of what statement to execute, then Eval comes in handy.

4. What is the difference between the title and ALT attribute on a label?

Title is the additional information placed on the mouse alt is not the normal display of information

5. The understanding of web standards and the knowledge of the website?

Web Standard is the deconstruction of the page, performance and behavior of their own implementation, the Internet, the label put forward the requirements of the standardization 1. Requirements for the structure: (tag specification can improve the search engine page crawl efficiency, SEO is very helpful)

1) The label letter should be lowercase;

2) label to be closed;

3) tags are not allowed to be nested arbitrarily.

2. Requirements for CSS and JS:

1) Try to use an external CSS style sheet and JS script, so that the structure, performance and behavior into three pieces, in line with the specification, while improving the page rendering speed, improve the user experience;

2) style as little as possible with the line style sheet, so that the structure and performance of the separation, the label ID and class name to do see explanatory, the less the label, the faster the load, the user experience is higher, the code maintenance is more simple, easy to revise;

3) No need to change the content of the page, you can provide a printed version without the need to copy content, improve the usability of the website

6. Css What are the selectors? Which properties can be inherited? How is the priority algorithm calculated?

ID and class, class can inherit, pseudo-Class A tag can inherit; list UL LI DL DD DT inheritable

Priority nearest principle, style definition nearest; load style to last loaded position

The priority level is

!important > [id > Class > tag]

Important higher than inline priority

7. please poke out the peculiar cssbug under the IE6/7.

One: Li margin "no reason" increase

Set the display form of UL to *display:inline-block; Yes, the front plus * is valid only for IE6/IE7

Two: IE6 does not support the Min-height property, but it thinks height is the minimum height

Use a property!important that is not supported by IE6 but supported by the remaining browsers.

Three: Overflow:

In IE6/7, overflow cannot correctly hide a child element with relative positioning position:relative. The solution is to outsource the container. Wrap plus position:relative;.

Four: Border:none in IE6 does not work: Write border:0 can,

Five: 100% height

Under IE6, if you want to define a 100% height for an element, you must explicitly define the height of its parent element, and if you need to define a full screen height for the element, you have to define the height:100% for the HTML and body first.

Six: Bilateral distance Bug

When the element floats, IE6 will incorrectly double the margin value of the float, adding a display:inline to the float element.

Seven: Hide and Seek bug

Some define: hover links, when the mouse moved to those links, under the IE6 will trigger hide and seek.
1. Add a <span style= "Clear:both" after (the non-floating) content; ></span>
2. Triggering the haslayout of the container containing the links, a simple method is to define the height:1%;

Eight: IE6 absolutely positioned element 1px pitch bug

When absolute positioning of the parent element or the width is odd, bottom and right will appear more than 1px,

Solutions for hack processing for IE6

8. How do I slide an element 600 milliseconds slowly up the display?

If you need to be at the bottom of the parent element, you can use the margin-top to squeeze the element, the colleague parent element is set to hide, and then change the value of margintop can be used to do, the element is positioned at the bottom

(function () {

var odiv = document.createelement (' div ');

ODiv.style.width = ' 100px ';

ODiv.style.height = ' 100px ';

ODiv.style.backgroundColor = ' red ';

oDiv.style.position = ' absolute ';

ODiv.style.marginTop = + ' px ';

Document.body.appendChild (ODIV);

var timer = setinterval (function () {

var m = parseint (ODIV.STYLE.MARGINTOP);

if (M = = 0) {

Clearinterval (timer);

Return

}

ODiv.style.marginTop =parseint (ODIV.STYLE.MARGINTOP)-1 + ' px ';

},600);

})();

9. write a function that gets a non-inline style

Function GetStyle (obj,attr) {

If (Obj.currentstyle) {

return obj.currentstyle[attr];

}else{

Return getComputedStyle (Obj,false) [attr];

}

}

10. Please verify the numbers with regular expressions

^[0-9]*$

11. Why is it more effective to use multiple domain names to provide site resources?

First, the concurrency limit of the browser is exceeded (the maximum number of concurrent requests for the same domain name of the browser is 6, IE6 is 2)

Second, save cookie bandwidth

Third, CDN cache more Convenient

Iv. prevention of unnecessary security issues (in particular, the isolation of cookies is particularly important)

Five, save the host domain connection number, optimize the page response speed

12. How do you get parameter information from the URL of your browser

In a browser hosting environment, there is a location object that is also a property of the Window object and the Document object.

The Location object provides information about the document that is loaded with the current window, which is the URL information.

such as Https://www.baidu.com/api/sousu?search=baidu&id=123#2

Location.href: Full URL

Location.protocol: Return protocol (https:)

Location.host: Returns the server name and port number (www.baidu.com)

Location.hostname: Returns the server name (www.baidu.com)

Location.port: Returns the server port number (HTTP default 80,https default 443)

Location.pathname: Returns the directory and file name in the URL (api/sousu)

Location.search: Return query string (? search=baidu&id=123#2)

Location.hash: Return hash value (#2)

13. mobile phone text size with what units

For a small number of mobile devices only need to fit, and the resolution of the page has little impact, the use of PX can

For devices that need to be adapted to a variety of mobile devices, use REM, such as a device that only needs to be adapted to different resolutions, such as iphone and ipad.

14. have you ever done a PSD transduction with hundreds of layers? PS hides other layers, showing only the shortcut keys for one of the layers

ALT + current layer front eye

15. What is the difference between browser standard mode and suspect mode?

This is a historical issue, before the introduction of the standard, the old pages are based on the old rendering of the page rendering, so after the introduction of the standard in order to ensure the normal display of the old page, to maintain the compatibility of the browser, This allows the browser to produce a standard compatibility mode that is compatible with the strict pattern of standard rendering and the quirks of the old page display.

Specific performance:

1. In strict mode: Width is the contents of the breadth, element true width = margin-left + border-left-width + padding-left + width +padding-right + border-right-widt H + margin-right;

In quirks mode: width is the actual width of the element, content width = width-(padding-left + padding-right + border-left-width +border-right-width)

2) You can set the height of the elements in the line

In standard mode, setting wdith and height for inline elements such as span will not take effect, and in weird mode it will take effect.

3) The height of the percentage can be set

In standard mode, the height of an element is determined by the content it contains, and if the parent element does not have a height set, the height of the child element setting a percentage is not valid.

4) using Margin:0auto to set the horizontal center in IE will fail

Using margin:0 Auto in standard mode allows the element to be centered horizontally, but in weird mode it will be invalidated, the workaround in the weird mode, with the Text-align property:

Body{text-align:center}; #content {text-align:left}

5) The padding of setting the image in weird mode will be invalid.

6) Font properties in table in weird mode cannot inherit settings from the upper layer

7) White-space:pre will fail in weird mode

16. Javascript the homologous strategy

The same-origin policy is an important security metric for JavaScript. It was first derived from NetscapeNavigator2.0, which was designed to prevent a document or script from being loaded from multiple different sources. The so-called homologous is the same protocol, with the hostname, the same port number.

Its essence is simple: it considers the reliance content loaded from any site to be unsafe. When the browser is running in a sandbox with dubious scripts, they should only be allowed to access resources from the same site, not those that might be malicious from other sites.

17. What compatibility do you encounter in the Web Mobile project that you are doing?

Recommend a website for you:

Http://www.jb51.net/article/84973.htm

18. do you have an understanding of responsive layouts? Please say it roughly .

Responsive layout concept: responsive design, designed to achieve different screen resolution on the terminal to browse the different display of the web. Responsive design enables websites to have a better browsing experience on mobile phones and tablets.

Design steps:

1. Set META tags
2. Set style based on media query
3. Set multiple view widths

Note the point:

1. Width usage percent
2. Working with picture scaling issues

19. as a web front-end engineer, you must know that the most Popular front-end technology

You know what?

Vuejs2.0/angular2.0/react Native/es6//nodejs

Http2

Gulp/webpack

20. Please briefly describe why you should use the database transaction

A database transaction is a sequence of operations performed as a single logical unit of work, either completely or completely Transaction.

Atomicity (Atomic) (atomicity)
The transaction must be an atomic unit of work, either all executed or not executed for its data modification. Typically, the operations associated with a transaction have a common purpose and are interdependent. If the system only performs a subset of these operations, it may break the overall goal of the transaction. Atomicity eliminates the possibility of a system processing a subset of operations.
　　Consistency (consistent) (consistency)
When a transaction is complete, you must keep all data in a consistent state. In a related database, all rules must be applied to transaction modifications to maintain the integrity of all data. At the end of the transaction, all internal data structures, such as B-tree indexes or doubly linked lists, must be correct. Some of the responsibility for maintaining consistency is borne by application developers who must ensure that all known integrity constraints are enforced by the application. For example, when developing an application for transfer, avoid arbitrarily moving the decimal point during the transfer process.
　　Isolation (insulation) (isolation)
Modifications made by concurrent transactions must be isolated from modifications made by any other concurrent transaction. The state in which the data is located when the transaction is viewing the data, either when another concurrent transaction modifies its state or after another transaction modifies it, and the transaction does not view the data in the middle state. This is called isolation because it is able to reload the starting data and replay a series of transactions so that the state at the end of the data is the same state as the original transaction execution. The highest isolation level is obtained when the transaction is serializable. At this level, the results obtained from a set of transactions that can be executed in parallel are the same as those obtained by running each transaction continuously. Because high isolation limits the number of transactions that can be executed in parallel, some applications reduce the isolation level in exchange for greater throughput.
　After a persistence (Duration) (durability) transaction is complete, its effect on the system is permanent. This modification will remain 2017-03-082017-03-08 even if a fatal system failure occurs

Web front end questions must see