HTML collection of Interviews

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. At the beginning of each HTML file there is something very important, Doctype, what it does.

"<! Doctype> declaration is in the front of the document, before the label. This tab tells the browser what HTML or XHTML specification the document uses. (emphasis: Tell the browser according to what specifications to parse the page)

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

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 the Wdith and height of the inline elements will not take effect, and in quirks mode, it will take effect. Set the height of a percentage: In standards mode, the height of an element is determined by what it contains, and if the parent element does not set a percentage height, it is not valid for the child element to set a percentage height. Use margin:0 Auto to center horizontally: use margin:0 Auto to center the element horizontally in standards mode, but it will fail in quirks mode.

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. 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 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.

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.

6 Why it is more efficient to use multiple domain names to store 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

7. 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 the Web develop more ' healthy ', the developers follow the unified standards, reduce the difficulty of development, development costs, SEO will do better, nor because the misuse of the code will lead to a variety of bugs, security issues, and ultimately improve the usability of the site.

8. Briefly explain the difference 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 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 to use link to load CSS instead of using the @import method

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

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

But those are not the last answers the interviewer wants. The interviewer wants to hear Webp,apng. (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.

Apng: Full name is "animated Portable Network Graphics", is the PNG bitmap animation extension, can realize the PNG format dynamic picture effect. 04 was born, but has not been the support of major browser vendors, until recently received IOS Safari 8 support, is expected to replace GIF to become the next generation of dynamic map standards.

10. 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.

DNS caching, CDN caching, browser caching, server caching.

11. 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.

12. 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 is bold, font size 2em, bold; is bold, do not think that this is the performance of HTML, these actually HTML default CSS style at work, So it's not the advantage of a semantic HTML structure to remove or lose a pattern, but browsers have default styles, and the default style is to better express HTML semantics, which can be said to be inseparable from the browser's default style and semantic HTML structure.

Screen readers (if visitors have visual impairments) will "read" your Web page entirely according to your logo.
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 "visitor", 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 visit. It is important that your page is easy to understand for reptiles, Because reptiles largely ignore the markup for performance, they focus only on semantic tagging.
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.

13. 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
You need to know the basic workings of some search engines, the differences between search engines, how search bots (SE robot or web crawler) work, how search engines sort search results, and so on. Meta tag optimization
Main topics include title, website description (Description), and Keywords (Keywords). There are other hidden words such as author (author), Category (catalogue), Language (code language), etc. How to select keywords and place keywords in a Web page
Search is done with keywords. Keyword analysis and selection is one of the most important SEO work. First of all to the site to determine the main keywords (generally in 5 up and down), and then for these keywords to optimize, including keyword density (density), correlation (relavancy), highlighting (prominency) and so on. Understand the main search engine
Although the search engine has a lot of, but to the website traffic decides the function is so few. For example, the main English has google,yahoo,bing and so on, the Chinese have Baidu, Sogou, Youdao and so on. Different search engines on the page crawl and indexing, sorting rules are not the same. Also understand the relationship between search portals and search engines, such as AOL Web search using Google's search technology, MSN with Bing Technology. The main Internet directory
Open directory itself is not a search engine, but a large web site directory, he and the main difference between the search engine is the content of the site to collect different ways. Catalog is manually edited, mainly included in the site homepage, search engine is automatically collected, in addition to the home page also grab a lot of content pages. Pay-per-click Search Engines
Search engines also need to survive, as the internet business is becoming more and more mature, the search engine fees are also beginning to do a great way. The most typical are overture and Baidu, and of course Google's advertising program, Google Adwords. More and more people through the search engine's click ads to locate the business site, which also has a great deal of optimization and ranking of knowledge, you have to learn to use the least advertising input to get the most clicks. Search Engine Login
After the website is finished, don't lie there waiting for the guest to fall from the sky. The easiest way to get someone to find you is to submit the site (submit) to the search engine. If you are a commercial site, the main search engines and directories will require you to pay for the collection (such as Yahoo to 299 dollars), but the good news is (at least so far) the biggest search engine Google is still free, and it dominates more than 60% of the search market. Link Exchange and Link breadth (link popularity)
The content of the Web page is a hypertext (hypertext) way of linking to each other, and so is the case between websites. In addition to search engines, people surfing ("surf") every day through links between different websites. The more links other websites have to your site, the more traffic you will get. More importantly, the more external links you have on your site, the more important the search engine thinks it is, giving you a higher ranking.

Reasonable use of labels

Why 14.HTML5 just write "DOCTYPE HTML"

HTML5 is not based on SGML, so there is no need to reference DTDs, but DOCTYPE is required to regulate the behavior of browsers (let browsers run the way they should);

And HTML4.01 is based on SGML, so you need to refer to the DTD to tell the document type that the browser document is using.

15. What is the difference between using link and @import when you import a style from a page?

(1) Link is an XHTML tag, in addition to loading CSS, can also be used to define RSS, define REL connection properties, and @import is provided by CSS, can only be used to load CSS;

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

(3) Import is CSS2.1 proposed, only in IE5 above can be recognized, and link is XHTML tag, no compatibility problem;

16.iframe has those disadvantages.
*iframe will block the OnLoad event on the main page;
* Search engine retrieval procedures can not read this page, not conducive to SEO;

*iframe and the home page share the connection pool, and the browser has restrictions on the same domain connection, which can affect the parallel loading of the page.

These two drawbacks need to be considered before using an IFRAME. If you need to use an IFRAME, preferably through JavaScript
Dynamically add SRC attribute values to the IFRAME, which can circumvent the above two problems.

How

17.webSocket is compatible with low browsers. (Ali)
Adobe Flash sockets,
ActiveX htmlfile (IE),
Multipart-encoded send XHR,
based on long polling XHR
18. Title What's the difference with Alt
Title is one of the global attributes that provides additional advisory information for the element. It is usually displayed when the mouse slides onto the element.
Alt is a unique property that is an equivalent description of the content of the picture, for display when the picture cannot be loaded, and for reading the screen reader. Can mention the high accessibility of pictures, in addition to pure decorative pictures must set a meaningful value, the search engine will focus on analysis.