前端笔试面试题
前段时间去某公司（不是BAT）面试实习生~在这分享一下提及的知识点~还有笔试题目等
一去到，先不计时的一份笔试题~写完跟他说就好了~貌似我大概用了差不多一个小时吧，12道题的样子，不过我已经全部记得了~我说说我记得的吧，顺便贴一下，我回来之后去找的答案
1，谈谈前端性能的优化，分别说说CSS，JS有哪几种优化方式？
当时给我写的空间略小，我就简单写了一下比较常见的CSS置header，JS置body底部，优化图片的大小，有sprite图来减少HTTP请求，合并重复的CSS，JS代码等等，后来想想写的还挺少的~不过后来面试没问到~
然后我找到的答案是~说真的不少的赶脚~
对于为什么要尽量减少 HTTP 请求 ，其实我之前并不是很了解，刚刚找了一下发现前端乱炖有篇文章讲得挺详细的~
http://www.html-js.com/article/Number-of-requests-from-reduced-about-http
①CSS的优化
1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2. 避免 CSS 表达式 (Avoid CSS Expressions)
3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External
4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
5. 使用 <link> 而不是@importChoose <link> over @import
6. 避免使用Filter (Avoid Filters)
①Javascript的优化
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. Make JavaScript and CSS External
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)
5. 减少 DOM 访问 (Minimize DOM Access)
附上Yahoo前端优化性能规则
http://segmentfault.com/a/1190000000735395
最近翻博客的时候，有人提出前端优化应该不应忽视的HTML的优化~
http://www.infoq.com/cn/news/2010/05/baidu-html-optimize
2，盒子模型，标准模型（strict mode）和怪异模型（quirks mode）的区别
这个我直接给他两个图，两句解释一下完事~
IE盒子模型即怪异模型~
更多见：http://www.heshare.com/201308/419.html
3.谈谈语义化的理解
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4.什么是闭包，写一个简单的闭包~谈谈闭包的优缺点
之前看了很多解释都挺晕的~最近看了一篇感觉是我看过讲得最详细最好的~
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
闭包优点1.希望一个变量长期驻扎在内存中2.避免全局变量的污染3.私有成员的存在
闭包缺点：过度使用闭包会导致性能的下降。函数里放匿名函数，则产生了闭包；产生内存泄露问题，由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素
5.call() 和 .apply() 的区别和作用？
这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。它们的区别仅在于接收参数的方式不同，apply（）方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array实例，也可以是argument对象。而在使用call()方法的时，传递函数的参数必须逐个列举出来。如下
Sum.apply(this, argument) 或 sum.apply(this, [num1，num2])
Sum.call(this, num1, num2)
更详细的解释可见：http://segmentfault.com/a/1190000000660786#articleHeader15
6.用两种方式进行数组去重
第一种是比较常规的方法思路：
1.构建一个新的数组存放结果
2.for循环中每次从原数组中取出一个元素，用indexOf查找新数组中是否有该元素
3.若没有，则存到结果数组中
1 Array.prototype.unique=function(){
2 var outArr=[];
3 for(var i=0;i<this.length;i++){
4 if(outArr.indexOf(this[i])==-1){
5 outArr.push(this[i]);
6 }
7 }
8 return outArr;
9 };
第二种方法比上面的方法效率要高
思路：
1.先将原数组进行排序
2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置
3.如果不相同，则将该元素存入结果数组中
第二种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了。
第三种方法（推荐使用）
思路：
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
除了上面那些，还经常被面试官要去现场用js手写一些简单的数据结构，例如二分法查找，排序等等~还有被问到几次的就是写一个闭包，用js写一个类的继承等等~
最后贴一下我之前看到算是比较全的前端面试题：
http://segmentfault.com/a/1190000002562454
希望以上对大家有用~在准备实习面试的期间，借这个机会真的学习到了很多~也算是在其中有所收获~谢谢~也希望对大家有用~
/****************美丽分割线*******************/
PS：此文原址http://www.cnblogs.com/AllenChou/p/4684548.html，谢谢~
---恢复内容结束---
前端笔试面试题
q前段时间去某公司（不是BAT）面试实习生~在这分享一下提及的知识点~还有笔试题目等~
一去到，先不计时的一份笔试题~写完跟他说就好了~貌似我大概用了差不多一个小时吧，12道题的样子，不过我已经全部记得了~我说说我记得的吧，顺便贴一下，我回来之后去找的答案~
1，谈谈前端性能的优化，分别说说CSS，JS有哪几种优化方式？
当时给我写的空间略小，我就简单写了一下比较常见的CSS置header，JS置body底部，优化图片的大小，有sprite图来减少HTTP请求，合并重复的CSS，JS代码等等，后来想想写的还挺少的~不过后来面试没问到~
然后我找到的答案是~说真的不少的赶脚~
对于为什么要尽量减少 HTTP 请求 ，其实我之前并不是很了解，刚刚找了一下发现前端乱炖有篇文章讲得挺详细的~
http://www.html-js.com/article/Number-of-requests-from-reduced-about-http
①CSS的优化
1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2. 避免 CSS 表达式 (Avoid CSS Expressions)
3. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External
4. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
5. 使用 <link> 而不是@importChoose <link> over @import
6. 避免使用Filter (Avoid Filters)
①Javascript的优化
1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. Make JavaScript and CSS External
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)
5. 减少 DOM 访问 (Minimize DOM Access)
附上Yahoo前端优化性能规则
http://segmentfault.com/a/1190000000735395
最近翻博客的时候，有人提出前端优化应该不应忽视的HTML的优化~
http://www.infoq.com/cn/news/2010/05/baidu-html-optimize
2，盒子模型，标准模型（strict mode）和怪异模型（quirks mode）的区别
这个我直接给他两个图，两句解释一下完事~
IE盒子模型即怪异模型~
更多见：http://www.heshare.com/201308/419.html
3.谈谈语义化的理解
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4.什么是闭包，写一个简单的闭包~谈谈闭包的优缺点
之前看了很多解释都挺晕的~最近看了一篇感觉是我看过讲得最详细最好的~
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
闭包优点1.希望一个变量长期驻扎在内存中2.避免全局变量的污染3.私有成员的存在
闭包缺点：过度使用闭包会导致性能的下降。函数里放匿名函数，则产生了闭包；产生内存泄露问题，由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素
5.call() 和 .apply() 的区别和作用？
这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。它们的区别仅在于接收参数的方式不同，apply（）方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是Array实例，也可以是argument对象。而在使用call()方法的时，传递函数的参数必须逐个列举出来。如下
Sum.apply(this, argument) 或 sum.apply(this, [num1，num2])
Sum.call(this, num1, num2)
更详细的解释可见：http://segmentfault.com/a/1190000000660786#articleHeader15
6.用两种方式进行数组去重
第一种是比较常规的方法思路：
1.构建一个新的数组存放结果
2.for循环中每次从原数组中取出一个元素，用indexOf查找新数组中是否有该元素
3.若没有，则存到结果数组中
1 Array.prototype.unique=function(){
2 var outArr=[];
3 for(var i=0;i<this.length;i++){
4 if(outArr.indexOf(this[i])==-1){
5 outArr.push(this[i]);
6 }
7 }
8 return outArr;
9 };
第二种方法比上面的方法效率要高
思路：
1.先将原数组进行排序
2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置
3.如果不相同，则将该元素存入结果数组中
第二种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了。
第三种方法（推荐使用）
思路：
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
除了上面那些，还经常被面试官要去现场用js手写一些简单的数据结构，例如二分法查找，排序等等~还有被问到几次的就是写一个闭包，用js写一个类的继承等等~
最后贴一下我之前看到算是比较全的前端面试题：
http://segmentfault.com/a/1190000002562454
希望以上对大家有用~在准备实习面试的期间，借这个机会真的学习到了很多~也算是在其中有所收获~谢谢~也希望对大家有用~
/****************美丽分割线*******************/
PS：此文原址http://www.cnblogs.com/AllenChou/p/4684548.html，谢谢~
