前端200道面试题及答案（更新中）(最新前端面试题)

目录

html相关

1）说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？

2）link和@import的区别

3）浏览器如何实现不同标签页的通信？

4）iframe的优缺点

5）canvas

6）做项目用到哪些h5新特性和css3新特性？

7）用localstorage和sessionStorage写过什么？

8）如何解决页面内容加载缓慢的问题？

9）cookie的特点*

10）页面渲染过程

11）网页上哪里可以看到请求的所有信息

12）HTML5的新特性                                                                                                                                       

13）localstore和sessionstore的区别

14）页面之间是怎么传参数的？

15）如何在浏览器查看和清除localstrorage保存的数据？

16）对H5新增的语义化标签的理解？

css相关

17）CSS选择器的优先级排序，怎么计算权值？

18）display：none和visibility：hidden的区别

19）CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)

20）CSS的引用方式有哪些？它们的区别？

21）css有哪些选择符？可继承的属性有哪些？css3新增的伪元素有哪些？css优先级的计算

22）fixed和absolute的区别？

23）如何实现水平、垂直居中？

24）实现左侧边栏固定，其他内容自适应?

25）css3的新特性

26）了解过哪些页面布局？

27 用animation做过什么？做过哪些动画？

28 Sass写一个数组？

29）rem出现很小的小数手机上会发生什么，

30 什么时候用less

31 animation和transition

32 移入图片让那个图片慢慢放大

33 盒子模型概念

34 引用样式的方式有哪几种？他们的优先级排序怎么样？

35 px,em,rem,%，vm,vh

36 display的值和作用

37列举两种清除浮动的方法(代码实现或者描述思路)

38 盒子模型（怪异模型）

39 谈谈fixed ，relative ， absolute

40 float和absolute有什么区别？

41 代码实现3栏效果，左右两栏固定宽度，中间栏随着浏览器宽度自适应变化

42 css选择器的权重

43 transition transform translate 之间的区别 transform的属性有哪些？

44 css3中的选择器

46 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

javascript以及es6相关

 null和undefined的区别？

 js的数据类型

 js 的继承实现方式有哪些，列举两个例子

eval是什么？

 用什么会导致内存泄漏？

 js深度克隆的代码实现？

 同源策略，跨域，后台如何解决跨域，html有哪些标签可以跨域

es6

js自己封装一个方法

 jq用过哪些方法？

 promise？

 触摸有几个事件？

什么时候会发生跨域问题

 匿名函数

 This指向问题

 JQ，JS，vue 三者的区别

 用jq实现双向绑定！

 ajax的实现

ajax的实现

 在数组上新增一个方法，实现复制。

 期望：[1,2,3].copy() //输出 [1,2,3,1,2,3]

 .使用闭包实现一个方法，第一次调用返回1，第二次返回2，第三次3，以此类推。

 .封装一个函数，参数是定时器的时间，.then执行回调函数。

 说一说前端性能优化有哪些方法？

 一个页面上有大量的图片（大型电商网站）,加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

 .export和export default?

怎么去判断出来数组里面值为1的元素

 有一个数组，怎么去修改每一个值？

 数组去重

 统计字符串中出现最多的字符

js垃圾回收机制

原型、原型链

作用域链

闭包

继承方法

辗转相除法

数组转字符串

二级下拉菜单

图片预加载和懒加载？

bind() apply()

const用法

Utf-8编码汉字占多少个字节

ajax

js对数组的操作，包括向数组中插入删除数据

两种定时器，setinterval和settimeout。因为settimeout是只执行一次的，如果要执行多次怎么做。（答案：设置一个回调函数，多次调用，大概是这样，你可以去查查）

JS内存回收机制

promise是什么？能解决什么问题？

编程：连接两个数组并返回？

冒泡排序？

创建新数组，向数组插入数据

es6新特性

js对数组有哪些操作方法

什么是ajax，可以用来做什么

讲下你做轮播图的思路，无缝轮播

js的选择器

js数据类型

减少页面加载时间的方法

怎么理解模块化开发

什么是闭包，有什么作用？

定时器 settimeout和setinterval的区别，如果用settimeout实现每隔一定的时间就执行一次，怎么实现

手机号的正则表达式(以1开头的11位数字)

推荐整理分享前端200道面试题及答案（更新中）(最新前端面试题)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:最新前端面试题,前端面试题2020,前端面试题2021及答案,前端面试题目100及最佳答案,前端200道面试题怎么做,前端200道面试题怎么做,前端面试题目2021,前端面试题目2021,内容如对您有帮助，希望把文章链接给更多的朋友！

结构的html代码，写原生js实现点击某个li就弹出对应的索引值

对数组进行随机排序， 要求数组中的每个元素不能停留在原来的位置

代码实现parse方法，将有效的JSON字符串转换成JavaScript对象

原生js的变量类型有哪些？ES6新增哪几个变量类型？

js的数组方法有哪些？

es6的有哪些扩展？新增的数组方法有哪些？用什么方法连接两个数组？函数扩展中的箭头函数中的this所指向的是什么？一般函数的this指向的又是什么？

用什么方法判断是否是数组？又用什么方法判断是否是对象？

http相关

浏览器

bootstrap

vue相关

node相关

4  module.export和export？

微信小程序

react

数据库相关

其他

 session 是一个后端存储空间 2. cookie / localStorage / sessionStorage 的区别 存储大小

cookie 4kb   localStorage 5M  通讯相关

cookie 随请求携带 storage 不会自动携带 操作相关

cookie 操作复杂，没有 api，前后端都可以操作 storage 操作简单，有 api，只能前端操作 存储格式

cookie：字符串格式 storageL: 键值对 时效相关

cookie：默认会话级别，可以手动设置 storage：localStorage的存储是永久性的，只有在手动删除或者浏览器被卸载后才会被清除，sessionStorage 是会话，当窗口或者页面关闭后会被清除 3.loaclStorage 和 sessionStorage 的区别 跨页面通讯能力 localStorage 随便跨页面 sessionStorage 只是在本页面跳转可以通讯 时效性 localStorage 是永久 sessionStorage 是会话 共同点 不能存储其他数据类型，只能存储字符串数据类型 如果一定要存储其他数据类型，转成 json 格式存储

都知道 ，外部引入 CSS 有2种方式，link标签和@import。 但是它们有何本质区别？ 本人项目中多数情况都使用link方式，但见过某些项目人，自以为@import高大上类似es6，极力吹捧使用@import，就此找了一些资料对此进行比较说明： 先上结论慎用@import方式。可以避免考虑@import的语法规则和注意事项，以及不合理的引入顺序导致的资源文件下载顺序混乱和http请求过多。

区别1： link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物如引入网站标题图标；@import属于CSS范畴，只能加载CSS。

<link rel="icon" type="image/x-icon" href="XXX.ico"> 区别2： link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面。

区别3： link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4： link支持使用Javascript控制DOM去改变样式；而@import不支持。

顺便总结下在html中css有四种引入方式：

内联样式 内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效 示例：<div style="background:red"></div> 这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个

拥有相同的样式，你不得不重复地为每个 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。 嵌入样式 嵌入方式也称页级CSS或内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。 示例：

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。 外部样式 链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。 示例：

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。 导入样式 导入方式指的是使用 CSS 规则引入外部 CSS 文件。 示例：

或者写在css样式中

@charset “utf-8”; @import url(style.css); *{ margin:0; padding:0;} .notice-link a{ color:#999;}

HTML加载过程： 　　　　1) 加载HTML-DOM结构

2)CSS和JS

3)图片和多媒体

4)加载事件触发

总结：　link和@import都没有放置顺序的要求，但是不同的放置位置可能会造成效果显示的差异。对于link，无论放到哪个位置，都是一边加载数据，一边进行优化，视觉感受很好；而对于@import，放置到哪里，才从哪里开始加载CSS样式，即先加载数据，然后加载样式，如果网速不佳，可能会造成只有数据出来，而样式一点点加载的效果。并且在同一个页面中，调用两种方式，link永远比@import优先级高。

在项目中使用的时候，一般在页面中调用方式为link，并且放在head标签中；使用@import除了在CSS文件中，在页面调用时，一般加载第三方的样式会使用到，并且需要放置在页面的底部，不会影响自己的网站。  

       3）浏览器如何实现不同标签页的通信？

浏览器内多个标签页之间通信，通俗的讲就是浏览器中开了多个窗口，在其中一个窗口做了一些行为等其他窗口不用刷新也能有相关表现。

一、cookie+setInterval方式 要想在多个窗口中通信，通信的内容一定不能放在window对象中，因为window是当前窗口的作用域，里面的内容只属于当前窗口。而cookie是浏览器的本地存储机制，和窗口无关。

将要发送的信息写入cookie：

在另一个页面读取cookie：

  var recMsg = document.querySelector('#recMsg');  function getValue(key){     var cookies = '{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'", "')+'"}';     cookies = JSON.parse(cookies);     return cookies[key];  }  setInterval(function(){     recMsg.innerHTML = getValue("msg1");  },500);

但是由于仅仅从cookie读取信息不能实时更新，需要手动刷新，因此采用setInterval定时器解决，将读取信息的代码封装成一个函数，在定时器内调用即可

缺点：

1）cookie空间有限，容量4k 2）每次http请求都会把当前域的cookie发送到服务器上，浪费带宽 3）setInterval评率设置过大会影响浏览器性能，过小会影响时效性

优点：每个浏览器都兼容

二、websocket协议 websocket是一种网络通信协议，因为http有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息，但如果这时服务器有连续变化的状态，那么就只能使用轮询（每个一段时间，就发出一个询问）的方式来询问。因为websocket拥有全双工（full-duplex）通信自然可以实现多个标签页之间的通信。 发送方先发送消息到WebSocketServer，然后服务端再实时把消息发给接收方

用法：新建webSocket文件夹，在该目录下打开终端，运行npm init （npm安装及配置步骤）初始化一个简单的node项目（因为需要引入ws包），一直按回车到结束就初始了一个简单的node项目。再安装ws包，依旧在当前目录下的终端运行npm i -save ws，在webSocket目录下新建sever.js、send.html、reveive.html文件

三、localstorage

四、html5浏览器新特性——SharedWorker WebWorker的升级版，webworker只能在一个窗口内使用，而SharedWorker可以在多个窗口之间通信 SharedWorker也是纯客户端的，没有服务端参与 SharedWorker在客户端有一个自己维护的对象worker.js，消息存储在worker.js的data中 SharedWorker不如localStorage的是接收消息不是自动的，也要用定时器实时从worker.js中获取消息

原文链接：https://blog.csdn.net/jewfer/article/details/1226149634）iframe的优缺点  

一、iframe的优点： 1、　iframe能够原封不动地把嵌入的网页展现出来。

2、　如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。

3、　网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。

4、　如果遇到加载缓慢的第三方内容如图标和广告等，可以用iframe来解决。

二、iframe的缺点： 1、　会产生很多页面，不容易管理。

2、　在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。

3、　使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。

4、　很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。

5、　iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。

Canvas介绍 1.canvas是html5的一个新标签，属于h5的新特性 2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo 3.它是通过javascript来画的，即脚本绘制图形

canvas可以用来干啥呢？ 1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡） 2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas） 3.广告banner的动态效果非常适合用canvas制作 4.canvas还可以用来内嵌一些网页

原文链接https://blog.csdn.net/u012468376/article/details/73350998

1 HTML5 的新特性增加了新标签、新表单和新特性； IE9以上才兼容，如不考虑兼容问题，则可以大量使用（如移动端）；

1 重点是常用新特性； 1.1 HTML5 新增的语义化标签 div 对于搜索引擎来说是没有语义的；

header：头部标签 nav：导航标签 article：内容标签 section：定义文档某个区域 aside：侧边栏标签 footer：尾部标签 主要是针对搜索引擎的 可以多次使用 在IE9中需要转为块级元素才能使用 1.2 HTML5 新增的多媒体标签 1 音频：audio； 有 MP3 Wav Ogg 三种格式； 语法 <audio src="文件地址" controls="controls"></audio> 1 属性 autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）； controls controls 向用户显示播放器控件； loop loop 播放完是否继续循环播放 src url Chrome 把音频和视频自动播放禁止了； 2 视频：video； 尽量使用 MP4； 另外还有 Ogg 格式； 语法： <video src="文件地址" controls="controls"></video> 1 属性 autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）； controls controls 向用户显示播放器控件； width px height px loop loop 播放完是否继续循环播放 preload auto（预先加载视频）| none（不应加载视频） src url poster Imgurl 加载等待的画面图片 muted muted 静音播放 视频静音后可以自动播放； 从而不再使用flash等插件 1.3 HTML5 新增的 input 类型 验证的时候必须添加 form 表单域； 使用 submit 进行提交； type="email"    限制用户输入必须为 Email 类型 type="url"    限制用户输入必须为 URL 类型 type="date"    限制用户输入必须为 date 类型 type="time"    限制用户输入必须为 time 类型 type="month"    限制用户输入必须为 month 类型 type="week"    限制用户输入必须为 week 类型 type="number"    限制用户输入必须为 number 类型 type="tel"    限制用户输入必须为 tel 类型 type="search"    限制用户输入必须为 search 类型 type="color"    限制用户输入必须为 color 类型 type="submit"    提交按钮 1.4 HTML5 新增的表单属性 属性    值    说明 required    required    表单拥有该属性表示其内容不能为空，必填 placeholder    提示文本    表单的提示信息，存在默认值将不显示 autofocus    autofocus    自动聚焦属性，页面加载完成后聚焦到指定表单 autocomplete    off/on    浏览器基于之前输入的值，显示出可能的选项， 默认已经打开，关闭autocomplete="off" 需要放在表单内，加上name属性，同时提交成功 multiple    multiple    可以多选文件提交 ``` /* 设置占位符颜色 */ input::placeholder { color: springgreen; } ``` 2 CSS3 存在兼容性问题

2.1 属性选择器 属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者 id 选择器； 权重为 0, 0, 1, 0； 类选择器、属性选择器、伪类选择器权重相同； input[name="username"] {     outline: none;     border: 3px solid skyblue; }

选择符    简介 E[att]    匹配有 att 属性的 E 元素 E[att="val"]    匹配有 att 属性且属性等于 val 的 E 元素 E[att^="val"]    匹配有 att 属性且值以 val 开头的 E 元素 E[att$="val"]    匹配有 att 属性且值以 val 结尾的 E 元素 E[att*="val"]    匹配有 att 属性且值中含有 val 的 E 元素 2.2 结构伪类选择器 根据文档结构来选择元素，常用于根据父级选择器里面的子元素； /* 选择第一个孩子，且必须是 li */ ul li:first-child {     color: red; }

ul li:nth-child(2) {     color: red; }

// 使用 even 选出奇数行 ul li:nth-child(even) {     background-color: red;     color: white; }

ul li:nth-child(even) // 使用 even 选出奇数行 ul li:nth-child(odd) // 使用 odd 选出偶数行 ul li:nth-child(n) // n 是选择所有 n 可以被公示替代 2n 取出偶数项 2n + 1 取出奇数项 5n 取出 5 的倍数项 n + 5 从第五项开始 -n + 5 前五项 数字可以是任何数字 div:nth-child(n) 会包含所有标签类型，同时需要满足设置的标签类型，都满足方能选中； div:nth-of-type(n) 只包含指定元素，如此处为div； 选择符    简介 E:first-child    匹配父元素中的第一个子元素 E E:last-child    >匹配父元素中的最后一个子元素 E E:nth-child(n)    >匹配父元素中的第 n 个子元素 E E:first-of-type    指定类型 E 的第一个 E:last-of-type    指定类型 E 的最后一个 E:nth-of-type(n)    指定类型 E 的第 n 个 2.3 伪元素选择器 伪元素选择器可以用于利用 css 创建新标签元素，不需要 HTML 标签，从而简化 HTML 结构；

after 和 before 创建的元素是行内元素；

新创建的元素在文档树中是找不到的；

语法：element::before()；

after 和 before 必须有 content 属性；

伪元素选择器和标签选择器一样，权重为0, 0, 0, 1；

选择符    简介 ::before    在元素内部的前面插入内容 ::after    在元素内部的后面插入内容 div {     width: 200px;     height: 200px;     background-color: pink; }

div::before {     /* content是必须要写的，元素内容 */     content: 'before 伪元素选择器'; }

div::after {     /* content是必须要写的，元素内容 */     content: 'after 伪元素选择器'; }

content 必须填写，可以写空字符串；

在伪元素中使用 iconfont：

@font-face {     font-family: "iconfont";     src: url('iconfont.eot?t=1587189598280');     /* IE9 */     src: url('iconfont.eot?t=1587189598280#iefix') format('embedded-opentype'),         /* IE6-IE8 */         url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJwAAsAAAAABiAAAAIjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAooRgE2AiQDCAsGAAQgBYRtBzIbbgXILrBt2JMiJESQDXTjExAAiOD5/b7Nue9+1bRqcaNJFE0LNDyRiFs3oa1TOqFoJv/9X7p0TKPyfLfcQ01/I//fmLm0hedxGiERBoSECkU85Jegb+7hAvs8l9ObQAdyV32gXPegNQYNoF4cUKB7YBRZCWXcMHbBC3xMoG5GQ+7k7HiBqsxeFYj3b7QB1UJAllm6KpQbDmbxWUk1PaVv4FP0/finF1WSUsGuuny5smH6i5NVPE4ePQSEIAEdL6HAFpCJ28bEuYJgXEE9UbQAjlUe/DKZBHZxVItgf51d2gRTMBn84q0UIMFjUYYbkzYR5Rf7pEf216s366Re+xcwRT8rDtKBHILvT23nf7WRwc97HpmzYS5Q3cwZfL5s4EA2FLYtZU3WOJ6UD9tWV8cE9vT9TTWOrpUJVaMJrorpDIWqJTKzWyhp2EZZ1T7qNm2ONwywgsg1bPgACF2fSNp+oND1Q2b2FyVj/yjrRoG6+xhc2LASb+rHH8gQstF8R9eKI+U6pB6Xn0jfA4Pzioi/EWduGLutTjm9oYh4iS3ZQ/dEFCqOQ1yD5ygIYkw49siSliOS9Ntt1fSmlhWHUHeMEYMgNmR6h1yWWEQFk0W98vkTot0FDNzRV5e+ISzjzo66WjoDyI02GtT3KK9kHrQeIRSksFgIrcE8EgjEUNI8z0MsosWZEEv0tZ1Raqi2tb0+/LtTUGebUjg1herHN0akfQsAAAAA') format('woff2'),         url('iconfont.woff?t=1587189598280') format('woff'),         url('iconfont.ttf?t=1587189598280') format('truetype'),         /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */         url('iconfont.svg?t=1587189598280#iconfont') format('svg');     /* iOS 4.1- */ }

.iconfont {     font-family: "iconfont" !important;     font-size: 16px;     font-style: normal;     -webkit-font-smoothing: antialiased;     -webkit-text-stroke-width: 0.2px;     -moz-osx-font-smoothing: grayscale; }

div::after {     position: absolute;     font-family: "iconfont" !important;     font-size: 16px;     font-style: normal;     -webkit-font-smoothing: antialiased;     -webkit-text-stroke-width: 0.2px;     -moz-osx-font-smoothing: grayscale;     /* top: ; */     content: '\e77b'; }

原本直接放在“ iconfont ”类中的样式放在对应伪类中，然后将“&#x”改为“\”即可（如  ，在content中变为 \e77b）；

2.4 CSS3 盒子模型 CSS3 中可以通过 box-sizing 来指定盒模型，分别是 content-box、border-box； 这样就可以该表计算盒子大小的方式； 可以分成两种情况： 1 box-sizing: content-box 盒子大小为 width + padding + border （默认）； 2 box-sizing: border-box 盒子大小为 width； .div2 {     width: 200px;     height: 200px;     background-color: skyblue;     border: 5px solid greenyellow;     padding: 15px;     box-sizing: border-box; }

使用通配符进行统一默认配置； * {     margin: 0;     padding: 0;     box-sizing: border-box; }

2.5 CSS3 其他特性（了解） 1 CSS3 滤镜 filter；

用于将模糊或颜色偏移等图形效果应用于元素； filter: 函数();      例如：filter: blur(5px); blur模糊处理 数值越大越模糊

2 CSS3 calc 函数：

calc() 使