Web前端面试题及答案（姚聪经验整理）

虽然个人认为有些知识不是必须记忆的，需要的时候可以查阅笔记，但是对于得到面试的机会还是很重要的。

HTML&CSS

1、清除浮动的几种方式，各自的优缺点

清除浮动：使父元素围住浮动的子元素，避免对后续元素造成影响。

（1）给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化上下文（BFC），从正常文档流脱离，父元素本身实现独立布局，围住其中的浮动元素。但专门这样设置，可能会改变布局，对于后三者，使block变为inline-block，父元素宽度变化。

（2）在子元素后面添加空的block元素。添加了额外的元素，且block元素带有margin等。

（3）在父元素上加clearfix类名，在父元素的最后加块级元素.（伪元素选择器），通过clear:both使父元素括住浮动的元素来清除float的影响，使.不可见。常用这种方式，Bootstrap支持clearfix类名。

<style>
  .clearfix::after{content:".";display:block;clear:both;height:0;visibility:hidden;} 
  .clearfix{zoom:1;} /*IE低版本不支持after*/ 
  div{background-color:red;}
  #p1{float:left;background-color:yellow;}
  #p2{float:right;background-color:green;}
</style>

<div class="clearfix">
  <p id="p1">p1</p> 
  <p id="p2">p2</p> 
  <!-- <p style="clear:both"></p> 添加空的p元素，使div可以围住p1p2，不推荐-->
</div>

2、块级元素水平垂直居中的方法

<style>
  .parent{background:#ddd;height:200px;width:300px;}
  .child{background:#666;color:#fff;font:30px/2 'microsoft yahei';}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

父元素和子元素的大小不确定。

（1）table-cell+inline-block

兼容IE6,7需要把结构换为<table>，通过display:inline; zoom:1;模拟inline-block。

.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}

（2） relative+absolute+transform

绝对定位脱离文档流，不会对其它元素产生影响。transform是CSS3新增内容，对IE6,7,8可能没法兼容，在高版本浏览器需要加前缀。

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

（3）flex

IE6,7,8可能没法兼容flex。

.parent{display:flex; justify-content:center; align-items:center;}

如果子元素大小确定。

.parent{position:relative;}
.child{
  width:100px; height:100px;
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}

3、CSS选择器有哪些？优先级如何计算

普通选择器：通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:

伪元素选择器::

组合选择器：后代选择器、子选择器、兄弟选择器+、只要前面有某种元素~

优先级：将权重相加。a=行内样式style，1000；b=id选择器，100；c=类、伪类和属性选择器，10；d=标签选择器和伪元素选择器，1。相同属性优先级高覆盖低、后面覆盖前面，不同属性合并。

4、px、em和rem的区别

px，像素，相对于显示器屏幕分辨率而言；

em，相对长度单位，相对于当前对象内文本的字体大小，若字体大小未显式设置，则相对于浏览器默认的字体大小；

rem，相对长度单位，相对于html根元素的字体大小。

5、display:none和visibility:hidden的区别

display:none设置元素不显示，是彻底消失，不在文档流中占位，浏览器也不会解析该元素。visibility:hidden是视觉上消失，可理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素。

使用visibility:hidden比display:none性能上要好。display:none切换显示时，页面产生回流reflow（页面中的部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建）。而visibility:hidden切换是否显示时则不会引起回流，只是元素的外观被改变，且在没有改变布局的情况下发生。

6、用一个div写出三条横线的小图标

div{
  height:5px;
  width:30px;
  background-color:#DD575C;
  background-clip:content-box;
  padding-top:5px;
  padding-bottom:5px;
  border-top:#DD575C solid 5px;
  border-bottom:#DD575C solid 5px;
}

7、盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）、内边距（padding）、边框（border），外边距（margin）四个部分。

标准盒子模型＝ margin + border + padding + content （content = width | height）

IE盒子模型＝ margin + content （content = border + padding + width | height）

8、优雅降级和渐进增强

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

从复杂的现状开始，试图减少用户体验的供给。

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，追加功能达到更好的用户体验。

从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

9、sprite精灵图

把设计稿上的小图标拼合到同一张图片中，减少网络请求，提升网页加载速度。

①排列常用横向排列和纵向排列。 ②图片之间必须保留孔隙，小图标20像素。如果更改按钮大小，CSS里背景图位置属性不须改变；容错，如果CSS设置错误，不会导致下面图片露出来。③合并原则：同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用，有状态的图标合并。④IE6不支持PNG24半透明，存两份：高级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。

background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;

10、HTML5

表现页面中的章节结构：<header><footer><nav><aside><article><section>

嵌入资源：<video><audio><canvas><svg>

新的<input>类型：email、url、number、tel、search、range、color、date

新的表单元素（datalist、keygen、output）和属性

getCurrentPosition()、web存储（localStorage、sessionStorage）、拖放

11、CSS3

选择器：属性选择器、伪类选择器

盒模型：box-shadow、box-shadow、box-sizing

边框：border-radius、border-image

背景：background-image、background-size、background-origin、background-clip、渐变

文字特效：text-shadow、text-overflow、word-wrap、word-break、字体@font-face

2D/3D转换：transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility

过渡和动画：transition、animation、@keyframes

多列布局：column-count、column-width、column-fill、column-gap、column-rule、column-span

用户界面：resize、outline-offset

弹性盒子：flex

12、<img>的alt和title

alt：描述图片含义。地址写错或网络状况不好，无法查看图像时，显示该说明。可用于屏幕阅读软件和搜索引擎。

title：光标悬浮在图像上时以提示的方式显示该特性内容。

13、label、单选框、单选按钮的应用场景

14、href和src的区别

href标识超文本引用，在当前元素和引用资源之间建立联系。<link><a>。当浏览器解析到css文件时会下载，但不会停止对当前文档的处理。

src引用资源，指向外部资源的位置，将外部资源下载并替换当前元素。用在<img><script><iframe>。当浏览器解析到含src的标签时，会暂停其它资源的下载和处理，直至将该资源加载、编译、执行完毕，将该元素所指向的资源嵌套至当前标签内。

15、盒子内阴影和外阴影

box-shadow: inset? 水平偏移垂直偏移模糊半径? 阴影大小? 颜色?（？表示可选；水平、垂直偏移可正可负；颜色默认为文字颜色；这些参数可有多组，用,隔开）

外阴影box-shadow:3px 3px 5px 2px; 内阴影box-shadow:inset 0 0 5px red;

Javascript

1、var变量声明

变量声明语句会被“提前”至脚本或函数的顶部，但初始化的操作还在原来var语句的位置执行，在声明语句之前变量的值是undefined。

<script>
  var a=100;
  function test(){
    alert(a); // undefined
    var a=10;
    alert(a); // 10
  }
  test();
</script>

(function() {
  var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined

2、闭包

<script>
  for(var i=0;i<6;i++){
    setTimeout(function(){
      console.log(i); // 打印6个6
    },1000);      
  }
</script>

3、函数

var m=1; 
function add(n){ 
  return n=n+1; 
} 
y=add(m); // 4
function add(n) { 
  return n=n+3; 
} 
z=add(m); // 4

3、异步加载JS的方式

使用defer属性让脚本在文档完全呈现之后再顺序执行，async属性同样让脚本立即下载延迟执行，但不保证顺序。

垃圾回收机制和内存管理

js具有自动垃圾回收机制，找出不再使用的变量，垃圾收集器按一定时间间隔（影响性能）释放其占用的内存。“标记清除”是目前主流的垃圾回收算法，给当前不使用的值加上标记，再回收内存。另一种算法是“引用计数”，跟踪记录所有值被引用的次数，当代码中存在循环引用现象时会导致问题。及时解除不再使用的全局对象、全局对象属性及循环引用变量的引用，确保有效回收内存。

判断一个字符串中出现次数最多的字符，统计这个次数

判断一句话中出现次数最多的单词

编写一个方法去掉一个数组的重复元素

jQuery

1、jQuery事件委托方法bind、live、delegate、on之间的区别

2、JavaScript window.onload事件和jQuery ready函数的不同

工程相关

2、你经常遇到的bug解决方法

3、如何进行网站性能优化

sessionStorage、localStorage和cookie之间的区别

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。