Shulou(Shulou.com)06/03 Report--

This article mainly explains "summing up the 2014 front-end written test questions of BAT and major Internet companies". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "summing up the 2014 front-end written test questions of BAT and major Internet companies".

1. Which browsers have you tested the page you made? 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 the joint development of webkit,Google and Opera Software)

two。 There's something important at the beginning of every HTML file, Doctype. Do you know what this is for?

Answer: the declaration is at the front of the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses.

(key: tell the browser what specification to follow to parse the page)

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

Answer:

Starting with IE6, the Standards mode is introduced, in which browsers try to properly handle standards-compliant documents to the extent that they are in a given browser.

Before IE6, CSS is not mature enough, so browsers such as IE5 have poor support for CSS, and IE6 will provide better support for CSS. However, the problem arises at this time, because many pages are written based on the old layout, and if IE6 supports CSS, it will make these pages display abnormally, how to ensure that existing pages will not be destroyed and a new rendering mechanism will be provided?

When writing programs, we often encounter the problem of how to ensure that the original interface remains the same and provide more powerful functions, especially when the new functions are not compatible with the old ones. A common way to encounter this problem is to add parameters and branches, that is, when a parameter is true, we use the new feature, and if the parameter is not true, we use the old function, so that we do not destroy the original program. And provide new features. IE6 is similar to this, it takes DTD as this "parameter", because no one will write DTD on the previous page, so IE6 assumes that if you write DTD, it means that the page will use a better layout that supports CSS, and if not, it will use the previous layout that is compatible with each other. This is the Quirks mode (eccentric mode, weird mode, weird mode).

Difference:

In general, there are three differences in layout, style parsing, and script execution.

Box model: in the W3C standard, if you set the width and height of an element, it refers to the width and height of the content of the element, while in Quirks mode, the width and height of IE also include padding and border.

Set the height and width of inline elements: in Standards mode, setting wdith and height to inline elements such as others will not take effect, but in quirks mode, it will.

Set the height of the percentage: in standards mode, the height of an element is determined by the contents it contains. If the parent element does not set a percentage of the height, the child element sets a percentage of the height is invalid with the margin:0 auto setting horizontal center: use margin:0 auto to center the element horizontally in standards mode, but invalidate in quirks mode.

(there are many more. It doesn't matter what he answers. The key is to see whether what he has answered is the result of his own experience, or whether he has read the article, or even has no idea. )

What are the advantages of 4.div+css layout over table layout?

It is more convenient to change the version as long as you change the css file.

The page loading speed is faster, the structure is clear, and the page display is simple.

Performance is separated from structure.

Easy to optimize (seo) search engines are more friendly and easier to rank at the top.

What are the similarities and differences between 5.a:img 's alt and title? The similarities and differences between b:strong and em?

Answer:

A:

Alt (alt text): for user agents (UA) that cannot display images, forms, or applets, the alt property is used to specify alternate text. The language of the replacement text is specified by the lang property. (IE browsers will display alt as tool tip when there is no title.)

Title (tool tip): this attribute provides advisory information for the element that sets this attribute.

B:

Strong: bold emphasis on the importance of labels, emphasis, and content

Em: italics emphasize the label, more strongly, indicating the emphasis of the content

6. Can you describe the difference between gradual enhancement and elegant degradation?

Progressive enhancement of progressive enhancement: build pages for low-version browsers to ensure the most basic functions, and then improve the effect, interaction and additional functions for advanced browsers to achieve a better user experience.

Gracefully downgrade graceful degradation: build full functionality from the start, and then be compatible with lower-version browsers.

Difference: elegant demotion starts with a complex status quo and attempts to reduce the supply of user experience, while progressive enhancement starts with a very basic, functional version and expands to meet the needs of the future environment. Demotion (functional decay) means looking back, while progressive enhancement means looking forward while ensuring that its roots are in a safe zone.

The viewpoint of "elegant demotion"

The "elegant downgrade" view is that websites should be designed for the most advanced and perfect browsers. On the other hand, the testing work under browsers that are considered to be "outdated" or missing is scheduled at the end of the development cycle, and the test objects are limited to the previous version of mainstream browsers (such as IE, Mozilla, etc.).

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

The viewpoint of "progressive enhancement"

The view of "progressive enhancement" is that we should focus on the content itself.

Content is the incentive for us to build a website. Some websites display it, some collect it, some seek, some operate, and some even contain all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design example. This is also why it was immediately Yahoo! The reasons for adopting and building its hierarchical browser support (Graded Browser Support) strategy.

Then there's a problem. Now that the product manager sees that IE6,7,8 web pages have a lot less rounded corners, CSS3, and compatibility (using picture backgrounds, giving up CSS3) than higher versions of modern browsers, how can you convince him?

(free play)

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

CDN caching is more convenient

Break the concurrency limit of browser

Save cookie bandwidth

Save the number of connections in the main domain name and optimize the response speed of the page

Prevent unnecessary security problems

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

(no standard answer) both web standards and standard-setting organizations are designed to make web develop more healthily. Developers follow uniform standards, reduce the difficulty of development, reduce development costs, and SEO will be easier to do, and will not cause various BUG and security problems due to code abuse, and ultimately improve the ease of use of the website.

9. Could you describe the difference between cookies,sessionStorage and localStorage?

SessionStorage is used to store data in a session (session) locally, which is accessible only to pages in the same session and is destroyed when the session ends. So sessionStorage is not persistent local storage, just session-level storage. On the other hand, localStorage is used for persistent local storage, and the data will never expire unless it is actively deleted.

The difference between web storage and cookie

The concept of Web Storage is similar to that of cookie, except that it is designed for greater storage capacity. The size of Cookie is limited, and every time you request a new page, Cookie is sent, which virtually wastes bandwidth. In addition, cookie also needs to specify a scope and cannot be called across domains.

In addition, Web Storage has methods such as setItem,getItem,removeItem,clear, unlike cookie, which requires front-end developers to encapsulate setCookie,getCookie. But Cookie is also impossible or missing: the role of Cookie is to interact with the server as part of the HTTP specification, while Web Storage is simply created to "store" 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 relationship between the current document and the referenced resource.

Src is an abbreviation for source, pointing to the location of external resources, and the content pointed to will be embedded in the current tag location in the document; when requesting src resources, the resources they point to will be downloaded and applied to the document, such as js scripts, img images, frame and other elements.

When the browser parses to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as pictures and frames, similar to embedding the pointed resource in the current tag. This is why the js script is placed at the bottom instead of the header.

Href is an acronym for Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or the current document (link), if we add

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

11. What are the picture formats that you know will be used to make a web page?

Answer:

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

But none of the above is the final answer the interviewer wants. The interviewer wants to hear it's Webp,Apng. (do you pay attention to new technologies and new things?)

Take a look at the Webp:WebP format, a format developed by google to speed up the loading of pictures. The image compression volume is only about 2 JPEG 3, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.

At the same quality, the volume of an image in WebP format is 40% smaller than that in JPEG format.

Apng: the full name is "Animated Portable Network Graphics", which is a bitmap animation extension of PNG and can achieve dynamic picture effects in png format. It was born in 2004, but it has not been supported by major browser manufacturers. Until recently, it has been supported by iOS safari 8, which is expected to replace GIF as the next generation dynamic graph standard.

twelve。 Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?

Answer:

Microformat (Microformats) is a collection of semantic XHTML words that make it machine-readable and an open standard for structured data. Is a special format for special applications.

Pros: add smart data to the page so that the site content can display additional prompts in the search engine results interface. (application example: Douban, interested in self-google)

13. After the launch of css/js code, developers often optimize performance, starting from the user refreshing the web page, where will a js request be cached?

Answer: dns cache, cdn cache, browser cache, server cache.

14. There are a large number of pictures on a page (large e-commerce sites), loading is very slow, what methods do you have to optimize the loading of these images to give users a better experience.

The picture is loaded lazily, and a scroll bar event can be added in the unvisible area of the page to determine the distance between the position of the picture and the top of the browser and the distance between the page and the page. If the former is less than the latter, load first.

If it is a slide show, photo album, etc., you can use the picture preloading technology to download the first and second one of the currently displayed pictures first.

If the picture is a css picture, you can use CSSsprite,SVGsprite,Iconfont, Base64 and other technologies.

If the picture is too large, you can use a specially encoded picture, and a particularly powerful compressed thumbnail will be loaded first to improve the user experience.

If the image display area is smaller than the true size of the picture, the image is compressed according to the business needs on the server, and the size of the compressed image is the same as that of the display.

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

When the page is removed or the style is lost, it gives the page a clear structure:

Html itself does not show, we see, for example, bold, font size 2em, bold Is bold, do not think that this is the performance of html, in fact, html default css style in play, so removed or lost style can make the page show a clear structure is not the advantage of semantic HTML structure, but browsers have default style, default style is also designed to better express the semantics of html, it can be said that the browser default style and semantic HTML structure are inseparable.

Screen readers (if visitors are visually impaired) will "read" your web page entirely according to your tags.

For example, if you use semantic tags, the screen reader will "spell" your word one by one, rather than trying to pronounce it completely.

Devices such as PDA and mobile phones may not be able to render web pages like browsers on ordinary computers (usually because of their weak support for CSS)

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

Semantic tagging provides the relevant information needed for the device, eliminating the need to consider all possible displays (including existing or future new devices). For example, a mobile phone can choose to display a paragraph of text marked with a title in bold. PDAs may be displayed in larger fonts. Either way, once you mark the text as a title, you can be sure that the reading device will display the page appropriately according to its own conditions.

Search engine crawlers also rely on tags to determine the weight of context and keywords.

In the past, you may not have considered that search engine crawlers are also visitors to the site, but now they are actually extremely valuable users. Without them, search engines will not be able to index your site, and it will be difficult for ordinary users to visit.

Whether your page is easy for the crawler to understand is important because the crawler largely ignores the markup for presentation and focuses only on semantic markup.

Therefore, if the title of the page file is marked instead of, the page may be lower in the search results. In addition to improving ease of use, semantic tags are conducive to the correct use of CSS and JavaScript, because they themselves provide many "hooks" to apply page styles and behaviors.

SEO depends mainly on the content and external links of your site.

Easy for team development and maintenance

W3C has set a good standard for us, and everyone in the team follows this standard, which can reduce a lot of differentiated things, facilitate development and maintenance, improve development efficiency, and even achieve modular development.

16. What do you need to consider to do a good SEO from a front-end point of view?

Learn how search engines crawl and index web pages

You need to know some basic principles of search engines, the differences between search engines, how search robots (SE robot or web crawler) work, how search engines sort search results, and so on.

Meta tag optimization

It mainly includes theme (Title), website description (Description), and keywords (Keywords). There are other hidden words such as Author (author), Category (catalogue), Language (coded language), etc.

How to select keywords and place keywords in a web page

You have to use keywords to search. Keyword analysis and selection is one of the most important tasks of SEO. First of all, we should determine the main keywords for the website (usually about 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency) and so on.

Learn about major search engines

Although there are many search engines, there are only a few that play a decisive role in website traffic. For example, English is mainly Google,Yahoo,Bing, while Chinese is Baidu, Sogou, youdao and so on. Different search engines have different rules for crawling, indexing and sorting pages. Also understand the relationship between search portals and search engines, such as AOL web search using Google search technology, MSN using Bing technology.

Major Internet directories

Open Directory itself is not a search engine, but a large website directory. The main difference between it and the search engine is the way the website content is collected. The catalog is manually edited and mainly contains the home page of the website; the search engine collects automatically and crawls a large number of content pages in addition to the home page.

Pay-per-click search engine

Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines are becoming popular. The most typical ones are Overture and Baidu, as well as Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites, which also has a lot of knowledge of optimization and ranking, you have to learn to get the most hits with the least advertising investment.

Search engine login

When 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 the search engine. If you have a commercial site, major search engines and directories will require you to pay for inclusion (for example, Yahoo costs $299), but the good news is (at least so far) that Google, the largest search engine, is free and dominates more than 60% of the search market.

Link exchange and link extensiveness (Link Popularity)

The content of web pages is linked to each other in the form of hypertext (Hypertext), and the same is true between websites. In addition to search engines, people also Surfing ("surfing") through links between different websites every day. The more links other sites have to your site, the more visits you will get. More importantly, the more external links to your site, the more important it will be considered by search engines, thus giving you a higher ranking.

Reasonable use of labels

Css article:

1. Is there any way to set the CSS style of an DOM?

External style sheet, introducing an external css file

Internal stylesheet, putting css code inside the tag

Inline styles, defining css styles directly inside the HTML element

What selectors does 2.CSS have?

Derived selector (declared with HTML tag)

Id selector (declared with DOM's ID)

Class selector (declared with a style class name)

Attribute selector (declared with the attribute of DOM, which is not supported by CSS2,IE6, is not commonly used, and even if you don't know)

In addition to the first three basic selectors, there are some extended selectors, including

Descendant selector (using space spacing, such as div .a {})

Group selector (using comma intervals, such as psperm div recording a {})

So the question is, how is the priority of the CSS selector defined?

Basic principles:

In general, the more special the selector, the higher its priority. That is, the more accurately the selector points, the higher its priority.

Complex calculation methods:

Use 1 to indicate the priority of the derived selector

Use 10 to indicate the priority of the class selector

Use 100s to indicate the priority of ID selector

Div.test1 .span var priority 1 "10 + 10 + 1"

Span#xxx. "li priority 1" 100 + 10 + 1

# xxx li priority 100 + 1

So here's the problem. Look at the following code.

What color is the text in the label?

CSS Code copies content to the clipboard

.classA {color:blue;}

.classB {color:red;}

one hundred and twenty three

Answer: red. It is related to the order in which the styles are defined in the file, that is, the following overrides the front, regardless of the order in.

What attributes can be defined in 3.CSS so that a DOM element is not displayed in the browser's visual range?

The most basic:

Set the display property to none, or the visibility property to hidden

Skillful:

Set width and height to 0, transparency to 0, and z-index position to-1000

4. What is the problem with the hover style that does not appear after hyperlink access? How to solve?

Answer: the hyperlink styles that have been clicked and visited no longer have hover and active. The solution is to change the order of CSS attributes: L-V-H-A (link,visited,hover,active)

5. What is Css Hack? What are the hack of ie6,7,8?

Answer: the process of writing different CSS code for different browsers is CSS hack.

Examples are as follows:

CSS Code copies content to the clipboard

# test {

Width:300px

Height:300px

Background-color:blue; / * firefox*/

Background-color:red\ 9; / * all ie*/

Background-color:yellow\ 0; / * ie8*/

+ background-color:pink; / * ie7*/

_ background-color:orange; / * ie6*/}

: root # test {background-color:purple\ 9;} / * ie9*/

@ media all and (min-width:0px) {# test {background-color:black\ 0;}} / * opera*/

@ media screen and (- webkit-min-device-pixel-ratio:0) {# test {background-color:gray;}} / * chrome and safari*/

6. Please write a simple slide effect page in Css

Answer: know to use css3. Use animation animation to achieve a simple slide effect.

CSS Code copies content to the clipboard

/ * * HTML**/

Div.ani

/ * * css**/

.ani {

Width:480px

Height:320px

Margin:50px auto

Overflow: hidden

Box-shadow:0 0 5px rgba (0re0re0j0pl 1)

Background-size: cover

Background-position: center

-webkit-animation-name: "loops"

-webkit-animation-duration: 20s

-webkit-animation-iteration-count: infinite

}

@-webkit-keyframes "loops" {

0% {

Background:url (http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat

}

25% {

Background:url (http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat

}

50% {

Background:url (http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat

}

75% {

Background:url (http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat

}

100% {

Background:url (http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat

}

}

7. What is the specific difference between inline elements and block-level elements? Can the padding and margin of in-line elements be set?

Block-level element (block) properties:

Always occupy a single line, starting with another line, and subsequent elements must be displayed on a separate line.

Width (width), height (height), inner margin (padding) and outer margin (margin) can be controlled.

Inline element (inline) properties:

On the same line as the adjacent inline elements

The width (width), height (height), the top/bottom of the inner margin (padding-top/padding-bottom), and the top/bottom of the outer margin (margin-top/margin-bottom) cannot be changed (that is, the left and right of padding and margin can be set), that is, the size of the text or picture inside.

So the question is, browsers also have default natural inline-block elements (with internal dimensions, height and width can be set, but not automatic line wrapping), what are there?

Answer:,

、 、 、 .

8. What is outer margin overlap? What is the result of overlap?

Answer:

The overlap of outer margins is called margin-collapse.

In CSS, the outer margins of two adjacent boxes (either brotherly or ancestral) can be combined into a separate outer margin. This way of combining the outer margin is called folding, and the resulting outer margin is called the folded outer margin.

The folding results follow the following calculation rules:

1. When two adjacent outer margins are positive, the result of folding is a larger value between them.

two。 When the two adjacent outer margins are negative, the folding result is the larger absolute value of both.

3. When the two outer margins are positive and negative, the folding result is the sum of the two.

What is the difference between the transparency effects of 9.rgba () and opacity?

Answer:

Both rgba () and opacity can achieve transparency, but the biggest difference is that opacity acts on the element and the transparency of all the contents within the element

Rgba (), on the other hand, only acts on the color of the element or its background color. (setting the child elements of rgba transparent elements will not inherit transparency! )

What are two attributes in 10.css that allow text to overlap vertically and horizontally?

Answer:

Vertical orientation: line-height

Horizontal: letter-spacing

So the question is, do you know anything about the magic uses of letter-spacing?

Answer: can be used to eliminate the problem of newline spaces between inline-block elements.

11. How to center a floating element vertically?

CSS Code copies content to the clipboard

/ / method 1: know the height and width of the element

# div1 {

Background-color:#6699FF

Width:200px

Height:200px

Position: absolute; / / parent element needs relative positioning

Top: 50%

Left: 50%

Margin-top:-100px; / / 1/2 height,width

Margin-left:-100px

}

/ / method 2: the height and width of unknown elements

# div1 {

Width: 200px

Height: 200px

Background-color: # 6699FF

Margin:auto

Position: absolute; / / parent element needs relative positioning

Left: 0

Top: 0

Rightright: 0

Bottombottom: 0

}

So the question is, how to center one vertically?

? (in a simpler way. )

CSS Code copies content to the clipboard

# container / /

The container settings are as follows

{

Display:table-cell

Text-align:center

Vertical-align:middle

}

The difference between 12.px and em.

Px and em are both units of length. The difference is that the value of px is fixed, and it is easy to calculate as much as it is specified. The value of em is not fixed, and em inherits the font size of the parent element.

The default font height for browsers is 16px. So all unadjusted browsers match: 1em=16px. So 12px=0.75em 10px=0.625em.

13. Describes a CSS file for "reset" and how to use it. Do you know normalize.css? You know the difference between them?

There are so many reset styles that any front-end developer must have a common reset CSS file and know how to use them. Are they doing it blindly or do they know why? The reason is that different browsers have different default styles for some elements, and if you don't deal with them, there is a necessary risk or more dramatic occurrence in different browsers.

You may use Normalize instead of your reset style file. It does not reset all styles, but only provides a reasonable set of default style values. It makes many browsers consistent and reasonable without disturbing other things (such as bold headings).

In this respect, every reset cannot be done. It does have more than a reset, and it deals with quirks you never have to consider, such as inconsistent audio elements or line-height inconsistencies in HTML.

What are 14.Sass and LESS? Why do people use them?

They are CSS preprocessors. It's a layer of abstraction on CSS. They are a special syntax / language compiled into CSS.

For example, Less is a dynamic style language. CSS endows dynamic language features such as variables, inheritance, operations, and functions. LESS can be run either on the client side (supporting IE 6 games, Webkit, Firefox) or on the server side (with Node.js).

Why use them?

The structure is clear and easy to expand.

Browser private syntax differences can be easily shielded. Needless to say, it encapsulates repeated processing of browser syntax differences and reduces meaningless mechanical labor.

Multiple inheritance can be easily implemented.

Fully compatible with CSS code, it can be easily applied to old projects. LESS only extends the CSS syntax, so old CSS code can also be compiled with LESS code.

What is the difference between 15.display:none and visibility:hidden?

Display: hides the corresponding element but does not occupy the original space of the element.

Visibility: hides the corresponding element and squeezes the original space of the element.

That is, after using the CSS display:none attribute, various attribute values such as the width and height of the HTML element (object) will be "lost"; while after using the visibility:hidden attribute, the HTML element (object) is only visually invisible (completely transparent), and the space it occupies still exists.

16. Did you know that css has a content attribute? What's the use? What are the applications?

Answer:

know. The content attribute of css is specifically applied to before/after pseudo-elements to insert generated content.

The most common application is to use pseudo-classes to clear floats.

CSS Code copies content to the clipboard

/ / A common code that uses pseudo-classes to clear floats

.clearfix: after {

Content: "."; / / the content attribute is utilized here

Display:block

Height:0

Visibility:hidden

Clear:both;}

.clearfix {

* zoom:1

}

The after pseudo-element generates a block-level element with a dot content after the element through content, and then clears the float using clear:both.

So the question continues, do you know the css counter (sequence number characters are automatically incremented)? How do I implement css counters through the css content property?

Answer: the css counter is implemented by setting two properties counter-reset and counter-increment, and a method counter () / counters () in conjunction with the after / before pseudo-class.

At this point, I believe you have a deeper understanding of "summing up BAT and the 2014 front-end written test questions of major Internet companies". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.