Web前端面试题汇总(持续更新...)

H5 的新特性有哪些？C3 的新特性有哪些？

H5 新特性

1. 拖拽释放(Drap and drop) API ondrop
2. 自定义属性 data-id
3. 语义化更好的内容标签(header,nav,footer ,aside, article, section)
4. 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加 autoplay
5. 画布 Canvas

CSS3 新特性

1. 颜色: 新增 RGBA , HSLA 模式
2. 文字阴影(text-shadow)
3. 边框: 圆角(border-radius) 边框阴影 : box-shadow
4. 盒子模型: box-sizing
5. 背景:background-size background-origin background-clip
6. 渐变: linear-gradient , radial-gradient
7. 过渡 : transition 可实现动画
8. 自定义动画 animate @keyfrom
9. 媒体查询 多栏布局 @media screen and (width:800px) {…}
10. border-image
11. 字体图标 font-face
12. 弹性布局 flex

CSS关于/deep/的用法解释

vue 中组件的样式是有 作用域 的，默认是全局样式。

如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style 添加 scoped,使它的css只作用于当前组件的元素

如何使一个盒子水平垂直居中

1. 定位，left，top各为50%，margin-left和margin-top各为宽高的负二分之一

利用定位 + margin

2. 定位，left，top各为50%，transform为负50%

利用 transform

3. flex布局，给父元素justify-content: center;align-items: center;

利用 display：flex 

4. 定位，上下左右都为0，margin:auto

如何垂直居中一个 img

哪些是块级元素那些是行内元素，各有什么特点

DOCTYPE(⽂档类型) 的作⽤?

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

说说你对语义化的理解？列举 5 个语义化的标签

 src和href的区别?

src：是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

href：是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

1. 当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
2. 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)
 

 列举 5 个以上的 H5 事件？

CSS 中 link 和@import 的区别？

隐藏元素的方法有哪些?

• display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
• opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
• position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
• z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
• clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
• transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

link和@import的区别?

两者都是外部引用CSS的方式，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

margin 和 padding 的使用场景?

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin；
• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding。

display:inline-block 什么时候会显示间隙？

• 有空格时会有间隙，可以删除空格解决；
• margin正值时，可以让margin使用负值解决；
• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

z-index属性在什么情况下会失效?

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

CSS预处理器为什么使用?

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

var、let 与 const区别

• 1.1 var 具有变量提升性质，let 与 const 没有。
• 1.2 var 不具块级作用域，let 与 const 具有块级作用域性质。
• 1.3 var 能重复声明，let 与 const 重复声明会报错。
• 1.4 var 全局声明变量会挂载在 window，let 与 const 不会。

场景:能用const的情况下尽量使用const，大多数情况使用let，避免使用var。 const > let > var const声明的好处，一让阅读代码的人知道该变量不可修改，二是防止在修改代码的过程中无意中修改了该变量导致报错，减少bug的产生

less和sass/scss

sass  3.0 后改为 scss

Less、Sass/Scss是什么?

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Sass和Less有什么区别？

1.编译环境不一样。Sass的安装需要Ruby环境，是在服务器端处理的。而Less需要引入 less.js来处理，然后Less代码输岀CSS到浏览器中；也可以在开发环境中使用Less，然后编译成CSS文件，直接放到项目中运行。

2.变量名不一样。Less中使用@，而Sass中使用$。

JavaScript 的基本类型有哪些？引用类型有哪些？

null 和 undefined 的区别？

null:空值，使用typeof运算得到 “object”
undefined：当一个声明了一个变量未初始化时，得到的就是undefined。

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，null值则是表示空对象指针

src 和 href 的区别是？

href和src都是用来引用外部资源的属性。例如：网址、图片、视频、css文件、js文件等。

区别

1.请求资源类型不同

href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。

src，将其所指向的资源下载并应用到当前页面，常见的有script、img。

2.作用结果不同

href，用于文档与资源之间确立联系。

src，请求到的资源替换当前内容。

3.浏览器的解析不同

href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。

src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。

Localstorage、sessionStorage、cookie 的区别

cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了 时间，cookie就会存放在硬盘里，过期才失效，每次http请求，header都携带cookie

localStorage(本地存储)：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信

sessionStorage(会话存储): 关闭页面或浏览器后被清除。存 放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
 

作用域

1、作用域

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域

全局作用域就是Js中最外层的作用域

函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套

Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

2、变量提升

每个var声明的变量，function声明的函数存在变量提升。let const不存在变量提升

在js中声明之前未定义，会在js的最上方会形成一个预解析池，用来存储声明了但没有先定义的变量名

3、作用域链：

函数内部访问变量时,优先使用自己内部的声明的变量 如果没有 尝试访问外部函数作用域的变量 如果外部函数的作用域也没有这个变量 继续往外找 直到找到这个全局  如果全局也没有 就报错
 

event 对象的常见应用？

1. event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为
2. event.stopPropagation(); // 阻止冒泡

简单说一下页面重绘和回流？

如何避免重排或重绘？

• 集中修改样式

• 使用文档碎片（DocumentFragment）

• 将元素提升为合成层

什么是内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在

哪些操作会造成内存泄漏？

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

2. 闭包

什么是闭包?

闭包就是一个作用域有权访问另外一个作用域的局部变量

闭包的优点: 延长外部函数局部变量的生命周期

闭包的缺点: 优点也是缺点,本应该销毁的变量 因为闭包的原因没有被销毁 长期存在 会出现内存泄露

使用场景 : 防抖、节流、函数套函数避免全局污染

display：none 与 visibility：hidden 的区别？

最常用的为 display:none 和 visibility:hidden

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元 素会显示

2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可 以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验

4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

逻辑运算符以及他们的运算规则?

1.       && 逻辑与   两边都是true，才返回true，否则返回false

2.       || 逻辑或   两边只要有一个是true，就返回true，否则返回false

3.       ！ 逻辑非   用来取一个布尔值相反的值

typeof null 的结果是什么，为什么？

typeof null 的结果是Object。

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：

什么是事件？

事件是文档和浏览器窗口中发生的特定的交互瞬间，事件就发生了。

一是直接在标签内直接添加执行语句，

二是定义执行函数。

事件类型分两种：事件捕获、事件冒泡。

事件捕获就是：网景公司提出的事件流叫事件捕获流，由外往内，从事件发生的顶点开始，逐级往下查找，一直到目标元素。

事件冒泡：IE提出的事件流叫做事件冒泡就是由内往外，从具体的目标节点元素触发，逐级向上传递，直到根节点。

什么是事件流?

事件流就是，页面接受事件的先后顺序就形成了事件流。

自定义事件

自定义事件，就是自己定义事件类型，自己定义事件处理函数。
 

JS执行机制

1.首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。

2.在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务

3.当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。

4.任务队列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务队首的事件压入栈中执行。

5.当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。
 

setTimeout与setInterval区别与机制

setTimeout()和setInterval()经常被用来处理延时和定时任务。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

async/await是什么？

ES7 标准中新增的 async 函数࿰