2020年最新最全的前端面试题整理

前言

之所以发布的第一篇博客是Web前端面试题，是因为2020年是苦逼的一年，小编也是临近毕业的应届毕业生，除了埋头苦学之外，和大家一样都得面临就业难题，所以在这里把前端的知识点拉通整理了一遍，涉及的面试题和答案顺便和大家分享探讨一下。
内容较多，将分为HTML篇、CSS篇、原生JS篇、Jquery篇、ES6篇、笔试编程篇、数据请求篇、PC端兼容篇、IOS/Andriod浏览器适配篇、如何优化SPA篇、Vue篇、React篇、以及项目常见问题来为大家依次分享。
如有不足，欢迎各位大佬们补充与纠正。

前端应当掌握的知识内容概要

HTML/CSS:

对web标准的理解(结构/表现/行为)、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系、常用属性、布局、 选择器、权重、盒模型、Hack、CSS预处理器、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线&储存&history、多媒体、webGL、SVG、Cavas）

Javascript：

数据类型、运算、对象、function、继承、闭包、作用域、事件、prototype、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP

其他：

主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等；

HTML篇

Doctype的作用？

Doctype是作用于文档最顶部的文档声明，是告诉浏览器是以标准模式还是以怪异模式展示该页面。Doctype不存在或格式错误都会导致页面以怪异模式展示页面。

标准模式和怪异模式的区别：

标准模式的页面排版和JS运作模式都是浏览器支持的最高标准，而怪异模式是向后兼容，模拟老浏览器模式行为，防止页面无法正常工作

行内元素/块级元素/空元素有哪些？

行内元素: a/img/span/b/strong/input/select/section
块级元素: div/p/table/ul/ol/li/h1-h6
空元素: br/hr/img/input/link/meta

介绍一下你对浏览器内核的理解?

浏览器主要分为两个部分:渲染引擎和JS引擎
渲染引擎：主要负责获取页面内容和排版渲染页面
JS引擎：解析和执行JS来实现页面的动态效果，以及交互内容

常用浏览器的内核有哪些？

1、Trident(IE内核)：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。
2、ecko(Firefox内核)：Netscape6开始采用的内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。
3、Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的？

在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件
如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储
如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线的情况下，浏览器就直接使用离线存储的资源。

描述一下cookies/sessionStorage和localStorage的区别?

cookies是网站为了表示用户身份而储存在用户本地终端上的数据,Cookies的数据始终在同源的http请求中携带,会在浏览器和服务器中来回传递,大小不能4K(通常经过加密,所以不用担心账号被盗,同源策略[同源是指"协议+域名+端口"三者相同]可以防止XSS和CSRF攻击浏览器,XSS就是用过浏览器的cookies,截取用户数据,CSRF是模拟用户在网页上面的操作,完成数据请求.异步策略牵扯到了JSONP)
sessionStorage和localStorage的数据都是在本地存储,不会把数据发给服务器,localStorage是关闭浏览器,数据还存在不会丢失,而sessionStorage是离开浏览器后,数据会自动删除.

HTML5新特性有哪些？如何处理HTML5新标签的兼容性问题？如何区分HTML和HTML5？

HTML5新特性：

绘图方面：加入了canvas绘图和SVG绘图；
媒体方面： 加入了video和audio标签
语义化标签： 比如header、nav、footer、section ['sekʃ(ə)n]、article ['ɑrtɪkl]
本地离线存储： localStorage和sessionStory两种本地离线缓存
localStorage是长期储存数据,关闭浏览器后数据不会丢失
sessionStorage是关闭浏览器后数据自动删除
表单控件: calendar、date、time、email、url、search ;
以及一些新技术: webwoker / websocket (säkit)/ GelolCation(ˌjēōlōˈkāSHən)

如何区分HTML和HTML5:

通过Doctype声明/新增的结构元素/功能元素

简述一下你对HTML语义化的理解?

用正确的标签做正确的事情，html语义化让页面的内容结构更加简单易懂，便于搜索引擎解析，便于阅读维护和理解

HTML5离线缓存怎么使用，工作原理能不能解释一下？

用户在没有联网时，可以正常访问站点或应用，等用户联网时，更新用户的缓存文件
浏览器是怎么对HTML5进行离线缓存资源进行管理和加载的?：在联网情况下，html头部有manifest属性，会请求manifest文件，如果是第一次访问，浏览器会根据manifest的内容下载相应的资源并且进行离线缓存，如果不是第一个，会加载成为新的manifest文件，新旧manifest文件对比，如果一致，则不发生变化，如果不一致，那么会重新下载文件中的资源并进行离线缓存

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

1、link属于XHTML标签,除了加载CSS之外还能用于定义RSS,@import是CSS提供的,只能用于加载CSS
2、link加载的文件,在页面加载的时候,link文件会同时加载,而@import引入的CSS文件,是页面在加载完成后再加载的
3、@import有兼容性问题,IE5以下的浏览器是无法识别的,而link无兼容性问题

Iframe有哪些缺点?

Iframe会阻碍页面的onload事件
浏览器的搜索引擎一般读无法解读iframe页面,不利于SEO的搜索
Iframe和主页面共享链接池,会影响页面的并行加载
使用js动态添加iframe src属性,可以避免一三问题

Label的作用是什么?怎么用?

label标签是定义表单控制间的关系,当用户点击label里面的文字时,浏览器会自动把光标转载表单控件上

HTML5的form如何关闭自动完成功能?

给不想要提示form或某个input设置autocomplete = off

如何实现浏览器内多个标签之间的通信?

Websocket/SharedWorker 都是可以将不同线程共享为一个线程,他们的数据也是共享的(没怎么用过,用法不太清楚)
LocalStorage 也可以实现浏览器多个标签页之间的通信
LocalStorage在另一个浏览器被添加/删除/修改时,会触发一个事件,我们可以通过对loacalStorage监听事件,控制他的值来进行信息通信

页面可见性有哪些用途?(visibility API)

可以通过visibilityState检测当前页是否可见,以及打开网页的时间,可以 控制页面在被切换后,停止视频和音频的播放

如何在页面上实现一个圆形的可点击区域?

Border-radius
或者js实现,需要求一个点在不在圆上的算法,获取鼠标坐标等

网页验证码是干嘛的,解决了什么安全问题?

区分用户是计算机还是人的公告全自动程序,可以防止恶意破解密码,刷票等

Title和h1的区别,b与strong的区别,i和em的区别?

title属性没有明确的标题,只是HTML语义化的一个标签,而h1则是层次明确的标题,h1标签里的文字,字体较大,并且会加粗
b与strong都有加粗字体的作用,strong只是更加语义化,是加重语气的意思
i和em,em是强化文本的内容,而所有浏览器对重要内容都是以斜体形式显示的,i则是表示,标签内文本为斜体

的title和alt有什么区别?

title是当鼠标划到图片元素时显示的图片描述
alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰性图片外都需要设置有意义的值，搜索引擎会重点分析。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app，并且资源已经离线存储了，如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
离线的情况下，浏览器就直接使用离线存储的资源

Web标准以及W3C标准是什么？

标签闭合、标签小写、不乱嵌套，使用外链css和js、结构行为表现的分离

xhtml和html有什么区别？

功能上的差别：

主要是xhtml可兼各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页

书写习惯的差别：

xhtml元素必须被正确嵌套，闭 合、区分大小写，文档必须拥有根元素

Canvas和Svg有什么区别?

svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是一副画布
svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

Canvas跨域问题 ? 如何解决

当canvas绘制一张外部链接图片时, 我们会遇到跨域问题, 在浏览器打开这个页面的时候, 会发现这个问题
Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
这是由于canvas受限于CORS策略, 会存在跨域问题, 虽然可以使用图像, 但是绘制到画布上会污染画布, 一旦一个画布被污染, 就无法提取画布的数据. 比如无法使用画布toBlod() , toDataURL() 或者getImageData() 方法

解决方案:

1. img标签上新增了crossorgin属性, 这个属性决定了图片获取过程中是否开启CORS功能( 存在兼容性问题 )
   image.setAttribute(‘crossorgin’,’anonymous’)
2. 将文件读入到blob文件对象, 然后使用URL.createObjectURL转换成src可用的地址

HTML篇到此结束，下一篇CSS篇~