HTML面试题汇总
1.浏览器内核
--浏览器内核:- IE trident
- firefox gecko
- google blink
- safari webkit
- opera presto
2.对HTML语义化的理解
根据内容的语言化，选择合适的标签
优点： 1.代码结构清晰，易于阅读，利于开发和维护
2.提高用户体验，样式加载失败时，页面结构清晰
3.利于搜索引擎优化SEO，搜索引擎会根据不同的标签赋予不同的权重
<header></header> 头部 <nav></nav> 导航栏
<section></section> 区块（有语义化的div） <main></main> 主要区域
<article></article> 主要内容 <aside></aside> 侧边栏 <footer></footer> 底部
3.web存储
HTML5提供了两种在客户端存储数据的新方法：
localStorage -没有时间限制的数据存储
sessionStorage -针对一个session的数据存储
4.iframe有哪些优点和缺点？
iframe元素会创建包含另外一个文档的内联框架(即行内框架)
优点：-用来加载速度较慢的内容(如广告)
-可以使脚本可以并行下载
-可以实现跨子域通信
缺点：
- iframe 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎索识别
- 会产生很多页面，不容易管理
css面试题汇总
1.css选择器及其优先级
-标签选择器(div),伪元素选择器(li:last):1
-类选择器(#classname),伪类选择器(li:after),属性选择器(a[ref='eee']):10
-id选择器(#id):100
-内联样式:1000
注意：-！important声明的样式的优先级最高
-如果优先级相同，则最后出现的样式生效
2.display的属性值及其作用
* display的属性值
-display:none/block/inline/inline-block/table/flex
* display的block,inline和inline-block区别：
- block:会独占一行，可设置width,height,margin,padding属性
--inline:不会独占一行，设置width,height无效，可以设置水平方向的margin和padding(不能设置垂直方向)
3.隐藏元素的方法有那些
display:none-- 不占有原来位置
visibliity:hidden --占有原来的位置
opacity:0 --将元素透明度设置为0，隐藏元素占有原来位置
position:absolute --使用绝对定位将元素移除可视区，以此实现隐藏元素
z-index:负值 --来使其他元素盖住改元素,以此来实现隐藏
transform:scale(0,0) --将元素缩放为0，隐藏后占有原来的位置
4.对盒模型的理解
盒模型都是由四个部分组成的，分别是margin,border,padding,content
-标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
-标准盒模型的width和height属性的范围只包含了content
-IE盒模型的width和height属性的范围包含了border、padding和content
可以通过修改元素的box-sizing属性来改变元素的盒模型：
- box-sizeing: content-box 表示标准盒模型（默认值）
- box-sizeing: border-box 表示IE盒模型（怪异盒模型）
5.css3中有哪些新特性
- 圆角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 阴影和反射 （Shadoweflect）
- 文字特效 （text-shadow）
- 文字渲染 （Text-decoration）
- 线性渐变 （gradient）
- 旋转 （transform）
6.对css3Sprites的理解
CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的
background-image，background-repeat，background-position属性的组合进行背景定位。
*优点:
- 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能
- CSS Sprites能减少图片的字节
7.CSS预处理器/后处理器是什么？为什么要使用它们？
**预处理器，
如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。
层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。
**后处理器，
如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。
目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序
，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。
其它css预处理器语言：`Sass（Scss）`, `Less`, `Stylus`, `Turbine`, `Swithch css`, `CSS Cacheer`, `DT Css`。
使用原因：
- 结构清晰,于扩展
- 可以很方便的屏蔽浏览器私有语法的差异
- 可以轻松实现多重继承
- 完美的兼容了CSS代码，可以应用到老项目中
8.文本溢出隐藏
overflow:hidden //溢出隐藏
text-overflow:ellipsis //溢出用省略号显示
white-space:nowrap //规定段落中的文本不进行换行
9.为什么需要清除浮动？清除浮动的方式
*浮动的定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。
此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
*浮动的工作原理:
- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
*清除浮动的方式如下:
- 给父级div定义height属性
- 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
- 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
- 使用 :after 伪元素
10.对BFC的理解，如何创建BFC
块格式化上下文是web页面的可视化css渲染的一部分，BFC是一个独立的布局环境，可以理解为一个容器，
这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响
BFC的作用：
解决margin的重叠问题，解决高度坍塌问题，清除内部浮动，创建自适应两栏布局
11.Flex布局
》flex:1 是哪些属性组成的
flex 实际上是 flex-grow(定义项目放大的比列)、flex-shrink(定义项目缩小比列)和
flex-basis(定义在分配多余空间，主轴占据的空间) 三个属性的缩写。
1.给父级添加的属性
flex-direction:主轴 row,column
justify-content:(主轴对齐方式)flex-start/center/flex-end/space-around/space-between
flex-wrap:nowrap/wrap
align-items:(侧轴对齐方式)--单行的时候使用-center
align-content:(多行的情况(换行))--flex-start/center/flex-end/space-around/space-between
2.给子级添加的属性(项目)
flex:(份数)--数字
11.重排(回流)/重绘
**重排(也称回流):** 当`DOM`的变化影响了元素的几何信息(`DOM`对象的位置和尺寸大小)，
浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
触发：
1. 添加或者删除可见的DOM元素
1. 元素尺寸改变——边距、填充、边框、宽度和高度
**重绘：** 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
触发：
- 改变元素的`color、background、box-shadow`等属性
JavaScript面试题汇总
1.let,const,var的区别
var声明的变量会挂载在window上，而let和const声明的变量不会：
var声明变量存在变量提升，let和const不存在变量提升
let和const声明形成块作用域
2.js有哪些数据类型,他们的区别
栈:原始数据类型(undefined,null,boolean,number,string)
堆：引用数据类型(对象，数组和函数)
3.数据类型检测的方式有哪些
*typeof数组、对象、null都会被判断为object，其他判断都正确
eg:console.log(typeof 2) //number
*instanceof 可以只能正确判断引用数据类型（对象），而不能判断基本数据类型。
instanceof运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性
eg:console.log(2 instanceof number) //false
console.log([] instanceof Array) //true
*constructor
*Object.prototype.toString.call()
--判断数组的方式有哪些
*Array.isArray(obj);
*bject.prototype.toString.call(obj).slice(8,-1) === 'Array';
*obj instanceof Array
4.对JSON的理解
JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
在项目开发中，使用 JSON 作为前后端数据交换的方式。
在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，
然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。
因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，
但是应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，
比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。
在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理，
- JSON.stringify 函数，通过传入一个符合 JSON 格式的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不符合 JSON 格式，那么在序列化的时候会对这些值进行对应的特殊处理，使其符合规范。在前端向后端发送数据时，可以调用这个函数将数据对象转化为 JSON 格式的字符串。
- JSON.parse() 函数，这个函数用来将 JSON 格式的字符串转换为一个 js 数据结构，如果传入的字符串不是标准的 JSON 格式的字符串的话，将会抛出错误。当从后端接收到 JSON 格式的字符串时，可以通过这个方法来将其解析为一个 js 数据结构，以此来进行数据的访问。
5.对闭包的理解
**闭包是指有权访问另一个函数作用域中变量的函数，
创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。
- 闭包用途：
1. 能够访问函数定义时所在的词法作用域(阻止其被回收)
1. 私有化变量
1. 模拟块级作用域
1. 创建模块
- 闭包缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏
比如，函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。
6.对原型，原型链的理解
在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它
的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。
当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一
般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 **proto** 属性来访问这个属性，
但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。
当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，
这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。
>//**原型:** 对象中固有的`__proto__`属性，该属性指向对象的`prototype`原型属性。
>//**原型链:** 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。
//原型链的尽头一般来说都是`Object.prototype`所以这就是我们新建的对象为什么能够使用`toString()`等方法的原因。
- 对this对象的理解
this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。
- 第一种是**函数调用模式**，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。
- 第二种是**方法调用模式**，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。
- 第三种是**构造器调用模式**，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
- 第四种是 **apply 、 call 和 bind 调用模式**，这三个方法都可以显示的指定调用函数的 this 指向。
其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，
第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用 call() 方法时，
传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。
这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。
8.作用域、作用域链、变量提升
`作用域`负责收集和维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。(全局作用域、函数作用域、块级作用域)。
作用域链就是从当前作用域开始一层一层向上寻找某个变量，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是`作用域链`。
9.EventLoop
`JS`是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，
依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，
因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。
微任务队列的代表就是，`Promise.then`，`MutationObserver`，
宏任务的话就是`setImmediate setTimeout setInterval`
10.垃圾回收的概念
**垃圾回收**：JavaScript代码运行时，需要分配内存空间来储存变量和值。
当变量不在参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。
垃圾回收的方式：
1.标记清除
2.引用计数
3.减少垃圾回收(对数组进行优化，对object进行优化)
11.哪些情况到导致内存泄漏
- **意外的全局变量：由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
- **被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，
如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
- **脱离 DOM 的引用:获取一个 DOM 元素的引用，而后面这个元素被删除，
由于一直保留了对这个元素的引用，所以它也无法被回收。
- **闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。
12.防抖和节流
防抖：指触发事件后在n秒内函数只能执行一次，
如果在n秒内又触发了事件，则重新计算函数执行的时间(多次事件只响应一次)--输入框，scroll事件
节流：连续触发事件但是在n秒中只执行一次函数，--页面无限加载
