一份來自於全球的前端面試題清單，看看老外喜歡考哪些題（部分有答案）

2六、你能描述漸進加強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不一樣嗎?

2七、瀏覽器同一時間能夠從一個域名下載多少資源？

2八、請說出三種減小頁面加載時間的方法。(加載時間指感知的時間或者實際加載時間)

2九、請寫一個簡單的幻燈效果頁

30、什麼是」白屏」？什麼是 FOUC (無樣式內容閃爍)？如何避免？

3一、請解釋什麼是 ARIA 和屏幕閱讀器 (screenreaders)，以及如何使網站實現無障礙訪問 (accessible)

3二、doctype(文檔類型) 的做用是什麼？

3三、瀏覽器標準模式 (standards mode) 、幾乎標準模式（almost standards mode）和怪異模式 (quirks mode) 之間的區別是什麼？

3四、HTML 和 XHTML 有什麼區別？

3五、若是頁面使用’application/xhtml+xml’會有什麼問題嗎？

【10 Typical HTML Interview Exercises】

3六、DOCTYPE 聲明的做用、取值與區別

3七、常見的 meta 標籤有哪些？移動端呢？

3八、關於 HTML 語義化知道哪些？

3九、是否有關注 HTML 標準的演進？比較關注哪些方面？可否舉一些例子？

40、Markup validation

4一、The main element

4二、WAI-ARIA

4三、The small element

4四、Subheadings 副標題

4五、Images and accessibility 圖像和可訪問性

4六、The time element

4七、meter and progress

4八、The longdesc attribute

4九、The mark element

【12 Essential HTML5 Interview Questions】

50、What were some of the key goals and motivations for the HTML5 specification?HTML5規範的一些關鍵目標和動機是什麼？

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

5二、What are 「web workers」?

5三、How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?您如何指定HTML5文檔使用的字符集？這與舊的HTML標準有什麼不一樣？

5四、Discuss the differences between an HTML specification and a browser’s implementation thereof.討論HTML規範和瀏覽器的實現之間的差別。

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

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

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

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

5九、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.

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

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

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

【35 Helpful HTML & HTML5 Interview Questions & Answers】

6四、What are the limitations when serving XHTML pages?

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

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

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

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

6九、What is the syntax difference between a bulleted list and numbered list?符號列表和編號列表之間的語法差別是甚麼？

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

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

7二、What are the new image elements in HTML5?

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

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

【40 important HTML 5 Interview questions with answers】

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

7六、What is the use of column layout in CSS?

7七、What is the lifetime of local storage?

7八、What is WebSQL?

7九、Is WebSQL a part of HTML 5 specification?

80、So how can we use WebSQL ?

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

8二、What is fallback in Application cache?什麼是應用程序緩存中的回退？

【HTML Interview Questions and Answers - Freshers & Experienced】

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

8四、What is the advantage of collapsing white space?

8五、Is it possible to list elements straight in an html file?是否能夠在html文件中直接列出元素？

8六、Does a hyperlink apply only to text?

8七、What hierarchy is being followed when in style sheets?

8八、What happens if the list-style-type property is used on a non-list element like a paragraph?
8九、What is the advantage of using frames?使用框架的優勢是什麼？

90、How can I hide my source?

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

9二、Why doesn't <TABLE WIDTH="100%"> use the full browser width?

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

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

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

9六、What is a <dl> tag in HTML?

9七、What are empty HTML elements?

9八、How to create nest tables within tables in HTML?

9九、Explain Non Breaking space in HTML.

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

10一、Explain Cell Padding and Cell Spacing.

10二、How to create a button which acts like a link?

10三、What is difference between HTML and XHTML?

10四、How many types CSS can be include in HTML?

10五、What are new Media Elements in HTML5?

10六、Explain various HTML list tags.

10七、Explain HTML background.

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

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

1十、Differentiate different types of Doctypes from one another

1十一、Why it is important to set the meta information?

1十二、What are the different types of entities in HTML?

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

11四、How to add helper plug-ins on the webpage using HTML?如何使用HTML在網頁上添加助手插件？

11五、What is the purpose of iframe in HTML?

11六、What is the purpose of canvas in HTML?

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

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

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

120、How can tables be made nested in HTML?

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

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

12三、How to upload files using HTML to website?

12四、Write a program to include the custom button with the form編寫程序以包含帶有表單的自定義按鈕

12五、How to prevent the display of 「Getting framed in HTML?如何防止顯示「獲取HTML框架？

12六、How to include a frameset inside another frameset?

12七、How to update two frames at the same time using HTML?如何使用HTML同時更新兩個幀？

【Top 50 HTML Interview Questions & Answers】

12八、What is HTML?

12九、What are tags?

130、Do all HTML tags come in pair?

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

14一、How do you insert a comment in html?

14二、Do all character entities display properly on all systems?

14三、What is image map?

14四、What is the advantage of collapsing white space?

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

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

14七、Do older html files work on newer browsers?較舊的html文件在較新的瀏覽器上工做？

14八、Does a hyperlink apply to text only?超連接是否僅適用於文字？

14九、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?

15一、How do you create multicolored text in a webpage?如何在網頁中建立多彩文字？

15二、Why are there both numerical and named character entity values?爲何有數字和命名的字符實體值？

15三、What is the advantage of grouping several checkboxes together?

15四、What will happen if you overlap sets of tags?若是您重疊標籤集，會發生什麼？

15五、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?

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

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

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

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

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

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

16二、What is the relationship between the border and rule attributes?

16三、What is a marquee?

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

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

16六、Are there instances where text will appear outside of the browser?文本是否會出如今瀏覽器外面？

16七、How are active links different from normal links?

16八、Can several selectors with class names be grouped together?能夠將具備類名稱的幾個選擇器分組在一塊兒嗎？

【HTML Interview Questions】

16九、Is audio tag supported in HTML 5?

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

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

17二、What is button tag?

17三、What does details and summary tag?

17四、What is datalist tag?

17五、How tags are migrated from HTML4 to HTML5?如何將標籤從HTML4遷移到HTML5？

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

17七、What is the use of required attribute in HTML5?

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

【Front End Developer Employer Questions】

17九、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

180、HTML與XHTML——兩者有什麼區別

18一、Semantics fanatic or divs and spans as necessary?

18二、Do you use WAI-ARIA?

【JOB INTERVIEW QUESTIONNAIRE】

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

18四、Explain what "Semantic HTML" means.

【Web Developer Interview Questions And Answers】

18五、Are you familiar with Jade or Haml?

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

【Frontend Interview Questions and Answers for experienced】

18七、Why do we need to use W3C standard code?

【Front End Web Developer interview questions】

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

18九、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」等

2、CSS

【CSS: interview questions】

一、What does float do?【float】

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

三、Does css properties are case sensitive?

四、Why css selectors mixed up with cases don't apply the styles?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1九、What is the use of only?

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

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

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

2三、How do you optimize css selectors?【optimize selector】

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

2五、Why would you use sprites?【sprite】

2六、What is specificity? How do u calculate specificity?【specificity】計算優先級

2七、What is shadow DOM?【shadow DOM】

2八、What do you know about transition?【transition】

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

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

3一、What would be the color of text "I am awesome" for he following rules?【see & tell】優先級

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

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

3四、What will this selector do?【read selector】

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

3五、請解釋 CSS 動畫和 JavaScript 動畫的優缺點。

3六、CSS 中類 (classes) 和 ID 的區別。

3七、請問 "resetting" 和 "normalizing" CSS 之間的區別？你會如何選擇，爲何？

3八、請解釋浮動 (Floats) 及其工做原理。

3九、描述z-index和疊加上下文是如何造成的。

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

4一、如何爲有功能限制的瀏覽器提供網頁？你會使用哪些技術和處理方法？

4二、有哪些的隱藏內容的方法 (若是同時還要保證屏幕閱讀器可用呢)？

4三、你用過柵格系統 (grid system) 嗎？若是使用過，你最喜歡哪一種？

4四、你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

4五、你熟悉 SVG 樣式的書寫嗎？

4六、如何優化網頁的打印樣式？

4七、在書寫高效 CSS 時會有哪些問題須要考慮？

4八、使用 CSS 預處理器的優缺點有哪些？請描述你曾經使用過的 CSS 預處理器的優缺點。

4九、若是設計中使用了非標準的字體，你該如何去實現？

50、請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

5一、請描述僞元素 (pseudo-elements) 及其用途。

5二、請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

5三、請解釋 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？

5四、請羅列出你所知道的 display 屬性的所有值

5五、請解釋 inline 和 inline-block 的區別？

5六、請解釋 relative、fixed、absolute 和 static 元素的區別

5七、CSS 中字母 'C' 的意思是疊層 (Cascading)。請問在肯定樣式的過程當中優先級是如何決定的 (請舉例)？如何有效使用此係統？

5八、你在開發或生產環境中使用過哪些 CSS 框架？你以爲應該如何改善他們？

5九、請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？

60、爲何響應式設計 (responsive design) 和自適應設計 (adaptive design) 不一樣？

6一、你有兼容 retina 屏幕的經歷嗎？若是有，在什麼地方使用了何種技術？

6二、請問爲什麼要使用 translate() 而非 absolute positioning，或反之的理由？爲何？

6三、CSS中類選擇器和ID選擇器的區別？

6四、CSS選擇器有哪些？

6五、PNG,GIF,JPEG的區別及如何選？

6六、CSS Hack原理及經常使用Hack

6七、CSS特殊性計算

6八、CSS中經常使用的顏色單位

6九、若是設計中使用了非標準的字體，你該如何去實現？

70、塊級元素的相關特色

【25 Helpful CSS Interview Questions and Answers】

7一、CSS 有幾種引入方式？各自的優缺點？

7二、不一樣瀏覽器上的默認樣式，如何處理？（normalize/sanitize）

7三、盒模型、IE 6/7 與現代瀏覽器的區別、如何兼容

7四、BFC 的概念

7五、containing block 和 stacking context 的概念和計算

7六、position 和 display 各有幾種取值？說說他們的含義與用途

7七、position: absolute 和 float 有什麼區別

7八、如何清除浮動？爲何要清除浮動？

7九、選擇器相關問題

80、specificity 的計算

8一、僞類和僞元素的區分

8二、選擇器性能（瀏覽器如何進行匹配）

8三、CSS3 和 CSS4 選擇器知道哪些

8四、CSS 優化

8五、網絡加載方面有哪些手段

8六、渲染性能的方面呢

8七、用過哪些 CSS 方面的工具

8八、隨便談談 CSS 工程化

8九、CSS 實現元素的水平垂直居中

90、實現一個聖盃佈局

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

9二、What are pseudo classes and what are they used for?

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

9四、What is grouping and what is it used for? 什麼是分組？用於作什麼？

9五、What is an ID selector and how is it used?

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

9七、What are child selectors?

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

9九、How is the float property implemented in CSS?

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

10一、How to restore the default property value using CSS?

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

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

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

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

10六、List the main CSS style sheet properties:

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

10八、What are the various techniques for clearing floats?

10九、Explain the difference between visibility:hidden and display:none

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

1十一、Why shouldn’t I use fixed sized fonts ?

1十二、Which font names are available on all platforms ?

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

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

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

11六、Effectively Communicating Your Skills

【CSS interview questions and answers】

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

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

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

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

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

12二、What are the advantages and disadvantages of Inline Styles?

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

12四、What is CSS selector?

12五、What is Tweening?

12六、Explain RWD.

12七、What is the use of CSS sprites?

12八、What is the syntax to link external style sheet?

12九、How embedded style can be linked with HTML documents?

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

13一、How do I combine multiple sheets into one?

13二、What are the rules in CSS ruleset?

13三、What is the CLASS selectors used for?

13四、What is the difference between class selector and ID selector?

13五、What is contextual selector?

13六、What do you understand by parent-child selector?

13七、What is ‘important’ declaration used in CSS?

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

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

140、How grouping happens inside a CSS?

14一、What is the purpose of pseudo-elements?

14二、How pseudo-classes are different from pseudo-elements?

14三、What does cascade and cascading order defines?

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

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

14六、How does inheritance work in CSS?

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

14八、How do you override the underlining of hyperlinks?

14九、How to center the block-elements with CSS?

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

15一、What is the Difference between id and class?

15二、How to restore the default property value using CSS?

15三、What is the purpose of Nesting Selectors?

15四、How CSS float works?

15五、What is the use of Media Types in CSS?

15六、What are the different Media Types included in CSS?

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

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

15九、How are contextual selectors used in CSS?

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

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

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

16三、Why should inline styles be used carefully?

16四、How do hexadecimal color codes differ from RGB values?十六進制顏色代碼與RGB值有何不一樣？

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

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

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

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

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

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

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

17二、Explain the concept of the box model in css.

17三、How is the float property implemented in css?

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

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

17六、What is the other alternative to graceful degradation?

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

【CSS interview questions and answers】

17八、How do you include comments in CSS?

17九、Have you utilized any CSS libraries or frameworks?

【Interview Questions and Exercises About CSS】

180、Fix The Sidebar

18一、Make this fixed width design fluid.

18二、Replace this logo markup with an image.

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

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

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

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

18七、Describe what a 「reset」 CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

18八、What are the various techniques for clearing floats?

18九、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?

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

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

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

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

19五、How would you approach fixing it?IE出現渲染問題

19六、What is responsive design all about?

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

19八、What are the benefits of SVG?

19九、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?使用非標準字體
20一、Explain to me what's going on in this CSS selector:

【Top 50 CSS & CSS3 Interview Questions & Answers】

20二、What is CSS ?

20三、What is the origin of CSS ?

20四、What are the different variations of CSS ?

20五、What are the limitations of CSS ?CSS的侷限性

20六、What are the advantages of CSS ?

20七、What are CSS frameworks?

20八、How block elements can be centered with CSS1?

20九、Who maintains the CSS specifications?

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

2十一、What benefits and demerits do External Style Sheets have?

2十二、Discuss the merits and demerits of Embedded Style Sheets?討論嵌入式樣式表的優缺點？

21三、What does CSS selector mean?

21四、Enlist the media types CSS allows?

21五、Differentiate logical tags from physical tags?

21六、Differentiate Style Sheet concept from HTML?

21七、Describe ‘ruleset’?

21八、Comment on the Case-sensitivity of CSS ?

21九、Define Declaration block?定義聲明塊

220、Enlist the various fonts’ attributes?列出字體的屬性

22一、How can the dimension be defined of an element ?

22二、How can backward compatibility be designed in CSS?向後兼容

22三、How can the gap under the image be removed?

22四、Which among the following is more precedent: CSS properties or HTML procedures?優先CSS仍是HTML程序

22五、Are quotes mandatory in URL’s? URL中是否強制使用引號？

22六、What is at-rule?

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

【JOB INTERVIEW QUESTIONNAIRE】

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

22九、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)?

23一、Explain how a browser determines what elements match a CSS selector?【CSS選擇器原理】

【CSS questions：Pseudo classes】

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

23三、What are vendor prefixes?

23四、Do you use bootstrap?

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

23六、What is Responsive Design?

23七、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;
}

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

23九、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.【佈局】

24一、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>

24二、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】

24三、Have you used Sass? What's good about it?

【Top 20 Interview questions for front end Developers】

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

24五、Browser behavior on below style and output?【優先級】

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

【Questions to ask frontend devs during an interview】

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

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

24九、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.【差別命名利弊】

25一、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】

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

25三、What is wrong with the following snippet?【行內元素】

【Frontend Interview Questions and Answers for experienced】

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

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

【Front End Web Developer interview questions】

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

25七、How is responsive design different from adaptive design?響應式設計與自適應設計有何不一樣？

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

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

25九、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特異性 - 如何計算選擇器的特異性以及級聯如何影響屬性

27一、Appropriate namespacing and naming of classnames.

3、JavaScript

【JS: Basics and Tricky Questions】

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

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

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

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

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

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

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

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

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

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

十一、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

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

1三、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

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

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

1六、What is the value of !'bang'，What is the value of !!function(){};

1七、What is the value of parseFloat('12.3.4')

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

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

20、null == undefined

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

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

2三、What is -5%2

2四、42..toString()，4.2..toString，42 . toString()

2五、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】僞數組和數組

2六、What will you see in the console for the following example?【Scope and hoisting】做用域與提高

2七、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】

2八、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.

2九、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】傳參，值與引用

3一、How could you implement cache to save calculation time for a recursive fibonacci function?【memoization】斐波納數記憶法

3二、How could you cache execution of any function?【緩存函數執行】

3三、What if you are passing more than one argument?

3四、If you need to implement the following chaining with call back, how will you implement it?【JQuery style chaining】鏈式調用

3五、How could you implement moveLeft animation?【Animation】

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

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

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

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

3九、Is attribute similar to property?【attribute vs property】

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

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

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

4三、How could you solve this problem?

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

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

4六、How could I verify whether one element is child of another?【Check Descendant】檢查後代

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

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

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

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

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

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

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

5四、Create a button that is destroyed by clicking on it but two new buttons are created in it's place.【destroy button】在按鈕的位置建立兩個新按鈕

5五、How could you capture all clicks in a page?【Capture all click】委託

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

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

5八、How could you prevent a click on an anchor from going to the link?【阻止默認行爲】

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

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

6一、How could you run event handler in the capturing phase not in bubble phase?【捕獲模式】

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

6三、What are the cancelable events?

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

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

6六、What are different nodeTypes?

6七、What are the differences between node and element?

6八、請解釋事件代理 (event delegation)。

6九、請解釋 JavaScript 中 this 是如何工做的。

70、請解釋原型繼承 (prototypal inheritance) 的原理。

7一、你怎麼看 AMD vs. CommonJS？

7二、請解釋爲何接下來這段代碼不是 IIFE (當即調用的函數表達式)：function foo(){ }();.要作哪些改動使它變成 IIFE?

7三、描述如下變量的區別：null，undefined 或 undeclared？該如何檢測它們？

7四、什麼是閉包 (closure)，如何使用它，爲何要使用它？

7五、請舉出一個匿名函數的典型用例？

7六、你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？

7七、請指出 JavaScript 宿主對象 (host objects) 和原生對象 (native objects) 的區別？

7八、請指出如下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？

7九、.call 和 .apply 的區別是什麼？

80、請解釋 Function.prototype.bind？

8一、在何時你會使用 document.write()？

8二、請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字符串嗅探的區別？

8三、請儘量詳盡的解釋 Ajax 的工做原理。

8四、使用 Ajax 都有哪些優劣？

8五、請解釋 JSONP 的工做原理，以及它爲何不是真正的 Ajax。

8六、你使用過 JavaScript 模板系統嗎？若有使用過，請談談你都使用過哪些庫？

8七、請解釋變量聲明提高 (hoisting)。

8八、請描述事件冒泡機制 (event bubbling)。

8九、"attribute" 和 "property" 的區別是什麼？

90、爲何擴展 JavaScript 內置對象不是好的作法？

9一、請指出 document load 和 document DOMContentLoaded 兩個事件的區別。

9二、== 和 === 有什麼不一樣？

9三、請解釋 JavaScript 的同源策略 (same-origin policy)。

9四、如何實現下列代碼：[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

9五、什麼是三元表達式 (Ternary expression)？「三元 (Ternary)」表示什麼意思？

9六、什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

9七、請實現一個遍歷至 100 的 for loop 循環，在能被 3 整除時輸出 "fizz"，在能被 5 整除時輸出 "buzz"，在能同時被 3 和 5 整除時輸出 "fizzbuzz"。

9八、爲什麼一般會認爲保留網站現有的全局做用域 (global scope) 不去改變它，是較好的選擇？

9九、爲什麼你會使用 load 之類的事件 (event)？此事件有缺點嗎？你是否知道其餘替代品，以及爲什麼使用它們？

100、請解釋什麼是單頁應用 (single page app), 以及如何使其對搜索引擎友好 (SEO-friendly)。

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

10二、使用 Promises 而非回調 (callbacks) 優缺點是什麼？

10三、使用一種能夠編譯成 JavaScript 的語言來寫 JavaScript 代碼有哪些優缺點？

10四、你使用哪些工具和技術來調試 JavaScript 代碼？

10五、你會使用怎樣的語言結構來遍歷對象屬性 (object properties) 和數組內容？

10六、請解釋可變 (mutable) 和不變 (immutable) 對象的區別。
   請舉出 JavaScript 中一個不變性對象 (immutable object) 的例子？
   不變性 (immutability) 有哪些優缺點？
   如何用你本身的代碼來實現不變性 (immutability)？

10七、請解釋同步 (synchronous) 和異步 (asynchronous) 函數的區別。

10八、什麼是事件循環 (event loop)？請問調用棧 (call stack) 和任務隊列 (task queue) 的區別是什麼？

10九、解釋 function foo() {} 與 var foo = function() {} 用法的區別

1十、問題：foo的值是什麼？var foo = 10 + '20';

1十一、問題：如何實現如下函數？

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

1十二、下面的語句的返回值是什麼？"i'm a lasagna hog".split("").reverse().join("");

11三、window.foo的值是什麼？( window.foo || ( window.foo = "bar" ) );

11四、下面兩個 alert 的結果是什麼？

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

11五、foo.length的值是什麼？

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

11六、foo.x的值是什麼？

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

11七、下面代碼的輸出是什麼？

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

11八、script元素中的屬性及存放位置

11九、相等(==)和全等(===)操做符判斷相等的流程是怎樣的？

120、JavaScript中有哪些方法定義對象？

12一、<,>,<=,>=的比較規則？

12二、+運算符的工做流程

【21 Essential JavaScript Interview Questions】

12三、JavaScript 有哪些基本類型

12四、區分不一樣類型的方法有哪些，各有什麼問題

12五、閉包的概念 & 用途

12六、apply 和 call 的用途和區別

12七、原型繼承的概念， prototype 和 __proto__ 的區別

12八、JavaScript 如何實現繼承？對象的幾種建立方式？

12九、是否碰到過內存泄露？可否說一下引發內存泄露的常見緣由（網上大部分文章都是跟 IE 相關的，其實沒什麼必要了解，閉包方面有必要知道）？有什麼工具能夠調試？

130、JavaScript 設計模式知道哪些？Proxy 模式怎麼用？

13一、ES6 是否有了解

13二、JavaScript 模塊化（常見規範、工具、實現原理）

13三、walkTheDOM 函數，從 <body> 標籤起，遍歷全部節點並打印標籤名

13四、addClass

13五、實現一個簡單的 pub-sub 庫

13六、實現 _.flatten()

13七、object deep clone

13八、isPrime

13九、quick sort

140、merge sort

14一、binary search

14二、throttle & debounce

14三、實現 Object.create()（不用徹底遵循標準，實現蝴蝶書上的版本就夠了）

14四、Function.prototype.bind

14五、carousel 組件

14六、自動補全組件

14七、overlay 組件

14八、popup 組件

14九、drag & drop 組件，分別用 jQuery、MVVM、React 和 RxJS 實現一遍

150、一小時以內寫一個掃雷遊戲

15一、若是要你實現一個 AMD 加載器，你將如何實現？講一下思路和須要注意的點，最好有僞代碼

15二、Sizzles （jQuery 的選擇器模塊）的實現思路

【前端面試題總結 DOM】

15三、attribute 和 property 的區別

15四、DOM 的事件機制

15五、冒泡與捕獲的概念，如何阻止冒泡

15六、Delegation

15七、鼠標點擊 a 標籤其中會有多少個事件產生

15八、如何區分 dbclick 和 click

15九、ajax 請求中 readyState 有哪些狀態（這個問題我感受太不常考了……但既然見到過那就收錄進來了）

160、ajax 跨域

16一、怎樣算是跨域？

16二、跨域的方法有哪些？實現原理是什麼？兼容性如何？各自有什麼缺點？

16三、JSONP 若是頁面編碼和被請求的資源編碼不一致如何處理

16四、服務器端消息推送有哪些方法？實現原理？兼容性？缺點？

16五、jQuery.ready() 其實是 DOM 中的什麼事件？

16六、window.onload 和 $.ready() 事件有什麼區別？

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

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

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

16九、What is the drawback of creating true private methods in JavaScript?在JavaScript中建立真正的私有方法的缺點是什麼？

170、What is a 「closure」 in JavaScript? Provide an example

17一、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

17二、How to empty an array in JavaScript?【數組】

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

17四、What will be the output of the following code?

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

17五、What will be the output of the following code?

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

17六、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);

17七、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);

17八、What is undefined x 1 in JavaScript?【chrome和firefox表現不一樣】

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

17九、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);

18一、What will be the output of the code below?【連續=】

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

18二、What will be the output of the code below?

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

18三、What is the difference between the function declarations below?

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

18四、What is function hoisting in JavaScript?什麼是JavaScript中的函數提高？
18五、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);
})();

18六、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;

18七、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*】

18八、What is a potential pitfall with using typeof bar === "object" to determine if bar is an object? How can this pitfall be avoided?
18九、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();

19一、What is the significance of, and reason for, wrapping the entire content of a JavaScript source file in a function block?將19二、JavaScript源文件的所有內容包裝在功能塊中的意義和緣由是什麼？
19三、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"
   };
}

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

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

19六、Discuss possible ways to write a function isInteger(x) that determines if x is an integer.
19七、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);
})();

19八、Write a simple function (less than 80 characters) that returns a boolean indicating whether or not a string is a palindrome.【字符串是不是迴文】
19九、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.

20一、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));

20二、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);

20三、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();
  }
};

20四、What is a 「closure」 in JavaScript? Provide an example.

20五、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?

20六、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));

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

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

20八、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]);

20九、What will the following code output to the console:【遞歸】

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

2十、Consider the code snippet below. What will the console output be and why?【做用域】

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

2十一、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());

2十二、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】

21三、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);
  });
}

21四、What’s the output?【Data Types】

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

21五、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();

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

【5 Typical JavaScript Interview Exercises】

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

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

21八、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));

21九、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());

22一、call() and apply()

【JavaScript interview questions and answers】

22二、What are global variables? How are they declared? What are the problems with using globals?【全局變量】

22三、How do you organize your JavaScript code?

22四、What are JavaScript types?

22五、What is the difference between undefined and null?

22六、What is JavaScript's this keyword?

22七、What is event bubbling?

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

22九、How are errors gracefully handled in JavaScript?

230、Can you explain how inheritance works in JavaScript?

23一、How do JavaScript timers work? What is a drawback of JavaScript timers?定時器缺點

【JavaScript 123 interview Question】

23二、what is function hoisting in JavaScript?【hoisting】

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

23三、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);
})();

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

23五、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);

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

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

23八、Describe Singleton Pattern In JavaScript?【設計模式】

23九、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】

24一、Best way to detect undefined object property in JavaScript.

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

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

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

24五、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.
24六、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.

24七、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.

24八、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】

24九、What is JavaScript?

250、Name some of the JavaScript features.

25一、What are the advantages of using JavaScript?

25二、What are disadvantages of using JavaScript?

25三、Is JavaScript a case-sensitive language?

25四、How can you create an Object in JavaScript?

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

25六、How can you create an Array in JavaScript?

25七、What is a named function in JavaScript? How to define a named function?命名函數

25八、How many types of functions JavaScript supports?

25九、How to define a anonymous function?

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

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

26二、What is arguments object in JavaScript?

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

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

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

26六、What is the purpose of 'this' operator in JavaScript?

26七、What are the valid scopes of a variable in JavaScript?【變量】

26八、Which type of variable among global and local, takes precedence over other if names are same?【變量優先級】

26九、What is callback?

270、What is closure?

27一、Give an example of closure?

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

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

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

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

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

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

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

27九、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】

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

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

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

28四、Which built-in method returns the string representation of the number's value?【toString】

28五、What are the variable naming conventions in JavaScript?【命名規範】

28六、How typeof operator works?【typeof】

28七、What typeof returns for a null value?

28八、Can you access Cookie using javascript?【Cookie】

28九、How to create a Cookie using JavaScript?

290、How to read a Cookie using JavaScript?

29一、How to delete a Cookie using JavaScript?

29二、How to redirect a url using JavaScript?

29三、How to print a web page using javascript?

29四、What is Date object in JavaScript?

29五、What is Number object in JavaScript?

29六、How to handle exceptions in JavaScript?

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

【Top 85 JavaScript Interview Questions & Answers】

29八、Enumerate the differences between Java and JavaScript?

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

300、What is negative infinity?

30一、What are undeclared and undefined variables?

30二、Explain how can you submit a form using JavaScript?

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

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

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

30六、What is the use of Void(0)?

30七、What are escape characters?【escape】

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

30九、What are the two basic groups of dataypes in JavaScript?【Primitive與Reference types】

3十、How generic objects can be created?

3十一、Which keywords are used to handle exceptions?

3十二、What is the way to get the status of a CheckBox?

31三、How can a value be appended to an array?

31四、Explain the for-in loop?

31五、Describe the properties of an anonymous function in JavaScript?

31六、What are the various functional components in JavaScript?

31七、Write about the errors shown in JavaScript?

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

【JavaScript Interview Questions】

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

【JavaScript Patterns Collection】

31九、Javascript垃圾回收方法

320、哪些操做會形成內存泄漏？

32一、WEB應用從服務器主動推送Data到客戶端有那些方式？

32二、說說嚴格模式的限制

　　JavaScript知識點合集、包括語法、設計模式、jQuery等

【JOB INTERVIEW QUESTIONNAIRE】

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

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

32五、What is the arity of a function?【參數數量】

32六、~~3;What value is returned from the above statement?【位運算】

【JOB INTERVIEW QUESTIONNAIRE：jQuery-Specific Questions】

32七、Explain "chaining".

32八、Explain "deferreds".

32九、What are some jQuery specific optimizations you can implement?

330、What does .end() do?

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

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

33三、What is the effects (or fx) queue?

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

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

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

33七、Optimize this selector:

【Most Common Technical Interview Question for FrontEnd Developers】

33八、What are namespaces? Give an example.

33九、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?

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

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

34三、Explain what happens when you make an AJAX request?

34四、What happens when you use var?

34五、How would you assign Child Specific Objects?

【JavaScript questions】

34六、What will be value of y?【運算符優先級】

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

34七、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.【類型轉換】

34八、Explain what will be output of each of following expressions:

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

34九、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() {})()

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

add(3)(4) == 7;

35二、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");
}

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

【JavaScript Interview Questions!】有代碼

35四、What is a closure?

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

35六、What is event delegation?

35七、What is event bubbling?

35八、What is hoisting and how does it work?

35九、What does this console?

360、What is the prototype chain?

36一、What does this console?

36二、Rapid-fire questions!

36三、What determines the value of ‘this’?

36四、What is the event loop?

36五、What is the output?

36六、Implement curry.

【What Do I Need to Know to Ace a JavaScript Interview?】相關概念以及參考文獻

36七、Functional programming

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

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

370、Design patterns and inheritance

37一、REST API design

37二、DOM: HTML / CSS / Twitter Bootstrap / jQuery

37三、Search Engine Optimization

37四、Regular expressions

37五、Testing

37六、How can you declare a class in Javascript?

37七、How would you organize your Javascript code?

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

37九、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?

38一、Name some Javascript functions used to convert non numerical values into numbers.【類型轉換數字】

【Top 20 Interview questions for front end Developers】

38二、What are the falsy values in JS?

38三、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();

38四、How to pass function as parameter in another function, Give any example?【高階函數】

38五、What is bind in JS, Explain about function bind?

38六、How to attach an event dynamically to DIV tag in my HTML doc?【委託】

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

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

38八、dvantages and Disadvantages with anonymous function in JS?

38九、Various types of object declaration?【對象聲明】

390、Solve the below problem?【數組操做】

【Front-end developer interview questions】

39一、Asynchronous vs synchronous

39二、IIFE

39三、CORS

【15 JavaScript interview questions and answers】

39四、What are the advantages of using JavaScript?

39五、What are the disadvantages of using JavaScript?

39六、Explain the difference between classical inheritance and prototypal inheritance.【對象】

39七、Give an example of a time that you used functional programming in JavaScript.【函數式編程】

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

39九、What is a RESTful Web Service?

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

40一、Explain the differences between one-way data flow and two-way data binding.【單向與雙向數據流】

40二、Determine the output of the code below. Explain your answer.【浮點數】

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

40三、Determine the output of the code below. Explain your answer.【做用域】

【50 Front End Developer Interview Questions】

40四、When do you use bracket notation versus dot notation for objects?【對象】

40五、How do you change an element attribute with JavaScript?【腳本化屬性】

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

40七、What happens when you pass a function too few or too many arguments in JavaScript?【傳參】

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

40九、How would you retrieve a specific value from an array of objects?【檢索值】

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

4十一、How do you change the class attribute of an element with JS?【腳本化CSS類】

【Commonly asked Interview Questions for Front End Developers】

4十二、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();

41三、Different ways to create objects in JS? Explain Object.defineProperty().【對象】

41四、Scope and execution context in JS?

41五、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】

41六、Singleton through a function【設計模式】

【Front End Web Developer interview questions】

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

41八、Which steps constitute the Critical Rendering Path for web browsers?哪些步驟構成Web瀏覽器的關鍵呈現路徑？

41九、Are objects in Javascript passed by reference or by value?Javascript中的對象是否經過引用或值傳遞？

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

function foo(){ }();

42一、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?【事件循環】

42二、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】

42三、Execution context, especially lexical scope and closures.

42四、Hoisting, function & block scoping and function expressions & declarations.

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

42六、Object prototypes, constructors and mixins.

42七、Composition and high order functions.【高階函數】

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

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

430、When to use function declarations and expressions.什麼時候使用函數聲明和表達式。

43一、Traversal up and down – Node.parentNode, Node.firstChild, Node.lastChild and Node.childNodes.【遍歷】

43二、Traversal left and right – Node.previousSibling and Node.nextSibling.

43三、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】

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

4、算法

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

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

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

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

四、How will you create a linked list in JavaScript?【Singly Linked List】單鏈表

五、for doubly linked list there will be a link backward to the previous element.【Doubly Linked List】雙鏈表

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

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

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

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

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

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

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

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

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

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

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

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

1八、duplicate from unsorted LL】

【排序和搜索（13題）】

【樹的搜索】

【JS: Interview Algorithm】

1九、How would you verify a prime number?【check Prime】素數

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

2一、How do get nth Fibonacci number?【Fibonacci】

2二、How would you find the greatest common divisor of two numbers?【Greatest Common Divisor】最大公約數

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

2四、How would you merge two sorted array?【merge two sorted array】

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

2六、How would you reverse a string in JavaScript?【string reverse】6個小問題

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

2八、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

2九、place but reverse.【reverse in place】

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

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

3二、How will you verify a word as palindrome?【check palindrome】迴文

3三、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】

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

3五、From a unsorted array, check whether there are any two numbers that will sum up to a given number?【Sum of two】指定兩個數字的和搜索

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

3七、Count Total number of zeros from 1 upto n?【Counting Zeros】帶0值的數量

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

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

40、topK

4一、翻轉單鏈表

4二、反轉二叉樹

4三、單向列表判斷是否有環

4四、LeetCode

4五、careercup

【Interview Algorithm Questions in Javascript：Array】

4六、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.

4七、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"

4八、Given an array of integers, find the largest product yielded from three of the integers給定一個整數數組，找到從三個整數產生的最大的乘積

4九、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

5一、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給定一個整數數組，找到兩個元素之間的最大差別，使得較小值的元素必須在更大的元素以前

5二、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）中求解）

5三、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】

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

5五、Given two strings, return true if they are anagrams of one another "Mary" is an anagram of "Army"【變位詞】改變順序組成新單詞，排序後合併相等

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

5七、sensitivity should be taken into account【迴文】正序反序相同

5八、Check if a given string is a isomorphic【同構】相同位置的字符存在一一對應關係能夠相互替換。

【Interview Algorithm Questions in Javascript：Stacks and Queues】

5九、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】

6一、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【十進制轉爲二進制】

6二、Write a recursive function that performs a binary search編寫執行二進制搜索的遞歸函數
【Interview Algorithm Questions in Javascript：Numbers】

6三、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】

6四、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.

5、網絡

一、爲何傳統上利用多個域名來提供網站資源會更有效？

二、請儘量完整得描述從輸入 URL 到整個網頁加載完畢及顯示在屏幕上的整個流程。

三、Long-Polling、Websockets 和 Server-Sent Event 之間有什麼區別？

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

五、什麼是 HTTP method？請羅列出你所知道的全部 HTTP method，並給出解釋。

六、常見的HTTP method

七、從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP爲例)

八、HTTP Request和HTTP Response報文結構是怎樣的？

九、HTTP 狀態碼及其含義
【前端面試題總結】

十、TCP 三次握手

十一、具體過程

十二、爲何要這麼設計

1三、說一下網絡五層模型（HTTP 協議從應用層到底層都基於哪些協議），HTTP 協議頭字段說上來幾個，緩存字段是怎麼定義的，http 和 https 的區別，在具體使用的時候有什麼不同。是否儘量詳細的掌握 HTTP 協議

1四、HTTP 狀態碼

1五、一、二、三、四、5 開頭分別表示什麼

1六、301 和 302 的區別、爲何要區分

1七、304 表示什麼

1八、如何防止 304

1九、keep-alive

20、cookies 是幹嗎的，服務器和瀏覽器之間的 cookies 是怎麼傳的，httponly 的 cookies 和可讀寫的 cookie 有什麼區別，有無長度限制，cookies 被禁用後能夠考慮用什麼替代

2一、GET/POST 區別

2二、一個頁面從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？越詳細越好

2三、關於 HTTP2 知道哪些？對將來前端開發可能會有哪些影響？

【http-api-design】【HTTP API 設計指南翻譯版】

2四、什麼是Etag？

2五、Expires和Cache-Control

2六、關於Http 2.0 你知道多少？

【怎樣向妻子解釋 REST 架構】

【撰寫合格的REST API】

【web前端開發須要瞭解的知識、資料收集】

2七、既然 HTTPS 解決了咱們關注的隱私、安全問題，那麼爲何這麼少的網站使用呢？

2八、HTTPS，百度運維團隊的總結

【Rest】Wiki

【Most Common Technical Interview Question for FrontEnd Developers】

2九、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】

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

6、項目和職業規劃

【Interview questions for a frontend developer】

一、對前端模塊化的認識【AMD CMD】

二、用過哪些設計模式？

三、說說你對AMD和Commonjs的理解

四、說說你對MVC和MVVM的理解

五、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】

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

7、性能

一、你會用什麼工具來查找代碼中的性能問題？

二、你會用什麼方式來加強網站的頁面滾動效能？

三、請解釋 layout、painting 和 compositing 的區別。

四、雅虎 24 條，說出越多越好

五、是否有其餘性能優化的經驗？

六、頁面性能通常能夠有哪些指標

七、頁面性能記錄和分析有哪些方法？除了常見的那些方法以外在現代瀏覽器裏還有其餘什麼新手段嗎？

八、用過什麼性能分析的工具

九、移動端性能優化

【Frontend Interview Questions and Answers for experienced】

十、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?【診斷問題】

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

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

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

1三、Differences between the browser layout, compositing and painting.

1四、When to prefetch and preload resources.什麼時候預取和預加載資源。

8、測試

一、對代碼進行測試的有什麼優缺點？

二、你會用什麼工具測試你的代碼功能？

三、單元測試與功能/集成測試的區別是什麼？

9、安全

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

一、XSS 的概念、知道哪些解決辦法（常規的就行，沒必要太深刻）

二、escape / encodeURI / encodeURIComponent 的區別

三、CSRF 攻擊的概念、防護手段

四、CSP

五、淘寶店鋪裝修的 CSS 過濾、JS 過濾有什麼思路

六、代碼質量

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

10、NodeJS