diff --git a/Chinese/README.md b/Chinese/README.md new file mode 100644 index 0000000..5defc36 --- /dev/null +++ b/Chinese/README.md @@ -0,0 +1,365 @@ +#JOB INTERVIEW QUESTIONNAIRE +#前端工程师面试问题 + +@version 1.0 +@版本 1.0 +##Contributors +##贡献者 + +@bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) + +## General Questions: +## 一般问题 +* Are you on Twitter? +* 你用Twitter吗? (在天朝最好问你用微博吗?) + * If so, who do you follow on Twitter? + * 如果用,你都关注那些人? +* Are you on GitHub? +* 你用Github吗? + * If so, what are some examples of repos you follow + * 如果用,你关注的项目有什么? +* What blogs do you follow? +* 你关注的博客有那些? +* What version control systems have you used (Git, SVN etc.)? +* 你使用那些版本管理系统,比如Git,SVN等? +* What is your preferred development environment? (OS, Editor, Browsers, Tools etc.) +* 你常用的开发环境是怎样的?比如操作系统,文本编辑器,浏览器,及其他工具等。 +* Can you describe your workflow when you create a web page? +* 你能描述一下你制作一个网页的工作流程吗? +* Can you describe the difference between progressive enhancement and graceful degradation? +* 你能描述一下渐进增强和优雅降级之间的不同吗? + * Bonus points for describing feature detection + * 如果提到了特性检测,可以加分。 +* Explain what "Semantic HTML" means. +* 请解释一下什么是语义化的HTML。 +* What browser do you primary develop in and what developer tools do you use? +* 你更喜欢在哪个浏览器下进行开发?你使用那些开发人员工具? +* How would you optimize a websites assets/resources? +* 你如何对网站的文件和资源进行优化? + * Looking for a number of solutions which can include: + * 期待的解决方案包括: + * File concatenation + * 文件合并 + * File minification + * 文件最小化/文件压缩 + * CDN Hosted + * 使用CDN托管 + * Caching + * 缓存的使用 + * etc. + * 其他 +* Why is it better to serve site assets from multiple domains? +* 为什么利用多个域名来存储网站资源会更有效? + * How many resources will a browser download from a given domain at a time? + * 浏览器一次可以从一个域名下做多少资源? +* Name 3 ways to decrease page load. (perceived or actual load time) +* 请说出三种减低页面加载时间的方法。(加载时间指感知的时间或者实际加载时间) +* If you jumped on a project and they used tabs and you used spaces, what would you do? +* 如果你接到了一个使用Tab来缩进代码的项目,但是你喜欢空格,你会怎么做? + * Suggest the project utilize something like EditorConfig (http://editorconfig.org) + * 建议这个项目使用像EditorConfig(http://editorconfig.org)之类的规范 + * Conform to the conventions (stay consistant) + * 为了保持一致性,转换成项目原有的风格 + * `issue :retab! command` + * 直接使用VIM的retab命令 +* Write a simple slideshow page +* 请写一个简单的幻灯效果页面 + * Bonus points if it does not use JS. + * 如果不使用JS来完成,可以加分。 +* What tools do you use to test your code's performance? +* 你都使用那些工作来测试代码的性能? + * JSPerf (http://jsperf.com/) + * 例如JSPerf (http://jsperf.com/) + * Dromaeo (http://dromaeo.com/) + * 例如Dromaeo (http://dromaeo.com/) + * etc. + * 其它。 +* If you could master one technology this year, what would it be? +* 如果今年你打算熟练掌握一项新技术,那会是什么? +* Explain the importance of standards and standards bodies. +* 请谈一下你对网页标准和标准制定机构重要性的理解。 +* What is FOUC? How do you avoid FOUC? +* 什么是FOUC?你如何来避免FOUC? + +## HTML-Specific Questions: +## HTML相关问题 + +* What's a `doctype` do, and how many can you name? +* 文档类型的作用是什么?你知道多少种文档类型? +* What's the difference between standards mode and quirks mode? +* 浏览器标准模式和怪异模式之间的区别是什么? +* What are the limitations when serving XHTML pages? +* 使用XHTML的局限有那些? + * Are there any problems with serving pages as `application/xhtml+xml`? + * 如果页面使用'application/xhtml+xml'会有什么问题吗? +* How do you serve a page with content in multiple languages? +* 如果网页内容需要支持多语言,你会怎么做? + * What kind of things must you be wary of when design or developing for multilingual sites? + * 在设计和开发多语言网站时,有哪些问题你必须要考虑? +* Can you use XHTML syntax in HTML5? +* 在HTML5的页面中可以使用XHTML的语法吗? +* How do you use XML in HTML5? +* 在HTML5中如何使用XML? +* What are `data-` attributes good for? +* 'data-'属性的作用是什么? +* What are the content models in HTML4 and are they different in HTML5? +* HTML4的内容模型是什么,它们在HTML5有什么不同吗? +* Consider HTML5 as an open web platform. What are the building blocks of HTML5? +* 如果把HTML5看作做一个开放平台,那它的构建模块有那些? +* Describe the difference between cookies, sessionStorage and localStorage. +* 请描述一下cookies,sessionStorage和localStorage的区别? +## JS-Specific Questions +## JS相关问题 + +* Which JavaScript libraries have you used? +* 你使用过那些Javascript库? +* Have you ever looked at the source code of the libraries/frameworks you use? +* 你是否研究过你所使用的JS库或者框架的源代码? +* How is JavaScript different from Java? +* Javascript和Java有什么不同? +* What's a hashtable? +* 什么是哈希表? +* What are `undefined` and `undeclared` variables? +* 'undefined'变量和'undeclared'变量分别指什么? +* What is a closure, and how/why would you use one? +* 闭包是什么,如何使用它,为什么要使用它? + * Your favorite pattern used to create them? argyle (Only applicable to IIFEs) + * 你喜欢的使用闭包的模式是什么? +* What's a typical use case for anonymous functions? +* 请举出一个匿名函数的典型用例? +* Explain the "JavaScript module pattern" and when you'd use it. +* 请解释什么是Javascript的模块模式,并举出实用实例。 + * Bonus points for mentioning clean namespacing. + * 如果有提到无污染的命名空间,可以考虑加分。 + * What if your modules are namespace-less? + * 如果你的模块没有自己的命名空间会怎么样? +* How do you organize your code? (module pattern, classical inheritance?) +* 你如何组织自己的代码?是使用模块模式,还是使用经典继承的方法? +* What's the difference between host objects and native objects? +* 请指出Javascript宿主对象和内置对象的区别? +* Difference between: +* 指出下列代码的区别: +```javascript +function Person(){} var person = Person() var person = new Person() +``` +* What's the difference between `.call` and `.apply`? +* '.call'和'.apply'的区别是什么? +* explain `Function.prototype.bind`? +* 请解释'Funciton.prototype.bind'的作用? +* When do you optimize your code? +* 你如何优化自己的代码? +* Can you explain how inheritance works in JavaScript? +* 你能解释一下JavaScript中的继承是如何工作的吗? +* When would you use `document.write()`? +* 在什么时候你会使用'document.write()'? + * Most generated ads still utilize `document.write()` although its use is frowned upon + * 大多数生成的广告代码依旧使用'document.write()',虽然这种用法会让人很不爽。 +* What's the difference between feature detection, feature inference, and using the UA string +* 请指出浏览器特性检测,特性推断和浏览器UA字符串嗅探的区别? +* Explain AJAX in as much detail as possible +* 请尽可能详尽的解释AJAX的工作原理。 +* Explain how JSONP works (and how it's not really AJAX) +* 请解释JSONP的工作原理,以及它为什么不是真正的AJAX。 +* Have you ever used JavaScript templating? +* 你使用过JavaScript的模板系统吗? + * If so, what libraries have you used? (Mustache.js, Handlebars etc.) + * 如有使用做,请谈谈你都使用过那些类似库文件。比如Mustache.js,Handlebars等等。 +* Explain "hoisting". +* 请解释变量声明提升。 +* Describe event bubbling. +* 请描述下事件冒泡机制。 +* What's the difference between an "attribute" and a "property"? +* "attribute"和"property"的区别是什么? +* Why is extending built in JavaScript objects not a good idea? +* 为什么扩展JavaScript内置对象是个坏做法? +* Why is extending built ins a good idea? +* 为什么扩展JavaScript内置对象是个好做法? +* Difference between document load event and document ready event? +* 请指出document load和document ready的区别。(这是个问题的问题) +* What is the difference between `==` and `===`? +* '=='和'==='有什么不同? +* Explain how you would get a query string parameter from the browser window's URL. +* 你如何获取浏览器URL中查询字符串中的参数。 +* Explain the same-origin policy with regards to JavaScript. +* 请解释一下JavaScript的同源策略。 +* Explain event delegation. +* 请解释一下事件代理。 +* Describe inheritance patterns in JavaScript. +* 请描述一下JavaScript的继承模式。 +* Make this work: +* 如何实现下列代码: +```javascript +[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] +``` +* Describe a strategy for memoization (avoiding calculation repetition) in JavaScript. +* 描述一种JavaScript memoization(避免重复运算)的策略。 +* Why is it called a Ternary statement, what does the word "Ternary" indicate? +* 什么是三元条件语句? +* What is the arity of a function? +* 函数的参数元是什么? +* What is `"use strict";`? what are the advantages and disadvantages to using it? +* 什么是"use strict"?使用它的好处和坏处分别是什么? + +## JS-Code Examples: + +```javascript +~~3.14 +``` +Question: What value is returned from the above statement? +问题:上面的语句的返回值是什么? +**Answer: 3** +**答案:3** + +```javascript +"i'm a lasagna hog".split("").reverse().join(""); +``` +Question: What value is returned from the above statement? +问题:上面的语句的返回值是什么? +**Answer: "goh angasal a m'i"** +**答案:"goh angasal a m'i"** + +```javascript +( window.foo || ( window.foo = "bar" ) ); +``` +Question: What is the value of window.foo? +问题:window.foo的值是什么? +**Answer: "bar"** +**答案:"bar"** +only if window.foo was falsey otherwise it will retain its value. +只有window.foo为假的才是上面答案,否则就是它本身的值。 + +```javascript +var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); +``` +Question: What is the outcome of the two alerts above? +问题:上面两个alert的结果是什么 +**Answer: "Hello World" & ReferenceError: bar is not defined** +**答案: "Hello World" & ReferenceError: bar is not defined** + +```javascript +var foo = []; +foo.push(1); +foo.push(2); +``` +Question: What is the value of foo.length? +问题:foo.length的值是什么? +**Answer: `2` +**答案:'2'** + +```javascript +var foo = {}; +foo.bar = 'hello'; +``` +Question: What is the value of foo.length? +问题:foo.length的值是什么? +**Answer: `undefined` +**答案: `undefined` + + +## jQuery-Specific Questions: +## jQuery相关问题 + +* Explain "chaining". +* 解释"chaining"。 +* Explain "deferreds". +* 解释"deferreds"。 +* What are some jQuery specific optimizations you can implement? +* 你知道那些针对jQuery的优化方法。 +* What does `.end()` do? +* 请解释'.end()'的用途。 +* How, and why, would you namespace a bound event handler? +* 如何给一个绑定事件理函数命名空间,为什么要这样做? +* Name 4 different values you can pass to the jQuery method. +* 请说出你可以传递到jQuery方法的四种不同值。 + * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. + * 选择器(字符串),HTML(字符串),回调函数,HTML元素,对象,数组,元素数组,jQuery对象等。 +* What is the effects (or fx) queue? +* 什么是效果队列? +* What is the difference between `.get()`, `[]`, and `.eq()`? +* 请指出'.get()','[]','eq()',的区别。 +* What is the difference between `.bind()`, `.live()`, and `.delegate()`? +* 请指出'.bing()','.live()'和'.delegate()'的区别。 +* What is the difference between `$` and `$.fn`? Or just what is `$.fn`. +* 请指出'$'和'$.fn'的区别?或者说出'$.fn'的用户。 +* Optimize this selector: +* 请优化下列选择器: +```javascript +$(".foo div#bar:eq(0)") +``` + +## CSS-Specific Questions: +## CSS相关问题 + +* Describe what a "reset" CSS file does and how it's useful. +* 描述css reset的作用。 +* Describe Floats and how they work. +* 描述下浮动和它的工作原理。 +* What are the various clearing techniques and which is appropriate for what context? +* 清楚浮动的方法有那些,分别适用于什么情形。 +* Explain CSS sprites, and how you would implement them on a page or site. +* 解释css sprites,如何使用。 +* What are your favourite image replacement techniques and which do you use when? +* 你最喜欢的图片替换方法是什么,你如何选择使用。 +* CSS property hacks, conditionally included .css files, or... something else? +* CSS怪技,条件引用或者其他。 +* How do you serve your pages for feature-constrained browsers? +* 如何为有功能限制的浏览器提供网页。 + * What techniques/processes do you use? + * 你会使用那些技术和处理方法。 +* What are the different ways to visually hide content (and make it available only for screen readers)? +* 如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用。 +* Have you ever used a grid system, and if so, what do you prefer? +* 你使用过网格系统吗?如果使用过,你最喜欢哪种? +* Have you used or implemented media queries or mobile specific layouts/CSS? +* 你使用过meidia queries(媒体查询)吗,或者移动网站相关的CSS布局。 +* Any familiarity with styling SVG? +* 你熟悉SVG样式的书写吗? +* How do you optimize your webpages for print? +* 如何优化网页的打印样式。 +* What are some of the "gotchas" for writing efficient CSS? +* 在书写高效CSS文件时会有哪些问题需要考虑。 +* Do you use CSS preprocessors? (SASS, Compass, Stylus, LESS) +* 你使用CSS预处理器吗?(SASS,Compass,Stylus,LESS) + * If so, describe what you like and dislike about the CSS preprocessors you have used. + * 如果使用,描述你的喜好。 +* How would you implement a web design comp that uses non-standard fonts? +* 你是否接触过使用非标准字体的设计? + * Webfonts (font services like: Google Webfonts, Typekit etc.) + * 字体服务,Google Webfonts, Typekit,等等。 +* Explain how a browser determines what elements match a CSS selector? +* 请解释浏览器是如何根据CSS选择器选择对应元素的。 +## Optional fun Questions: +## 可选的有趣问题 + +* What's the coolest thing you've ever coded, what are you most proud of? +* 你编写过的最酷的代码是什么?其中你最自豪的是什么? +* Do you know the HTML5 gang sign? +* 你知道HTML5帮的标志吗? +* Are you now, or have you ever been, on a boat. +* 你是否正在或曾经在一艘船上。 +* What are your favorite parts about the developer tools you use? +* 你使用的开发工具中,你最喜欢的部分是什么? +* Do you have any pet projects? What kind? +* 你有什么业余项目吗?是那种类型的? +* Explain the significance of "cornify". +* 解释cornify的重要性? +* On a piece of paper, write down the letters A B C D E vertically. Now put these in descending order without writing one line of code. +* 在一张纸上,垂直写下ABCDE,然后不用任何代码,将他们到序排列。 + * Wait and see if they turn the paper upside down + * 静静的看他们是否将纸反转。 +* Pirate or Ninja? +* 海盗还是忍者? + * Bonus if it's a combo and a good reason was given (+2 for zombie monkey pirate ninjas) + * 如果是两者的合体,并有恰当理由,可以加分。如果是僵尸猴子海盗加忍者加两分。 +* If not Web Development, what would you be doing? +* 如果没有在Web开发,你会做什么? +* Where in the world is Carmen Sandiego? +* 卡门圣迭哥的隐藏处在哪里? + * Hint: their answer is always wrong + * 提示:本题的答案永远是错的。 +* What's your favorite feature of Internet Explorer? +* 你最爱的IE特性是什么? +* Complete this sentence: Brendan Eich and Doug Crockford are the __________ of javascript. +* 完句填空: Brendan Eich和Doug Crockford是JavaScript的____________。 +* jQuery: a great library or the greatest library? Discuss. +* 讨论:jQuery是牛逼的库还是最牛逼的库。