亲身经历的2020年前端面试题

html：

1.async与defer的区别?
defer和async在脚本下载这块是一致的，都是异步加载。
区别：两者的区别在于脚本加载完何时执行，是立即加载但是延迟执行，脚本的执行要在所有元素解析完成之后。
async是立即下载并执行，defer是按照加载顺序执行脚本的，async不能保证按照制定的先后顺序执行。

2.优化seo的方式？
设置ktd,即keywords,tittle,description

css:

1. inline元素与 inline-block元素之间的区别？
   inline元素是行内元素，设置宽高不起作用、padding上下左右都起作用、margin只对左右起作用，上下不起作用。

2. 如何用css画三角形？
   width:0;
   height:0;
   border-width:10px;
   border-style:solid;
   border-color:#f00 transporant transporant transporant;

3. 三栏布局，两边宽度固定中间自适应的实现方式？解释css浮动的原理？
   五种布局方式：float布局，position布局，flex布局，grid布局，table布局；

4. 谈谈你对css盒模型的认识？
   4.1，css盒模型包括content+padding+border+margin; css盒模型分为标准模型+ie模型；
   4.2，标准模型和ie模型区别？ 计算模型的宽度和高度机制不一样，标准模型的宽高是指content的宽高，ie模型的宽高是指content+padding+border的宽高；
   4.3，css如何设置这两种模型？ ie模型：box-sizing:border-box; 标准模型：box-sizing:content-box;

5. 伪类，伪元素的区别？
   1.写法的区别：：伪类，：：伪元素。
   2.概念的区别：伪类侧重于丰富选择器的选择能力，伪元素侧重于不在语法范围内的抽象元素，在dom结构中真实存在。
   3.两者都有一些兼容性问题，使用时需注意。

6. 如何对一个表格设置隔行变色。
   table tr :nth-child(odd){//奇数行
   background-color:#ccc;
   }
   table tr:nth-child(even){//偶数行
   background-color:#aaa;
   }

7. 对所有png结尾的img，加红色边框。
   img[src$=png]{1px solid red}

8. 移动端设置1px的边框？
   1.通过设置viewport+基准值；
   2.多背景渐变实现；
   3.通过伪元素+transform；

9. flex布局的用法，及遇到的问题？
   flex是弹性盒布局，在其父元素上设置display：flex，子元素自动成为弹性盒项目；
   flex是三个属性的简写，flex-grow,flex-shrink,flex-basis,
   flex-grow:放大属性，默认为0，即当主轴有剩余空间也不放大。
   flex-shrink：收缩属性，默认为1，当主轴上的空间不够用时，收缩元素宽高。
   flex-basis：在分配多余空间之前，项目占据的主轴空间， 默认为auto，如果设置了width、height，则项目变为固定宽高。
   order：定义项目的排列顺序，数值越小排列越靠前，默认值是0；
   flex-direction:定义项目的主轴方向，默认为row，可选值为row，row-reverse，column,colum-reverse;
   justify-content:定义项目在主轴上的对齐方式，可选值为flex-start,flex-end,center,space-between（两边没有剩余空间），
   space-around（两边的剩余空间是中间元素的一半）。
   align-items:单根轴线的项目在交叉轴上的对齐方式：可选值为flex-start,flex-end,center,stretch,base-line;
   align-content:多根轴线的项目在交叉轴上的对齐方式：可选值为flex-start,flex-end,center,stretch,base-line;
   flex-wrap:是否换行，默认为nowrap不换行，可选值为：wrap,nowrap,wrap-reverse;
   遇到的问题：ie9以下不兼容，如果需要处理浏览器兼容问题，需要在浏览器前面加前缀。

js:

1. 本地存储方式有哪些？它们之间的区别是什么？
   javaScript有三种数据存储方式，分别是：
   sessionStorage；
   localStorage；
   cookie；
   相同点：都保存在浏览器端
   不同点：
   ①传递方式不同
   cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
   ②数据大小不同
   cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
   存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
   sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
   ③数据有效期不同
   sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
   localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
   cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

2. setInterval与setTimeout的区别？
   setTimeout（fn,t）超时调用，超过时间t就调用fn；
   setInterval(fn,t) 间歇调用，调用周期t，执行fn。

3. 什么是闭包？ 介绍什么是垃圾回收机制？
   闭包：一个函数或对象作为另外一个函数的返回值，就形成了以一个闭包。
   垃圾回收机制：JS的垃圾回收机制是为了防止内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。
   JS垃圾回收方式：标记清除（mark and sweep）、引用计数(reference counting)。

4. async、await怎么用？解释一下异步？异步的宏任务、微任务指什么？
   async、await用同步的方式表示异步；
   async function testResult() {
   let result = await doubleAfter2seconds(30);
   console.log(result);
   }
   异步：js是单线程语言，即同一时间只能做一件事，两段代码不能同时执行，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。
   这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。
   为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。
   宏任务（task）：就是 JS 内部（任务队列里）的任务，严格按照时间顺序压栈和执行。如 setTimeOut、setInterval、setImmediate 、 MessageChannel，requestAnimationFrame，I/O等；
   微任务（Microtask ）：通常来说就是需要在当前 task 执行结束后立即执行的任务，例如需要对一系列的任务做出回应，或者是需要异步的执行任务而又不需要分配一个新的 task，这样便可以减小一点性能的开销。microtask 队列是一个与 task 队列相互独立的队列，microtask 将会在每一个 task 执行结束之后执行。每一个 task 中产生的 microtask 都将会添加到 microtask 队列中，将会添加至当前 microtask 队列的尾部，并且 microtask 会按序的处理完队列中的所有任务，然后开始执行下一个 task 。microtask 类型的任务目前包括了 MutationObserver 以及 Promise 的回调函数；
   举例：then()、catch()、process.next()、MutationObserver();
   总结就是：先同步任务>异步任务（微任务>宏任务）；

5. promise的原理是什么？
   promise共有三种状态：pending进行中，resolve成功，reject失败；
   pending可以转化为resolve，也可以转化为reject，但是方向不能逆转。
   通过new promise可以生成一个promise对象，该对象以一个函数作为它的参数，函数中有两个参数resolve,reject,resolve为成功时执行的函数，reject为失败时执行的函数。调用定义promise的函数返回一个promise后面可以跟.then，.then里面的第一个函数为成功时的回调，第二个函数失败时的回调，.then中也可以只用一个函数表示成功时的回调，.then后面跟.catch用来捕获程序的错误。
   promise.all:当本次请求的参数需要依赖前两次或多次的请求结果时，用promise.all,promise.all接收一个promise对象组成的数组作为参数，当数组中的所有promise状态都变为resolve或reject时，才会调用.then方法。
   primise.race:当本次请求的参数需要依赖前两次或多次的请求结果时，用promise.race,promise.race接收一个promsie对象组成的数组作为参数，当数组中只要有一个promise状态变为resoleve或rejected时，就会调用.then方法。

6. 遇到过的浏览器兼容性？
   欢迎留言补充

7. 版本管理工具 git的常用命令？
   git clone 把远程仓库中的代码克隆到本地。
   git pull origin master 把远程分支的代码拉取到本地并与本地分支合并；
   git add 把工作区的代码提交到暂存区；
   git commit -m“” 把暂存区的代码提交到本地仓库；
   git push origin master 把本地仓库的代码推送到远程仓库；
   git checkout -b 新分支名 ，新建分支，并切入该分支；
   git checkout 分支名，切换分支；
   git branch -d 分支名，删除分支；
   git checkout --文件名 ，撤销修改；
   git status 查看冲突；
   git rm 文件名，从版本库中删除文件；
   git tag v1.0 ，为当前分支打标签；
   git remote， 查看远程仓库信息；

8. 深拷贝与浅拷贝？
   深拷贝是在内存中开辟一块空间用来存放复制的对象，浅拷贝仅仅是指向被拷贝对象的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应地改变。

9. object.assign的用法？
   object.assign属于浅拷贝，拷贝的是属性值，假如源对象的属性值是一个对象的引用，那么它也只是指向那个引用。

10. onclick与addeventListener的区别？
    1.onlick在同一时间只能指向一个对象，addeventlistener可以给一个事件注册多个listener；
    2.onclick只能绑定在html上，add可以绑定在任何dom上；
    3.ie9以前，用attachEvent和detachEvent。

11. bind，apply，call的区别？
    apply,call,bind都是改变上下文的this，apply,call立即执行该函数。bind更灵活，可以让对应的函数想什么时候调用就什么时候调用，并且可以将参数在执行时添加。

12. 什么是类数组？
    类数组拥有length属性，不是真正的数组，数组的api不可用，它的原型是object。常见的类数组有：arguments,用queryselectorAll得到的列表，$(‘div’)获取的列表。
    类数组转为数组的方法：
    1.[…arrayLike],
    2.Array.from(arrayLike),
    3.Array.prototype.slice.call(arrayLike,start)

13. for，for in，for of的区别是什么？
    for用来遍历数组，可以用return，break跳出循环。
    for in 循环遍历的值都是数据结构的键值，for in也可以循环数组，但是有坑，for in 返回的索引是字符串，for in 不仅遍历数组的元素还会遍历自定义属性。
    for in适合遍历对象。！！
    for of是es6的语法，可以用来遍历数组，遍历普通对象会报错，只有部署了symbol.iterator的接口才能使用for of循环。
    array，map，set，arguments，nodeList都可以用for of。
    如果想让普通对象可以用for of遍历，先使用 object.keys()获取对象的key值集合后，再用for of遍历。

14. 遍历数组的方式有哪些？
    1.for循环，2.forEach, 3. for of, 4.map，5.for-in也可以遍历数组，不过效率比较低下，for -in返回的索引是一个字符串，可能会误操作索引。
    他们之间的区别：for循环是传统的循环方式；for of是es6新增的循环方式 for(let item of arr)，for-of返回的是数组的项;forEach遍历数组中的每个元素，没有返回值，不会改变原来的数组。for-each如果用了return 返回undefined；map遍历数组中的每个元素，可以用return返回遍历后的新数组，不改变原数组。

15. 说一下闭包，使用闭包的优缺点？使用闭包的场景？！！
    一个函数作为另一个函数的返回值，或者一个对象作为另一个函数的返回值都形成闭包。
    闭包的优点：定义私有变量和私有方法。
    闭包的缺点：由于会有引用一直指向某个变量，所以闭包内的变量不会被垃圾回收机制回收，容易造成内存泄露。
    使用闭包的场景：1.封装变量，2.为节点循环绑定点击事件。

16. 箭头函数有什么特征？！！！
    1.箭头函数没有自己的this，需要从父级继承 this；
    2.箭头函数不可以作为构造函数；
    3.箭头函数不绑定arguments属性，用rest参数…解决；
    4.箭头函数不能当做generator函数，不能使用yield关键字；
    5.箭头函数没有原型属性；

17. js继承的方式？有什么优缺点？
    1.借助构造函数继承；
    原理：通过call或apply改变函数的作用域，把父类构造函数的this指向子构造函数。
    缺点：实现部分继承，父类构造函数原型上的方法无法得到继承。
    2.借助原型链继承；
    借助原型链继承的原理：子构造函数的原型指向父构造函数的实例，子构造函数的实例有_proto_属性，等于子构造函数的原型，子构造函数的原型被赋值为父构造函数的实例，所以子构造函数的实例能继承到父构造函数的属性和方法。
    缺点：当父构造函数的属性为引用类型时，被所有子构造函数的实例共享，不是我们想要的结果。
    3.组合继承；
    原理：通过借助构造函数继承属性，通过原型链继承方法。
    缺点：执行两次父类构造函数。
    4.组合继承的优化1：
    child.prototype = parent.prototype,这样也能达到继承父类原型上的方法的效果。
    缺点：分不清实例是由子类构造函数构造，还是由父类构造函数构造。子类实例原型的construcor指向父类。
    5.组合继承的优化2：
    //Object.create({})会创建一个空对象，它的属性从_proto_上继承，它的constructor指向object。
    child.prototype= object.create(parent.prototype);
    child.prototype.constructor = child;
    原理：通过创建一个中间对象，来阻隔_proto_向上查找。

18. 浏览器的渲染原理，拖动浏览器的窗口放大或缩小改变的是什么？
    浏览器把html解析为dom tree，把css解析为css om，dom tree 和css om 合并为render tree，通过layout确定在屏幕上绘制的位置，绘制 页面。

19. 说一下你了解的缓存；
    缓存分为协商缓存和强缓存，协商缓存即每次浏览器请求数据的时候先看一下是否修改过，如果没有修改过则用本地缓存，如果修改过则重新请求文件。
    强缓存：不询问，直接用本地的文件，通过设置catch-control来控制。

20. 从后台获取一万条数据，放到页面的select中，如何优化？
    分批显示到页面上；
    先利用input框的模糊匹配；
    再用setInterval隔段时间加载数据，
    清除定时器。

21. 什么是https？
    https是以安全为目标的http通道，在http的基础上通过传输加密和身份认证保证了传输过程的安全性，https的安全基础是ssl。被广泛用于交易支付等方面。

22. 问dom事件流的整个过程，冒泡、捕获，>是否所有的事件都能冒泡> 事件代理。
    DOM事件类
    1 基本概念：DOM事件的级别？
    dom0，dom2，dom3；
    2 DOM事件模型？
    冒泡从目标元素向上，直到window对象；捕获从上到目标元素。
    3 DOM事件流？
    从鼠标点击到页面响应，中间经历的过程。
    完整的事件流包括捕获，目标阶段，冒泡。
    事件通过捕获到达目标元素,目标元素发生事件，再通过冒泡上传到window对象；
    4 描述DOM事件捕获的具体流程？
    window>document>html>body>目标元素。
    5 所有的事件都会冒泡吗？
    不是，有些发生在元素自身的事件不会发生冒泡，如blur,focus,load,unload，及自定义事件。
    原因在于，这些事件仅发生在自身上，而它的任何父节点上的事件都不会产生，所以不会冒泡。
    6 如何判断一个事件是否发生冒泡？
    可以在监听事件的回调函数里，通过打印event对象的bubbles属性，返回true可冒泡，返回false不冒泡。
    7 当用事件代理的时候，需要指向目前是哪个子元素：event.target;
    当用事件代理的时候，需要指向代理元素：event.currentTarget;

23. 什么是同源策略及限制？
    相同的域名、协议、端口号相同即为同源，有一个不相同即不为同源。
    限制：
    1.cookie,localstorage,indexDB无法获取；
    2.DOM无法获取；
    3.AJAX请求不能发送；

24. 前后端如何通信？
    1.ajax，2.websocket,3.cors
    ajax:有同源限制，只能在同源限制下发送ajax请求；
    websocket没有同源的限制，无论是否同源都可发送；
    cors没有同源的限制，是一个新协议；

25. 前端性能优化的方法有哪些？
    1.资源合并，减少http请求
    2.非核心代码异步加载
    3.利用浏览器缓存
    4.使用CDN
    5.预解析DNS

26. HTTP协议类
    1 HTTP协议的主要特点？
    简单，灵活，无连接，无状态；
    2 http报文的组成部分；
    请求报文，响应报文；
    请求报文又包括请求行，请求头，空行，请求体；
    响应报文包括状态行，响应头，空行，响应体；
    3 http方法
    post，get，put，add，delete
    4 post与get的区别？
    1.浏览器回退按钮，post会重新发起请求，get是无害的；
    2.get会主动缓存浏览器请求过的地址，post不会，除非手动设置；
    3.get请求的地址，可以被收藏，post请求的地址不可以被收藏。
    4.get请求的地址url会有长度限制，超出限制会被截断，post没有限制；
    5.get请求通过url携带参数传递数据，post通过requestbody传递数据。
    6.get比post更不安全，因为参数直接暴露在url上，不能用来传递敏感信息。
    5 http状态码；
    200，请求成功；
    301永久重定向,302临时重定向,304文件没有被修改过，
    400，客户端请求有语法错误，服务端不能理解；
    500，服务器错误；
    404，请求资源不存在；
    6 什么是持久连接？
    HTTP1.1版本支持持久连接，持久连接即keep-alive,持久连接模式使客户端到服务器的链接持续有效，客户端后续再发起请求时，keep-alive避免了建立或重建新链接。
    7 什么是管线化？
    在持久连接的情况下，把请求打包发给服务器，服务器把响应打包返回来。

27. ajax的原理是什么？
    1 ajax即为异步的javascript和xml。
    ajax通过xmlhttpRequest向服务器发起异步请求，从服务器获得数据，然后用js操作dom而更新页面。
    xmlHttpRequest是ajax的核心，是一种支持异步请求的技术，js可以及时向服务器发起请求和处理响应，而不阻塞用户，达到无刷新的效果。
    2 如何创建Ajax？
    var xml = new XMLHttpRequest();
    xml.open(‘get’, ‘/api’, false)//false代表是异步
    xml.onreadystatechange = function(){
    if(xml.readyStates双等4){
    if(xml.status==200){
    alert( xml.responseText)
    }
    }
    }
    xml.send(null)。
    3 创建ajax的步骤：
    3.1.创建xmlHttpRequest函数；
    3.2.注册回调函数；
    3.3.设置与服务器交互的参数，设置向服务器发送的数据，启动和服务器的交互；
    3.4.判断和服务器的交互是否完成，服务器返回数据是否正确；
    4 readyState的几个状态：
    0：代表未初始化，对象已创建，未调用open；
    1：open方法成功调用，但send方法未调用；
    2：send方法已调用，尚未开始接受数据；
    3：正在接收数据，暂未接受完成；
    4：完成，即响应数据接收完成；

28. 跨域通信的几种方式？
    1.jsonp
    2.hash;
    3.postMessage;
    4.websocket
    5.cors;

29. 什么是jsonp？
    在页面中动态插入javascript标签引入一个js文件，在本页面写回调函数，通过回调函数即可拿到相应的数据。

30. 简述路由？
    路由有两种，默认的是hash，另一种是h5 history(需要服务端支持)，hash会在地址栏中添加一个#，简单易用，对url规范不敏感，如果是toB的系统可以用hash，通过为window添加一个事件window.onHashChange来实现。
    h5 history，需要服务端支持，history.pushState(对象，‘url’)切换路由；监听浏览器前进后退，window.onpopState=(event)=>{}