Many of the interview questions came from my own experience interviewing BAT. I compiled and shared it in the hope that more front-end ers can make progress together. It is not only suitable for job seekers, but also very helpful for consolidating and reviewing the front-end basics.
And more questions are collected by me along the way, as well as from previous years. The answers are not guaranteed to be correct. If there are any mistakes or better solutions, please correct me.
The first few questions will be very basic, and the more you go, the more in-depth they will become.
Attached is the first article: BAT and major Internet companies 2014 front-end written test interview questions - JavaScript article
Html article:
1. In which browsers have the pages you created been tested? What are the kernels of these browsers?
2. There is a very important thing at the beginning of every HTML file, Doctype , do you know what this is for?
Answer: The declaration is located at the frontmost position in the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser according to which specifications to parse the page)
3. What is Quirks mode? What is the difference between it and Standards mode
Answer:
Starting from IE6, Standards mode was introduced. In standards mode, the browser tries to give standard-compliant documents the correct specification. Processed to the extent available in a given browser.
CSS was not mature enough before IE6, so browsers before IE5 had poor support for CSS. IE6 will provide better support for CSS. However, problems arise at this time, because there are many The pages are written based on the old layout method, and if IE6 supports CSS, these pages will display abnormally. How to ensure that the existing pages are not destroyed and provide a new rendering mechanism?
We often encounter this problem when writing programs, how to ensure that the original interface remains unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common approach when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if the parameter is not true, we use the old function, so that it does not destroy The original program also provides new functions. IE6 does something similar. It treats DTD as this "parameter". Because no one would write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. layout, and if not, the previous layout will be compatible. This is Quirks mode (quirks mode, weird mode, weird mode).
Difference:
There are overall differences in three aspects: 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 element content. 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 for inline elements such as will not take effect, but in quirks mode, it will take effect. .
Setting the height of percentage: In standards mode, the height of an element is determined by the content it contains. If the parent element does not set a height of percentage, it is invalid for the child element to set a height of percentage. margin:0 auto sets horizontal centering: Using margin:0 auto can center the element horizontally in standards mode, but it will fail in quirks mode.
(There are many more. It doesn’t matter what he answers. The key is to see whether the answers he answered came from his own experience, or whether he read them from articles, or even didn’t know them at all.)
4. What are the advantages of div css layout over table layout?
5.a: What are the similarities and differences between img’s alt and title? b: What are the similarities and differences between strong and em?
Answer:
a:
b:
6. Can you describe the difference between progressive enhancement and graceful degradation?
Difference: Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, working version and Continuously expand to meet the needs of future environments. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its roots in a safe zone.
The "graceful degradation" viewpoint
The "graceful degradation" viewpoint believes that websites should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).
Under this design paradigm, older browsers are considered to only provide a "poor, but passable" browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.
The "progressive enhancement" perspective
The "progressive enhancement" perspective believes that focus should be on the content itself.
Content is the reason why we build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing 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 "Graded Browser Support (Graded Browser Support)" strategy.
Then there’s the problem. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?
(Free play)
7. Why is it more effective to use multiple domain names to store website resources?
8. Please talk about your views on web standards and standards Develop an understanding of the importance of institutions.
(No standard answer) Web standards and standard-setting organizations are all designed to make the development of the web more 'healthy'. Developers follow unified standards, reduce development difficulty and development costs, and SEO will also It is better to do, and it will not cause various bugs and security issues due to misuse of code, which ultimately improves the usability of the website.
9.Please describe the difference between cookies, sessionStorage and localStorage?
SessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
The difference between web storage and cookies
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 of source, which points to the location of an external resource. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as a js script. , elements such as img pictures and frames.
When the browser parses this element, it will pause the downloading and processing of other resources until the The resource is loaded, compiled, and executed, as are elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
href is the abbreviation of Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or current document (link). If we add it to the document
Then the browser will recognize the document as a css file and download the resources in parallel without stopping. Processing of the current document. This is why it is recommended to use the link method to load css instead of using the @import method.
11. What image formats do you know will be used in web page production?
Answer:
png-8, png-24, jpeg, gif, svg.
But none of the above are the final answers the interviewer wants. The interviewer wants to hear that it's Webp. (Are you paying attention to new technologies and new things)
Popular science Webp : WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, 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.
With the same quality, the volume of WebP format images is 40% smaller than that of JPEG format images
12. Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?
Answer:
Microformats are a collection of machine-readable semantic XHTML vocabulary and are an open standard for structured data. It is a special format developed for special applications.
Advantages: Add smart data to web pages so that website content can display additional tips in the search engine results interface. (Application example: Douban, google it if you are interested)
13. After the css/js code is online, developers often optimize performance. Starting from the time the user refreshes the web page, a js Where are requests generally cached?
Answer: dns cache, cdn cache, browser cache, server cache.
14. There are a large number of pictures on one page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures and give users a better experience? experience.
15. How do you understand the semantics of HTML structure?
html itself has no performance, we see that for example
For example, if you use semantic markup, the screen reader will will "spell out" your word piece by piece, rather than trying to pronounce it in its entirety.
Using semantic markup can ensure that these devices can A meaningful way to render web pages. Ideally, the task of the viewing device is to render the web page consistent with the conditions of the device itself.
Semantic markup provides the device with the relevant information it needs, eliminating the need for It's up to you to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone may choose to display a section of text labeled with a title in bold. A handheld computer may choose to display it in a larger font. to display. Either way once you mark text as a title, you can be confident that the reading device will display the page appropriately on its own terms.
In the past, you may not have considered that search engine crawlers are also "visitors" to the website, but now they are actually extremely valuable users. Without them, search engines would not be able to Index your website, and then it will be difficult for general users to visit.
Therefore, if the title of the page file is tagged instead, the page may appear lower in the search results. In addition to improving ease of use, semantic markup facilitates the correct use 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 website and external links.
W3C has set a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things and facilitate development and maintenance. Improve development efficiency and even achieve modular development.
16. Let’s talk about what needs to be considered to do SEO well from the front-end perspective?
You need to know the basic working principles of some search engines, the differences between search engines, search robots (SE robots) How does a web crawler (or web crawler) work, how search engines sort search results, etc.
Mainly includes theme (Title), website description (Description), and keywords (Keywords). There are also other hidden texts such as Author (author), Category (directory), Language (encoding language), etc.
You must use keywords when searching. Keyword analysis and selection is one of the most important tasks of SEO. First, determine the main keywords for the website (usually around 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency), etc.
Although there are many search engines, there are only a few that play a decisive role in website traffic. For example, the English ones mainly include Google, Yahoo, Bing, etc.; the Chinese ones include Baidu, Sogou, Youdao, etc. Different search engines have different rules for crawling, indexing, and sorting pages. You also need to understand the relationship between search portals and search engines. For example, AOL uses Google's search technology for web search, and MSN uses Bing's technology.
Open Directory itself is not a search engine, but a large website directory. The main difference between it and search engines is the way in which website content is collected. The directory is manually edited and mainly includes the homepage of the website; the search engine automatically collects it and crawls a large number of content pages in addition to the homepage.
Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines have become popular. The most typical ones are Overture and Baidu, and of course Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites. There is also a lot of knowledge about optimization and ranking. You have to learn to get the most clicks with the least advertising investment.
After the website is completed, don’t lie there waiting for customers to fall from the sky. The easiest way to let others find you is to submit your website to a search engine. If you have a commercial website, the major search engines and directories will require you to pay to be included (e.g. Yahoo charges $299), but the good news is that (at least so far) the largest search engine, Google, is currently free, and it dominates Controls over 60% of the search market.
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
Css篇：
1.有哪项方式可以对一个DOM设置它的CSS样式？
2.CSS都有哪些选择器？
除了前3种基本选择器，还有一些扩展选择器，包括
那么问题来了，CSS选择器的优先级是怎么样定义的？
基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：
那么问题来了，看下列代码， 标签内的文字是什么颜色的？。
1 <style> 2 .classA{ color:blue;} 3 4 .classB{ color:red;} 5 </style> 6 7 <body> 8 9 <p class='classB classA'> 123 </p>10 11 </body>答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。
3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000
4.超链接访问过后hover样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
5.什么是Css Hack？ie6,7,8的hack分别是什么？
答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
示例如下：
1 #test { 2 width:300px; 3 height:300px; 4 5 background-color:blue; /*firefox*/ 6 background-color:red\9; /*all ie*/ 7 background-color:yellow\0; /*ie8*/ 8 +background-color:pink; /*ie7*/ 9 _background-color:orange; /*ie6*/ } 10 :root #test { background-color:purple\9; } /*ie9*/11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6.请用Css写一个简单的幻灯片效果页面
答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。
1 /**HTML**/ 2 div.ani 3 4 /**css**/ 5 .ani{ 6 width:480px; 7 height:320px; 8 margin:50px auto; 9 overflow: hidden;10 box-shadow:0 0 5px rgba(0,0,0,1);11 background-size: cover;12 background-position: center;13 -webkit-animation-name: "loops";14 -webkit-animation-duration: 20s;15 -webkit-animation-iteration-count: infinite;16 }17 @-webkit-keyframes "loops" {18 0% { 19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; 20 }21 25% {22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;23 }24 50% {25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;26 }27 75% {28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;29 }30 100% {31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;32 }33 }
7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
内联元素(inline)特性：
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、
8.什么是外边距重叠？重叠的结果是什么？
答案：
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
9.rgba()和opacity的透明效果有什么不同？
答案：
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
答案：
垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
11.如何垂直居然一个浮动元素？
1 // 方法一：已知元素的高宽 2 3 #div1{ 4 background-color:#6699FF; 5 width:200px; 6 height:200px; 7 8 position: absolute; //父元素需要相对定位 9 top: 50%;10 left: 50%;11 margin-top:-100px ; //二分之一的height，width 12 margin-left: -100px;13 }14 15 //方法二:未知元素的高宽 16 17 #div1{18 width: 200px;19 height: 200px;20 background-color: #6699FF;21 22 margin:auto;23 position: absolute; //父元素需要相对定位 24 left: 0;25 top: 0;26 right: 0;27 bottom: 0;28 }
12.px和em的区别。
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇。
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
