前端面试题答案收集

时间 2019-12-07

标签端面试题答案收集繁體版

原文原文链接

PART ONE -- HTML

一、html5 新特性，语义化？css

新特性：html

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

语义化：html5

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

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

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

三、使用 data- 的好处github

自定义属性，能够被 js 很好的操做
经过 js 的 element.dataset. 或 jQuery 的 data(‘‘) 拿到，* 能够为 url 等字符

四、什么是渐进式渲染web

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

PART TWO -- CSS

一、盒模型，box-sizing segmentfault

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

CSS3 的 box-sizing 属性：promise

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

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

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

三、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);）

四、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...

五、说说 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。

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

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

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

左列定宽，右列自适应

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

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

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

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

基本数据类型

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

引用类型

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

三、new 一个对象具体作了什么？

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

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

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

五、对闭包的的理解

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

六、property 和 attribute 的区别

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

七、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 执行。
参考文章

未完待续...