web前端面试题（全）

近来看到网上格式各样的web前端求职的面试题，接下来我用我的经验总结了一套在面试过程中高频率问到的面试题，希望能帮助各位求职者在求职的过程中顺利通过，废话不多说，直接说题。。。

一、HTML5部分

1.说一下对css盒模型的理解

答：css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

盒模型有两种：标准盒模型和IE盒模型。

标准盒模型中width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸；但在IE6浏览器的width不是内容的宽度，而是内容、内边距和边框的宽总和；IE的content部分包含了border和padding。

2. rem,px,em之间的关系和区别

答：px

实际上就是像素，用PX设置字体大小时，比较稳定和精确。

但是px不支持用户进行浏览器缩放或者不同移动端的兼容，因为像素是固定的，屏幕大小是变化的。

em

是根据父元素来对应大小，是一种相对值；

em值 = 1/父元素的font-size*需要转换的像素值。

进行任何元素设置，都有可能需要知道他父元素的大小，这很不方便。

rem

是根据根元素html的font-size来对应大小，

1rem = 16px,可以在根元素html中写固定像素也可以写百分比，然后在具体的标签上设置rem。

3.描述一下cookies，sessionStorage和localStorage的区别

答：(1)cookies在浏览器和服务器间来回传递，sessionstorage和localStorage不会。

(2)sessionStorage和localStorage的存储空间更大。

(3)sessionStorage和localStorage有更多丰富易用的接口。

(4)sessionStorage和localStorage各自独立的存储空间。

4. 说一下怎么减少页面加载时间的方法

答：(1)压缩css、js文件

(2)合并js、css文件，减少http请求

(3)外部js、css文件放在最底下

(4)减少dom操作，尽可能用变量替代不必要的dom操作

5. css优化、提高性能的方法有哪些

答：（1）加载性能

（2）选择器性能

（3）渲染性能

（4）可维护性

6. css定义的权重

答：标签权重为1、class权重为10、id权重为100、style权重为1000

7. position：fixed，在Android下无效怎么处理

答：使用JS处理判断当前设备是否是Android，如果是则添加监听当前页面滚动情况，设置position：absolute，不断改变top值。

8. 说一下Flexbox（弹性盒子）的适用场景

答：注意:主要应用场景为移动端布局。

flexbox的布局是一个用于页面布局的全新css3模块功能。

它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩器（flex ，container）来辅助实现。

flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，flexbox可以让元素在容器中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

9. ::before和:after中双冒号和单冒号有什么区别(这个不是常问的！！！)

先解释一下这两个伪元素，本质上并不支持伪元素的双冒号（::）写法，而是忽略掉了其中的一个冒号，仍以单引号来解释，所以等同变相支持了::before

答：在before元素前面，after元素的后面插入内容（经典场景使用font-face小图标结合content:" "）

10. 说一下html5的离线储存

答：（主要问的是localStorage和sessionStorage）

（1）localStorage长期储存在数据，浏览器关闭后数据不会丢失。

（2）sessionStorage数据在浏览器关闭后自动删除。

二、JS部分

1. 闭包

答：函数嵌套函数，内部函数使用外部函数的变量或者参数，使其长期驻扎在内存中，就形成了闭包！！！

缺点：容易引起内存泄漏

使用场景：

（1）变量私有化

（2）onclick（操作DOM元素是需要相应的索引值）

2. 描述一下对"异步"和"同步的理解"

答：异步：不按顺序执行，同一时刻只能执行一个事件

同步：按顺序执行，同一时刻只能执行一个事件

3.说一下事件冒泡、事件捕获的区别

这个问题和事件流回答一样即可

先说下什么是事件流吧！！！

事件流：事件流分为三个阶段

（1）捕获阶段

（2）目标阶段

（3）冒泡阶段

捕获过程：1.window——>2.document——>3.body——>4.div——>5.text

目标过程：捕获过程的5

冒泡过程：6.text——>7.div——>8.body——>9.document——>10.window

事件捕获：首先window会捕获到事件，之后document、documentElement、body会捕获到，在之后就是body到dom元素一层一层的捕获到事件，有wrap div、inner p；

目标阶段：真正点击元素textSpan的事件发生了两次，因为在上面的JavaScript代码中，textSpan既在捕获阶段绑定事件，又在冒泡阶段绑定了事件，所以发生2次。

事件冒泡：和捕获阶段相反的事件一步一步地冒泡到window

（补充：冒泡为false、捕获为true）

4.事件委托

答：利用事件冒泡的原理，子元素的事件会冒泡到父元素，可以只给父元素添加事件，通过事件目标判断元素。

优点：节省内存，动态添加的子元素也包含事件

5. 解决跨域的方法

答：（1）通过jsop解决跨域

（2）通过修改document.domain来跨子域

（3）使用window.name来进行跨域

（4）使用HTML5中新引进的window.postMessage方法来跨域

6. es5的面向对象

说出特点就好

答：特点：抽象、封装、继承、多态

继承的三种方式：（1）原型链继承；（2）call和play继承；（3）call和play组合继承

7. es6面向对象

答：使用关键词class定义类来实现面向对象编程

8. 说一下什么是垃圾回收

（补充：JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。当不再需要某样东西时会发生什么? JavaScript 引擎是如何发现并清理它?）

答：

（1）垃圾回收概述

回答一： 垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

回答二： 一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

（2）垃圾回收策略：

2种最为常用：标记清除和引用计数，其中标记清除更为常用。

1. 标记清除(mark-and-sweep)：是对于脱离作用域的变量进行回收，当进入作用域时，进行标记，离开作用域时，标记并回收这些变量。到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

2. 引用计数：引用计数是跟踪记录每个值被引用的次数。就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象，每当过一段时间开始垃圾回收的时候，就把被引用数为0的变量回收。引用计数方法可能导致循环引用，类似死锁，导致内存泄露。

（3）常见内存泄露的原因

1. 全局变量引起的内存泄露

2. 闭包引起的内存泄露：慎用闭包

3. dom清空或删除时，事件未清除导致的内存泄漏

4. 循环引用带来的内存泄露

9. 反向代理

答： 反向代理（Reverse Proxy），以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求的客户端，此时代理服务器对外表现为一个反向代理服务器。

理解起来有些抽象，可以这么说：A向B借钱，B没有拿自己的钱，而是悄悄地向C借钱，拿到钱之后再交给A,A以为是B的钱，他并不知道C的存在。

三、jQuery框架部分

1. jQuery绑定事件的方法书写至少两种？

答：bind(),on(),click()

2.jQuery对象和Dom对象相互转换

答：jQuery对象转原生Dom对象 $(“div”).get(0)

原生Dom对象转jQuery对象 $(ele)

3.Js用过的插件

答：tween.js,swiper.js,touch.js,zepto.js

4.jQuery如何获取元素？

答：$(selector)

5.JQuery链式写法原理

答：jQuery里的方法调用完毕返回return this

6.用jQuery如何获取标签的id

答：$(element).attr(“id”)

7.用jQuery如何获取标签

答：$(“div”)

8.用jQuery如何获取标签内容

答：(element).text()/(element).text()/(element).text()/(element).html();

9.用jQuery如何更换背景色

答：$(element).css({backgroundColor:”red”})

10.jQuery中，如何阻止事件冒泡和浏览器默认行为？

答：e.preventDefault();e.stopPropagation();

**11.(document).ready与window.onload有何区别？∗∗答：(document).ready与window.onload有何区别？** 答：(document).ready与window.onload有何区别？∗∗答：(document).ready 对于支持DOMContentLoaded事件的浏览器，会使用该事件，所有的节点渲染完毕，就执行,可以调用多次，不支持的就使用 onload事件

window.onload事件要等到所有的资源加载完毕，如图片，视频，js脚本等,只能绑定一次，后面绑定的覆盖前面所绑定的事件

12.列举jQuery的优势

答：兼容性处理，dom操作，获取元素简单，封装了ajax…

13.jQuery中 :odd :gt 这两种选择器的含义以及用法举例

:odd 匹配所有索引值为奇数的元素，从 0 开始计数 $(“div:odd”)

:gt(index) 匹配所有大于给定索引值的元素 $(“div:gt(2)”)

14.jQuery中，使用nth-child(3n+2)所选中的是以下哪些

nth-child（）匹配其父元素下的第N个子或奇偶元素

‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的

2，5，8

15.使用jQuery中的链式书写方法书写如下代码

答：$(“#test”).css(“color”,”red”).width(20)

16.jQuery中对动画的操作命令有哪些？举出不少于8种，并说明含义

答：animate(),fadeIn(),fadeOut(),slideDown(),slideUp(),hide(),show(),toggle()

17.jQuery中绑定事件的方法是什么，尝试书写例子：为id名为con的div绑定一个事件，事件为弹出一个数字0。获取标签时不要使用原生javascript方法。

答：$(“#con”).click(function(){alert(0)})

18.jQuery中获取相对文档的坐标的方法是什么？

答：offset(),获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

position()获取匹配元素相对定位父级的偏移。没有定位父级即为文档坐标

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

19.jQuery中对于节点的操作有哪些（举出不少于8种）？写出含义以及用法。

20.jQuery动画效果的实现

答：$ele().animate({top:100},500)

21.jQuery中的两个合成事件是_________和__________

答：toggle、hover

22.用jQuery获取标签

div内部的信息

当中的内容的代码为______？

答：$(“#con”).text()

23.举出不少于6种的jQuery中对动画的操作命令，并说明其含义：_________、_________、_________、_________、_________、_________

24.编写一个jQuery的扩展方法（插件），让调用的对象设置宽度为200像素

jQuery.fn.extend({

setWidth:function() {

$(this).width(200);

return this;

})

25.你使用过哪些Javascript库？

答：jQuery Zepto（注意了：面试官可能问你这2个库都什么区别）

jQuery是在Web上应用很广泛的JavaScript库，它提供了大量的工具和API函数，使用它的人相当普遍，使用的门槛也比较低。

Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小，对任何项目都是个不错的选择，Zepto是不支持IE浏览器。

针对移动端程序，Zepto还有一些基本的触摸事件可以用来做触摸屏交互，如：tap事件——tap，singleTap，doubleTap，longTap;

Swipe事件——swipe，swipeLeft，swipeRight，swipeUp，swipeDown。

四、 AJAX

1.如何实现局部内容和后台交互时的变化

答：使用ajax

2.什么是AJAX ，AJAX原理

答：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。