前端面试题答案收集

PART ONE -- HTML

1、html5 新特性，语义化？

新特性：

语义特性，添加 <header></header><nav></nav> 等标签。
多媒体，用于媒介回放的 video 和 audio 元素
图像效果，用于绘画的 canvas 元素， svg 元素
离线 & 缓存，对本地离线存储的更好的支持，localSrorage等
设备兼容特性，HTML5 提供了前所未有的数据与应用介入开放接口。
链接特性。Server-Sent Event 和 WebSockets 就是其中两个特性，这两个特性能帮助我们实现服务器将数据“推送”到客户端的功能。
性能与集成特性，HTML5 会通过 XMLHttpRequest2 等技术，帮助您的 Web 应用和网站在多样化的环境中更快速的工作。

语义化：

语义化就是用合理、正确的标签来展示内容。语义化的优点有：易于用户阅读，样式丢失的时候能让页面呈现清晰的结构；有利于 SEO，搜索引擎根据标签来确定上下文个各个关键字的权重；方便其他设备解析，如读屏器；有利于开发和维护，语义化更具有可读性，代码更好维护，与 CSS3 关系更和谐。

2、浏览器的标准模式和怪异模式

标准模式：此模式下，浏览器按照 HTML 与 CSS 标准对文档进行解析和渲染；
怪异模式：此模式下，浏览器按照就有的非标准的实现方式对文档进行解析和渲染。

3、使用 data- 的好处

自定义属性，可以被 js 很好的操作
通过 js 的 element.dataset. 或 jQuery 的 data(‘‘) 拿到，* 可以为 url 等字符

4、什么是渐进式渲染

服务端渲染局部，客户端渲染局部。（参考： https://segmentfault.com/a/11...）

PART TWO -- CSS

1、盒模型，box-sizing

盒模型：Every element in web design is a rectangular box。

CSS3 的 box-sizing 属性：

content-box(默认)：width = contentWidth + padding(left/right) + border(left/right)
padding-box：width = contentWidth(包含padding) + border(left/right)
border-box：width = contentWidth(包含 padding 和 border)

2、CSS3 新特性，伪类，伪元素，锚伪类

CSS3 新增特性主要有（使用比较频繁的）：过渡（transition）、动画（animation）、形状转换（transform）、文字超出省略号、弹性布局（flex）、栅格布局（grid）、多列布局（column-count）、媒体查询。
（参考：https://segmentfault.com/a/11...）

3、CSS实现隐藏页面元素的方式

opacity: 0 -> 只能从视觉上隐藏元素，元素依旧占据位置并对网页的布局起作用，也会影响用户交互。在读屏软件中不会被隐藏。
visibility: hidden -> 被隐藏的元素依然会对网页布局起作用，但不会影响任何用户交互。在读屏软件中也会被隐藏。
diaplsy: none -> 隐藏元素，确保元素不可见并且连盒模型也不生成，被隐藏的元素不占据任何空间，且一旦设置了 display 为 none，任何对该元素直接的用户交互操作都不肯能。读屏软件也无法被读到。
position：absolute -> 配合 top 和 left 属性，将元素移出可视区域，不会影响布局，又能让元素保持可操作。
clip-path：剪裁（eg: clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);）

4、CSS 实现水平居中和垂直居中

自己最常用的三种：

.box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

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

.box {
    display: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(别人写的总结：https://segmentfault.com/a/11...

5、说说 position, display

position：元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为 static。它其实是未被设置定位的。元素如果被定为了，那么它的 top, left, bottom, right 值就会生效，能设置定位的属性是 relative， absolute，fixed。需要注意的是被定为的元素的层次（z-index）会得到提高。

relative：相对定位，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空袭。
absolute：绝对定位，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。
fixed：固定定位，元素相对的偏移参考是可视窗口

display：每一个元素都有默认的 display 属性。
常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em。

6、解释一下 css3 的 flexbox，以及适用场景
Flex 意为“弹性布局”，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 flex 容器，简称“容器”。它的所有自元素自动成为容器成员，称为 flex 项目（flex item），简称“项目”。常规布局是基于块和内联流方向，而 flex 布局是基于 flex-flow 流，可以很方便的用来做居中，能对不同屏幕大小自适应。在布局上有了比以前更佳灵活的空间。

7、实现两栏布局有哪些方法？

参考：七种实现左侧固定，右侧自适应两栏布局的方法

左列定宽，右列自适应

margin + float

<div class="box">
    <div class="left"></div>
    <div class="right-fix">
        <div class="right">
            <p>right</p><p>right</p>
        </div>
    </div>
</div>

.left {
    float: left;
    width: 100px;
    position: relative;
}
.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}
.right {
    margin-left: 120px; // 形成 20px 间隔
}

absolute

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.box{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
    width: 100px;
}
.right{
    position: absolute;
    left: 120px; // 形成 20px 间隔
    right: 0;
}

左列不定宽，右列自适应

float + BFC

这个方法主要是应用到 BFC 的一个特性
浮动元素的块状兄弟元素会五十付哦那个元素的位置，尽量占满一整行，这样该兄弟元素就会被浮动元素覆盖
若浮动元素的块状兄弟元素为BFC，则不会占满一整行，而是根据浮动元素的宽度，占据该行剩下的宽度，避免与浮动元素重叠。
*浮动元素与其块状BFC兄弟元素之间的margin可以生效，这将继续减少兄弟元素的宽度

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.left{
    float: left;
    width: 100px;
    margin-right: 20px; //形成 20px 的间隔
}
.right{
    overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}

table 布局

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.box{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

flex

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

.parent{
    display: flex;
}
.left{
    margin-right: 20px;
}
.right{
    flex: 1;
}

PART THREE -- JS

1、JS的基本类型有哪些？引用类型有哪些？null 和 undefined 的区别。

JS基本类型：null，undefined，boolean，number，string，symbol。
引用类型：Object
undefined：定义了但是没有赋初始值
null：未定义的对象

2、引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

基本数据类型

基本数据类型的值是不可变的
基本数据类型不可以添加属性和方法
基本数据类型的赋值是简单赋值
基本数据类型的比较是值的比较
基本数据类型是存放在栈区的

引用类型

引用类型的值是可以改变的
引用类型可以添加属性和方法
引用类型的赋值是对象引用
引用类型的比较是引用的比较
引用类型是同时保存在栈区和堆区中的

3、new 一个对象具体做了什么？

新生成一个对象 -> 链接到原型 -> 绑定 this -> 返回新对象

4、箭头函数和普通函数有什么区别？

箭头函数不能作为构造函数，不能使用 new
箭头函数只能作为匿名函数使用
箭头函数中的 this 会捕获其上下文的 this 值
箭头函数不绑定 arguments，取而代之用 rest 参数（...）解决
箭头函数当方法使用的时候没有定义 this 绑定
箭头函数不能当作 Generator 函数，不能使用 yield 关键字
箭头函数不能返回对象字面量
箭头函数不能换行
普通函数每个都有其自己的 this 值，构造函数的 this 指向一个新的对象；严格模式下的函数的 this 指向 undefined；如果函数是作为对象的方法被调用的，则 this 指向了那个调用它的对象

5、对闭包的的理解

以前写的关于闭包的一篇文章

6、property 和 attribute 的区别

Property 是 DOM 中的属性，是 JavaScript 里的对象；
Attribute 是 HTML 标签上的特性，它的值只能够是字符串。

7、setTimeout和promise的执行顺序

看题：

setTimeout(function() {
   console.log(1)
}, 0);

new Promise(function(resolve, reject) {
  console.log(2)
  for (var i = 0; i < 10000; i++) {
    if(i === 10) {console.log(10)}
       i == 9999 && resolve();
  }
   console.log(3)
}).then(function() {
   console.log(4)
})

console.log(5);

以上代码的输出结果为：2 10 3 5 4 1

setTimeout(fn, 0) 表示立即执行，也就是用来改变任务的执行顺序，要求浏览器“尽可能快”的进行回调;Promise 新建后立即执行，Promise 构造函数里的代码是同步执行的;then 方法指向的回调将在当前脚本所有同步任务执行完后执行
then 比 setTimeout 执行要早，是因为其实 setTimeout 又一个最小执行时间（minimun delay）为 4ms，并不是 0s 执行。
参考文章

未完待续...

前端面试题答案收集

PART ONE -- HTML

PART TWO -- CSS

PART THREE -- JS

Evelyn

引用和评论

面试招聘的那些事儿

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了