BAT and the major Internet companies 2014 front-end written interview questions: Html/css article __html

Turn from: http://blog.csdn.net/mr_yuan24/article/details/40457765

The answer is not guaranteed to be correct, if there is a mistake or there is a better solution, please correct me.

The first few questions will be very basic, the deeper the deeper. HTML article:

1. The page you are doing has been tested in which browser.  What are the kernels of these browsers? Ie:trident kernel Firefox:gecko kernel safari:webkit kernel Opera: formerly the Presto kernel, opera has now switched to Google Chrome's Blink kernel Chrome:blink (based on WebKit , Google and Opera Software jointly developed)

2. Every HTML file has a very important thing at the beginning, Doctype, do you know what this is all about?

Answer: <! The doctype> declaration is in the front of the document, before the

3.Quirks mode is what. What's the difference between it and standards mode?

Answer:

Starting with IE6, the standards mode is introduced, in standard mode, the browser attempts to properly handle compliant documents in a specified browser.

CSS is not mature enough before IE6, so IE5 and so on before the browser to support the CSS is very poor, IE6 will provide better support for CSS, but then the problem comes, because there are many pages are based on the old layout of the way, and if IE6 support CSS will these pages appear abnormal, How to ensure that the existing page is not broken, but also to provide a new rendering mechanism.

When writing programs, we often encounter such problems, how to ensure that the original interface is not changed, but also provide more powerful features, especially when the new features are not compatible with the old features. A common practice when encountering this type of problem is to add parameters and branching, that is, when a parameter is true, we use the new feature, and if the parameter is not true, use the old feature, so that it can not break the original program, but also provide new features. IE6 is doing the same thing, it takes the DTD as the "parameter", because the previous page is not written to the DTD, so IE6 assumes that if the DTD is written, it means that the page will have a better layout for CSS, and if not, a compatible layout. This is the quirks pattern (quirk pattern, weird mode, weird mode).

Difference:

Overall there are three different aspects of layout, style parsing, and scripting execution.

Box model: In the standard of the consortium, if you set the width and height of an element, it refers to the width and height of the element's content, while in quirks mode, the width and height of IE include padding and border.

Sets the width of an inline element: In standards mode, setting Wdith and height for <span>, and so on, will not take effect, and in quirks mode, it takes effect.

Set the height of a percentage: In standards mode, the height of an element is determined by the content it contains, and if the parent element does not set a percentage height, the child element sets a percentage of the height is not valid with margin:0 Auto Set horizontal center: Use margin:0 Auto in standards mode enables elements to be centered horizontally, but is invalidated in quirks mode.

(There are a lot, the answer is not important, the key is to see if he answered these are not their own experience encountered, or said to read the article, or even completely unaware. ）

The layout of the 4.DIV+CSS is more advantageous than the table layout. Revision of the time is more convenient as long as the CSS file changes. The page loads faster, the structure is clear, the page displays succinctly. The performance is separated from the structure. Easy to optimize (SEO) search engines are more friendly, ranking easier than before.

5.a:img's ALT and title have similarities and differences. Similarities and differences of B:strong and EM.

Answer:

A:alt (alt text): A user agent (UA) for images, forms, or applets that cannot be displayed, the ALT attribute is used to specify alternate text. The language of the alternate text is specified by the lang attribute. (The alt is displayed as tool tip in IE browser without title) title (tool tip): This property provides the recommended information for the element that sets the property.

B:strong: Bold emphasis on labeling, emphasizing, expressing the importance of the content em: Italic accent Tags, more strongly emphasized, the emphasis point of the content

6. Can you describe the difference between progressive enhancement and graceful demotion? Progressive Enhancement Progressive Enhancement: build pages for lower-version browsers, ensure the most basic functionality, and then achieve a better user experience with improved and additional functionality for advanced browsers, such as effects, interactions, etc. Graceful demotion graceful degradation: build complete functionality at the outset and then be compatible with a lower version of the browser.

Difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while progressive enhancement starts with a very basic, functional version and expands to suit the needs of the future environment. Demotion (functional decay) means looking back, and progressive enhancement means looking ahead while keeping its roots safe.

The "Graceful downgrade" view

The "Graceful downgrade" view is that the Web site should be designed for the most advanced and perfect browsers. The test work in browsers that are considered "outdated" or functionally missing is scheduled at the end of the development cycle, and the test object is limited to the previous version of the mainstream browser (IE, Mozilla, etc.).

In this design paradigm, older browsers are thought to provide a "simple but poor, but passable" browsing experience. You can make some small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be directly ignored in addition to fixing larger errors.

"Progressive enhancement" view

The "progressive enhancement" view should focus on the content itself.

Content is the incentive for us to build our website. Some websites show it, some collect it, some seek, some operate, and some sites even contain all the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. This is why it was immediately adopted by Yahoo! and used to build its "Hierarchical browser support (graded Browser Support)" strategy.

So here's the problem. Now product manager See ie6,7,8 Web page effect relatively high version of modern browser less rounded, shaded (CSS3), requirements compatible (use picture background, give up CSS3), how would you convince him.

(Free play)

7. Why it is more efficient to use multiple domain names to store Web site resources. CDN Cache more convenient to break through the browser concurrency limit save cookie bandwidth to save the number of primary domain connections, optimize page response speed to prevent unnecessary security problems

8. Please talk about your understanding of the importance of web standards and standard-setting bodies.

Web standards and standard-setting institutions are designed to make web development more ' healthy ', developers follow the unified standard, reduce the difficulty of development, development costs, SEO will do better, also will not because of abuse of code to cause a variety of bugs, security issues, and ultimately improve the usability of the site.

9. Please describe the difference between cookies,sessionstorage and localstorage.

Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and the data is destroyed when the session ends. So sessionstorage is not a persistent local store, it's just session-level storage. The localstorage is used for persistent local storage, and the data will never expire unless the data is actively deleted.

The difference between Web storage and cookies is that the Web Storage concept is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent to the past, which wastes bandwidth, and the cookie needs to specify the scope and not be called across domains. In addition, WEB storage have methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. But cookies are also unavailable or missing: Cookies are used to interact with the server and exist as part of the HTTP specification, and the Web Storage is intended only for storing data locally.

10. Briefly describe the difference between src and href.

Answer:

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

SRC is the abbreviation for source, point to the location of the external resource, the content will be embedded in the document in the location of the current label, when the SRC resource is requested to download and apply the resources to the document, such as JS script, img pictures and frame and other elements.

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

When the browser resolves to the element, it suspends downloading and processing of other resources until the resource is loaded, compiled, executed, and so on, such as pictures and frames, similar to embedding the resource in the current tab. This is why the JS script is placed at the bottom rather than the head.

HREF is the abbreviation for hypertext reference, which points to the location of the network resource, establishes a link to the current element (anchor) or the current document (link), if we add

<link href= "Common.css" rel= "stylesheet"/>

If the browser recognizes the document as a CSS file, it downloads the resource in parallel and does not stop processing the current document. This is why it is recommended that you use link to load CSS instead of using the @import method.

11. Know the Web page production will use the picture format.

Answer:

Png-8,png-24,jpeg,gif,svg.

But those are not the last answers the interviewer wants. The interviewer wants to hear WEBP. (whether there is a focus on new technology, new things)

Popular Science WEBP:WEBP format, Google (Google) developed a graphic designed to speed up the image loading speed of the picture format. Picture compression volume is approximately 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook ebay have started testing and using the WEBP format.

In the case of the same quality, the volume of the WEBP format image is 40% smaller than the JPEG format image

12. Know what a micro-format is. Talk about understanding. Should you consider the micro format in the front-end build?

Answer:

Micro-format (microformats) is a collection of machine-readable semantic xhtml words, which is an open standard for structured data. is a special format for special applications.

Advantages: Add intelligent data to the Web page, so that the site content in the search engine results interface can display additional hints. (Application example: watercress, interested in google)

13. After the CSS/JS code is online, developers often optimize performance, starting with the user refreshing the page, a JS request in general where there will be cache processing.

Answer: DNS caching, CDN caching, browser caching, server caching.

14. A large number of pictures on a page (large electric Dealer website), loading is very slow, you have any way to optimize the loading of these pictures, to give users a better experience. The picture lazy load, in the invisible area on the page can add a scroll bar event, judge the picture position and the top of the browser distance from the page, if the former is less than the latter, priority loading. If for slides, albums, etc., you can use the picture preload technology, the current display picture of the previous one and the next one priority to download. If the picture is a CSS picture, you can use Csssprite,svgsprite,iconfont, Base64 and other techniques. If the picture is too large, you can use a specially encoded picture to load a particularly powerful thumbnail to improve the user experience. If the picture display area is less than the actual size of the picture, because the server side according to the business needs of the first image compression, image compression size and display consistent.

15. How do you understand the semantics of HTML structures? When you remove or lose style, you can make the page appear in a clear structure:

HTML itself is not expressive, we see for example

For example, if you use a semantic tag, a screen reader will "spell out" your word, instead of trying to pronounce it completely. Devices such as PDAs and mobile phones may not be able to render web pages like regular computer browsers (usually because they are less supportive of CSS).

Using semantic tags ensures that these devices render Web pages in a meaningful way. Ideally, the task of viewing a device is to render the Web page in accordance with the conditions of the device itself.

Semantic tagging provides the necessary information for the device, leaving you to consider all possible displays (including existing or future new devices). For example, A mobile phone you can choose to make a paragraph marked with a title in bold. The handheld may be displayed in a larger font. Either way, once you mark the text as a caption, you can be sure that the reading device will display the page appropriately according to its own criteria. Search engine crawler also relies on tags to determine the context and the weight of each keyword

In the past you may not have considered the search engine crawler is also the site "visitors", but now they are actually extremely valuable users. Without them, the search engine will not be able to index your site, and then the average user will be very difficult to come over to visit. It is important that your page is easily understood by the crawler, because the crawler largely ignores the markup used for performance, but only the semantic markup.

Therefore, if the title of the paging file is marked instead of, the page may be in the position of the search results. In addition to improving ease of use, semantic tagging facilitates the proper usage of CSS and JavaScript because it provides many hooks to apply the style and behavior of the page.

SEO mainly depends on the content of your site and external links. Facilitate team development and maintenance

The consortium has given us a very good standard, in the team we all follow this standard, you can reduce a lot of different things, convenient development and maintenance, improve development efficiency, and even realize the modular development.

16. Talk about the front-end angle to do a good job SEO need to consider what. Find out how search engines crawl Web pages and how to index them