657页前端面试题+答案，分类学习整理，良心制做，持续更新中~

注：花一个多月时间，重学基础，学习完、整理完、总结概括完，痛并快乐着。

（欢迎提出问题和建议，采纳后会附上提议者名字连接）

HTML 篇

1.图片中 title 和 alt 区别？

• 一般当鼠标滑动到元素上的时候显示
• alt 是是图片内容的等价描述，用于图片没法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

2.Html5 有哪些新特性、移除了哪些元素

• 新增元素：

  • 绘画canvas
  • 用于媒介回放的video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语义化更好的内容元素，好比 article 、footer、header、nav、section
  • 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search
  • 新的技术 webworker 、 websocket 、 Geolocation

• 移除的元素：

  • 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • 对可用性产生负面影响的元素： frame 、 frameset 、 noframes

• 支持 HTML5 新标签：

  • IE8/IE7/IE6 支持经过 document.createElement 方法产生的标签
  • 能够利用这一特性让这些浏览器支持 HTML5 新标签
  • 浏览器支持新标签后，还须要添加标签默认的样式

3.浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

如何使用：

• 页面头部像下面同样加入一个 manifest 的属性；
• 在 cache.manifest 文件的编写离线存储的资源
• 在离线状态时，操做 window.applicationCache 进行需求实现

在线的状况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，若是是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过 app 而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest 文件与旧的 manifest 文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。

4.src与href的区别

src 用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素

当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部

• href 是 Hypertext Reference 的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，若是咱们在文档中添加
• link href="common.css" rel="stylesheet" 那么浏览器会识别该文档为 css 文件，就会并行下载资源而且不会中止对当前文档的处理。这也是为何建议使用 link 方式来加载 css ，而不是使用 @import 方式

5.canvas在标签上设置宽高 和在style中设置宽高有什么区别

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。若是canvas的width和height没指定或值不正确，就被设置成默认值 。

6.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。
离线的状况下，浏览器就直接使用离线存储的资源。

7.Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

• <!DOCTYPE> 声明位于文档中的最前面，处于 html 标签以前。告知浏览器的解析器， 用什么文档类型、规范来解析这个文档
• 严格模式的排版和 JS 运做模式是 以该浏览器支持的最高标准运行
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做DOCTYPE 不存在或格式不正确会致使文档以混杂模式呈现

8.HTML全局属性(global attribute)有哪些

class :为元素设置类标识
data-* : 为元素增长自定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，文档内惟一
lang : 元素内容的的语言
style : 行内 css 样式
title : 元素相关的建议信息

9.div+css的布局较table布局有什么优势

改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（ seo ）搜索引擎更友好，排名更容易靠前。

CSS 篇

1.CSS中link与@import的区别：

@import是 CSS 提供的语法规则，只有导入样式表的做用；link是HTML提供的标签，不只能够加载 CSS 文件，还能够定义 RSS、rel 链接属性等。
加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载。
link标签做为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5以前）不能识别。
能够经过JS操做DOM，来插入link标签改变样式；因为DOM方法是基于文档的，没法使用@import方式插入样式。

2.position的absolute与fixed共同点与不一样点：

共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上不一样点：
absolute的”根元素“是能够设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

3.BFC 有什么用

• 建立规则：

根元素
浮动元素（ float 不取值为 none ）
绝对定位元素（ position 取值为 absolute 或 fixed ）
display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
overflow 不取值为 visible 的元素

• 做用：

能够包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠

4.清除浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动，须要定义宽度
结尾处加 br 标签 clear:both

5.Css3 新增伪类 - 伪元素

p:first-of-type 选择属于其父元素的首个 <p> 元素的每一个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每一个 <p> 元素。
p:only-of-type 选择属于其父元素惟一的 <p> 元素的每一个 <p> 元素。
p:only-child 选择属于其父元素的惟一子元素的每一个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每一个 <p> 元素。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
::before 在元素以前添加内容。
::after 在元素以后添加内容,也能够用来作清除浮动。
::first-line 添加一个特殊的样式到文本的首字母。
::first-letter 添加一行特殊样式到首行。

相信你们也看出来他们的不一样，

伪类语法一个：，它是为了弥补css常规类选择器的不足
伪元素语法两个：，它是凭空建立的一个虚拟容器生成的元素

6.IE盒子模型 、W3C盒子模型

W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；

box-sizing: content-box
width = content width;

IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;

box-sizing: border-box
width = border + padding + content width

7.display:inline-block 何时不会显示间隙？

移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing

8.行内元素float:left后是否变为块级元素？

行内元素设置成浮动以后变得更加像是 inline-block （行内块级元素，设置
成这个属性的元素会同时拥有行内和块级的特性，最明显的不一样是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

9.CSS不一样选择器的权重(CSS层叠的规则)

！important 规则最重要，大于其它规则
行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加1
若是权值同样，则按照样式规则的前后顺序来应用，顺序靠后的覆盖靠前的规则

10.stylus/sass/less区别

均具备“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass 和 LESS 语法较为严谨， LESS 要求必定要使用大括号“{}”， Sass 和 Stylus 能够经过缩进表示层次与嵌套关系
Sass 无全局变量的概念， LESS 和 Stylus 有相似于其它语言的做用域概念
Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 能够基于 NodeJS NPM 下载相应库后进行编译；这也是为何安装Sass的时候有时候会报错，须要安装python脚本

优势：就不用我多说了，谁用谁知道，真香。

JavaScript篇

1.js的各类位置，好比clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

clientHeight：表示的是可视区域的高度，不包含border和滚动条
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了全部区域的高度，包含了由于滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的状况下通常为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

2.js拖拽功能的实现

首先是三个事件，分别是mousedown，mousemove，mouseup
当鼠标点击按下的时候，须要一个tag标识此时已经按下，能够执行mousemove里面的具体方法。
clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，而且咱们用offsetX和offsetY来表示元素的元素的初始坐标，移动的举例应该是：
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为：
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始状况下的offetLeft.
还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，咱们改变的是绝对定位条件下的left
以及top等等值。
补充：也能够经过html5的拖放（Drag 和 drop）来实现

3.异步加载js的方法

defer：只支持IE若是您的脚本不会改变文档的内容，可将 defer 属性加入到<script>标签中，以便加快处理文档的速度。由于浏览器知道它将可以安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
async，HTML5属性仅适用于外部脚本，而且若是在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。
建立script标签，插入到DOM中

4.js的防抖

防抖（Debouncing）
防抖技术便是能够把多个顺序地调用合并成一次，也就是在必定时间内，规定事件被触发的次数。
通俗一点来讲，看看下面这个简化的例子：

// 简单的防抖动函数
function debounce(func, wait, immediate) {
    // 定时器变量
    var timeout;
    return function() {
        // 每次触发 scroll handler 时先清除定时器
        clearTimeout(timeout);
        // 指定 xx ms 后触发真正想进行的操做 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

上面简单的防抖的例子能够拿到浏览器下试一下，大概功能就是若是 500ms 内没有连续触发两次 scroll 事件，那么才会触发咱们真正想在 scroll 事件中触发的函数。
上面的示例能够更好的封装一下

// 防抖动函数
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操做
}, 250);
 
// 绑定监听
window.addEventListener('resize', myEfficientFn);

5.绕不过去的闭包

• 闭包就是可以读取其余函数内部变量的函数
• 闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见的方式就是在一个
• 函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量,利用闭包能够突破做用链域
• 闭包的特性：

函数内再嵌套函数
内部函数能够引用外层的参数和变量
参数和变量不会被垃圾回收机制回收

• 优势：可以实现封装和缓存等
• 缺点：消耗内存、使用不当会内存溢出，
• 解决方法：在退出函数以前，将不使用的局部变量所有删除

6.说说你对做用域链的理解

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到 window对象即被终止，做用域链向下访问变量是不被容许的。
简单的说，做用域就是变量与函数的可访问范围，即做用域控制着变量与函数的可见性和生命周期

7.JavaScript原型，原型链 ? 有什么特色？

每一个对象都会在其内部初始化一个属性，就是 prototype (原型)，当咱们访问一个对象的属性时,若是这个对象内部不存在这个属性，那么他就会去 prototype 里找这个属性，这个prototype 又会有本身的 prototype ，因而就这样一直找下去，也就是咱们平时所说的原型链的概念

关系： instance.constructor.prototype = instance._proto_
特色：JavaScript 对象是经过引用来传递的，咱们建立的每一个新对象实体中并无一份属于本身的原型副本。当咱们修改原型时，与之相关的对象也会继承这一改变当咱们须要一个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 若是没有的,就会查找他的 Prototype 对象是否有这个属性，如此递推下去，一直检索到 Object内建对象

8.请解释什么是事件委托/事件代理

事件代理（ Event Delegation ），又称之为事件委托。是 JavaScript 中经常使用的绑定事件的经常使用技巧。顾名思义，“事件代理”便是把本来须要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是能够提升性能
能够大量节省内存占用，减小事件注册，好比在 table 上代理全部 td 的 click 事件就很是棒
能够实现当新增子对象时无需再次对其绑定

9.Javascript如何实现继承？

• 构造继承
• 原型继承
• 实例继承
• 拷贝继承

原型 prototype 机制或 apply 和 call 方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，经过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//获得被继承的属性

10.谈谈This对象的理解

this 老是指向函数的直接调用者（而非间接调用者）
若是有 new 关键字， this 指向 new 出来的那个对象
在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的this 老是指向全局对象 Window

11.new操做符具体干了什么呢?

建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新建立的对象由 this 所引用，而且最后隐式的返回 this

12.Ajax原理

Ajax 的原理简单来讲是在用户和服务器之间加了—个中间层( AJAX 引擎)，经过XmlHttpRequest 对象来向服务器发异步请求，从服务器得到数据，而后用 javascript来操做 DOM 而更新页面。使用户操做与服务器响应异步化。这其中最关键的一步就是从服务器得到请求数据
Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核心机制