前端最新面试题集--2020

我是一名正在找实习工作的前端小白 不晓得具体怎么准备实习 所以准备了这个 其实里面的知识我基本都知道点 但是不全 所以做了个总结 共同进步

css实现梯形

.bar{ width:50px; height:50px; border-left: 50px solid translate; border-right:50px solid transalte; border-top: 50px solid translate; border-bottom: 50px solid red; } ## 请描述cookies、sessionStorage和localStorage的区别 相同点：都存在浏览器端 **①.数据存储大小限制不同。** cookies：数据始终在同源的http请求中携带，即cookie能在服务器和浏览器间回传。故存储的数据大小最小，一般为4096B。 sessionStorage：数据保存在本地，不会自动发给服务器。所以一般5M或者更大。 localStorage：数据保存在本地，不会自动发给服务器。所以一般5M或者更大。 **②.数据有效期不同** cookies：数据在cookie设置的有效期之前都有效，即使窗口和浏览器关闭。 sessionStorage：数据在关闭浏览器窗口后自动清除。存储的数据仅在同源窗口内有效，即使在不同浏览器相同页面也是无效的。一般用于存储会话数据。 localStorage：始终有效，因此用作持久数据。 **③.数据作用域不同** cookies、localStorage：在所有同源窗口敏感词享。

sessionStorage：不在不同浏览器窗口敏感词享。

盒模型是什么

盒模型主要分为两类：W3C标准盒子模型和IE盒子模型，
标准模型-width与height按照content宽高计算，而IE模型-width与height则按照content+padding+border计算
在编写页面代码的时候应该尽量使用标准的W3C盒子模型，可在页面中声明DOCTYPE类型，将页面设置为"标准模式"

    box-sizing：content-box; // 标准盒模型
    box-sizing：border-box;  // IE盒模型

空(void)元素有那些

空元素(没有内容的html元素)有：br、meta、hr、link、input、img
块级元素 h1~h6 div p ul、li、dl、dt、dd
内联元素 a span b img select input label button textarea

如何找到html的select选中元素

给select绑定onchange事件

<select id="select" onchange="getValue()">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<script>
   function getValue(){
        console.log(document.getElementById('select').value)
    }
</script>

display:none（不占用空间）与visibility:hidden（占用空间）的区别

1.visibility，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示
dispaly:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了
2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在css3的transition中支持visibility属性，但是不支持display，display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示

4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘
   因为display:none会脱离文档流，不占据页面空间；visibility:hidden,只是隐藏内容，并没有脱离文档流，会占据页面的空间。
   (reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。

repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。)

同步与异步的区别

当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率

原生js的选择器document.querySelector()

如何居中一个浮动元素？

水平居中最常见的方法是在外面在嵌套一个div 设置margin:0 auto

js有几种数据类型，其中基本数据类型有哪些（7种加上symbol）

五种基本类型: Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function则属于引用类型

http 和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

什么是mvvm mvc是什么区别 原理

一、MVC（Model-View-Controller）

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）
二、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

px和em

px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；

em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。

除了border之外还有一种方法可以给div划线，你了解过这个吗

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。

img标签的title、alt属性的区别

alt属性的实质是通过文字来代替图片的内容在图片加载不出来的时候，而title属性的实质是对图片的描述或者注释

html语义化

用最恰当的标签来标记内容
比如需要加入一个标题，这个标题的字体比正文的要大写，还要加粗。能够实现这种效果的方法有很多，比如用CSS样式进行渲染。这样的效果看起来像是一个标题，但是他对浏览器来说，只是一个被渲染过的文本，无法知道他是一个标题。若要让浏览器知道他是一个标题，应该用hx标签来进行标记。从这个例子可以总结出： 语义化的HTML文档，不关心内容的显示效果。 说的通俗一点： 标题脱了CSS这层外衣，它还是一个标题
好处：提升搜索引擎优化(SEO)的效果；即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构，使HTML结构变的清晰，有利于维护代码和添加样式

块级元素与内联元素的详细区别

补充：块里可以含行.也就是div块里可以有span；但是内联元素内不能包含块元素；

取消a链接的默认跳转行为

1.<a href="javascript:;">百度</a>
2.<a href="javascript:void(0)">百度</a>
3.为 a 标签绑定一个点击事件，事件的返回值为 false ，这样 a 链接就不会跳转。
4.<a id="test" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
    //声明并获取element
    var test = document.getElementById("test");
    //阻止默认事件函数
    function stopDefault(e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else
            window.event.returnValue = false; //兼容IE
    }
// e.preventDefault();阻止默认事件(不支持IE)，IE中用window.event.returnValue = false; 阻止默认事件
</script>

清除浮动的几种方法，为什么要清除浮动

脱离标准文档流的几种方式：float 绝对定位 固定定位
浮动脱离了标准文档流,会导致父元素高度塌陷，后面元素会挤到浮动元素下方，造成布局错乱（子元素浮动 且父元素没有设置高度，本来的父元素由子元素的高度决定，子元素浮动 父元素高度塌陷）
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）添加无意义标签，语义化差
2.父级添加overflow属性（父元素添加overflow:hidden/overflow:auto）（不推荐）内容增多的时候容易造成不会自动换行导致内容被隐藏掉
3.使用after伪元素清除浮动（推荐使用）
4给父元素添加高度不推荐 不利于后期维护
注意 浮动元素一定是块级元素 如果给有个内联元素加上浮动 他会自动变成块级元素 其实没有使用display:block

<style>
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;/*去掉小圆点*/
}
.nav li{
    width: 100px;
    height: 40px;
    float: left;
    border: 1px solid #000;
}
.content{
    width: 500px;
    height: 300px;
    background-color: pink;
}

.clear_float::after{
    /*只需要给浮动元素的父容器添加上这个类就可以了: clear_float*/
    display: block;/*把::after设置成块级元素*/
    content: "";/*想让伪类起作用, 必须添加这个属性*/
    clear: both;
    // 给一个元素添加一个::after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子. 是第一种方法的升级 没有直接添加一个元素
}
</style>
<div class="header">
    <ul class="nav clear_float">
        <li>导航 1</li>
        <li>导航 2</li>
        <li>导航 3</li>
    </ul>
</div>
<div class="content"></div>

h5新增的标签有哪些，为什么要加强语义化？

<nav>表示导航

<header>表示页眉，也就网页的头部

<footer>表示页脚，网页的底部

<section>表示区块，建议用在内部有标题的区块

<article>表示文章、内容、评论、帖子、博客等

<aside>表示侧边栏，如文章的侧栏

<address>表示联系人信息的区块

<hgroup>表示对网页或区段的标题进行组合

<keygen>表示给表单添加一个公钥

<menu>菜单列表

<audio>表示音频内容

<video>表示视频

<source>表示定义媒体资源

<output>用于不同类型的输出

有利于SEO;在没有CSS的时候能够清晰的看出网页的结构，增强可读性;
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力

程序题

for（i=0;i<10;i++){setTimeout(function(){console.log(i)},10)}

10个10输出

vue实现双向绑定的原理是什么

Vue之间组件是怎么传值的

父传子 父组件通过bind指令传递给子组件，子组件通过props接收
子传父 子组件通过$emit触发自定义事件 可以携带参数，在父组件中监听这个事件
bus总线
首先在由vue-cli搭建起来的项目中的main.js创建一个事件总线，也就是中转站，作为通信的桥梁。核心代码如下：

// 建立中转站，实现组件与组件之间的传值
let bus = new Vue()
Vue.prototype.bus = bus

methods: {
  btnMessage() {
    this.bus.$emit("ReceiveMessage", this.message)
  }
}

mounted() { 
let self = this; 
this.bus.$on("ReceiveMessage", function(item) { self.name = item; })
 }

vuex状态管理模式

点击按钮进行数据请求，怎么实现按序执行

ajax2方法执行放在ajax1的success回调函数中

怎么实现文本不自动换行，超出文本的部分变成省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipisis;

vue的生命周期有哪些，分别有什么不同

主要包括以下4个阶段：创建，挂载，更新，销毁
1、beforeCreate（创建前）
在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建
2、created（创建后）
data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
created用于获取后台数据
3、beforeMount（载入前）

4、mounted（载入后）
mounted用于dom挂载完后做一些dom操作
5、beforeUpdate（更新前）

6、updated（更新后）
页面显示的数据和data中的数据已经保持同步了，都是最新的
7、beforeDestroy（销毁前）
只是进入了销毁阶段，并没有真正被销毁，beforeDestroy用户清除定时器以及解绑事件等,
8、destroyed（销毁后）
还没有真正被销毁
假如keep-alive包裹了组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，在切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了

跨域的原理有哪些，jsonp的原理是什么？

跨域，指的是浏览器不能执行其它网站的脚本，如果不是同源页面，就不会执行
解决方法：jsonp jsonp只支持get请求，不支持postr请求
原理：ajax请求受同源策略影响，不允许进行跨域请求，而script标签的src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务器不再返回json格式的数据，而是返回一个调用某个函数的js代码，再src进行了调用，实现了跨域
2.代理 写后端接口
3.php修改Header请求头
header(‘Access-Control-Allow-Orign:’)//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);

改变this指向

1.使用箭头函数
2.箭头函数肋部使用’_this=this’
3.使用apply.call.bind
4.new实例化一个对象

快速排序的思路

TCP和UDP的区别

Vue的数据响应式原理

window.open 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

css选择器的优先级，并进行排序

盒子水平居中大方法

.生成一个数值区间在2-32的随机数组

function f(n){
        //大于数组长度时，取数组长度
    if(n>31)n=31;
    var number=[];
    while(n){
        //随机数的选取方法31为所需的数组长度
       var num=Math.floor(Math.random() * 31)+2;
        //数组查重的方法
       if(number.indexOf(num)<0){
           number.push(num);
           n--;
       }
    }
    console.log(number.sort());//用于观察数组
    console.log(number)
}
f(32)//只能取到数组长度的数组
//[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 2, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 3, 30, 31, 32, 4, 5, 6, 7, 8, 9]
//Math.floor() 返回小于或等于一个给定数字的最大整数。
//Math.random() 函数返回一个浮点,  伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1）

es6有哪些新特性

1.var let const
var声明的变量具有变量提升，且全局可用
let声明的变量是块级作用域，避免了变量提升
const声明的变量不可重复申明，只在块级作用域类作用，不存在变量提升，
变量提升：在加载程序之前，浏览器会做一些准备工作，变量、函数表达式，默认赋值为undefined；
for循环计数器就适合使用let

var a = 1;
(function () {
 alert(a);
var a = 2;
})()//undefined
执行顺序：
Var a；
Alert (a);
Var a=2;

var a = 1;
(function(){
    alert(a);
    let a = 2;
})();//a is not defined
//因为变量没有提升，所以执行到alert(a)的时候a还是未定义状态，而且因为let只在块级作用域里起作用，所以外部的a也取不到。

2.for of 遍历数组
简洁很多；
可以用break来终止整个循环，或者continute来跳出当前循环，继续后面的循环；
结合keys( )获取到循环的索引，并且是数字类型，而不是字符串类型

var arr= [1,2,3,4,5];
   for(let value of arr){
        if(value ==3){
            //终止整个循环
           break;
        }
        console.log(value); //1 2
    }

3.解构赋值
4.Symbol Map Set
5.箭头函数

单页面应用有什么优点

用户体验好，快，内容改变不需要重新加载整个页面；
没有页面之间的切换，就不会出现“白屏现象”

对象有哪些遍历方法

git操作里rebase,merge,创建新的分支，commit这些分别是什么

深拷贝和浅拷贝有什么不同，有哪些方法可以实现深拷贝

便利一个对象里面的所有key值有什么方法

https中的s代表什么

http三次握手四次挥手

axios的底层用了什么

新的fetch请求时怎么实现的

js的闭包是什么，一般用在什么场景

箭头函数中的this时怎么绑定的

绑定this指向的方法bind call applay区别，实现bind方法有什么思路

promise和async await的区别是什么，如果在axait方法后面报错了怎么处理

原生轮播图实现思路

keep-alive有什么作用

缓存组件，防止二次渲染，这样会大大的节省性能
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

页面的状态管理有哪些方法

rem是怎么实现手机端的适配的

rem是根据HTML根元素大小而定
什么是适配 实现页面再不同设备上等比

rem适配原理：改变了一个元素在不同设备上占据的css像素的个数
优点:可以使用完美视口
缺点:计算设计图上的px值到rem的转换比例麻烦

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
window.onload=function(){
        var styleNode = document.createElement('style');
        var w = document.documentElement.clientWidth/16+"px";
        styleNode.innerHTML="html{font-size:"+w+" !important;}"
        document.head.append(styleNode);
};

您有收获吗？

希望我没有浪费您的时间。

谢谢您的耐心阅读。

如有错误或者补充及时更正。