HTML face question

1. Which of the Web pages do you test? What are the cores of these browsers?

The so-called "browser core" is nothing more than a core part of the browser-"Rendering engine", literally called "rendering engine", we also often called "typesetting engine", "Interpretation engine". The purpose of this engine is to help the browser render the content of the Web page, translating the page content and layout code into the view that the user sees.

But we often call the "browser kernel", which contains the JavaScript engine, such as WebKit, which consists of the rendering engine WebCore and the JavaScript engine jscore.

Let's look at the kernel used by each browser:

(1). Ie:ie Browser was born in 1994, when Microsoft in order to counter Netscape browser, and Spyglass cooperation, and according to the source code to implement their own IE kernel Trident. Each new IE release also marks the upgrade of the Trident kernel version number.

(2). The browser kernel used by Safari:safari is the famous WebKit. WebKit predecessor is the KDE group's khtml engine, can say WebKit is Khtml's an open source. WebKit can be said to be Apple's big contribution to the open source world, based on this open Source engine, which derives a lot of webkit, if Chrome browser engine.

(3). Chrome: Since 08, Google has built the chromium engine, which is a fraction of the webkit. But the WebKit code is very readable, it may take a day to compile code, now it takes only two or three hours to get it done. But since 2013, Chrome has abandoned the chromium engine and used the latest Blink engine (based on webkit2-Apple's new WebKit engine that exited in 2010).

(4). Opera:opera Browser is a Norwegian opera software ASA company made to support multi-page tabbed browser. is a platform browser can run on Windows, MAC, Linux three operating system platform. To reduce the cost of research and development, Opera announced in February 2013 to abandon the Presto engine and instead follow chrome using WebKit's chromium engine as its own browser core engine. After Chrome and the launch of the Blink engine in 2013, Opera also followed its footsteps by saying that it would instead use blink as the browser core engine.

(5). Firefox:mozilla Firefox is an open source Web browser. Firefox is using the Gecko kernel. Gecko was the engine developed by Netscape, but later Netscape was disbanded. The Mozilla Foundation continues to drive the development of gecko. Today, Gecko continues to be maintained and developed by Mozilla employees and volunteer workers.

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

<! The doctype> declaration is before the

Common DockType declarations include:

HTML 5

<! DOCTYPE html>

HTML 4.01 Strict

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

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

Starting with IE6, the standards Standard model was introduced, and the browser tried to properly process the standard documents to the program in the specified browser.

Before IE6 CSS is not mature enough, all IE5 and so on before the browser to the CSS support is very poor, IE6 will provide better support for CSS, however, many pages are based on the old layout style, and if IE6 support CSS will make these pages not normal, if the imminent guarantee does not break the existing page, Also provides a new rendering mechanism?

A common practice for encountering this problem is to add parameters and branches, that is, when a parameter is true, we use the new feature, and if not true, use the old feature. IE6 is also the type to do this, it treats the DTD as this "parameter", because the previous page everyone will not write the DTD, so IE6 assumes that if the DTD is written to the CSS to support a better layout, and if not, then the compatibility before the layout. This is the quirks mode (weird mode).

Difference:

Overall there are three differences in layout, style parsing, and scripting execution.

Box model: In the standard, if you set an element width and height, refers to the content of the element width and height, and in quirks mode, ie width and height also includes touch padding and border.

Set inline element height: In standards mode, setting width and height for a SPAN element does not take effect, and in quirks mode it takes effect.

What are the advantages of the 4.DIV+CSS layout compared to the table layout?

revision More convenient, only need to change the CSS file. The page loads faster, has a clear structure, and the page is simple to display. The performance is separated from the structural phase. Easy to optimize (SEO) search engines are more friendly and ranked more easily by the front.

What are the similarities and differences between 5.a:img Alt and title? The similarities and differences between B:strong and em?

A:

The meaning is different, Alt is the alternate text when the current picture does not exist. And tittle is the description of the picture and further explanation;

Different in the browser, in Firefox and IE8, when the mouse through the picture, the title value will be displayed, and the ALT value will not be displayed, only in IE6, when the mouse through the picture, the title and alt value will be displayed;

For website SEO optimization, title and Alt also have the most important point: the search engine on the image of the meaning of the judgment, mainly by the ALT attribute. All of the ALT attributes in the picture are described in brief, including keywords, which are also part of page optimization.

B:

Strong emphasis on labeling, emphasizing, the importance of expressing content;

EM italic emphasis on the label, more strongly emphasize the content of the emphasis point;

6. Can you describe the difference between progressive enhancement and graceful demotion?

Progressive Enhancement (Progressive enhancement): Build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.

Graceful downgrade (graceful degradation): Build the full functionality from the start and then be compatible with the low-version browser.

The difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking ahead and keeping its roots in a safe zone.

Elegant Downgrade view

Think that the website should be designed for the most advanced and perfect browsers. The test work under a browser that is considered "obsolete" or functionally missing is licensed at the final stage of the development cycle, and the test object is limited to the previous version of the main browser (ie, Mozilla, etc.). Under this specification, older browsers are considered to provide only "rudimentary but poor,but passable" browsing experience. You can make small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be ignored in addition to fixing larger errors.

Progressive enhancement Point of view

Think that the content itself should be concerned. Content is the incentive for us to build our website. Some sites show it, some collect it, some seek, some operate, and some sites even contain the above, but the same point is that they are all designed to content. This makes progressive enhancement known as a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "tiered browser support" strategy.

7. Why is it more efficient to use multiple domain names to store site resources?

CDN Cache is more convenient. Static content and dynamic content are hosted by servers, and requests are processed using different servers. Handles non-processing static content for dynamic content. Improve efficiency.

Breakthrough Browser concurrency restrictions. Reduce the number of links to the primary domain, thereby improving the utilization of client network bandwidth and optimizing page response. Because the old browser (IE6 is typical), the value of the same domain name allows two HTTP links to be maintained simultaneously. Assign resource requests such as pictures to other domain names to avoid blocking other resource links on the primary domain, such as big pictures, and not necessarily important content.

Save Cookie bandwidth. For example, Twitter's main battle twitter.com each visit, will bring their own cookies, quite large. Add the picture also placed under the main domain name, then each time you access the image, the request header will also carry a cookie, and the picture is not necessary to know the user's cookie, the owner part of the bandwidth wasted.

Save the number of links to the main domain, and optimize the page response speed.

Prevent unnecessary security issues. For UGC (user generated content) and master isolation, prevent security issues (upload js to steal master cookies, and so on). It is for this reason that the domain name of the user content must not be the subdomain of its own master, but a completely independent third-party domain name.

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

The sessionstorage is used to store data in a reply (session) locally, which is accessed only by the same page in the same reply and then destroyed when the reply is completed. So sessionstorage is not a persistent local store, just a reply-level store. While Localstorage is used for persistent local storage, data is used to not expire unless the data is actively deleted.

Web Storage and Cookie differences

The concept of Web storage is similar to a cookie, except that it is designed for larger container storage. Cookie size is limited, and every time you request a new page, the cookie will be sent in the past, which is an invisible waste of bandwidth, in addition to the cookie also needs to specify the scope, can not be called across domains.

Cookies are used to interact with the server and exist as part of the HTTP plan, whereas Web Storage are only intended to store data locally.

10. Briefly describe the difference between src and href

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

SRC is the abbreviation for souce, which points to the location of the external resource, which is embedded in the document where the current label is located, and the resources it points to are downloaded and applied to the document when the SRC resource is requested, such as JS scripts, IMG images, and frame elements.

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

When the browser resolves to the element, it pauses the download and processing of other resources, knowing that the resource is loaded, compiled, executed, and so is the picture and frame elements, similar to embedding all the pointing resources within the current tag. This is why the prize JS script is placed on the bottom instead of the head.

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

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

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

11. After the CSS/JS code is on-line, developers often optimize performance, starting from the user Refresh page, a JS request in general where there will be cache processing?

DNS caching: If you visit a URL multiple times in a short period of time, DNS will have to parse it and return it to you, and the DNS is working again. So the operating system intelligently designed a local "DNS cache", when you first visit A.com,dns returned the correct IP, the system will temporarily store this result, this is the DNS cache. And it sets an expiration time for the cache, and when you visit a website again within the expiration time, the system will exchange the results directly from your computer's local DNS cache without having to ask the DNS server again.

CDN Cache: CDN is the content Delivery network abbreviation, that is, the meaning of "contents distribution networks". Generally what we call CDN acceleration, generally refers to website acceleration or user download resource acceleration.

CDN can be understood as distributed in each county's train ticket to the point of sale, when users browse the site, the CDN will choose a user nearest CDN Edge node to respond to user requests, so that Hainan Mobile user requests will not go all the way to Beijing Telecom Room server.

CDN Something is obvious, the CDN node solves the problem of cross-operator and cross-region access, and the access delay is greatly reduced; On the other hand, most of the requests are in the CDN Edge node, the CDN has a shunt function, which reduces the load of the source station.

Browser cache: The browser stores the most recently requested document on the user resource disk. But when the site is updated (such as replacing CSS, JS, and image files), the browser stores the old version of the file locally, which results in unpredictable results.

Server Caching: Stores Web pages and objects that require frequent access in a system that is closer to the user, and speeds up when the objects are accessed again.

12. There are a lot of pictures on the page (large e-commerce site), loading very slow, you have ways to optimize the loading of these images, to give users a better experience

Picture lazy loading, in the non-viewable area of the page can add a ScrollBar event, to determine the location of the image and the top of the browser distance from the page, if the former is less than the latter, priority loading. What is picture lazy loading?

For pages with too many pictures, in order to speed up page loading, many times we need to not load the images that are not in the viewable area of the page, until we scroll to the viewable area before loading. This can be a great boost for page load performance and a better user experience.

If you have a slideshow, photo album, and so on, you can use the picture preload technology to download the previous and next first pictures of the current display.

If the picture is a CSS picture, you can use Csssprinte,svgsprite,iconfont, Base64 and other techniques.

If the picture is too large, you can use a specially encoded image that loads with a specially compressed thumbnail to enhance the user experience.

If the picture display area is smaller than the true size of the picture, the image should be compressed on the service side according to the business needs, and the image will be compressed and displayed in the same size.

13. How do you understand the semantics of HTML structure?

When you remove or lose a style, you can make the page appear clear structure: HTML itself is not performance, we see for example,

Search engine crawlers also rely on tags to determine the context and weights of individual keywords. In the past you may not have considered search engine crawlers as "visitors" to the site, 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 can hardly come to visit.

It is important that your page is easy to understand crawlers, because the crawler largely ignores markup for performance and focuses only on semantic tagging. SEO is mainly by the content of your site and external links.

14. Talk about the front-end point of view to do SEO need to consider what?

Learn how search engines crawl Web pages and how to index them. You need to know the basic workings of some search engines, the difference between search engines, how a robot (SE robot or web crawler) works, how a search engine sorts search results, and so on.

Meta tag optimization. Mainly includes the theme (Title), website description (Description), Keywords (Keywords). There are other hidden words, such as author (author), category (directory), Language (encoded language), etc.

How to select keywords and place keywords in Web pages. Search will have to use 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 5 or so), and then to optimize for these keywords, including keyword density (Density), correlation (relavancy), highlighting (prominency) and so on.

Learn about the main search engines. Although there are many search engines, there are a few things that can make a difference to the website traffic. For example, the main English has Google, Yahoo, Bing, etc., the Chinese have Baidu, Sogou, Youdao and so on. Different search engines do not have the same rules for crawling and indexing or sorting pages. Also understand the relationship between search engine portals and search engines, such as AOL Web search using Google search technology, MSN with Bing Technology.

Search Engine Login. After the website is finished, don't lie there waiting for the guests to fall from the sky. The easiest way to get someone to find you is to submit the site to a search engine.

Link Exchange and Link breadth (link popularity). Web content is hyperlinked to each other in hypertext (hypertext), as is the case between websites. In addition to search engines, people also surfing ("surfing") every day through links between different websites. The more links you have to your site from other sites, the more traffic you will get. What's more, the more external connections you have to your site, the more important the search engine thinks it is, and gives you a higher ranking.

HTML and CSS interview:http://www.jb51.net/css/238279.html

JavaScript interview: Http://www.jb51.net/article/56847.htm

HTML face question