前端面试题

HTML相关

1、 标签的定义与用法

    http://www.xinran001.com/bbs/thread-72998-1-1.html

2、块级元素和行内元素

     http://www.w3cwhy.com/css-html/html-hkmarka.html 

3、 你真的了解HTML吗？ 雅虎面试题

    http://club.topsage.com/thread-2738399-1-1.html

幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。

事先声明：

◆ 这些题目的来源：面试曾经被问过;工作被别人问过或者遇见过;网上看见过...

◆ 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。

◆ 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我也只是一面，不丢人也不怕丢人。

◆ 如果朋友们有好的面试题欢迎提建议，我会其实补充更新的，先谢谢各位了。

HTML相关

1.

标签的定义与用法。

2. 块级元素和行内元素都有哪些?

3. 你真的了解HTML吗? 雅虎面试题　　把前面黄底那段拿去搜索下就知道了(曾在某浪公司面试的时候被问到过，确实是很好的问题)。

CSS相关

1. 介绍所知道的CSS hack技巧(如：_， *， +， \9， !important 之类)。

2. 介绍CSS盒模型。

3. CSS层叠是什么?介绍一下。

4. 都知道哪些CSS浏览器兼容性问题。

5. 有时会被问到些刁钻点的题，比如position值都有哪些，CSS3都有哪些新内容...

JavaScript基础相关

1. HTTP协议的状态消息都有哪些?(如200、302对应的描述)

2. AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

3. 同步和异步的区别?

4. 简述JavaScript封装。

5. JavaScript继承有哪两种形式形式，进行描述。

6. 什么是闭包?以下代码点击

会输出什么?为什么?能大概说明白的话继续问能想出几种解决办法。

1. > 
2. <</span>html> 
3. <</span>head> 
4. <</span>meta charset="utf-8" /> 
5. <</span>title>闭包演示</</span>title> 
6. <</span>style type="text/css"> 
7.     p {background:gold;}  
8. </</span>style> 
9. <</span>script type="text/javascript">   
10. function init() {      
11.     var pAry = document.getElementsByTagName_r("p");      
12.     for( var i=0; i<</span>pAry.length; i++ ) {      
13.          pAry[i].onclick = function() {      
14.          alert(i);      
15.     }   
16.   }  
17. }  
18. </</span>script>   
19. </</span>head>   
20. <</span>body onload="init();">   
21. <</span>p>产品 0</</span>p>   
22. <</span>p>产品 1</</span>p>   
23. <</span>p>产品 2</</span>p>   
24. <</span>p>产品 3</</span>p>   
25. <</span>p>产品 4</</span>p>   
26. </</span>body>   
27. </</span>html>  

7. 在JS中this关键字的使用场合和用法(如在构造函数中、setTimeout中等)。

8. 简述下cookie的操作，还有cookie的属性都知道哪些。

9. IE与FF的JS兼容性都知道哪些。

10. DOM操作 - 怎样添加、移除、移动、复制、创建和查找节点(这个问题真心是基础题，一般不会问)。

jQuery相关

1. jQuery源码是否尝试去读过?说说基本的架构或者 jQuery.fn.init 中都做了哪些判断。

2. 都知道哪些不好的jQuery书写方式。

3. Sizzle是否有读过?

其它相关的加分项：

1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?

2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?

3. 国内外的JS牛人都知道哪些?

4. 瀑布流布局或者流式布局是否有了解

4. 正则表达式有系统学习过吗(看书或网上教程)?有的话就问问简单点的邮箱验证、URL验证， 或者问问 贪婪匹配与懒惰匹配 的理论知识。

5. Node.js是否有过尝试?到什么程度?说说个人理解的看法?

6. HTML5都有哪些新的JS API?

7. 前端优化知识都知道哪些?

8. 基础算法题(如快速排序，能否一两句说说重要的核心原理或者数组消重等)。

9. 是否有接触过或者了解过重构。

原文：http://www.cnblogs.com/Darren_code/archive/2012/01/31/questions.html

 

///////////////////////////////

//////////////////////////////

 

 

一般问题

---

你用Twitter吗？ （在天朝最好问你用微博吗？）

• 如果用，你都关注那些人？

你用Github吗？

• 如果用，你关注的项目有什么？

你关注的博客有那些？

你使用那些版本管理系统，比如Git，SVN等？

你常用的开发环境是怎样的？比如操作系统，文本编辑器，浏览器，及其他工具等。

你能描述一下你制作一个网页的工作流程吗？

你能描述一下渐进增强和优雅降级之间的不同吗?

• 如果提到了特性检测，可以加分。

请解释一下什么是语义化的HTML。

你更喜欢在哪个浏览器下进行开发？你使用那些开发人员工具？

你如何对网站的文件和资源进行优化？

• 期待的解决方案包括：

1. 文件合并
2. 文件最小化/文件压缩
3. 使用CDN托管
4. 缓存的使用
5. 其他

为什么利用多个域名来存储网站资源会更有效？

• 浏览器一次可以从一个域名下做多少资源？

请说出三种减低页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

如果你接到了一个使用Tab来缩进代码的项目，但是你喜欢空格，你会怎么做？

• 建议这个项目使用像EditorConfig(http://editorconfig.org)之类的规范
• 为了保持一致性，转换成项目原有的风格
• 直接使用VIM的retab命令

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

• 如果不使用JS来完成，可以加分。

你都使用那些工作来测试代码的性能？

• 例如JSPerf (http://jsperf.com/)
• 例如Dromaeo (http://dromaeo.com/)
• 其它。

如果今年你打算熟练掌握一项新技术，那会是什么？

请谈一下你对网页标准和标准制定机构重要性的理解。

什么是FOUC？你如何来避免FOUC？

HTML相关问题

---

文档类型的作用是什么？你知道多少种文档类型？

浏览器标准模式和怪异模式之间的区别是什么？

使用XHTML的局限有那些？

• 如果页面使用'application/xhtml+xml'会有什么问题吗？

如果网页内容需要支持多语言，你会怎么做？

• 在设计和开发多语言网站时，有哪些问题你必须要考虑？

在HTML5的页面中可以使用XHTML的语法吗？

在HTML5中如何使用XML？

'data-'属性的作用是什么？

如果把HTML5看作做一个开放平台，那它的构建模块有那些？

请描述一下cookies，sessionStorage和localStorage的区别？

JS相关问题

---

你使用过那些Javascript库？

你是否研究过你所使用的JS库或者框架的源代码？

什么是哈希表？

'undefined'变量和'undeclared'变量分别指什么？

闭包是什么，如何使用它，为什么要使用它？

• 你喜欢的使用闭包的模式是什么？

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

请解释什么是Javascript的模块模式，并举出实用实例。

• 如果有提到无污染的命名空间，可以考虑加分。
• 如果你的模块没有自己的命名空间会怎么样？

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

请指出Javascript宿主对象和内置对象的区别？

指出下列代码的区别：

1. function Person(){} var person = Person() var person = new Person() 

'.call'和'.apply'的区别是什么？

请解释'Funciton.prototype.bind'的作用？

你如何优化自己的代码？

你能解释一下JavaScript中的继承是如何工作的吗？

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

• 大多数生成的广告代码依旧使用'document.write()'，虽然这种用法会让人很不爽。

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

请尽可能详尽的解释AJAX的工作原理。

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

你使用过JavaScript的模板系统吗？

• 如有使用做，请谈谈你都使用过那些类似库文件。比如Mustache.js,Handlebars等等。

请解释变量声明提升。

请描述下事件冒泡机制。

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

为什么扩展JavaScript内置对象是个坏做法？

为什么扩展JavaScript内置对象是个好做法？

请指出document load和document ready的区别。(这是个问题的问题）

'=='和'==='有什么不同？

你如何获取浏览器URL中查询字符串中的参数。

请解释一下JavaScript的同源策略。

请解释一下事件代理。

请描述一下JavaScript的继承模式。

如何实现下列代码：

1. [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 

描述一种JavaScript memoization(避免重复运算)的策略。

什么是三元条件语句？

函数的参数元是什么？

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

JS代码示例：

1. ~~3.14 

问题：上面的语句的返回值是什么？ 答案：3

1. "i'm a lasagna hog".split("").reverse().join(""); 

问题：上面的语句的返回值是什么？ 答案："goh angasal a m'i"

1. ( window.foo || ( window.foo = "bar" ) ); 

问题：window.foo的值是什么？ 答案："bar" 只有window.foo为假时的才是上面答案，否则就是它本身的值。

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

问题：上面两个alert的结果是什么？ 答案: "Hello World" & ReferenceError: bar is not defined

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

问题：foo.length的值是什么？ 答案：'2'

1. var foo = {}; 
2. foo.bar = 'hello'; 

问题：foo.length的值是什么？ **答案: undefined

jQuery相关问题

---

解释"chaining"。

解释"deferreds"。

你知道那些针对jQuery的优化方法。

请解释'.end()'的用途。

你如何给一个事件处理函数命名空间，为什么要这样做？

请说出你可以传递到jQuery方法的四种不同值。

• 选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。

什么是效果队列？

请指出'.get()','[]','eq()',的区别。

请指出'.bing()','.live()'和'.delegate()'的区别。

请指出'$'和'$.fn'的区别？或者说出'$.fn'的用户。

请优化下列选择器：

1. $(".foo div#bar:eq(0)") 

CSS相关问题

---

描述css reset的作用和用途。

描述下浮动和它的工作原理。

清除浮动的方法有那些，分别适用于什么情形。

解释css sprites,如何使用。

你最喜欢的图片替换方法是什么，你如何选择使用。

讨论CSS hacks，条件引用或者其他。

如何为有功能限制的浏览器提供网页。

• 你会使用那些技术和处理方法。

如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用。

你使用过网格系统吗？如果使用过，你最喜欢哪种？

你使用过meidia queries（媒体查询）吗，或者移动网站相关的CSS布局。

你熟悉SVG样式的书写吗？

如何优化网页的打印样式。

在书写高效CSS文件时会有哪些问题需要考虑。

你使用CSS预处理器吗？(SASS,Compass,Stylus,LESS)

• 如果使用，描述你的喜好。

你是否接触过使用非标准字体的设计？

• 字体服务，Google Webfonts, Typekit,等等。

请解释浏览器是如何根据CSS选择器选择对应元素的。

可选的有趣问题

---

你编写过的最酷的代码是什么？其中你最自豪的是什么？

你知道HTML5的帮派标志吗？

你是否正在或曾经在一艘船上。(不懂这个幽默）

你使用的开发工具中，你最喜欢的部分是什么？

你有什么业余项目吗？是那种类型的？

解释cornify的重要性？(本题完全摸不到头脑）

在一张纸上，垂直写下ABCDE，然后不用任何代码，将他们到序排列。

• 静静的看他们是否将纸反转。

海盗还是忍者？

• 如果是两者的合体，并有恰当理由，可以加分。如果是僵尸猴子海盗加忍者加两分。（注：此题文化差异过大）

如果没有在Web开发，你会做什么？

卡门圣迭哥的隐藏处在哪里？

• 提示：本题的答案永远是错的。

你最爱的IE特性是什么？

完句填空： Brendan Eich和Doug Crockford是JavaScript的________。

讨论：jQuery是牛逼的库还是最牛逼的库。

原文链接：GitHub

感谢这些贡献者：

@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