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.事件委托
答：利用事件冒泡的原理，子元素的事件会冒泡到父元素，可以只给父元素添加事件，通过事件目标判断元素。
优点：节省内存，动态添加的子元素也包含事件