行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素:span、img、input...

块级元素: div、footer、header、section、p、h1...h6...

空元素:br、hr..

元素之间的转换问题:

display: inline; 把某元素转换成了行内元素, 不独占一行的，并且不能设置宽高
display: inline-block; 把某元素转换成了行内块元素, 不独占一行的，可以设置宽高
display: block; 把某元素转换成了块元素, 独占一行，并且可以设置宽高

页面导入样式时，使用link和@import有什么区别?

区别一: link先有，后有@import (兼容性link比@import兼容) ;

区别二:加载顺序差别，浏览器先加载的标签link，后加载@import

title与h1的区别、b与strong的区别、i与em的区别?

title与h1的区别 定义:

title:概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1:文章主题内容，告诉蜘蛛我们的网站内容最主要是什么

区别:

title他是显示在网页标题上、h1是显示在网页内容上
title比h1更加的重要 (title > h1 ) ->对于seo的了解

场景:

网站的logo都是用h1标签包裹的

b与strong的区别

定义:

b:实体标签，用来给文字加粗的。
strong:逻辑标签，用来加强字符语气的

区别:

b标签只有加粗的样式，没有实际含义
strong表示标签内字符比较重要，用来强调的
为了符合css3的规范，b尽量少用该用strong就行了。

i与em的区别

定义:

i:实体标签，用来做文字倾斜的。
em:是逻辑标签，用来强调文字内容的

区别:

i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。

场景:

i更多的用在字体图标，
em术语上 (医药，生物)

img标签的title和alt有什么区别?

区别一:

title: 鼠标移入到图片显示的值
alt: 图片无法加载时显示的值

区别二:

在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

png、jpg、gif 这些图片格式解释一下，分别什么时候用?

png:无损压缩，尺寸体积要比jpg/jpeg的大。适合做小图标

jpg:采用压缩算法，有一点失真，比png体积要小。

gif:一般是做动图的

webp:同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是很好。

说一下css的盒模型

CSS的盒子模型有哪些:标准盒子模型、IE盒子模型

CSS的盒子模型区别:

标准盒子模型: margin、border、padding、content
IE盒子模型 : margin、content ( border + padding + content )

通过CSS如何转换盒子模型:

box-sizing: content-box; 标准盒子模型
box-sizing: border-box; IE盒子模型

line-height和heigh区别

单个对比时

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大 (行数*行高)

height是一个死值，就是这个盒子的高度

组合使用时:盒子高度不受行高影响

CSS选择器的优先级?权重

!important > 行内样式选择器 > id选择器 > 类/伪类/属性选择器 > 标签选择器 > 全局选择器

复合选择器-叠加

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

(行内样式，id选择器个数，类选择器个数，标签选择器个数)

规则：

从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低(就是有!important也是最低)

隐藏元素的方法有哪些?

display:none; 元素在页面上消失,不占据空间

opacity:0; 设置了透明度为0,只是元素不可见,占据空间位置

visibility:hidden; 让元素消失,占据空间位置

position:absolute; 移出画面

clip-path 剪切掉

px和rem的区别是什么

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度

rem，相对单位，相对于html根节点的font-size的值,直接给html节点的font-size:62.5%;

1rem = 10px;(16px*62.5%=10px)

重绘重排有什么区别?

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘

让一个元素水平垂直居中的方式有哪些?

定位 + margin

距离四周为0px,如何

.father {
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid #eee;
}

.son {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

绝对定位 position：absolute

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

相对定位 position：relative

相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；

定位 + transform

.father {
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid #eee;
}

.son {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

flex布局

.father{
   width: 400px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #eee;
}
.son {
   width: 200px;
   height: 200px;
   background-color: red;
}

CSS选择符有哪些?

CSS选择符:

通配(*)
id选择器 (#)
类选择器 (.)
标签选择器 (div、p、h1...)
相邻选择器(+)
后代选择器(ul li)
子元素选择器( > )
属性选择器(a[href]) 比如a标签处添加 v-data-xxx

CSS的哪些属性哪些可以继承? 哪些不可以承?

CSS的三大特性: 继承、层叠、优先级子元素可以继承父类元素的样式

文字系列: font,font-size,line-height,text-align...
元素的可见性: visibility:hidden
表格布局的属性: border-spacing
列表的属性: list-style

不可继承属性:

border、padding、margin...

有没有用过预处理器?

预处理语言增加了变量、函数、混入等强大的功能

SASS LESS

用CSS画一个三角形

用边框画

        div {
            width: 0;
            height: 0;

            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-top: 100px solid transparent;
            border-bottom: 100px solid #ccc;
        }

用css切掉正方形的一个角

画一个小的正方形旋转覆盖

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: black;
            overflow: hidden;
        }

        .box::before {
            position: absolute;
            content: "";
            width: 100px;
            height: 100px;
            right: -50px;
            top: -50px;
            z-index: 100;
            background-color: #ffffff;
            /* 顺时针旋转45度 */
            transform: rotateZ(45deg);
        }

对BFC规范(块级格式化上下文: block formatting context)的理解?

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的介素

了解BFC : 块级格式化上下文。
BFC的原则: 如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素
如何触发BFC:
- float的值非none
- overflow的值非visible
- display的值为: inline-block、table-cel1...position的值为:absoute、fixed

清除浮动有哪些方式?

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

额外标签法

在父元素内容的最后添加一个块级元素<div class="clearfix"></div>，设置 CSS 属性 clear: both

单伪元素法

准备 after 伪元素

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

父级使用 clearfix 类

<div class="father clearfix"></div>

#### 双伪元素法(推荐)

准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

父级使用 clearfix 类

<div class="father clearfix"></div>

overflow法

.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

position有哪些值?分别是根据什么定位的?

static [默认] 没有定位
fixed 固定定位，相对于浏览器窗口进行定位
relative 相对于自身定位，不脱离文档流。
absolute 相对于第一个有relative的父元素，脱离文档流。

relative和absolute区别

relative不脱离文档流、absolute脱离文档流
relative相对于自身、 absolute相对于第一个有relative的父元素
relative如果有left、right、top、bottom ==》left、top
absolute如果有left、right、top、bottom ==》left、right、top、bottom

写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块请写出结构及样式。

双飞翼

开启左浮动

先加载中间块:html中间块位置放在上面中左右

左边块: margin-left:-100%;

margin-left:-100%;
width: 200px;
height: 100vh;
background: red;

中间块:宽度100%

width: 100%;
background: pink;

右边块: margin-left:-200px

margin-left:-200px;
width: 200px;
height: 100vh;
background: blue;

什么是CSS reset?

reset.css是一个css文件，用来重置css样式的

normalize.css 为了增强跨浏览器染的一致性，一个CSS 重置样式库

css精灵sprite是什么,有什么优缺点

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

缺点：维护比较差(例如图片位置进行修改或者内容宽高修改)

display:none;与visibility: hidden;的区别

占用位置的区别
- display: none; 是不占用位置的
- visibility: hidden; 虽然隐藏了，但是占用位置
重绘和回流的问题

visibility: hidden;display: none; 产生重绘
display: none; 还会产生一次回流

产生回流一定会造成重绘，但是重绘不一定会造成回流

产生回流的情况:改变元素的位置(left、top...)、显示隐藏元素....

产生重绘的情况: 样式改变 (background、color...）、换皮肤

opacity 和 rgba 区别

共同性:实现透明效果

1.opacity 取值范围0到1之间，@表示完全透明，1表示不透明
2.rgba R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别: opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性

JS

1. JS由哪三部分组成?

ECMA Script: JS的核心内容，描述了语言的基础语法比如var,for，数据类型(数组、字符串)

文档对象模型(DOM): DOM把整个HTML页面规划为元素构成的文档, DOM是浏览器提供的一套专门用来操作网页内容的功能

浏览器对象模型 (BOM): 对浏览器窗口进行访问和操作 , 比如说在浏览器中弹出一些窗口,移动窗口像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

2. JS有哪些内置对象?

String Boolean Number Array object Function Math Date

Math: abs() sqrt() max() min()

Date: new Date() getYear()

Array: push() pop() sort() splice() unshift() shift() reverse() concat() map() filter()

String: concat() length slice() split()

3. 操作数组的方法有哪些?

push() pop() sort() splice() unshift() shift() reverse() concat() map() filter() reduce()

4. 哪些会改变原数组?

push() pop() sort() splice() unshift() shift() reverse()

5. JS 基本数据类型

Null类型 Undefined类型 Boolean类型 String类型 Number类型 Symbol类型

Null 类型: 这个值虽然定义了，但它并未指向任何内存中的对象。表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。通过将变量赋值为 Null 我们可以创建一个空的对象。

Undefined 类型: 声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined。

说明:

基本数据类型保存在栈内存当中 , 保存的就是一个具体的值

console.log( true + 1 ); //2
console.log('name'+ true ); //nametrue 字符串和其他类型相加，都会变成连接的形式
console.log(undefined + 1 ); //NaN NaN是一个数值类型，但是不是一个具体的数字
console.log( typeof null );//Object

console.log(typeof(NaN)) //Number
console.log(typeof(undefined)) //undefined

6. JS 引用数据类型

Object 类型: javaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }

Array 类型: 数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。属于引用类型Object

Function 类型: 函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行，属于引用类型Object

说明:

保存在堆内存当中，声明一个引用类型的变量，它保存的是引用类型数据的地址

7. JS对数据类的检测方式有哪些

typeof(): 对于基本数据类型没问题，遇到引用数据类型就不管用

console.log( typeof 666 ) //number
console.log( typeof [1,2,3] ) //object

instanceof(): 只能判断引用数据类型，不能判断基本数据类型

console.log( [] instanceof Array ) //true
console.log('abc' instanceof String ) //true

constructor: 几乎可以判断基本数据类型和引用数据类型 , 弊端：如果声明了一个构造函数，并把它的原型指向了Array，那就找不到了

console.log( ('abc').constructor === String ) //object

Object.prototype.tostring.call(): 最完美的方法

    var opt = Object.prototype.toString
    console.log(opt.call(2)) //[object Number]
    console.log(opt.call(true)) //[object Boolean]
    console.log(opt.call('aaa')) //[object String]
    console.log(opt.call([])) //[object Array]
    console.log(opt.call([])) //[object Array]

8. 说一下闭包，闭包有什么特点?

什么是闭包?

函数嵌套函数，内部函数被外部函数返回并保存下来时，就会产生闭包
闭包 = 内层函数 + 外层函数的变量

闭包作用：

可以重复利用变量，并且这个变量不会污染全局的一种机制
这个变量是一直保存在内存中，不会被垃圾回收机制回收
封闭数据，提供操作，外部也可以访问函数内部的变量
它允许将函数与其所操作的某些数据（环境）关联起来

闭包可能引起的问题？

变量会驻留在内存中，造成内存损耗问题, 解决把闭包函数设置为null
内存泄漏[IE]: 闭包较多的时候，会消耗内存，导致页面的性能下降，在IE浏览器中才会导致内存泄漏

使用场景:

防抖，节流，函数嵌套函数避免全局污染的时候

function outer() {
    let count = 1
    function fn() {
        count++
        console.log(`函数被调用${count}次`)
    }
    return fn
}
const re = outer()

9. 前端的内存泄漏怎么理解?

JS里已经分配内存地址的对象，但是由于长时间没有释放或者没办法清除，造成长期占用内存的现象，会让内存资源大幅浪费，最终导致运行速度慢，甚至崩溃的情况。

因素:

全局变量的滥用; 过度的闭包; 没有及时清理事件监听器; 一些未清空的定时器;

10. 事件委托是什么?

又叫事件代理，原理就是利用了事件冒泡的机制来实现，也就是说把子元素的事件绑定到了父元素的身上

如果子元素阻止了事件冒泡，那么委托也就不成立

阻止事件冒泡: event.stopPropagation()

addEventListener('click',函数名,true/false) 默认是false (事件冒泡)，true (事件捕获)

好处:提高性能，减少事件的绑定，也就减少了内存的占用。

11. 说一下原型链

原型就是一个普通对象，它是为构造函数的实例共享属性和方法 , 所有实例中引用的原型都是同一个对象

多次实例一个对象后,会有多个方法,很浪费内存. 使用prototype可以把方法挂在原型上，内存值保存一份

__proto__ 可以理解为指针，实例对象中的属性，指向了构造函数的原型 (prototype)

原型链:一个实例对象在调用属性和方法的时候，会依次从实例本身、构造函数原型、原型的原型上去查找

function Person() { }
Person.prototype.look = function () {
    console.log('谜人')
}
var p1 = new Person()
var p2 = new Person()
// p1.say()
// p2.say( )
p1.look()
p2.look()
console.log(p1.__proto__ === Person.prototype) //true

原型可以解决什么问题
- 对象共享属性和共享方法
谁有原型
- 函数拥有:prototype, 对象拥有:__proto__
对象查找属性或者方法的顺序
- 查找规则: 先在对象本身找 -> 构造函数中找 -> 对象原型中找 -> 构造函数原型中找 -> 当前原型的原型中查找
原型链
- 原型链是什么: 就是把原型串联起来
- 原型链的最顶端就是null

12. new操作符具体做了什么?(不懂)

1.先创建一个空对象

2.把空对象和构造函数通过原型链进行链接

3.把构造函数的this绑定到新的空对象身上

4.根据构建函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型

13. JS是如何实现继承的?(不懂)

1.原型链继承

2.借用构造函数继承

3.组合式继承

4.ES6的class类继承(此继承解决前三种缺点)

class类说明:

class通过extends关键字实现继承，其实本质是先创造出父类的this对象，然后用子类的构造函数修改this

子类的构造方法中必须先调用super方法，且只有在调用了super()之后才能使用this,因为子类的this对象是继承父类的this对象，然后对其进行加工，而super方法表示的是父类的构造函数，用来新建父类的this对象

14. JS的设计原理是什么?(不懂)

JS引擎运行上下文调用栈事件循环回调

15. JS中关于this指向的问题

全局对象中的this指向指向的是window
全局作用域或者普通函数中的this 没有被上一级对象调用的时候指向全局window
this永远指向最后调用它的那个对象,在不是箭头函数的情况下
new 关键词改变了this的指向
apply,call,bind可以改变this指向，不是箭头函数
箭头函数中的this 它的指向在定义的时候就已经确定了箭头函数它没有this,看外层是否有函数，有就是外层函数的this，没有就是window
匿名函数中的this 永远指向了window,匿名函数的执行环境具有全局性，因此this指向windov

16. script标签里的async和defer有什么区别?

当没有async和defer这两个属性的时候，浏览器会立刻加载并执行指定的脚本

async 加载和渲染后面元素的过程将和script的加载和执行并行进行(异步)

defer 加载和渲染后面元素的过程将和script的加载并行进行(异步)，但是它的执行事件要等所有元素解析完成之后才会执行

17. setTimeout最小执行时间是多少?

setTimeout最小执行时间是4ms

setInterval最小执行时间是10ms

18. ES6的新特性有哪些

1.新增块级作用域 (let,const ) 不存在变量提升存在暂时性死区的问题块级作用域的内容不能在同一个作用域内重复声明

2.新增了定义类的语法糖 (class)

3.新增了一种基本数据类型 (symbol)

4.新增了解构赋值

从数组或者对象中取值，然后给变量赋值

5.新增了函数参数的默认值

6.给数组新增了API

7.对象和数组新增了扩展运算符

8.Promise

解决回调地狱的问题。
自身有all,reject,resolve,race方法
原型上有then,catch
把异步操作队列化三种状态: pending初始状态,fulfilled操作成功,rejected操作失败
状态: pending -> fulfilled;pending -> rejected 一旦发生，状态就会凝固，不会再变
async await 同步代码做异步的操作，两者必须搭配使用 , async表明函数内有异步操作，调用函数会返回promise , await是组成async的表达式，结果是取决于它等待的内容，如果是promise那就是promise的结果，如果是普通函数就进行链式调用 , await后的promise如果是reject状态，那么整个async函数都会中断，后面的代码不执行

9.新增了模块化 (import,export)

10.新增了set和map数据结构

set 不重复
map的key的类型不受限制

11.新增了generator

12.新增了箭头函数

19. 箭头函数和普通函数的区别

不能作为构造函数使用，不能用new , 箭头函数就没有原型

箭头函数没有arguments

箭头函数不能用call,apply,bind去改变this的指向

this指向外层第一个函数的this

号外:

this指向的问题

箭头函数中的this只在箭头函数定义时就决定的，而且不可修改的 (call、apply、bind)
箭头函数的this指向定义时候、外层第一个普通函数的this

this不能new的(不能当做构造函数)
箭头函数没有prototype原型
箭头函数没有arguments

20. call,aply,bind三者有什么区别?

都是改变this指向和函数的调用，call和apply的功能类似，只是传参的方法不同语法: 函数.call()、函数.apply()、函数.bind()

call方法传的是一个参数列表
apply传递的是一个数组
bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的,需要执行还有再加一个括号bind()()
call方法的性能要比apply好一些，所以call用的更多一点

区别：

1. call和apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。
1. 参数不同: apply第二个参数是数组。call和bind有多个参数需要挨个写。

场景：

用apply情况

var arr1 =[1,2,4,5,7,3,321];
console.log( Math.max.apply(null,arr1))//321

用bind的情况

var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = functio(){
    console.log( this.id );
}.bind(h1s)

21. 用递归的时候有没有遇到什么问题?

如果一个函数内可以调用函数本身，那么这个就是递归函数 , 函数内部调用自己

特别注意: 写递归必须要有退出条件return

22. 如何实现一个深拷贝?

浅拷贝:只复制引用,而未复制真正的值。深拷贝就是完全拷贝一份新的对象, 会在堆内存中开辟新的空间, 原对象不受影响 , 主要针对的是引用数据类型

扩展运算符 缺点: 这个方法只能实现第一层，当有多层的时候还是浅拷贝
JSON.parse(JSON.stringify()) 先把对象转换为json字符串,再转换回json对象 . 缺点: 该方法并不会拷贝内部对象的函数
利用递归实现 (推荐)

23. 扩展运算符简介

扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。

基本用法：拆解字符串与数组

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

24. 说一下事件循环

JS是一个单线程的脚本语言

主线程执行栈任务队列宏任务微任务

主线程先执行同步任务，然后才去执行任务队列里的任务，如果在执行宏任务之前有微任务，那么要先执行微任务全部执行完之后等待主线程的调用，调用完之后再去任务队列中查看是否有异步任务，这样一个循环往复的过程就是事件循环!

25. ajax是什么?怎么实现的?

创建交互式网页应用的网页开发技术

在不重新加载整个网页的前提下，与服务器交换数据并更新部分内容

通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过操作DOM更新页面

创建XmlHttpRequest对象 xmh
通过xmh对象里的open()方法和服务器简历连接
构建请求所需的数据，并通过xmh对象的send()发送给服务器
通过xmh对象的onreadystate chansge事件监听服务器和你的通信状态
接收并处理服务器响应的数据结果
把处理的数据更新到HTML页面上

26. get和post有什么区别?

get一般是获取数据，post一般是提交数据
get参数会放在ur1上，所以安全性比较差，post是放在body中
get请求刷新服务器或退回是没有影响的，post请求退回时会重新提交数据
get请求时会被缓存,post请求不会被缓存
get请求会被保存在浏览器历史记录中,post不会
get请求只能进行ur1编码, post请求支持很多种

27. promise的内部原理是什么? 它的优缺点是什么?

Promise对象，封装了一个异步操作并且还可以获取成功或失败的结果

Promise主要就是解决回调地狱的问题，之前如果异步任务比较多，同时他们之间有相互依赖的关系.就只能使用回调函数处理，这样就容易形成回调地狱，代码的可读性差，可维护性也很差

有三种状态: pending初始状态 fulfilled成功状态 rejected失败状态

状态改变只会有两种情况: pending -> fulfilled;pending -> rejected 一旦发生，状态就会凝固，不会再变

首先就是我们无法取消promise，一旦创建它就会立即执行，不能中途取消

如果不设置回调，promise内部抛出的错误就无法反馈到外面

若当前处于pending状态时，无法得知目前在哪个阶段。

原理: 构造一个promise实例，实例需要传递函数的参数，这个函数有两个形参，分别都是函数类型，一个是resolve一个是reject , promise上还有then方法，这个方法就是来指定状态改变时的确定操作，resolve是执行第一个函数，reject是执行第二个函数

25. promise和async await的区别是什么?

都是处理异步请求的方式
promise是ES6，async await 是ES8的语法
async await是基于promise实现的，他和promise都是非阻塞性的

优缺点:

promise是返回对象我们要用then，catch方法去处理和捕获异常，并且书写方式是链式，容易造成代码重叠，不好维护，async await 是通过tra catch进行捕获异常
async await最大的优点就是能让代码看起来像同步一样，只要遇到await就会立刻返回结果，然后再执行后面的操作 async, promise.then()的方式返回，会出现请求还没返回，就执行了后面的操作

26. 浏览器的存储方式有哪些?

H5标准前的本地存储方式
兼容性好，请求头自带cookie
存储量小，资源浪费，使用麻烦(封装)

localstorage

H5加入的以键值对为标准的方式
操作方便，永久存储，兼容性较好
保存值的类型被限定，浏览器在隐私模式下不可读取，不能被爬虫

sessionstorage

当前页面关闭后就会立刻清理，会话级别的存储方式

indexedDB

H5标准的存储方式，他是以键值对进行存储，可以快速读取，适合WEB场景

27. token存在sessionstorage还是loaclstorage?

token: 验证身份的令牌，一般就是用户通过账号密码登录后，服务端把这些凭证通过加密等系列操作后得到的字符串

存loaclstorage里,后期每次请求接口都需要把它当作一个字段传给后台(推荐)
存cookie中，会自动发送，缺点就是不能跨域(敏感信息存在此处好)
如果存在localstorage中，容易被XSS攻击 ,但是如果做好了对应的措施，那么是利大于弊 . 如果存在cookie中会有CSRF攻击

28. token的登录流程

客户端用账号密码请求登录
服务端收到请求后，需要去验证账号密码
验证成功之后，服务端会签发一个token，把这个token发送给客户端
客户端收到token后保存起来，可以放在cookie也可以是localstorage
客户端每次向服务端发送请求资源的时候，都需要携带这个token
服务端收到请求，接着去验证客户端里的,token验证成功才会返回客户端请求的数据

29. 页面渲染的过程是怎样的?

DNS解析
建立TCP连接
发送HTTP请求
服务器处理请求
渲染页面
- 浏览器会获取HTML和CSS的资源，然后把HTML解析成DOM树
- 再把CSS解析成CSSOM
- 把DOM和CSSOM合并为渲染树
- 布局
- 把渲染树的每个节点渲染到屏幕上(绘制)
断开TCP连接

30. DOM树和渲染树有什么区别?

DOM树是和HTML标签一一对应的，包括head和隐藏元素
渲染树是不包含head和隐藏元素

31. 精灵图和base64的区别是什么?

精灵图: 把多张小图整合到一张大图上，利用定位的一些属性把小图显示在页面上，当访问页面可以减少请求，提高加载速度

base64:传输8Bit字节代码的编码方式，把原本二进制转为64符的单位，最后组成字符串

base64是会和html一起下载到浏览器中，减少请求，减少跨域问题，但是一些低版本不支持,若base64体积比原图片大，不利于css的加载

32. svg格式了解多少?

基于XML语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG是属于对图像形状的描述，本质是文本文件,体积小，并且不管放大多少倍都不会失真

SVG可直接插入页面中，成为DOM一部分, 然后用JS或CSS进行操作 <svg></svg>
SVG可作为文件被引入 <img src="pic.svg"
SVG可以转为base64引入页面

33. 了解过JWT吗?

JSON Web Token 通过JSON形式作为在web应用中的令牌, 可以在各方之间安全的把信息作为JSON对象传输

作用: 信息传输、授权

JWT的认证流程:

前端把账号密码发送给后端的接口
后端核对账号密码成功后，把用户id等其他信息作为JWT 负载，把它和头部分别进行base64编码拼接后签名，形成一个JWT (token)
前端每日请求时都会把JWT放在HTTP请求头的Authorization字段内
后端检查是否存在，如果存在就验证JWT的有效性(签名是否正确，token是否过期)
验证通过后后端使用JWT中包含的用户信息进行其他的操作，并返回对应结果

特点：简洁、包含性、因为Token是JSON加密的形式保存在客户端，所以JWT是跨语言的，原则上是任何web形式都支持。

34. npm的底层环境是什么?

node package manager,node的包管理和分发工具，已经成为分发node模块的标准，是JS的运行环境

npm的组成: 网站、注册表、命令行工具

35. HTTP协议规定的响应头和请求头有什么?

请求头信息

Accept:浏览器告诉服务器所支持的数据类型
Host:浏览器告诉服务器我想访问服务器的哪台主机
Referer:浏览器告诉服务器我是从哪里来的 (防盗链)
User-Agent:浏览器类型、版本信息
Date:浏览器告诉服务器我是什么时候访问的
Connection:连接方式
Cookie
X-Request-with:请求方式

响应头信息

Location:这个就是告诉浏览器你要去找谁
Server:告诉浏览器服务器的类型
Content-Type:告诉浏览器返回的数据类型
Refresh:控制了的定时刷新

36. 说一下浏览器的缓存策略(不懂)

强缓存 (本地缓存) 、协商缓存 (弱缓存)

强缓:不发起请求，直接使用缓存里的内容，浏览器把JS，CSS，image等存到内存中，下次用户访问直接从内存中取，提高性能

协缓: 需要向后台发请求, 通过判断来决定是否使用协商缓存,如果请求内容没有变化,则返回304,浏览器就用缓存里的内容

37. 说一下什么是“同源策略”?

http://www.aaa.com:8080/index/vue.js

协议子域名主域名端口号资源

同源策略是浏览器的核心，如果没有这个策略就会遭受网络攻击

主要指的就是协议+域名+端口号三者一致，若其中一个不一样则不是同源，会产生跨域

三个允许跨域加载资源的标签: img link script

跨域是可以发送请求，后端也会正常返回结果，只不过这个结果被浏览器拦截了!

解决跨域:

JSONP
CORS
websocket
反向代理

38. 防抖和节流是什么?

都是应对页面中频繁触发事件的优化方案

节流和防抖的区别是？
节流: 就是指连续触发事件但是在 n 秒中只执行一次函数,比如可以利用节流实现 1s之内只能触发一次鼠标移动事件
防抖：如果在 n 秒内又触发了事件，则会重新计算函数执行时间
节流和防抖的使用场景是？
节流: 鼠标移动，页面尺寸发生变化，滚动条滚动等开销比较大的情况下
防抖: 搜索框输入，设定每次输入完毕n秒后发送请求，如果期间还有输入，则重新计算时间

39. 解释一下什么是JSON?

JSON是一种轻量级的数据交换格式

JSON是一种纯字符串形式的数据，它本身不提供任何方法，适合在网络中进行传输

JSON数据存储在.ison文件中，也可以把JSON数据以字符串的形式保存在数据库、Cookise中

Js提供了JSoN.parse() JSON.stringify()

什么时候使用ison: 定义接口: 序列化: 生成token; 配置文件package.json

40. 有没有做过无感登录?(不懂)

1.在相应其中拦截，判断token返回过期后，调用刷新token的接口

2.后端返回过期时间，前端判断token的过期时间，去调用刷新token的接口

3.写定时器，定时刷新token接口

流程:

登录成功后保存token 和 refresh token
在响应拦截器中对401状态码引入刷新token的api方法调用
替换保存本地新的token
把错误对象里的token替换
再次发送未完成的请求
如果refresh token过期了，判断是否过期，过期了就清除所有token重新登录

41. v-if和v-show的区别?

都可以控制元素的显示和隐藏

V-show时控制元素的display值来让元素显示和隐藏: V-if显示隐藏时把DOM元素整个添加和删除
v-if有一个局部编译/卸载的过程，切换这个过程中会适当的销毁和重建内部的事件监听和子组件:V-Show只是简单的css切换
V-if才是真正的条件渲染; V-show从false变成true的时候不会触发组件的声明周期，v-if会触发声明周期
v-if的切换效率比较低 v-show的效率比较高

42. 如何理解MVVM的?

是Model-View-ViewMode1的缩写。前端开发的架构模式

M: 模型，对应的就是data的数据

V: 视图，用户界面，DOM

VM: 视图模型: Vue的实例对象，连接View和Model的桥梁

核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewMode能监听到数据的变化，自动更新视图当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定ViewModel通过双向绑定把view和Model连接起来，他们之间的同步是自动的，不需要认为于涉，所以我们只需要关注业各逻辑即可，不需要操作DOM，同时也不需要关注数据的状态问题，因为她是中MVVM统一管理

43. v-for中的key值的作用是什么?

key属性是DOM元素的唯一标识

作用:

提高虚拟DOM的更新
若不设置key，可能会触发一些bug
为了触发过渡效果

44. 延迟加载JS有哪些方式?

延迟加载: async、defer

例如:

<script defer type="text/javascript"src='script.js'</script>

区别:

defer：等htm1全部解析完成，才会执行js代码，顺次执行的。 async：async是和htm1解析同步的(一起的),不是顺次执行js脚本(谁先加载完谁先执行起的)

45. null和undefined的区别

先有 null 后有 undefined，出来 undefined 是为了填补之前的坑

null 像在 Java 里一样，被当成一个对象。但是，JavaScript 的数据类型分成原始类型.(primitive)和合成类型 (complex) 两大类，作者觉得表示"无"的值最好不是对象
JavaScript 的最初版本没有包括错误处理机制,发生数据类型不匹配时，往往是自动转换类型或者默默地失败。作者觉得，如果 null 自动转为 0，很不容易发现错误

具体区别:

JavaScript 的最初版本是这样区分的: null 是一个表示"无"的对象 (空对象指针)，转为数值时为 0; undefined 是一个表示"无"的原始值，转为数值时为 NaN。

46. ==和===有什么不同?

== : 比较的是值 (有坑)

只能是值比较,不能赋值给变量后再用变量比较 string == number || boolean || number 都会隐式转换通过valueof转换

valueOf() 方法返回Math 对象的原始值。
该原始值由 Math 对象派生的所有对象继承
valueof() 方法通常由 JavaScript 在后台自动调用, 并不显式地出现在代码中

=== : 除了比较值，还比较类型

JS微任务和宏任务

js是单线程的语言
js代码执行流程:同步执行完 -> 事件循环同步的任务都执行完了，才会执行事件循环的内容
- 进入事件循环:请求、定时器、事件...
事件循环中包含:[微任务、宏任务]
- 微任务: promise.then
- 宏任务: setTimeout

要执行宏任务的前提是清空了所有的微任务

流程:同步 -> 事件循环[微任务和宏任务] -> 微任务 -> 宏任务 -> 微任务..

JS作用域考题

除了函数外，js是没有块级作用域
作用域链:内部可以访问外部的变量，但是外部不能访问内部的变量。
注意:如果内部有，优先查找到内部，如果内部没有就查找外部的。
注意声明变量是用var还是没有写 (window.)
注意:js有变量提升的机制[变量悬挂声明]
优先级:声明变量>声明普通函数>参数>变量提示

面试的时候怎么看:

本层作用域有没有此变量[注意变量提升]
注意:js除了函数外没有块级作用域
普通声明函数是不看写函数的时候顺序

JS对象考题

注意点:

对象是通过new操作符构建出来的，所以对象之间不相等(除了引用外)
对象注意:引用类型(共同一个地址)
对象的key都是字符串类型
对象如何找属性|方法:
- 查找规则: 先在对象本身找 -> 构造函数中找 -> 对象原型中找 -> 构造函数原型中找 -> 对象上一层原型查找

    function Fun() {
        // this.a = '在Fun函数中添加的';//2
    }
    // Fun.prototype.a = '这是Fun原型添加的';//4
    let obj = new Fun();
    // obj.a = '对象本身';//1
    // obj.__proto__.a = '这是对象原型添加的';//3

    // Object.prototype.a = '这是Object添加的'//5
    console.log(obj.a);

    console.log(Fun.prototype == obj.__proto__);//true

考题一:

console.log([1, 2, 3] === [1, 2, 3]);

此条件将始终返回“false”，因为JavaScript通过引用而不是值来比较对象。

考题三:

    var a = {}
    var b = {
        key: 'a'
    }
    var c = {
        key: 'c'
    }
    a[b] = '123';
    a[c] = '456';

    for(k in a){
        console.log(k);//[object Object]
    }
    console.log(a[c]); //456

JS作用域+this指向+原型考题

考题一:

function Foo() {
    getName = function () { console.log(1) } //注意是全局的window.
    return this;
}
Foo.getName = function () { console.log(2) }
Foo.prototype.getName = function () { console.log(3) }
var getName = function () { console.log(4) }
function getName() {
console.log(5)
}
Foo.getName();//2
getName();//4
Foo().getName(); //1
getName();//1 被覆盖了
new Foo().getName();//3 在对象原型中没有,那么去构造原型中找

考题二:

    var o = {
        a: 10,
        b: {
            a: 2,
            fn: function () {
                console.log(this.a);//2
                console.log(this);//代表b对象


            }
        }
    }
    o.b.fn();

方法不加括号等于赋值过来 , 不会执行

JS判断变量是不是数组，你能写出哪些方法?

方法一: isArray()

var arr = [1,2,3]
console.log(Array.isArray(arr));//true

方式二: instanceof

var arr = [1,2,3]
console.log(arr instanceof Array);//true

方式三:prototype

var arr = [1,2,3]
console.log(Object.prototype.toString.call(arr).indexOf('Array')>-1);//true

slice是干嘛的、splice是否会改变原数组

slice:截取不会改变原数组

var arr1 = ['a','b','c','d','e'];
var arr2 = arr1.slice(1,3);
console.log(arr2);//['b', 'c']

splice: 插入、删除、替换会改变原数组返回: 删除的元素

var arr1 = ['a','b','c','d','e'];
var arr3 = arr1.splice(1,3)
console.log(arr3,arr1);// ['b', 'c', 'd'] ['a', 'e']
...
var arr4 = arr1.splice(1,3,'谜')
console.log(arr4,arr1);//  ['b', 'c', 'd']   ['a', '谜', 'e']

JS数组去重

方式一: new Set()

var arr1 = [1,1,2,3,4,4,5,1]
console.log(Array.from(new Set(arr1)));//[1, 2, 3, 4, 5]
console.log([...new Set(arr1)]);//[1, 2, 3, 4, 5]

方式二: indexOf

    var arr2 = [1, 1, 2, 3, 4, 4, 5, 1]
    function unique(arr) {
        var brr = [];
        for (var i = 0; i < arr.length; i++) {
            if (brr.indexOf(arr[i]) == -1) {
                brr.push(arr[i])
            }
        }
        return brr;
    }
    console.log(unique(arr2));

方式三:sort

new操作符具体做了什么和 12 题一样

创建了一个空的对象
将空对象的原型，指向于构造函数的原型
将空对象作为构造函数的上下文 (改变this指向)
对构造函数有返回值的处理判断 (返回的是值类型则忽略,返回的是引用类型,那么new这个方法的时候则输出返回值)

sort的原理

sort() 方法用于对数组的元素进行排序,并返回数组。会改变原数组.默认排序顺序是根据字符串 Unicode 码点。

降序排序

var arr2 = [12,111,11,1,23,'45','34',21];//111,'45',34',23,21,12,11,1
var arr3 = arr2.sort(function( a, b ){
    return b-a;
})

之前的版本是:插入排序和快排，现在是冒泡

H5C3

什么是语义化标签

易读性和维护性更好
seo成分会更好，蜘蛛抓取更好
IE8不兼容HTML5标签的。解决: 可以通过html5shiv.js去处理。

::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

:是伪类,::是伪元素 --> 是为了做区分

如何关闭IOS键盘首字母自动大写

<input type="text” autocapitalize='off'>

rem和em区别

相对于font-size

em针对于父元素的font-size
rem针对于根(htm1)元素的font-size

自适应和响应式布局

ES6

var、let、const区别

var、let、const 共同点都是可以声明变量的

区别一:

var具有变量提升的机制
let和const没有变量提升的机制

区别二:

var可以多次声明同一个变量
let和const不可以多次声明同一个变量

区别三:

var、let声明变量的
const声明常量
var和let声明的变量可以再次赋值，但是const不可以再次赋值了,但是是对象的话,里面内容可以修改

区别四:

var声明的变量没有自身作用域
let和const声明的变量有自身的作用域

将下列对象进行合并

方式一: Object.assign

const a={a:1,b:4};
const b={b:2,c:3};

let obj1 = 0bject.assign(a,b);
console.log( obj1 ); //{a:1,b:2,c:3}

方式二: ... 扩展运算符

let obj2 = {...a,...b};
console.log( obj2 ); //{a:1,b:2,c:3}

方式三: 自己封装方法

find和filter的区别

区别一: 返回的内容不同

filter返回是新数组
find返回具体的内容

区别二:

find:匹配到第一个即返回
filter:返回整体

some和every的区别

some --> 如果有一项匹配则返回true

every --> 全部匹配才会返回true

排序算法

visualgo.net/zh/sorting

前端面试题

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

页面导入样式时，使用link和@import有什么区别?

title与h1的区别、b与strong的区别、i与em的区别?

img标签的title和alt有什么区别?

png、jpg、gif 这些图片格式解释一下，分别什么时候用?

说一下css的盒模型

line-height和heigh区别

CSS选择器的优先级?权重

隐藏元素的方法有哪些?

px和rem的区别是什么

重绘重排有什么区别?

让一个元素水平垂直居中的方式有哪些?

CSS选择符有哪些?

CSS的哪些属性哪些可以继承? 哪些不可以承?

有没有用过预处理器?

用CSS画一个三角形

用css切掉正方形的一个角

对BFC规范(块级格式化上下文: block formatting context)的理解?

清除浮动有哪些方式?

额外标签法

单伪元素法

#### 双伪元素法(推荐)

overflow法

position有哪些值?分别是根据什么定位的?

写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块请写出结构及样式。

什么是CSS reset?

css精灵sprite是什么,有什么优缺点

display:none;与visibility: hidden;的区别

opacity 和 rgba 区别

JS

1. JS由哪三部分组成?

2. JS有哪些内置对象?

3. 操作数组的方法有哪些?

4. 哪些会改变原数组?

5. JS 基本数据类型

6. JS 引用数据类型

7. JS对数据类的检测方式有哪些

8. 说一下闭包，闭包有什么特点?

9. 前端的内存泄漏怎么理解?

10. 事件委托是什么?

11. 说一下原型链

12. new操作符具体做了什么?(不懂)

13. JS是如何实现继承的?(不懂)

14. JS的设计原理是什么?(不懂)

15. JS中关于this指向的问题

16. script标签里的async和defer有什么区别?

17. setTimeout最小执行时间是多少?

18. ES6的新特性有哪些

19. 箭头函数和普通函数的区别

20. call,aply,bind三者有什么区别?

21. 用递归的时候有没有遇到什么问题?

22. 如何实现一个深拷贝?

23. 扩展运算符简介

24. 说一下事件循环

25. ajax是什么?怎么实现的?

26. get和post有什么区别?

27. promise的内部原理是什么? 它的优缺点是什么?

25. promise和async await的区别是什么?

26. 浏览器的存储方式有哪些?

27. token存在sessionstorage还是loaclstorage?

28. token的登录流程

29. 页面渲染的过程是怎样的?

30. DOM树和渲染树有什么区别?

31. 精灵图和base64的区别是什么?

32. svg格式了解多少?

33. 了解过JWT吗?

34. npm的底层环境是什么?

35. HTTP协议规定的响应头和请求头有什么?

36. 说一下浏览器的缓存策略(不懂)

37. 说一下什么是“同源策略”?

38. 防抖和节流是什么?

39. 解释一下什么是JSON?

40. 有没有做过无感登录?(不懂)

41. v-if和v-show的区别?

42. 如何理解MVVM的?

43. v-for中的key值的作用是什么?

44. 延迟加载JS有哪些方式?

45. null和undefined的区别

46. ==和===有什么不同?

new操作符具体做了什么和 12 题一样