前端面试问题
Posted qiweile
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试问题相关的知识，希望对你有一定的参考价值。
1.你在昨天/本周学到了什么？
很直接！就是考察最近学习了没？学到了点啥？如果没学还真不好糊弄。
2.编写代码的哪些方面能够使你兴奋或感兴趣？
享受代码运行成功时的成就感。
3.在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？
4.谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。)
喜欢用Mac、sublime、chrome等。
5.你能描述一下当你制作一个网页的工作流程吗？
6.你能描述一下渐进增强和优雅降级之间的不同吗?
7.请解释一下什么是“语义化的 html”。
语义化一句话来概括就是使用正确的标签做正确的事。在没有css样式的情况下，也能使网站层次清晰可读。语义化的好处之一是还利于网站的SEO。
8.你如何对网站的文件和资源进行优化？
- JS方面：合并脚本，压缩脚本，脚本置下，按需加载脚本，缓存查找的节点，不频繁操作DOM，使用事件委托。
- CSS方面：合并样式表，压缩样式表，样式置上，缩短类名命名，减少层级选择，使用审查工具查找闲置样式。
- HTML方面：压缩页面，减少不必要的嵌套，行为样式分离利于缓存脚本和样式表。
- IMG方面：合成雪碧图，压缩图片，使用iconfont，尽量用css技术代替图片
- 最后，使用缓存，使用CDN，使用本地存储优势是不包含头信息，减少了带宽占用。
9.为什么利用多个域名来提供网站资源会更有效？
10.浏览器同一时间可以从一个域名下载多少资源？
11.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
- 按需加载
- 延迟加载
- 利用缓存
12.如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
我真的喜欢两个空格缩进。“它是唯一一种在所有浏览器里显示一致的缩进方式。”
13.请写一个简单的幻灯效果页面(如果不使用JS来完成，可以加分。)
14.你都使用哪些工具来测试代码的性能？
Chrome Web Developer Tools
15.如果今年你打算熟练掌握一项新技术，那会是什么？
HTML5
16.请谈一下你对网页标准和标准制定机构重要性的理解。
网页通过标准定制机构定制统一标准才能更好的发展。
17.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
IE下css文件中使用@import带来的Flash of Unstyled Content。使LINK标签将样式表放在文档HEAD中。
HTML相关问题：
1.doctype（文档类型）的作用是什么？
用来说明使用的HTML是什么版本。
2.浏览器标准模式和怪异模式之间的区别是什么？
盒模式的解析。
3.使用 XHTML 的局限有哪些？
强制规定原本灵活的HTML语言来遵循XML的严格规范，明显与时代发展相悖。
4.如果页面使用 ‘application/xhtml+xml‘ 会有什么问题吗？
5.如果网页内容需要支持多语言，你会怎么做？
6.在设计和开发多语言网站时，有哪些问题你必须要考虑？
7.data-属性的作用是什么？
HTML5新增的可以用来统一存放数据的属性，还能用来存放JSON格式。
8.如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
Geolocation/Web Socket/Canvas/Video/HTML5 forms/Web Workers
9.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
- cookies 没有另外两个存放数据量大，而且每次都会发送给服务器，占用带宽。
- sessionStorage 是用来在浏览器运行期间保存数据，在关闭浏览器后被清除，而localStorage不会被清除。
CSS 相关问题：
1.描述下 “reset” CSS 文件的作用和使用它的好处。
抹平不同浏览器初始化样式。推荐normalize.css
2.解释下浮动和它的工作原理。
浮动会使节点脱离文档流。
3.列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
- 父容器上设置
overflow:hidden：内容不担心被截断时很方便。 - 父容器也设置浮动：要考虑周围元素的布局。
- 父容器添加clearfix类名。建议使用Micro Clearfix
4.解释下 CSS sprites，以及你要如何在页面或网站中使用它。
将多个小图标统一排列到一张图片再使用background-position来选取以减少HTTP请求数。
5.你最喜欢的图片替换方法是什么，你如何选择使用。
.header{
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
6.讨论CSS hacks，条件引用或者其他。
7.如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？
略。
8.有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）
略。
9.你用过栅格系统吗？如果使用过，你最喜欢哪种？
bootstrap。
10.你用过媒体查询，或针对移动端的布局/CSS 吗？
Media query
参考链接
11.你熟悉 SVG 样式的书写吗？
12.如何优化网页的打印样式？
为打印媒体添加打印样式。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
or
@media print{
div{
/**/
}
}
13.在书写高效 CSS 时会有哪些问题需要考虑？
- 层级选择器尽量不超过3层。
- 尽量提取共用样式声明。
- 尽量使用类选择器。
- 尽量让不在层级选择器的结尾出现标签选择器。
14.使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)。描述下你曾经使用过的 CSS 预处理的优缺点。
优点：变量、mixin、大量插件。 缺点：上手速度。
15.如果设计中使用了非标准的字体，你该如何去实现？Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
可使用@font-face，不支持的浏览器尽量使用图片。
16.解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
从选择器最右边开始一层层解析并判断。
17.解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
盒模型包括margin/border/padding/content。CSS3中使用box-sizing：
- box-sizing: border-box; 盒宽度计算border
- box-sizing: content-box; 盒宽度不计算border
JS相关问题：
1.解释下事件代理。
利用事件冒泡到父节点，再查找事件源event.target是哪个子节点。
2.解释下 javascript 中 this 是如何工作的。
对象中的this指向当前对象，函数中的this始终指向当前作用域的上下文（上下文可以被修改）。
3.解释下原型继承的原理。
当查找对象的属性时，首先在该对象本身查找，否则追溯到其原型去找，直到查找到Object.prototye为止。
4.你是如何测试JavaScript代码的？
5.AMD vs. CommonJS？
6.什么是哈希表？
名值对组成的对象或JSON数据格式。
7.解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)？要做哪些改动使它变成 IIFE?
function foo(){ }();
函数声明不能直接被调用。需要用括号包裹或者前面加操作符使其变为函数表达式。
参考链接
8.描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？
他们都表示空值，而且 null == undefined，但是属于不同的基本数据类型。
- 声明一个变量而不赋值，则它的值是undefined/undeclared。
- 函数参数调用时不传实参，则对应的形参是undefined。
- 对象中不存在的键值的值是undefined。
9.什么是闭包，如何使用它，为什么要使用它？
闭包可以让外部作用域使用内部作用域的变量。当外部作用域执行完毕后，内存也不会被释放。这是JS强大功能的一面。
10.请举出一个匿名函数的典型用例？
arr.forEach(function(value, index){})
11.解释 “JavaScript 模块模式” 以及你在何时使用它。（如果有提到无污染的命名空间，可以考虑加分。）（如果你的模块没有自己的命名空间会怎么样？）
利用IIFE和闭包的概念，返回内部程序接口供外部使用。既不污染全局变量，又能导入外部引用对象。
12.你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
13.请指出 JavaScript 宿主对象和原生对象的区别？
宿主对象是指DOM（document）和BOM（window）。原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象。
14.指出下列代码的区别：
function Person(){}
var person = Person();
var person = new Person();
上面的this指针指向window对象，下面的this指向新生成对象，最后该对象赋给person。
15..call 和 .apply 的区别是什么？
接受的参数形式不同：call接受参数列表形式，apply接受数组/类数组形式。
fn.call(context, 1, 2, 3)
fn.apply(context, [1, 2, 3])
fn.apply(context, arguments)
16.请解释 Function.prototype.bind 的作用？
扩展函数原型，使所有函数都新增bind方法，该方法可以绑定该函数执行上下文后返回一个新函数。
17.你何时优化自己的代码？
刚开始写就会注意优化。
18.你能解释一下 JavaScript 中的继承是如何工作的吗？
当查找对象的属性时，首先在该对象本身查找，否则追溯到其原型去找，直到查找到Object.prototye为止。
19.在什么时候你会使用 document.write()？大多数生成的广告代码依旧使用 document.write()，虽然这种用法会让人很不爽。
几乎不用。
20.请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
特性检测更适合针对实现了特定特性的浏览器进行操作。UA字符串由于被浏览器厂商可以随意修改因此不太靠谱。
21.请尽可能详尽的解释 AJAX 的工作原理。
XMLHttpRequest对象，方法有open、get、send等。
参考链接
参见链接
22.请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。
一种跨域方法，让远程服务器把接受到的参数作为方法名包裹查询的数据后返回，在本地调用该方法。JSONP没用到XMLHttpRequest对象。
23.你使用过 JavaScript 模板系统吗？如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。
了解Mustache。使用过UnderscoreJS自带模版。
24.请解释变量声明提升。
作用域内所有变量声明都被提到顶部，被提升的变量初始值为undefined，执行到所在行时才真正赋值。
25.请描述下事件冒泡机制。
IE支持事件冒泡，Netscape支持事件捕获，W3C建立先捕获-后冒泡机制。
26."attribute" 和 "property" 的区别是什么？
27.为什么扩展 JavaScript 内置对象不是好的做法？
扩展内置对象会造成混乱。
28.为什么扩展 JavaScript 内置对象是好的做法？
虽然会强壮JS的原生功能，但还是不是好做法。
29.请指出 document load 和 document ready 两个事件的区别。
ready事件监听DOM树的加载完成时间，先于onload的页面所有内容加载完毕时间。
30.== 和 === 有什么不同？
=== 不会做隐式类型转换
31.你如何从浏览器的 URL 中获取查询字符串参数。
32.请解释一下 JavaScript 的同源策略。
浏览器的安全策略，限制了不同域名甚至不同端口的js文件的交互方式。
33.请描述一下 JavaScript 的继承模式。
类式继承：参考链接
function Person(name){
this.name = name
}
Person.prototype.sleep = function(){
console.log(this.name + ‘ is sleeping.‘)
}
function Student(name){
Person.apply(this, arguments)
}
Student.prototype = new Person()
var lilei = new Student(‘li lei‘)
lilei.sleep()
原型继承：参考链接
function Person(){}
Person.prototype.sleep = function(){
console.log(this.name + ‘ is sleeping‘)
}
function inherit(o){
var F = function(){}
F.prototype = o
return new F
}
function Student(name){
this.name = name
}
Student.prototype = inherit(Person.prototype)
var lilei = new Student(‘lilei‘)
lilei.sleep()
34.如何实现下列代码：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
方法一
Array.prototype.duplicator = function(){
return this.concat(this)
}
35.描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。
函数也是对象，因此考虑将部分计算结果用键值对方式缓存到该函数对象上，下次直接查找该计算的键值。
36.什么是三元表达式？“三元” 表示什么意思？
根据一个判断结果的true和false的不同而得到两种不同的返回值。
37.函数的参数元是什么？
略。
38.什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
好处是使JS在严格模式下运行，减少bug。坏处是有些对象使用时会报错，如arguments.callee等。
jQuery 相关问题：
1.解释"chaining"。
函数返回自身，供链式调用
$(ele).click().show().animate().hide()
2.解释"deferreds"。
一句话解释：可以随时调用一个异步函数的返回值。
3.你知道哪些针对 jQuery 的优化方法。
- 缓存DOM查找的节点
- 使用事件委托
- 不频繁操作DOM（如append、before等）
- 对于频繁触发的事件使用事件节流（场景如$(window).resize()、$(window).scroll()等）
4.请解释 .end() 的用途。
返回对jQuery引用对象造成“破坏性”操作之前的DOM节点。
5.你如何给一个事件处理函数命名空间，为什么要这样做？
可以选择挂在jQuery对象下面，好处是可以减少使用全局变量。
6.请说出你可以传递给 jQuery 方法的四种不同值。（选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。）
// 1. dom ready
$(function(){
})
// 2. selector
$(‘a.close-btn‘)
// 3. create node
$(‘<div />‘)
// 4. wrapp nodeList
$(document.getElementsByTagName(‘div‘))
7.什么是效果队列？
.queue()方法的使用。
8.请指出 .get()，[]，eq() 的区别。
.get()返回的是原生DOM节点，.get()与[]返回的是原生DOM节点，.get()不传参数还可以返回包裹的原生数组对象。参考链接
.eq()返回的是jQuery对象。参考链接
9.请指出 .bind()，.live() 和 .delegate() 的区别。
- 问题过时了，以后建议用
.on()，将上面三者的优点全盘接收。 .bind()方法用于绑定事件，事件绑定在该节点上。该方法还能用来绑定自定义事件。.live()方法还能用于给将来添加到页面里的节点也能绑定事件。事件绑定在document上。.delegate()方法使用了事件委托机制，也达到了.live()的效果。事件绑定在了节点的父节点上。.on()方法改造了.delegate()使用方法，还将.bind()的绑定自定义事件的功能收入囊中。
10.请指出 $ 和 $.fn 的区别，或者说出 $.fn 的用途。
$.fn是jQuery对象的原型缩写，扩展$.fn可以为所有jQuery对象添加原型方法。
11.请优化下列选择器：$(".foo div#bar:eq(0)")
$(‘.foo‘).find(‘#bar‘).first() // $(‘#bar‘)不就是想要的吗?
代码相关的问题：
1.问题：下面语句的返回值是什么？
~~3.14
答案：3
2.问题：下面的语句的返回值是什么？
"i‘m a lasagna hog".split("").reverse().join("");
答案："goh angasal a m‘i"
3.问题：window.foo 的值是什么？
( window.foo || ( window.foo = "bar" ) );
答案："bar" 只有 window.foo 为假时的才是上面答案，否则就是它本身的值。
4.问题：下面两个 alert 的结果是什么?
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
答案: "Hello World" 和 ReferenceError: bar is not defined
5.问题：foo.length 的值是什么?
var foo = [];
foo.push(1);
foo.push(2);
答案：2
6.问题：foo.length 的值是什么？
var foo = {};
foo.bar = ‘hello‘;
答案: undefined
有趣的问题：
1.你编写过的最酷的代码是什么？其中你最自豪的是什么？
没有。
2.在你使用过的开发工具中，最喜欢哪个？
Google Developer Tools
3.你有什么业余项目吗？是哪种类型的？
Github
4.你最爱的 IE 特性是什么？
IE的各种bug。
以上是关于前端面试问题的主要内容，如果未能解决你的问题，请参考以下文章