一份來自於全球的前端面試題清單，看看老外喜歡考哪些題（部分有答案）
方括號中的藍色標題是題目的出處，有些題目在原址內包含答案。蒐集的大部分外國前端面試題沒有做翻譯，單詞並不難，大家應該看得懂。題目旁邊的方括號內， 簡單記錄了與此題相關的知識點。總共大概一千多道，包含國內的題目，如有錯誤，歡迎指正。有些原鏈可能已無法開啟，有些可能需要代理才能檢視。
一、HTML
1、What is doctype? Why do u need it?
2、What is the use of data-* attribute?
3、How can you generate public key in html?【keygen】
4、How can u change direction of html text?【bdo】
5、How can u highlight text in html?【mark】
6、Can u apply css rule to a part of html document?【scoped】
7、Does the following trigger http request at the time of page load?【http request】
8、Does style1.css have to be downloaded and parsed before style2.css can be fetched?【download order】
9、What are optional closing tag? and why would u use it?【self closing tag】
10、What is the difference between span and div?【span vs div】
11、When should you use section, div or article?【div, section & article】
12、What are the difference between svg and canvas?【svg vs canvas】
13、How to serve a page content in multiple languages?【multiple languages】
14、Difference between standard/ strict mode and quirks mode?【standard & quirks mode】
15、What is semantic HTML?【semantic】
16、你能描述漸進增強 (progressive enhancement) 和優雅降級 (graceful degradation) 之間的不同嗎?
17、瀏覽器同一時間可以從一個域名下載多少資源？有什麼例外嗎？
18、請解釋什麼是 ARIA 和螢幕閱讀器 (screenreaders)，以及如何使網站實現無障礙訪問 (accessible)。
19、什麼是跨域資源共享 (CORS)？它用於解決什麼問題？
20、瀏覽器標準模式 (standards mode) 、幾乎標準模式（almost standards mode）和怪異模式 (quirks mode) 之間的區別是什麼？
21、如果頁面使用 'application/xhtml+xml' 會有什麼問題嗎？
22、請解釋 <script>、<script async> 和 <script defer> 的區別。
23、為什麼通常推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 之前？你知道有哪些例外嗎？
24、什麼是漸進式渲染 (progressive rendering)？
25、你用過哪些不同的 HTML 模板語言？
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’會有什麼問題嗎？
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
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.
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?
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?什麼是應用程式快取中的回退？
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同時更新兩個幀？
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?可以將具有類名稱的幾個選擇器分組在一起嗎？
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?
179、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
180、HTML與XHTML——二者有什麼區別
181、Semantics fanatic or divs and spans as necessary?
182、Do you use WAI-ARIA?
183、Can you describe the difference between progressive enhancement and graceful degradation?
184、Explain what "Semantic HTML" means.
185、Are you familiar with Jade or Haml?
186、What is the advantage of collapsing white space?【HTML中只能用一個空格符】
187、Why do we need to use W3C standard code?
188、Why is HTML5 History API so essential for all single page applications?【History】
189、Why would you use <strong> instead of <b> ?
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
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】
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、塊級元素的相關特點
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
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.
178、How do you include comments in CSS?
179、Have you utilized any CSS libraries or frameworks?
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:
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?
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選擇器原理】
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. 【偽類】
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>
243、Have you used Sass? What's good about it?
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】
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?【行內元素】
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?
256、Describe z-index and how stacking context is formed.【z-index】
257、How is responsive design different from adaptive design?響應式設計與自適應設計有何不同？
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
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】
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、+運算子的工作流程
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 的選擇器模組）的實現思路
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;
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