2014 front-end written examination Reading Notes

Original article Portal

Html

1. In which browser have you tested the page? What are the kernels of these browsers?

   • IE: Trident Kernel
   • Firefox: gecko Kernel
   • Safari: WebKit Kernel
   • Opera: It used to be the presto kernel. Opera has now switched to the blink kernel of Google Chrome.
   • Chrome: Blink (developed jointly by Google and Opera Software Based on WebKit)

2. What is the quirks mode? What is the difference between it and the standards model?

The standards mode has been introduced in IE6. In the standard mode, the browser tries to properly process compliant documents in a specified browser.

CSS was not mature enough before IE6, so ie5 and other browsers had poor support for CSS. IE6 will provide better support for CSS. However, the problem arises, because many pages are written based on the old layout method, and if IE6 supports CSS, these pages will not be displayed normally. How can we ensure that the existing pages are not damaged immediately, what about the new rendering mechanism?

We often encounter this problem when writing programs. How to ensure that the original interfaces remain unchanged and provide more powerful functions, especially when new functions are incompatible with old functions. A common approach to this problem is to add parameters and branches, that is, when a parameter is true, we use the new function. If this parameter is not true, we use the old function, in this way, the original program will not be damaged and new functions will be provided. IE6 is similar in this way. It regards DTD as this "parameter", because no one on the previous page will write a DTD, so IE6 assumes that if a DTD is written, this means that the page will support a better layout for CSS, and if not, it will be compatible with the previous layout. This is the quirks mode ).

Differences:

There are three differences in layout, style parsing, and script execution.

1. A: What are the similarities and differences between img alt and title? B: What are the similarities and differences between strong and Em?

   • LT (ALT text): This is a user proxy (UA) that cannot display images, forms, or applets. The ALT attribute is used to specify the replacement text. The language used to replace text is specified by the lang attribute. (If there is no title in IE browser, ALT will be displayed as tool tip)
   • Title (tool tip): This attribute provides information about the creation of the elements that set this attribute.

2. Do you want to describe the differences between progressive enhancement and graceful degradation?

   • Progressive enhancement of progressive enhancement:Build pages for earlier browsers to ensure the most basic functions, and then improve and append functions such as effects and interactions for advanced browsers for a better user experience.
   • Graceful degradation graceful degradation:Build complete functions at the beginning, and then implement compatibility with earlier browsers.

"Graceful degradation"

The idea of "graceful degradation" is that we should design websites for the most advanced and perfect browsers. The testing work schedule for browsers that are deemed to be "obsolete" or have missing functions is at the end of the development cycle, and the testing objects are limited to mainstream browsers (such as IE and Mozilla) the previous version.

In this design example, the old browser is considered to be only able to provide a "simple but harmless (but passable)" browsing experience. You can make some small adjustments to adapt to a specific browser. However, since they are not the focus of our attention, apart from fixing large errors, other differences will be ignored directly.

Progressive enhancement

The "progressive enhancement" point of view is that the content itself should be concerned.

Content is an incentive for us to establish a website. Some websites show it, some collect it, some seek, some operations, and other websites even contain the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design example. This is also because it is immediately Yahoo! The reason for adopting and using it to build its "graded browser support" policy.

1. Briefly describe the differences between SRC and href.

SRC is used to replace the current element, and href is used to establish a connection between the current document and referenced resources.

SRC is the abbreviation of source. It points to the location of external resources. The content to which SRC points will be embedded in the location of the current tag in the document; when a SRC resource is requested, the resources directed to it are downloaded and applied to the document, such as JS scripts, IMG images, frames, and other elements.

<script src =”js.js”></script>

When the browser parses this element, the download and processing of other resources will be suspended until the resources are loaded, compiled, and executed, as will the images and frameworks, it is similar to embedding the resource to the current tag. This is why JavaScript scripts are placed at the bottom rather than the header.

Href is short for Hypertext reference. It points to the location of the network resource and establishes a link with the current element (Anchor) or current document (Link). If we add

<link href=”common.css” rel=”stylesheet”/>

The browser recognizes this document as a CSS file, and downloads resources in parallel without stopping the processing of the current document. This is why we recommend that you use link instead of @ import to load CSS.

1. After CSS/JS Code is launched, developers often optimize the performance. Starting from refreshing the web page, which of the following operations will cache a JS request?

DNS cache, CDN cache, browser cache, and server cache.

CSS

1. What is the problem with the hover style after hyperlink access? How can this problem be solved?

The clicked accessed hyperlink style does not have hover and active, and the solution is to change the order of CSS attributes: L-V-H-A (link, visited, hover, active)

1. What are the specific differences between intra-row elements and block-level elements? Can I set the padding and margin of row elements?

Block-level element (Block) features:

A row is always exclusive and starts from another row, and the subsequent elements must be displayed in another row; width, height, and padding) and the margin (margin) can be controlled;

Inline features:

The same line as the adjacent inline element; width, height, top/bottom (padding-top/padding-bottom) and the top/bottom (margin-top/margin-bottom) of the outer margin cannot be changed (that is, the left and right of padding and margin can be set ), the size of the text or image.

The browser also has the default inline-block element (with an internal size, you can set the height and width, but will not automatically wrap the line). What are the default inline-block elements?

Answer :,,,,.

1. What is overlap between margins? What are the overlapping results?

The outer margin overlaps with margin-collapse.

In CSS, the outer margin of the adjacent two boxes (maybe sibling or ancestor) can be combined into a separate outer margin. This method of combining the outer margin is called fold, and thus the combined outer margin is called Fold outer margin.

The folding result follows the following calculation rules:

When both adjacent outer margins are positive values, the collapse result is a large value between the two. When both adjacent outer margins are negative, the collapse result is greater than the absolute value of the two. When the two margins are positive and negative, the collapse result is the sum of the two.

1. What are the two attributes in CSS that can overlap text in the vertical and horizontal directions?

Vertical direction: Line-height horizontal direction: letter-spacing

Do you know the wonderful use of letter-spacing?

It can be used to eliminate the gap between linefeeds and spaces between inline-block elements.

Javascript

1. What is the output of the following code? Explain the cause.

   VaR A; alert (typeof A); // undefined alert (B); // Error

Undefined is a data type with only one value. The value is "undefined". When a variable is declared with VAR but not assigned a value for initialization, the value of this variable is undefined. B will report an error because it is not declared. Note that the unstated variables and the unassigned values are different.

1. What is output based on the following code? Explain the cause.

   VaR A = NULL; alert (typeof A); // object

Null is a data type with only one value. The value is null. Indicates a null pointer object. Therefore, if typeof is used, "object" is returned ".

2014 front-end written examination Reading Notes