一份来自于全球的前端面试题清单，看看老外喜欢考哪些题（部分有答案）

26、你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?

27、浏览器同一时间可以从一个域名下载多少资源？

28、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

29、请写一个简单的幻灯效果页

30、什么是”白屏”？什么是 FOUC (无样式内容闪烁)？如何避免？

31、请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)

32、doctype(文档类型) 的作用是什么？

33、浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

34、HTML 和 XHTML 有什么区别？

35、如果页面使用’application/xhtml+xml’会有什么问题吗？

【10 Typical HTML Interview Exercises】

36、DOCTYPE 声明的作用、取值与区别

37、常见的 meta 标签有哪些？移动端呢？

38、关于 HTML 语义化知道哪些？

39、是否有关注 HTML 标准的演进？比较关注哪些方面？能否举一些例子？

40、Markup validation

41、The main element

42、WAI-ARIA

43、The small element

44、Subheadings 副标题

45、Images and accessibility 图像和可访问性

46、The time element

47、meter and progress

48、The longdesc attribute

49、The mark element

【12 Essential HTML5 Interview Questions】

50、What were some of the key goals and motivations for the HTML5 specification?HTML5规范的一些关键目标和动机是什么？

51、What are some of the key new features in HTML5?

52、What are “web workers”?

53、How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?您如何指定HTML5文档使用的字符集？这与旧的HTML标准有什么不同？

54、Discuss the differences between an HTML specification and a browser’s implementation thereof.讨论HTML规范和浏览器的实现之间的差异。

55、Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.

56、Can a <section> contain <article> elements? Can an <article> contain <section> elements? Provide usage examples.

57、Can a web page contain multiple <header> elements? What about <footer> elements?

58、Describe the relationship between the <header> and <h1> tags in HTML5.

59、Give a simple implementation of the <video> tag to embed a video stored at http://www.example.com/amazing_video.mp4.

60、Give the video a width of 640 pixels by 360 pixels. Provide the user with controls.

61、Write the code necessary to create a 300 pixel by 300 pixel <canvas>. Within it, paint a blue 100 pixel by 100 pixel square

62、with the top-left corner of the square located 50 pixels from both the top and left edges of the canvas.

63、What is HTML5 Web Storage? Explain localStorage and sessionStorage.

【35 Helpful HTML & HTML5 Interview Questions & Answers】

64、What are the limitations when serving XHTML pages?

65、How many HTML tags are should be used for the most simple of web pages?

66、How do you make comments without text being picked up by the browser?

67、What is the difference between linking to an image, a website, and an email address?

68、My hyperlink or image is not displaying correctly, what is wrong with it?

69、What is the syntax difference between a bulleted list and numbered list?符号列表和编号列表之间的语法差异是甚么？

70、What is the difference between <div> and <frame>?

71、what’s the real difference between HTML and HTML5?

72、What are the new image elements in HTML5?

73、What are some of the major new API’s that come standard with HTML5?

74、What is the difference in caching between HTML5 and the old HTML?

【40 important HTML 5 Interview questions with answers】

75、How to draw rectangle using Canvas and SVG using HTML 5 ?

76、What is the use of column layout in CSS?

77、What is the lifetime of local storage?

78、What is WebSQL?

79、Is WebSQL a part of HTML 5 specification?

80、So how can we use WebSQL ?

81、So how do we implement application cache in HTML 5 ?

82、What is fallback in Application cache?什么是应用程序缓存中的回退？

【HTML Interview Questions and Answers - Freshers & Experienced】

83、What are some of the common lists that can be used when designing a page?

84、What is the advantage of collapsing white space?

85、Is it possible to list elements straight in an html file?是否可以在html文件中直接列出元素？

86、Does a hyperlink apply only to text?

87、What hierarchy is being followed when in style sheets?

88、What happens if the list-style-type property is used on a non-list element like a paragraph?
89、What is the advantage of using frames?使用框架的优点是什么？

90、How can I hide my source?

91、How will you align a table to the right or left?

92、Why doesn‘t <TABLE WIDTH="100%"> use the full browser width?

93、How would you automatically transfer your visitors to a new web page?

94、You want only a vertical scrollbar and no horizontal scrollbar on your page. How would you do it?

95、How do you refer to the .css file in the web page?

96、What is a <dl> tag in HTML?

97、What are empty HTML elements?

98、How to create nest tables within tables in HTML?

99、Explain Non Breaking space in HTML.

100、How do I link to a location in the middle of an HTML document?锚点

101、Explain Cell Padding and Cell Spacing.

102、How to create a button which acts like a link?

103、What is difference between HTML and XHTML?

104、How many types CSS can be include in HTML?

105、What are new Media Elements in HTML5?

106、Explain various HTML list tags.

107、Explain HTML background.

108、What is the Use of SPAN in HTML and give one example?

109、What are the different way in which website layout can be made?

110、Differentiate different types of Doctypes from one another

111、Why it is important to set the meta information?

112、What are the different types of entities in HTML?

113、What does the elements mean in syntax given for URL in HTML?

114、How to add helper plug-ins on the webpage using HTML?如何使用HTML在网页上添加助手插件？

115、What is the purpose of iframe in HTML?

116、What is the purpose of canvas in HTML?

117、What are the different types of frames tags used in HTML?

118、Write a code to change the color of the background or text? Explain the elements involved in it.

119、What is the main function of <pre> tag in HTML?

120、How can tables be made nested in HTML?

121、How can tables be used inside a form? Explain with an example.表格嵌套表格

122、What are the different ways to use different colors for different links or same link?

123、How to upload files using HTML to website?

124、Write a program to include the custom button with the form编写程序以包含带有表单的自定义按钮

125、How to prevent the display of “Getting framed in HTML?如何防止显示“获取HTML框架？

126、How to include a frameset inside another frameset?

127、How to update two frames at the same time using HTML?如何使用HTML同时更新两个帧？

【Top 50 HTML Interview Questions & Answers】

128、What is HTML?

129、What are tags?

130、Do all HTML tags come in pair?

131、What are some of the common lists that can be used when designing a page?

141、How do you insert a comment in html?

142、Do all character entities display properly on all systems?

143、What is image map?

144、What is the advantage of collapsing white space?

145、Can attribute values be set to anything or are there specific values that they accept?

146、How do you insert a copyright symbol on a browser page?

147、Do older html files work on newer browsers?较旧的html文件在较新的浏览器上工作？

148、Does a hyperlink apply to text only?超链接是否仅适用于文字？

149、If the user’s operating system does not support the needed character, how can the symbol be represented?

150、How do you change the number type in the middle of a list?

151、How do you create multicolored text in a webpage?如何在网页中创建多彩文字？

152、Why are there both numerical and named character entity values?为什么有数字和命名的字符实体值？

153、What is the advantage of grouping several checkboxes together?

154、What will happen if you overlap sets of tags?如果您重叠标签集，会发生什么？

155、What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the html file?

156、Is it possible to set specific colors for table borders?

157、What other ways can be used to align images and wrap text?

158、Can a single text link point to two different web pages?

159、What is the difference between the directory and menu lists and the unordered list?

160、What are the limits of the text field size?

161、Do <th> tags always need to come at the start of a row or column?

162、What is the relationship between the border and rule attributes?

163、What is a marquee?

164、How do you create a text on a webpage that will allow you to send an email when clicked?

165、Are <br> tags the only way to separate sections of text?

166、Are there instances where text will appear outside of the browser?文本是否会出现在浏览器外面？

167、How are active links different from normal links?

168、Can several selectors with class names be grouped together?可以将具有类名称的几个选择器分组在一起吗？

【HTML Interview Questions】

169、Is audio tag supported in HTML 5?

170、What is the difference between progress and meter tag?

171、What is the use of figure tag in HTML 5?

172、What is button tag?

173、What does details and summary tag?

174、What is datalist tag?

175、How tags are migrated from HTML4 to HTML5?如何将标签从HTML4迁移到HTML5？

176、If I do not put <!DOCTYPE html> will HTML 5 work?

177、What is the use of required attribute in HTML5?

178、What are the new <input> types for form validation in HTML5?

【Front End Developer Employer Questions】

179、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

180、HTML与XHTML——二者有什么区别

181、Semantics fanatic or divs and spans as necessary?

182、Do you use WAI-ARIA?

【JOB INTERVIEW QUESTIONNAIRE】

183、Can you describe the difference between progressive enhancement and graceful degradation?

184、Explain what "Semantic HTML" means.

【Web Developer Interview Questions And Answers】

185、Are you familiar with Jade or Haml?

186、What is the advantage of collapsing white space?【HTML中只能用一个空格符】

【Frontend Interview Questions and Answers for experienced】

187、Why do we need to use W3C standard code?

【Front End Web Developer interview questions】

188、Why is HTML5 History API so essential for all single page applications?【History】

189、Why would you use <strong> instead of <b> ?

【Preparing for a Front-End Web Development Interview in 2017】

190、Accessibility concerns, for example, making sure an input checkbox has a larger responding area (use label “for”). Also, role=”button”, role=”presentation”, etc.【属性】辅助功能，例如，确保输入复选框具有较大的响应区域（使用标签“for”）。另外，role =“button”，role =“presentation”等

二、CSS

【CSS: interview questions】

1、What does float do?【float】

2、How can you clear sides of a floating element?【clear】

3、Does css properties are case sensitive?

4、Why css selectors mixed up with cases don‘t apply the styles?

5、Does margin-top or margin-bottom has effect on inline element?

6、Does padding-top or padding-bottom has effect on inline element?

7、Does padding-left or padding-right or margin-left or margin-right has effect on inline element?

8、If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?

9、The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.

10、In a HTML document, the pseudo class :root always refers to the <html> element.

11、The translate() function can move the position of an element on the z-axis.

12、Which one would you prefer among px, em % or pt and why?【units】

13、How absolute, relative, fixed and static position differ?【position】

14、What are the differences between visibility hidden and display none?【display vs visibility】

15、What are the differences between inline, block and inline-block?【inline block】

16、What are the properties related to box model?【box model】

17、Does overflow: hidden create a new block formatting context?【overflow】

18、How could you apply css rules specific to a media?【media queries】

19、What is the use of only?

20、Does the screen keyword apply to the device‘s physical screen or the browser‘s viewport?

21、What are the some pseudo classed u have used?【pseudo class】

22、How do you align a p center-center inside a div?【vertical Center】

23、How do you optimize css selectors?【optimize selector】

24、How can you load css resources conditionally?【@import】

25、Why would you use sprites?【sprite】

26、What is specificity? How do u calculate specificity?【specificity】计算优先级

27、What is shadow DOM?【shadow DOM】

28、What do you know about transition?【transition】

29、What are the different css filter you can use?【filter】

30、What are the reasons to use preprocessor?【pre processor】

31、What would be the color of text "I am awesome" for he following rules?【see & tell】优先级

32、What will happen to the position of #myDude?【Position related】

33、On page load, will mypic.jpg get downloaded by the browser?【download resources】

34、What will this selector do?【read selector】

【Front-end-Developer-Interview-Questions中文】

35、请解释 CSS 动画和 JavaScript 动画的优缺点。

36、CSS 中类 (classes) 和 ID 的区别。

37、请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？

38、请解释浮动 (Floats) 及其工作原理。

39、描述z-index和叠加上下文是如何形成的。

40、请描述 BFC(Block Formatting Context) 及其如何工作。

41、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？

42、有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？

43、你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？

44、你用过媒体查询，或针对移动端的布局/CSS 吗？

45、你熟悉 SVG 样式的书写吗？

46、如何优化网页的打印样式？

47、在书写高效 CSS 时会有哪些问题需要考虑？

48、使用 CSS 预处理器的优缺点有哪些？请描述你曾经使用过的 CSS 预处理器的优缺点。

49、如果设计中使用了非标准的字体，你该如何去实现？

50、请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？

51、请描述伪元素 (pseudo-elements) 及其用途。

52、请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

53、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

54、请罗列出你所知道的 display 属性的全部值

55、请解释 inline 和 inline-block 的区别？

56、请解释 relative、fixed、absolute 和 static 元素的区别

57、CSS 中字母 ‘C‘ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？

58、你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？

59、请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？

60、为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

61、你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？

62、请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

63、CSS中类选择器和ID选择器的区别？

64、CSS选择器有哪些？

65、PNG,GIF,JPEG的区别及如何选？

66、CSS Hack原理及常用Hack

67、CSS特殊性计算

68、CSS中常用的颜色单位

69、如果设计中使用了非标准的字体，你该如何去实现？

70、块级元素的相关特点

【25 Helpful CSS Interview Questions and Answers】

71、CSS 有几种引入方式？各自的优缺点？

72、不同浏览器上的默认样式，如何处理？（normalize/sanitize）

73、盒模型、IE 6/7 与现代浏览器的区别、如何兼容

74、BFC 的概念

75、containing block 和 stacking context 的概念和计算

76、position 和 display 各有几种取值？说说他们的含义与用途

77、position: absolute 和 float 有什么区别

78、如何清除浮动？为什么要清除浮动？

79、选择器相关问题

80、specificity 的计算

81、伪类和伪元素的区分

82、选择器性能（浏览器如何进行匹配）

83、CSS3 和 CSS4 选择器知道哪些

84、CSS 优化

85、网络加载方面有哪些手段

86、渲染性能的方面呢

87、用过哪些 CSS 方面的工具

88、随便谈谈 CSS 工程化

89、CSS 实现元素的水平垂直居中

90、实现一个圣杯布局

91、Explain what a class selector is and how it’s used:

92、What are pseudo classes and what are they used for?

93、Explain the three main ways to apply CSS styles to a Web page:

94、What is grouping and what is it used for? 什么是分组？用于做什么？

95、What is an ID selector and how is it used?

96、What is a Class selector and how does it differ from an ID selector?

97、What are child selectors?

98、What are the different CSS properties used to change dimensions and what values can they accept?

99、How is the float property implemented in CSS?

100、What is the CSS Box Model used for? What are the elements that it includes?

101、How to restore the default property value using CSS?

102、What is the purpose of pseudo-elements and how are they made?

103、How are inline and block elements different from each other?

104、What is the purpose of the z-index and how is it used?

105、What are the advantages and disadvantages of External Style Sheets?

106、List the main CSS style sheet properties:

107、Which online resources do you refer to when having issues with CSS?

108、What are the various techniques for clearing floats?

109、Explain the difference between visibility:hidden and display:none

110、What are some of the new features and properties in CSS3?

111、Why shouldn’t I use fixed sized fonts ?

112、Which font names are available on all platforms ?

113、Do you use grid systems, and if so, what do you prefer?

114、What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)

115、Why and how are shorthand properties used? Give examples.

116、Effectively Communicating Your Skills

【CSS interview questions and answers】

117、What are different ways to integrate a CSS into a Web page?

118、If background and colour should always be set together, why do they exist as separate properties?

119、Explain external Style Sheet? How would you link to it?

120、What are the advantages and disadvantages of External Style Sheets?

121、What are the advantages and disadvantages of Embedded Style Sheets?

122、What are the advantages and disadvantages of Inline Styles?

123、How can you eliminate the blue border around linked images on web page?

124、What is CSS selector?

125、What is Tweening?

126、Explain RWD.

127、What is the use of CSS sprites?

128、What is the syntax to link external style sheet?

129、How embedded style can be linked with HTML documents?

130、Why imported is an easy way to insert the file?

131、How do I combine multiple sheets into one?

132、What are the rules in CSS ruleset?

133、What is the CLASS selectors used for?

134、What is the difference between class selector and ID selector?

135、What is contextual selector?

136、What do you understand by parent-child selector?

137、What is ‘important’ declaration used in CSS?

138、Is there any provision to include one or more declaration in a selector?

139、What is the use and syntax of class in CSS?

140、How grouping happens inside a CSS?

141、What is the purpose of pseudo-elements?

142、How pseudo-classes are different from pseudo-elements?

143、What does cascade and cascading order defines?

144、What are the different sorting methods used inside the cascading order?

145、How inline and block elements are different from each other?

146、How does inheritance work in CSS?

147、What are the advantages of the external over inline style methods?

148、How do you override the underlining of hyperlinks?

149、How to center the block-elements with CSS?

150、What will happen if we will use floats across the page with 100% width?

151、What is the Difference between id and class?

152、How to restore the default property value using CSS?

153、What is the purpose of Nesting Selectors?

154、How CSS float works?

155、What is the use of Media Types in CSS?

156、What are the different Media Types included in CSS?

157、Why CSS Box Model is used? What are the elements that it includes?

158、Write the css code showing the usage of all the background properties.

159、How are contextual selectors used in CSS?

160、How can the same properties be defined for different elements without repeating them again and again?

161、How can imported style sheets be linked? Explain with the help of an example?

162、Explain with the help of an example the usage of a parent-child selector.

163、Why should inline styles be used carefully?

164、How do hexadecimal color codes differ from RGB values?十六进制颜色代码与RGB值有何不同？

165、What is the use of a pseudo class? Explain with the help of an example?

166、How is a CSS executed in case of more than one conflicting rule?

167、Explain with the help of examples how the display property is used in CSS.

168、Explain what are image sprites and how are they used in css.

169、With the help of examples explain grouping and nesting of css selectors.

170、How can HTML elements be styled having specific attributes?

171、What are the different provision provided in css to define the dimension of an element?

172、Explain the concept of the box model in css.

173、How is the float property implemented in css?

174、What is the purpose of the z-index? Explain with the help of an example.

175、Explain the meaning of graceful degradation in reference to CSS.

176、What is the other alternative to graceful degradation?

177、How are shorthand properties are used in css? Give examples.

【CSS interview questions and answers】

178、How do you include comments in CSS?

179、Have you utilized any CSS libraries or frameworks?

【Interview Questions and Exercises About CSS】

180、Fix The Sidebar

181、Make this fixed width design fluid.

182、Replace this logo markup with an image.

183、Google how you would find out what the default value for backface-visibility is.

184、What is the "Box Model" in CSS? Which CSS properties are a part of it?

185、What are Sass, Less, and Stylus? Why do people use them? How does something like Compass relate to Sass?

186、Name some online resources that you reference when having CSS issues.

187、Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

188、What are the various techniques for clearing floats?

189、What are sprites and why would use them? How do you go about creating them? What are possible alternatives to sprites?

190、What are some accessibility concerns that come up in CSS?

191、What is the difference between inline, inline-block, and block?

192、What tools do you use for cross-browser testing?

193、What are some of your favorite web design workflow tools?

194、Say you found a rendering problem on one of your sites in Internet Explorer 8, which you have decided you are supporting.

195、How would you approach fixing it?IE出现渲染问题

196、What is responsive design all about?

197、Have you ever worked with a grid layout? What are your thoughts on that?

198、What are the benefits of SVG?

199、Have you ever created a print stylesheet for a website?

200、Say you were tasked with coding a design that used non-standard web fonts, how would you go about it?使用非标准字体
201、Explain to me what‘s going on in this CSS selector:

【Top 50 CSS & CSS3 Interview Questions & Answers】

202、What is CSS ?

203、What is the origin of CSS ?

204、What are the different variations of CSS ?

205、What are the limitations of CSS ?CSS的局限性

206、What are the advantages of CSS ?

207、What are CSS frameworks?

208、How block elements can be centered with CSS1?

209、Who maintains the CSS specifications?

210、In how many ways can a CSS be integrated as a web page?

211、What benefits and demerits do External Style Sheets have?

212、Discuss the merits and demerits of Embedded Style Sheets?讨论嵌入式样式表的优缺点？

213、What does CSS selector mean?

214、Enlist the media types CSS allows?

215、Differentiate logical tags from physical tags?

216、Differentiate Style Sheet concept from HTML?

217、Describe ‘ruleset’?

218、Comment on the Case-sensitivity of CSS ?

219、Define Declaration block?定义声明块

220、Enlist the various fonts’ attributes?列出字体的属性

221、How can the dimension be defined of an element ?

222、How can backward compatibility be designed in CSS?向后兼容

223、How can the gap under the image be removed?

224、Which among the following is more precedent: CSS properties or HTML procedures?优先CSS还是HTML程序

225、Are quotes mandatory in URL’s? URL中是否强制使用引号？

226、What is at-rule?

227、How can CSS be cascaded to mix with user’s personal sheet?

【JOB INTERVIEW QUESTIONNAIRE】

228、How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

229、Have you ever used a grid system, and if so, what do you prefer?

230、What are the different ways to visually hide content (and make it available only for screen readers)?

231、Explain how a browser determines what elements match a CSS selector?【CSS选择器原理】

【CSS questions：Pseudo classes】

232、What is a rem unit? When do you use them?

233、What are vendor prefixes?

234、Do you use bootstrap?

235、Using animations what CSS property do you use to increase/decrease the size of an element?

236、What is Responsive Design?

237、You have the following html code:【伪类】

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="button"></div>
</div>

Describe what you will see on the screen after applying following style

.item {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background-color: blue;
}
.item:last-of-type {
  background-color: red;
}

238、You have rows in the page. Each row has number of items with the same classes. Amount of items differ from row to row.

239、Without adding new classes change color of elements, when there are exactly five in the row. 【伪类】

【CSS questions：Aligning elements】

240、You have two <div> elements side by side in the row.The right one has fixed width of 200px, the left one should take all the rest.【布局】

241、You have following html code. Please align text horizontally in the center and vertically in the middle. You have also item-base style, that shouldn‘t be changed.【水平垂直居中】

<div class="item-base item">
  Some awesome text
</div>

242、You have following html code. Please align element item-inner horizontally in the center and vertically in the middle. You have also item-base style, that shouldn‘t be changed.

<div class="item-base item">
  <div class="item-inner">Some awesome text</div>
</div>

【Most Common Technical Interview Question for FrontEnd Developers】

243、Have you used Sass? What‘s good about it?

【Top 20 Interview questions for front end Developers】

244、Explain Box Model in CSS, what is total width of DIV tag?

245、Browser behavior on below style and output?【优先级】

246、Which is most priority CSS in below code?【External Styles、Internal Styles、Inline Styles】

【Questions to ask frontend devs during an interview】

247、How to vertically align a block with unknown height in the center of another block with known height?【上下居中】

248、How to center several blocks standing side-by-side horizontally with unknown width within another block with known width.【左右居中】

249、Which actions may cause a reflow in a browser?【reflow】

250、Describe the difference between fixed, fluid, responsive and adaptive design. Name the pros and cons.【差异命名利弊】

251、How to implement a menu with 5 items using flexbox? The first three items should float to the left, the other two - to the right.【flexbox】

252、Create a tooltip for an element without affecting HTML code【工具提示】

253、What is wrong with the following snippet?【行内元素】

【Frontend Interview Questions and Answers for experienced】

254、What is the purpose of the z-index and how is it used?【z-index】

255、What are some of the new features and properties in CSS3?

【Front End Web Developer interview questions】

256、Describe z-index and how stacking context is formed.【z-index】

257、How is responsive design different from adaptive design?响应式设计与自适应设计有何不同？

【Preparing for a Front-End Web Development Interview in 2017】

258、Layout – sitting elements next to each other and how to place elements in two columns vs three columns.【布局】

259、Responsive design – changing an element’s dimensions based on the browser width size.【响应式设计】

260、Adaptive design – changing an element’s dimensions based on specific break points.【自适应设计】

270、Specificity – how to calculate a selector’s specificity and how the cascade affects attributes特异性 - 如何计算选择器的特异性以及级联如何影响属性

271、Appropriate namespacing and naming of classnames.

三、JavaScript

【JS: Basics and Tricky Questions】

1、What are the differences between null and undefined?【null vs undefined】

2、What are the differences between == and ===?【== Vs ===】

3、How would you compare two objects in JavaScript?【Object Equality】

4、11+ true false related questions that will trick you.【True Lies】有11道小题

5、As [] is true, []==true should also be true. right?【Truthy isn‘t Equal to true】

6、How could you write a method on instance of a date which will give you next day?【Extend Core Object】日期API

7、If you want to use an arbitrary object as value of this, how will you do that?【bind】this

8、Write a simple function to tell whether 2 is passed as parameter or not?【arguments and call】

9、How could you use Math.max to find the max value in an array?【apply】

10、What the heck is this in JavaScript?【this】

11、What is typeof []，What is typeof arguments，If you have var y = 1, x = y = typeof x; What is the value of x?，What is the

12、value of typeof bar，What is the value of typeof null，typeof(NaN)

13、What is 2+true，What is ‘6‘+9，What is the value of 4+3+2+"1"，What is the value of "1"+2+4， What is the value of +‘dude‘，Why .1+.2 != .3

14、for var a = (2, 3, 5); what is the value of a?

15、for var a = (1, 5 - 1) * 2 what is the value of a?

16、What is the value of !‘bang‘，What is the value of !!function(){};

17、What is the value of parseFloat(‘12.3.4‘)

18、What is the value of Math.max([2,3,4,5]);

19、3 instanceof Number，2 in [1,2]

20、null == undefined

21、If var a = 2, b =3 what would be value of a && b

22、What would be consoled var foo = ‘outside‘; function logIt(){console.log(foo); var foo = ‘inside‘;} logIt();

23、What is -5%2

24、42..toString()，4.2..toString，42 . toString()

25、How could you set a prefix before everything you log? for example, if you log(‘my message‘) it will log: "(app) my message"【log prefix】伪数组和数组

26、What will you see in the console for the following example?【Scope and hoisting】作用域与提升

27、Look at the code below, you have a for loop if you have setTimeout inside it. If log the loop counter inside setTimeout, what will be logged?【Closures Inside Loops】

28、Look at the code below, I have a property in a object and I am creating a new object where I am setting it to a new value.

29、If I delete that property what will i get if I try to access that property?【delete can delete but】

30、Does JavaScript pass parameter by value or by reference?【Pass by value or by reference】传参，值与引用

31、How could you implement cache to save calculation time for a recursive fibonacci function?【memoization】斐波纳数记忆法

32、How could you cache execution of any function?【缓存函数执行】

33、What if you are passing more than one argument?

34、If you need to implement the following chaining with call back, how will you implement it?【JQuery style chaining】链式调用

35、How could you implement moveLeft animation?【Animation】

36、How would you implement currying for any functions?【Currying】

【JS: Interview Questions 21+ DOM related interview questions】

37、Is there any difference between window and document?【window vs document】

38、Does document.onload and window.onload fire at the same time?【window.onload vs document.onload】

39、Is attribute similar to property?【attribute vs property】

40、What are the different ways to get an element from DOM?【DOM Query】

41、What is the fastest way to select elements by using css selectors?【Fastest way to Query DOM】

42、How come, I can‘t use forEach or similar array methods on a NodeList?【Use forEach on NodeList】

43、How could you solve this problem?

44、If you need to implement getElementByAttribute, how would you implement it?【getElementsByAttribute】

45、How would you add a class to an element by query selector?【add class】

46、How could I verify whether one element is child of another?【Check Descendant】检查后代

47、What is the best way to create a DOM element? Set innherHTML or use createElement?【innerHTML vs appendChild】

48、What is createDocumentFragment and why you might use it?【CreateDocumentFragment】

49、What is reflow? What causes reflow? How could you reduce reflow?【reflow】

50、What is repaint and when does this happen?【repaint】

51、How could you make sure to run some javaScript when DOM is ready like $(document).ready?【DOM ready】

52、What is event bubble? How does event flows?【Event bubble】

53、How would you destroy multiple list items with one click handler?【Event Delegate】

54、Create a button that is destroyed by clicking on it but two new buttons are created in it‘s place.【destroy button】在按钮的位置创建两个新按钮

55、How could you capture all clicks in a page?【Capture all click】委托

56、How can you get all the texts in a web page?【All text in a page】

57、What is defer and async keyword does in a script tag?【defer vs async】

58、How could you prevent a click on an anchor from going to the link?【阻止默认行为】

59、How could you stop further propagation of an event?【阻止冒泡】

60、Can you remove an event handler from an element?【取消事件】

61、How could you run event handler in the capturing phase not in bubble phase?【捕获模式】

62、How could you prevent multiple event handler to be fired for an event?【阻止同事件冒泡】

63、What are the cancelable events?

64、How could I check whether an event is cancelable or not?

65、Is there anything you have to be careful when using node.cloneNode()?

66、What are different nodeTypes?

67、What are the differences between node and element?

68、请解释事件代理 (event delegation)。

69、请解释 JavaScript 中 this 是如何工作的。

70、请解释原型继承 (prototypal inheritance) 的原理。

71、你怎么看 AMD vs. CommonJS？

72、请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();.要做哪些改动使它变成 IIFE?

73、描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？

74、什么是闭包 (closure)，如何使用它，为什么要使用它？

75、请举出一个匿名函数的典型用例？

76、你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？

77、请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？

78、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？

79、.call 和 .apply 的区别是什么？

80、请解释 Function.prototype.bind？

81、在什么时候你会使用 document.write()？

82、请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？

83、请尽可能详尽的解释 Ajax 的工作原理。

84、使用 Ajax 都有哪些优劣？

85、请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。

86、你使用过 JavaScript 模板系统吗？如有使用过，请谈谈你都使用过哪些库？

87、请解释变量声明提升 (hoisting)。

88、请描述事件冒泡机制 (event bubbling)。

89、"attribute" 和 "property" 的区别是什么？

90、为什么扩展 JavaScript 内置对象不是好的做法？

91、请指出 document load 和 document DOMContentLoaded 两个事件的区别。

92、== 和 === 有什么不同？

93、请解释 JavaScript 的同源策略 (same-origin policy)。

94、如何实现下列代码：[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

95、什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？

96、什么是 "use strict"; ? 使用它的好处和坏处分别是什么？

97、请实现一个遍历至 100 的 for loop 循环，在能被 3 整除时输出 "fizz"，在能被 5 整除时输出 "buzz"，在能同时被 3 和 5 整除时输出 "fizzbuzz"。

98、为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择？

99、为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？

100、请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)。

101、What is the extent of your experience with Promises and/or their polyfills?

102、使用 Promises 而非回调 (callbacks) 优缺点是什么？

103、使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？

104、你使用哪些工具和技术来调试 JavaScript 代码？

105、你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容？

106、请解释可变 (mutable) 和不变 (immutable) 对象的区别。
   请举出 JavaScript 中一个不变性对象 (immutable object) 的例子？
   不变性 (immutability) 有哪些优缺点？
   如何用你自己的代码来实现不变性 (immutability)？

107、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。

108、什么是事件循环 (event loop)？请问调用栈 (call stack) 和任务队列 (task queue) 的区别是什么？

109、解释 function foo() {} 与 var foo = function() {} 用法的区别

110、问题：foo的值是什么？var foo = 10 + ‘20‘;

111、问题：如何实现以下函数？

add(2, 5); // 7
add(2)(5); // 7

112、下面的语句的返回值是什么？"i‘m a lasagna hog".split("").reverse().join("");

113、window.foo的值是什么？( window.foo || ( window.foo = "bar" ) );

114、下面两个 alert 的结果是什么？

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

115、foo.length的值是什么？

var foo = [];
foo.push(1);
foo.push(2);

116、foo.x的值是什么？

var foo = { n: 1 };
var bar = foo;
foo.x = foo = { n: 2 };

117、下面代码的输出是什么？

console.log("one");
setTimeout(function() {
  console.log("two");
}, 0);
console.log("three");

118、script元素中的属性及存放位置

119、相等(==)和全等(===)操作符判断相等的流程是怎样的？

120、JavaScript中有哪些方法定义对象？

121、<,>,<=,>=的比较规则？

122、+运算符的工作流程

【21 Essential JavaScript Interview Questions】

123、JavaScript 有哪些基本类型

124、区分不同类型的方法有哪些，各有什么问题

125、闭包的概念 & 用途

126、apply 和 call 的用途和区别

127、原型继承的概念， prototype 和 __proto__ 的区别

128、JavaScript 如何实现继承？对象的几种创建方式？

129、是否碰到过内存泄露？能否说一下引起内存泄露的常见原因（网上大部分文章都是跟 IE 相关的，其实没什么必要了解，闭包方面有必要知道）？有什么工具可以调试？

130、JavaScript 设计模式知道哪些？Proxy 模式怎么用？

131、ES6 是否有了解

132、JavaScript 模块化（常见规范、工具、实现原理）

133、walkTheDOM 函数，从 <body> 标签起，遍历所有节点并打印标签名

134、addClass

135、实现一个简单的 pub-sub 库

136、实现 _.flatten()

137、object deep clone

138、isPrime

139、quick sort

140、merge sort

141、binary search

142、throttle & debounce

143、实现 Object.create()（不用完全遵循标准，实现蝴蝶书上的版本就够了）

144、Function.prototype.bind

145、carousel 组件

146、自动补全组件

147、overlay 组件

148、popup 组件

149、drag & drop 组件，分别用 jQuery、MVVM、React 和 RxJS 实现一遍

150、一小时之内写一个扫雷游戏

151、如果要你实现一个 AMD 加载器，你将如何实现？讲一下思路和需要注意的点，最好有伪代码

152、Sizzles （jQuery 的选择器模块）的实现思路

【前端面试题总结 DOM】

153、attribute 和 property 的区别

154、DOM 的事件机制

155、冒泡与捕获的概念，如何阻止冒泡

156、Delegation

157、鼠标点击 a 标签其中会有多少个事件产生

158、如何区分 dbclick 和 click

159、ajax 请求中 readyState 有哪些状态（这个问题我感觉太不常考了……但既然见到过那就收录进来了）

160、ajax 跨域

161、怎样算是跨域？

162、跨域的方法有哪些？实现原理是什么？兼容性如何？各自有什么缺点？

163、JSONP 如果页面编码和被请求的资源编码不一致如何处理

164、服务器端消息推送有哪些方法？实现原理？兼容性？缺点？

165、jQuery.ready() 实际上是 DOM 中的什么事件？

166、window.onload 和 $.ready() 事件有什么区别？

167、What is the difference between undefined and not defined in JavaScript?

168、What will be the output of the code below?【假值，typeof】

var y = 1;
if (function f() {}) {
  y += typeof f;
}
console.log(y);

169、What is the drawback of creating true private methods in JavaScript?在JavaScript中创建真正的私有方法的缺点是什么？

170、What is a “closure” in JavaScript? Provide an example

171、Write a mul function which will produce the following outputs when invoked:

console.log(mul(2)(3)(4)); // output : 24
console.log(mul(4)(3)(4)); // output : 48

172、How to empty an array in JavaScript?【数组】

173、How do you check if an object is an array or not?【toString】

174、What will be the output of the following code?

var output = (function(x) {
  delete x;
  return x;
})(0);
console.log(output);

175、What will be the output of the following code?

var x = 1;
var output = (function() {
  delete x;
  return x;
})();
console.log(output);

176、What will be the output of the code below?

var x = { foo: 1 };
var output = (function() {
  delete x.foo;
  return x.foo;
})();
console.log(output);

177、What will be the output of the code below?

var Employee = {
  company: "xyz"
};
var emp1 = Object.create(Employee);
delete emp1.company;
console.log(emp1.company);

178、What is undefined x 1 in JavaScript?【chrome和firefox表现不同】

var trees = ["redwood", "bay", "cedar", "oak", "maple"];
delete trees[3];
console.log(trees);

179、What will be the output of the code below?

var trees = ["xyz", "xxxx", "test", "ryan", "apple"];
delete trees[3];
console.log(trees.length);

180、What will be the output of the code below?【+】

var bar = true;
console.log(bar + 0);
console.log(bar + "xyz");
console.log(bar + true);
console.log(bar + false);

181、What will be the output of the code below?【连续=】

var z = 1,
  y = (z = typeof y);
console.log(y);

182、What will be the output of the code below?

// NFE (Named Function Expression
var foo = function bar() {
  return 12;
};
typeof bar();

183、What is the difference between the function declarations below?

var foo = function() {
  // Some code
};
function bar() {
  // Some code
}

184、What is function hoisting in JavaScript?什么是JavaScript中的函数提升？
185、What will be the output of code below?【提升】

var salary = "1000$";
(function() {
  console.log("Original salary was " + salary);
  var salary = "5000$";
  console.log("My New Salary " + salary);
})();

186、What is the instanceof operator in JavaScript? What would be the output of the code below?【instanceof】

function foo() {
  return foo;
}
new foo() instanceof foo;

187、If we have a JavaScript associative array.How can we calculate the length of the above associative array‘s counterArray?

var counterArray = {
  A: 3,
  B: 4
};
counterArray["C"] = 1;

【25 Essential JavaScript Interview Questions*】

188、What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided?
189、What will the code below output to the console and why?【连续=】

(function() {
  var a = (b = 3);
})();
console.log("a defined? " + (typeof a !== "undefined"));
console.log("b defined? " + (typeof b !== "undefined"));

190、What will the code below output to the console and why?【this】

var myObject = {
  foo: "bar",
  func: function() {
    var self = this;
    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);
    (function() {
      console.log("inner func:  this.foo = " + this.foo);
      console.log("inner func:  self.foo = " + self.foo);
    })();
  }
};
myObject.func();

191、What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?将192、JavaScript源文件的全部内容包装在功能块中的意义和原因是什么？
193、What is the significance, and what are the benefits, of including ‘use strict‘ at the beginning of a JavaScript source file?
Consider the two functions below. Will they both return the same thing? Why or why not?【分号】

function foo1(){
  return {
     bar: "hello"
   };
}
function foo2(){
   return
   {
     bar: "hello"
   };
}

194、What is NaN? What is its type? How can you reliably test if a value is equal to NaN?
195、What will the code below output? Explain your answer.【Number】

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

196、Discuss possible ways to write a function isInteger(x) that determines if x is an integer.
197、In what order will the numbers 1-4 be logged to the console when the code below is executed? Why?【定时器】

(function() {
  console.log(1);
  setTimeout(function() {
    console.log(2);
  }, 1000);
  setTimeout(function() {
    console.log(3);
  }, 0);
  console.log(4);
})();

198、Write a simple function (less than 80 characters) that returns a boolean indicating whether or not a string is a palindrome.【字符串是否是回文】
199、Write a sum method which will work properly when invoked using either syntax below.

console.log(sum(2, 3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5

200、Consider the following code snippet:

for (var i = 0; i < 5; i++) {
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("Button " + i));
  btn.addEventListener("click", function() {
    console.log(i);
  });
  document.body.appendChild(btn);
}

(a) What gets logged to the console when the user clicks on “Button 4” and why?
(b) Provide one or more alternate implementations that will work as expected.

201、What will the code below output to the console and why?【数组】

var arr1 = "john".split("");
var arr2 = arr1.reverse();
var arr3 = "jones".split("");
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

202、What will the code below output to the console and why ?【隐式类型转换】

console.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log(1 + -"1" + "2");
console.log(+"1" + "1" + "2");
console.log("A" - "B" + "2");
console.log("A" - "B" + 2);

203、The following recursive code will cause a stack overflow if the array list is too large. How can you fix this and still retain the recursive pattern?【递归，setTimeout】

var list = readHugeList();
var nextListItem = function() {
  var item = list.pop();

  if (item) {
    // process the list item...
    nextListItem();
  }
};

204、What is a “closure” in JavaScript? Provide an example.

205、What will be the output of the following code:【闭包】

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Explain your answer. How could the use of closures help here?

206、What would the following lines of code output to the console?【假值、与、或】

console.log("0 || 1 = " + (0 || 1));
console.log("1 || 2 = " + (1 || 2));
console.log("0 && 1 = " + (0 && 1));
console.log("1 && 2 = " + (1 && 2));

207、What will be the output when the following code is executed? Explain.【==，===】

console.log(false == "0");
console.log(false === "0");

208、What is the output out of the following code? Explain your answer.【隐式类型】

var a = {},
  b = { key: "b" },
  c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]);

209、What will the following code output to the console:【递归】

console.log(
  (function f(n) {
    return n > 1 ? n * f(n - 1) : n;
  })(10)
);

210、Consider the code snippet below. What will the console output be and why?【作用域】

(function(x) {
  return (function(y) {
    console.log(x);
  })(2);
})(1);

211、What will the following code output to the console and why:

var hero = {
  _name: "John Doe",
  getSecretIdentity: function() {
    return this._name;
  }
};

var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

212、Create a function that, given a DOM Element on the page, will visit the element itself and all of its descendents (not just its immediate children). For each element visited, the function should pass that element to a provided callback function.【访问后代】
   The arguments to the function should be:
   a DOM element
   a callback function (that takes a DOM element as its argument)

【5 More JavaScript Interview Exercises】

213、What will be printed on the console if a user clicks the first and the fourth button in the list? Why?【Closures】

var nodes = document.getElementsByTagName("button");
for (var i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener("click", function() {
    console.log("You clicked element #" + i);
  });
}

214、What’s the output?【Data Types】

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

215、What is the result of the following code? Explain your answer.【Event Loop】

function printing() {
  console.log(1);
  setTimeout(function() {
    console.log(2);
  }, 1000);
  setTimeout(function() {
    console.log(3);
  }, 0);
  console.log(4);
}
printing();

216、Write an isPrime() function that returns true if a number is prime and false otherwise.【Algorithms】

【5 Typical JavaScript Interview Exercises】

217、What will be printed on the console?【Scope】

(function() {
  var a = (b = 5);
})();
console.log(b);

218、Define a repeatify function on the String object. The function accepts an integer that specifies how many times the string has to be repeated. The function returns the string repeated the number of times specified. For example:【Create “native” methods】
　　console.log(‘hello‘.repeatify(3));

219、What’s the result of executing this code and why.【Hoisting】

function test() {
  console.log(a);
  console.log(foo());

  var a = 1;
  function foo() {
    return 2;
  }
}
test();

220、How this works in JavaScript【this】

var fullname = "John Doe";
var obj = {
  fullname: "Colin Ihrig",
  prop: {
    fullname: "Aurelio De Rosa",
    getFullname: function() {
      return this.fullname;
    }
  }
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());

221、call() and apply()

【JavaScript interview questions and answers】

222、What are global variables? How are they declared? What are the problems with using globals?【全局变量】

223、How do you organize your JavaScript code?

224、What are JavaScript types?

225、What is the difference between undefined and null?

226、What is JavaScript‘s this keyword?

227、What is event bubbling?

228、Do you have a JavaScript framework preference? What are your thoughts on using frameworks?【你对使用框架有什么想法？】

229、How are errors gracefully handled in JavaScript?

230、Can you explain how inheritance works in JavaScript?

231、How do JavaScript timers work? What is a drawback of JavaScript timers?定时器缺点

【JavaScript 123 interview Question】

232、what is function hoisting in JavaScript?【hoisting】

var foo = function foo() {
  return 12;
};

233、What will be the output of the following code?

var salary = "1000$";
(function() {
  console.log("Original salary was " + salary);
  var salary = "5000$";
  console.log("My New Salary " + salary);
})();

234、Difference between Function, Method and Constructor calls in JavaScript.

235、What would be the output of the following code?【连续=】

function User(name) {
  this.name = name || "JsGeeks";
}
var person = (new User("xyz")["location"] = "USA");
console.log(person);

236、What is the difference between a method and a function in javascript?

237、What is JavaScript Self-Invoking anonymous function or Self-Executing anonymous function.

238、Describe Singleton Pattern In JavaScript?【设计模式】

239、What are the way by which we can create object in JavaScript ?

240、Write a function called deepClone which takes an object and creates a object copy of it.【clone】

241、Best way to detect undefined object property in JavaScript.

242、How to check whether a key exist in a JavaScript object or not.

243、write a function called Clone which takes an object and creates a object copy of it but not copy deep property of object.【clone】

244、What is best way to detect an arrays object on JavaScript ?

245、Best way to detect reference values of any type in JavaScript ?【typeof】
   In Javascript Object are called as reference type, Any value other then primitive is definitely a reference type. There are several built-in reference type such as Object, Array, Function, Date, null and Error.
246、Describe Object-Based inheritance in JavaScript.
   Object-based inheritance also called prototypal inheritance in which we one object inherit from another object without invoking a constructor function.
   The ECMAScript 5 Object.create() method is the easiest way for one object to inherit from another.

247、Describe Type-Based inheritance in JavaScript.
Type-based inheritance works with constructor function instead of object, It means we need to call constructor function of the object from which you want to inherit.

248、How we can prevent modification of object in JavaScript ?.
ECMAScript 5 introduce several methods to prevent modification of object which lock down object to ensure that no one, accidentally or otherwise, change functionality of Object.

【Javascript Interview Questions】

249、What is JavaScript?

250、Name some of the JavaScript features.

251、What are the advantages of using JavaScript?

252、What are disadvantages of using JavaScript?

253、Is JavaScript a case-sensitive language?

254、How can you create an Object in JavaScript?

255、How can you read properties of an Object in JavaScript?

256、How can you create an Array in JavaScript?

257、What is a named function in JavaScript? How to define a named function?命名函数

258、How many types of functions JavaScript supports?

259、How to define a anonymous function?

260、Can you assign a anonymous function to a variable?

261、Can you pass a anonymous function as an argument to another function?

262、What is arguments object in JavaScript?

263、How can you get the type of arguments passed to a function?

264、How can you get the total number of arguments passed to a function?

265、How can you get the reference of a caller function inside a function?

266、What is the purpose of ‘this‘ operator in JavaScript?

267、What are the valid scopes of a variable in JavaScript?【变量】

268、Which type of variable among global and local, takes precedence over other if names are same?【变量优先级】

269、What is callback?

270、What is closure?

271、Give an example of closure?

272、Which built-in method returns the character at the specified index?【charAt】

273、Which built-in method combines the text of two strings and returns a new string?【concat】

274、Which built-in method calls a function for each element in the array?【forEach】

275、Which built-in method returns the index within the calling String object of the first occurrence of the specified value?【indexOf】

276、Which built-in method returns the length of the string?【length】

277、Which built-in method removes the last element from an array and returns that element?【pop】

278、Which built-in method adds one or more elements to the end of an array and returns the new length of the array?【push】

279、Which built-in method reverses the order of the elements of an array?【reverse】

280、Which built-in method sorts the elements of an array?【sort】

281、Which built-in method returns the characters in a string beginning at the specified location?【substr】

282、Which built-in method returns the calling string value converted to lower case?【toLowerCase】

283、Which built-in method returns the calling string value converted to upper case?【toUpperCase】

284、Which built-in method returns the string representation of the number‘s value?【toString】

285、What are the variable naming conventions in JavaScript?【命名规范】

286、How typeof operator works?【typeof】

287、What typeof returns for a null value?

288、Can you access Cookie using javascript?【Cookie】

289、How to create a Cookie using JavaScript?

290、How to read a Cookie using JavaScript?

291、How to delete a Cookie using JavaScript?

292、How to redirect a url using JavaScript?

293、How to print a web page using javascript?

294、What is Date object in JavaScript?

295、What is Number object in JavaScript?

296、How to handle exceptions in JavaScript?

297、What is purpose of onError event handler in JavaScript?【error】

【Top 85 JavaScript Interview Questions & Answers】

298、Enumerate the differences between Java and JavaScript?

299、What is the use of isNaN function?【NaN】

300、What is negative infinity?

301、What are undeclared and undefined variables?

302、Explain how can you submit a form using JavaScript?

303、How can the style/class of an element be changed?

304、What are all the looping structures in JavaScript?【variable typing】

305、Explain how to detect the operating system on the client machine?【navigator.appVersion】

306、What is the use of Void(0)?

307、What are escape characters?【escape】

308、Mention what is the disadvantage of using innerHTML in JavaScript?

309、What are the two basic groups of dataypes in JavaScript?【Primitive与Reference types】

310、How generic objects can be created?

311、Which keywords are used to handle exceptions?

312、What is the way to get the status of a CheckBox?

313、How can a value be appended to an array?

314、Explain the for-in loop?

315、Describe the properties of an anonymous function in JavaScript?

316、What are the various functional components in JavaScript?

317、Write about the errors shown in JavaScript?

318、What are the decodeURI() and encodeURI()?【decodeURI和encodeURI】

【JavaScript Interview Questions】

　　Closures, scope, hoisting, the JS object model, and more.

【JavaScript Patterns Collection】

319、Javascript垃圾回收方法

320、哪些操作会造成内存泄漏？

321、WEB应用从服务器主动推送Data到客户端有那些方式？

322、说说严格模式的限制

　　JavaScript知识点合集、包括语法、设计模式、jQuery等

【JOB INTERVIEW QUESTIONNAIRE】

323、Describe a strategy for memoization (avoiding calculation repetition) in JavaScript.【memoization】

324、Why is it called a Ternary statement, what does the word "Ternary" indicate?【三元语句】

325、What is the arity of a function?【参数数量】

326、~~3;What value is returned from the above statement?【位运算】

【JOB INTERVIEW QUESTIONNAIRE：jQuery-Specific Questions】

327、Explain "chaining".

328、Explain "deferreds".

329、What are some jQuery specific optimizations you can implement?

330、What does .end() do?

331、How, and why, would you namespace a bound event handler?

332、Name 4 different values you can pass to the jQuery method.

333、What is the effects (or fx) queue?

334、What is the difference between .get() and .eq()?

335、What is the difference between .bind(), .live(), and .delegate()?

336、What is the difference between $ and $.fn? Or just what is $.fn.

337、Optimize this selector:

【Most Common Technical Interview Question for FrontEnd Developers】

338、What are namespaces? Give an example.

339、When you write your JavaScript, do you choose functional programming or object oriented?

340、Describe how you would make a JavaScript object. How would you call a function inside of it that accesses a property of that object?

341、When would you use a JavaScript animation over CSS3 Animations? Explain why.

342、How would you design a large scale project with JavaScript?

343、Explain what happens when you make an AJAX request?

344、What happens when you use var?

345、How would you assign Child Specific Objects?

【JavaScript questions】

346、What will be value of y?【运算符优先级】

var y,
  x = 1;
y = x++ + x;

347、You have variable that may or may not be a number. Write function isNumber() that will return true if it is in fact number or false otherwise.【类型转换】

348、Explain what will be output of each of following expressions:

5 - "4"
5 + "4"
5 + null
!{}[true]
+[1]
+[1, 2]
7 - "a"
7 / 0

349、What output you will see in the console?【引用】

var obj = {
  foo: []
};
var boo = obj.foo;
boo.push("Hi there!");
obj.foo = obj.foo.concat(boo);
console.log(obj);

350、Describe what is the following construction, when and why you will use it【IIFE】

 (function() {})()

351、Write code, that will provide following behaviour:【currying】

add(3)(4) == 7;

352、What you will see in the console after executiong the following code?【hositing】

var foo = 10;
console.log(foo);
foo();
function foo() {
  console.log("foo");
}

353、What is JSONP? How and when you will use it?

【JavaScript Interview Questions!】有代码

354、What is a closure?

355、What is the difference between apply, call, and bind?

356、What is event delegation?

357、What is event bubbling?

358、What is hoisting and how does it work?

359、What does this console?

360、What is the prototype chain?

361、What does this console?

362、Rapid-fire questions!

363、What determines the value of ‘this’?

364、What is the event loop?

365、What is the output?

366、Implement curry.

【What Do I Need to Know to Ace a JavaScript Interview?】相关概念以及参考文献

367、Functional programming

368、What is the event loop? The asynchronous nature of JavaScript

369、Javascript. The core. Scope chain, prototype chain, scope, closure, constructor, and this.

370、Design patterns and inheritance

371、REST API design

372、DOM: HTML / CSS / Twitter Bootstrap / jQuery

373、Search Engine Optimization

374、Regular expressions

375、Testing

376、How can you declare a class in Javascript?

377、How would you organize your Javascript code?

378、Have you already used MVC before? What you like/dislike about it?

379、How can you add a method to a class already defined?

【Web Developer Interview Questions And Answers】

380、What is CORS? How does it work?

381、Name some Javascript functions used to convert non numerical values into numbers.【类型转换数字】

【Top 20 Interview questions for front end Developers】

382、What are the falsy values in JS?

383、What is output for below code? What is JS hoist?

var num = 5;
function xyz() {
  alert(num); //result of num?  Undefined
  var num = 10;
  alert(num); //result of num? 10
}
xyz();

384、How to pass function as parameter in another function, Give any example?【高阶函数】

385、What is bind in JS, Explain about function bind?

386、How to attach an event dynamically to DIV tag in my HTML doc?【委托】

387、Explain below JS code, what is difference between below two scenarios?

var x = function() {
  console.log("Hi");
};
x();
function x() {
  console.log("helo");
}
x();

388、dvantages and Disadvantages with anonymous function in JS?

389、Various types of object declaration?【对象声明】

390、Solve the below problem?【数组操作】

【Front-end developer interview questions】

391、Asynchronous vs synchronous

392、IIFE

393、CORS

【15 JavaScript interview questions and answers】

394、What are the advantages of using JavaScript?

395、What are the disadvantages of using JavaScript?

396、Explain the difference between classical inheritance and prototypal inheritance.【对象】

397、Give an example of a time that you used functional programming in JavaScript.【函数式编程】

398、Give an example of a time that you used Prototypal OO in JavaScript.

399、What is a RESTful Web Service?

400、How experienced are you with MEAN?（MongoDB, Express, AngularJS, and Node.js）

401、Explain the differences between one-way data flow and two-way data binding.【单向与双向数据流】

402、Determine the output of the code below. Explain your answer.【浮点数】

console.log(0.1 + 0.2);
console.log(0.4 + 0.1 == 0.5);

403、Determine the output of the code below. Explain your answer.【作用域】

【50 Front End Developer Interview Questions】

404、When do you use bracket notation versus dot notation for objects?【对象】

405、How do you change an element attribute with JavaScript?【脚本化属性】

406、How do you update your local version of a Github repo with the latest changes to the remote repo?【Git】

407、What happens when you pass a function too few or too many arguments in JavaScript?【传参】

408、Why do you want to avoid polluting the global name space?

409、How would you retrieve a specific value from an array of objects?【检索值】

410、What is the difference between JSON and a javascript object?

411、How do you change the class attribute of an element with JS?【脚本化CSS类】

【Commonly asked Interview Questions for Front End Developers】

412、What is the difference between this and e in the callback in the above code? In general, event could be anything, not just the load event. Interviewee is expected to know the syntax for sending AJAX request using bare JS.

var request = new XMLHttpRequest();
request.addEventListener("load", function(e) {
  console.log(this.responseText);
  var obj;
  try {
    obj = JSON.parse(this.responseText);
  } catch (ex) {}
});
request.open(
  "GET",
  "http://api.openweathermap.org/data/2.5/weather?q=delhi&APPID=0d84d993b430de4bebaa89bf7513676e"
);
request.send();

413、Different ways to create objects in JS? Explain Object.defineProperty().【对象】

414、Scope and execution context in JS?

415、How does JS manage multiple events in parallel, like click, input, etc. when it is interpreted & single threaded?

【Frontend Interview Questions and Answers for experienced】

416、Singleton through a function【设计模式】

【Front End Web Developer interview questions】

417、Describe event propagation (bubbling phase) in your own words. Is there any other phase in the DOM Event flow that you know of?

418、Which steps constitute the Critical Rendering Path for web browsers?哪些步骤构成Web浏览器的关键呈现路径？

419、Are objects in Javascript passed by reference or by value?Javascript中的对象是否通过引用或值传递？

420、Explain why the following doesn’t work as an IIFE:

function foo(){ }();

421、What is this event loop all about? A mouse click would result in a new item being added to the call stack or the task queue?【事件循环】

422、What is alert going to show?【hositing】

var foo = 1;
function bar() {
  if (!foo) {
    var foo = 10;
  }
  alert(foo);
}
bar();

【Preparing for a Front-End Web Development Interview in 2017】

423、Execution context, especially lexical scope and closures.

424、Hoisting, function & block scoping and function expressions & declarations.

425、Binding – specifically call, bind, apply and lexical this.

426、Object prototypes, constructors and mixins.

427、Composition and high order functions.【高阶函数】

428、Type Coercion using typeof, instanceof and Object.prototype.toString.

429、Handling asynchronous calls with callbacks, promises, await and async.

430、When to use function declarations and expressions.何时使用函数声明和表达式。

431、Traversal up and down – Node.parentNode, Node.firstChild, Node.lastChild and Node.childNodes.【遍历】

432、Traversal left and right – Node.previousSibling and Node.nextSibling.

433、Manipulation – add, remove, copy, and create nodes in the DOM tree. You should know operations such as how to change the text content of a node and toggle, remove or add a CSS classname.【DOM】

434、Performance – touching the DOM can be expensive when you have many nodes, you should at least know about document fragments and node caching.【高性能JavaScript】

四、算法

【JS: Interview Questions part -4: Stack, Queue, Linked List】

1、How will you implement stack and queue with JavaScript?【Stack and Queue】

2、you have to use a maximizing heap to manage a priority queue. Hence while extracting, you just get the one on the top and

3、while inserting you will do it at the bottom【Priority Queue】

4、How will you create a linked list in JavaScript?【Singly Linked List】单链表

5、for doubly linked list there will be a link backward to the previous element.【Doubly Linked List】双链表

6、How could you write an extension to remove a node from a LL【Remove Node from Singly LL】

7、How would you reverse a singly LL (no loop)?【Reverse Singly Linked List】

8、reverse the doubly linked list without using extra space【Reverse Doubly LL】

9、How could you get the Kth node from the end (no loop)【kth node from End】

10、How could you delete kth node from the end of a singly LL (no loop)【Delete kth node from the end】

11、How could you delete a node from a doubly linked list?

12、How would you merge two unsorted linked list?【merge two unsorted array】

13、How could you find intersect of two SLL in single iteration?【Intersect of two LL】

14、How would you sort a linked list?【sort Linked list】

15、Given an integer linked list of which both first half and second half are sorted independently. Write a function to merge the

16、two parts to create one single sorted linked list in place [do not use any extra space].【special sort】

17、Delete the repeated elements in a unsorted singly linked list in O(n) time complexity without using extra space.【Remove

18、duplicate from unsorted LL】

【排序和搜索（13题）】

【树的搜索】

【JS: Interview Algorithm】

19、How would you verify a prime number?【check Prime】素数

20、How could you find all prime factors of a number?【Prime Factors】

21、How do get nth Fibonacci number?【Fibonacci】

22、How would you find the greatest common divisor of two numbers?【Greatest Common Divisor】最大公约数

23、How would you remove duplicate members from an array?【remove Duplicate】

24、How would you merge two sorted array?【merge two sorted array】

25、How would you swap two numbers without using a temporary variable?【swap number without temp】

26、How would you reverse a string in JavaScript?【string reverse】6个小问题

27、How would you reverse words in a sentence?【reverse words】

28、If you have a string like "I am the good boy". How can you generate "I ma eht doog yob"? Please note that the words are in

29、place but reverse.【reverse in place】

30、How could you find the first non repeating char in a string?【First non repeating char】

31、How will you remove duplicate characters from a sting?【remove duplicate char】

32、How will you verify a word as palindrome?【check palindrome】回文

33、If you have a function that generate random number between 1 to 5 how could u generate random number 1 to 7 by using that function?【random between 5 to 7】

34、from a unsorted array of numbers 1 to 100 excluding one number, how will you find that number.【missing number】搜索数字

35、From a unsorted array, check whether there are any two numbers that will sum up to a given number?【Sum of two】指定两个数字的和搜索

36、How would you find the largest sum of any two elements?【Largest Sum】最大和

37、Count Total number of zeros from 1 upto n?【Counting Zeros】带0值的数量

38、How can you match substring of a sting?【subString】

39、How would you create all permutation of a string?【Permutations】排列

40、topK

41、翻转单链表

42、反转二叉树

43、单向列表判断是否有环

44、LeetCode

45、careercup

【Interview Algorithm Questions in Javascript：Array】

46、Write out a function that computes a Factorial given a non-negative integer number.非负整数的因子函数
Write out the function a different way.
In big O notation compare and explain the complexity of both functions.

47、Fizz-Buzz: Write a function that iterates through the numbers 1 - 100 and if the number is divisible by 3 print "fizz", if its divisible by 5 print "buzz", if its divisible by both then print "fizz"

48、Given an array of integers, find the largest product yielded from three of the integers给定一个整数数组，找到从三个整数产生的最大的乘积

49、Being told that an unsorted array contains (n - 1) of n consecutive numbers (where the bounds are defined), find the missing number in O(n) time一个未排序的数组包含（n - 1）个n个连续数字（定义了界限），在O（n）时间内找到丢失的数字

50、Removing duplicates of an array and returning an array of only unique elements

51、Given an array of integers, find the largest difference between two elements such that the element of lesser value must come before the greater element给定一个整数数组，找到两个元素之间的最大差异，使得较小值的元素必须在更大的元素之前

52、Given an array of integers, return an output array such that output[i] is equal to the product of all the elements in the array other than itself. (Solve this in O(n) without division)给定整数数组，返回一个输出数组，使得输出[i]等于数组中除了本身以外的所有元素的乘积。（在O（n）中求解）

53、Find the intersection of two arrays. An intersection would be the common elements that exists within both arrays. In this case, these elements should be unique!找到两个数组的交集。交叉点将是两个数组中存在的常见元素。在这种情况下，这些元素应该是唯一的！

【Interview Algorithm Questions in Javascript：String】

54、Given a string, reverse each word in the sentence "Welcome to this Javascript Guide!" should be become "emocleW ot siht tpircsavaJ !ediuG"

55、Given two strings, return true if they are anagrams of one another "Mary" is an anagram of "Army"【变位词】改变顺序组成新单词，排序后合并相等

56、Check if a given string is a palindrome "racecar" is a palindrome. "race car" should also be considered a palindrome. Case

57、sensitivity should be taken into account【回文】正序反序相同

58、Check if a given string is a isomorphic【同构】相同位置的字符存在一一对应关系可以相互替换。

【Interview Algorithm Questions in Javascript：Stacks and Queues】

59、Implement enqueue and dequeue using only two stacks仅使用两个堆栈实现入队和出队

60、Create a function that will evaluate if a given expression has balanced parentheses -- Using stacks In this example, we will only consider "{}" as valid parentheses {}{} would be considered balancing. {{{}} is not balanced 创建一个函数，用于评估给定表达式是否具有平衡括号

【Interview Algorithm Questions in Javascript：Recursion】

61、Write a recursive function that returns the binary string of a given decimal number Given 4 as the decimal input, the function should return 100【十进制转为二进制】

62、Write a recursive function that performs a binary search编写执行二进制搜索的递归函数
【Interview Algorithm Questions in Javascript：Numbers】

63、Given an integer, determine if it is a power of 2. If so, return that number, else return -1. (0 is not a power of two)【2的幂】

【Commonly asked Interview Questions for Front End Developers】

64、Optimal strategy for winning a game where let’s say, I start with 1, opponent can cite a number X within the range [2, 11]. Then I have to say a number in the range [X + 1, X + 10], then opponent, then me, and so on. Whoever says 100 in the end wins and the game ends.

五、网络

1、为什么传统上利用多个域名来提供网站资源会更有效？

2、请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程。

3、Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？

4、请描述以下 request 和 response headers：
   Diff. between Expires, Date, Age and If-Modified-...
   Do Not Track
   Cache-Control
   Transfer-Encoding
   ETag
   X-Frame-Options

5、什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释。

6、常见的HTTP method

7、从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

8、HTTP Request和HTTP Response报文结构是怎样的？

9、HTTP 状态码及其含义
【前端面试题总结】

10、TCP 三次握手

11、具体过程

12、为什么要这么设计

13、说一下网络五层模型（HTTP 协议从应用层到底层都基于哪些协议），HTTP 协议头字段说上来几个，缓存字段是怎么定义的，http 和 https 的区别，在具体使用的时候有什么不一样。是否尽可能详细的掌握 HTTP 协议

14、HTTP 状态码

15、1、2、3、4、5 开头分别表示什么

16、301 和 302 的区别、为什么要区分

17、304 表示什么

18、如何防止 304

19、keep-alive

20、cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制，cookies 被禁用后可以考虑用什么替代

21、GET/POST 区别

22、一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好

23、关于 HTTP2 知道哪些？对未来前端开发可能会有哪些影响？

【http-api-design】【HTTP API 设计指南翻译版】

24、什么是Etag？

25、Expires和Cache-Control

26、关于Http 2.0 你知道多少？

【怎样向妻子解释 REST 架构】

【撰写合格的REST API】

【web前端开发需要了解的知识、资料收集】

27、既然 HTTPS 解决了我们关注的隐私、安全问题，那么为什么这么少的网站使用呢？

28、HTTPS，百度运维团队的总结

【Rest】Wiki

【Most Common Technical Interview Question for FrontEnd Developers】

29、When would you use GET and POST requests?

【Web Developer Interview Questions And Answers】

30、Describe the key advantages of HTTP/2 as compared with HTTP 1.1.

【Commonly asked Interview Questions for Front End Developers】

31、Sequence of steps that happen when a URL is entered in the address bar of the browser?

六、项目和职业规划

【Interview questions for a frontend developer】

1、对前端模块化的认识【AMD CMD】

2、用过哪些设计模式？

3、说说你对AMD和Commonjs的理解

4、说说你对MVC和MVVM的理解

5、Have you ever used an MVC? Which one and what do you like and dislike about it?

【Preparing for a Front-End Web Development Interview in 2017】

6、Separation of concerns – Model-View-Controller (MVC), Model-View-ViewModel (MVVM) and Model-View-Presenter (MVP) patterns.

七、性能

1、你会用什么工具来查找代码中的性能问题？

2、你会用什么方式来增强网站的页面滚动效能？

3、请解释 layout、painting 和 compositing 的区别。

4、雅虎 24 条，说出越多越好

5、是否有其他性能优化的经验？

6、页面性能一般可以有哪些指标

7、页面性能记录和分析有哪些方法？除了常见的那些方法之外在现代浏览器里还有其他什么新手段吗？

8、用过什么性能分析的工具

9、移动端性能优化

【Frontend Interview Questions and Answers for experienced】

10、If a client has called you and said that the web page is loading slow, what steps would you ask the client to take to diagnose the problem?【诊断问题】

11、Why Recommended external CSS or Javascript versus inline?
What is lazy loading?

【Preparing for a Front-End Web Development Interview in 2017】

12、Reduce browser reflows and when to promote an element to the GPU.

13、Differences between the browser layout, compositing and painting.

14、When to prefetch and preload resources.何时预取和预加载资源。

八、测试

1、对代码进行测试的有什么优缺点？

2、你会用什么工具测试你的代码功能？

3、单元测试与功能/集成测试的区别是什么？

九、安全

【Preparing for a Front-End Web Development Interview in 2017】

1、XSS 的概念、知道哪些解决办法（常规的就行，不必太深入）

2、escape / encodeURI / encodeURIComponent 的区别

3、CSRF 攻击的概念、防御手段

4、CSP

5、淘宝店铺装修的 CSS 过滤、JS 过滤有什么思路

6、代码质量

7、Security – when to use JSONP, CORs, and iFrame policies.

十、NodeJS