一、HTML篇

1.语义话的目的是什么？

答：用正确的标签做正确的事。

提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验；有利于SEO ，便于搜索引擎爬虫爬取有效信息。

2.HTML5新特征

1、Canvas绘图以及SVG绘图。
2 、拖放（Drag and drop）API
3 、语义化标签（header、nav、footer、article、section）
4 、音频、视频（audio、video）API
5 、地理定位（Geolocation）
6 、本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。
7 、会话储存（sessionStorage）,数据在关闭浏览器后自动删除。
8 、表单控件（calendar、date、time、email、url、search）
9 、新技术如Web Worker、Web Socket。（关于Web Socket使用可以看这篇文章浅谈Web Socket。）

3.cookie与sessionStorage和localStorage的区别 

1、 保存方式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。

2 、生命周期
cookie可设置失效时间
localStorage除非手动清除否则永久保存
sessionStorage关闭当前页面或浏览器后失效

3 、存储的大小
cookie 4kb左右
session 5M

4 、易用性
cookie需自己封装
session可以接受原生接口

因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用来跨页面传参,sessionStorage可以用来保留一些临时数据。

二、CSS篇

1.css有哪些基本的选择器，执行先后顺序？

类选择器（class）、标签选择器、ID选择器
!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

2.垂直居中DIV

• 垂直居中DIV
• 两栏布局左边固定右边自适应
• 三栏布局左右固定中自适应

3.两栏布局左边固定右边自适应

3.三栏布局左右固定中自适应

4.常用的块与行属性内标签有哪些？有什么特征？

块标签：div、h1~h6、ul、li、table、p、br、form。
特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行
行标签：span、a、img、textarea、select、option、input。
特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。
————————————————

5.清除浮动

1、父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）

2、给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）
3、伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table; clear: both;）（不会新增标签，不会有其他影响，）
————————————————

6.CSS3新特征

1. 圆角（border-radius）
2. 阴影（box-shadow）
3. 文字特效(text-shadow)
4. 线性渐变（gradient）
5. 变换(transform)
6. 更多的CSS选择器
7. 更多背景设置（background）
8. 色彩模式（rgba）
9. 伪元素（::selection）
10. 媒体查询（@media）
11. 多栏布局（column）
12. 图片边框（border-image）

————————————————
7.介绍一下盒模型

1. 盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
2. 盒模型分为IE盒模型和W3C标准盒模型。
3. W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。
4. （属性width,height只包含内容content，不包含border和padding）
5. IE盒模型又叫border-box，元素宽度/高度由content组成。
6. （属性width,height包含border和padding，指的是content+padding+border。）

————————————————
8.CSS中有哪些长度单位？

1. 绝对长度单位：px
2. 百分比: %
3. 相对父元素字体大小单位: em
4. 相对于根元素字体大小的单位: rem
5. 相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw
6. 相对于视口*高度的百分比（100vh即视窗高度的100%）: vh

9.display:none和visibility:hidden的区别

display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）。
visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），不会引起回流（重绘）。

10. 用CSS 实现长宽为浏览器窗口一半的正方形

1. 已知父元素宽高用%

2. 用vw

11. 用CSS 实现高度为0.5像素的线条

这个可以用伪类来实现

  用CSS 实现三角形

13. 伪类和伪元素的区别

区别

• 伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”
• 伪元素其实相当于伪造了一个元素，伪类没有伪造元素，例如first-child只是给子元素添加样式而已。（本质区别就是是否抽象创造了新元素）

 13. 重绘和重排是什么？如何避免？

1、重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。

2、重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排 。涉及到重排对性能的消耗更多一些。

3、触发重排的方法： 页面初始渲染、添加/删除可见的DOM元素、改变元素位置、改变元素尺寸、改变元素内容、改变元素字体大小、改变浏览器窗口尺寸、设置 style 属性的值等。
避免重排的方式：样式集中改变、使用 absolute 或 fixed 脱离文档流。
————————————————

三、JS篇

1.ES6新特性？

新增块级作用域let定义变量和const定义常量
变量的解构赋值
模板字符串 （‘${}’）
默认参数（key=value）
箭头函数（=>）
扩展运算符（…）
模块（import/export）
类（class/extends）
Promise
Proxy
Symbol
了解关于es6的更多知识可以看阮一峰——ES6 入门教程
————————————————

2.闭包的理解

理解：主要是为了设计私有的方法和变量。
优点：可以避免全局变量造成污染。
缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。
特征：（1）函数嵌套函数。（2）在函数内部可以引用外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。

3.call()、apply()、bind（）的区别

4.原型，原型链

主要是还是实现继承与扩展对象。
每个函数对象都有一个 prototype 属性，这个属性就是函数的原型对象。
原型链是JavaScript实现继承的重要方式，原型链的形成是真正是靠__proto__ 而非prototype。

所有的引用类型（包括数组，对象，函数）都有隐性原型属性（proto）, 值也是一个普通的对象。
所有的引用类型的 proto 属性值都指向构造函数的 prototype 属性值。
构造函数 new 出来一个对象，而每个对象都有一个 constructor 属性，该属性指向创建该实例的构造函数。
实例对象通过__proto__或者 object.getPrototype 的方法获取原型。
原型链其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。
————————————————

5.JS基本数据类型

1. 基本类型

• Number:数值，包括整型和浮点型。
• String:字符型。
• Undefined:未定义，声明变量时未赋值。
• Null：定义为空或者不存在。
• Boolean：布尔值，true or false。
• Symbol：独一无二的值。

2.引用数据类型

• Object：对象。
• Array：数组。
• Function：函数。注：**Object.prototype.toString.call()**适用于所有类型的判断检测

6.export和export default的区别

• 均可导出常量、函数、文件、模块等。
• 在一个文件或模块中，export、import可以有多个。export default仅有一个。
• 通过export方式导出，在导入时要加{ }，export default则不需要

7.箭头函数和普通函数的区别

• 语法更加简洁、清晰，=>()
• 箭头函数是匿名函数，不能作为构造函数，不能使用new
• 箭头函数不能使用arguments，而用reat参数…解决
• 箭头函数没有自己的this,会捕获其所在的上下文的this值,并且不能通过call()和apply()来改变其this
• 箭头函数没有原型

8.GET和POST的区别

表面区别

后退/刷新：GET无害，POST数据会被重新提交。
书签：GET产生的URL地址可以被收藏为书签，而POST不可以。
数据：GET一般是用来获取数据，POST提交数据。
数据类型：GET只允许ASCII字符,POST无限制。
数据大小：GET大小有限制（一般来说1024字节）,POST理论上来说没有大小限制。
安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
可见性：GET参数通过URL传递对所有人可见，POST数据不可见。
历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
————————————————

9.forEach和map的区别

forEach没有返回值，map返回新的数组。
map创建新数组，forEach不修改原数组。

10.JS基本数据类型的比较

11.对象的继承

常见的：

1. 原型链继承
2. 借用构造函数继承
3. 原型链+借用构造函数的组合继承（使用 call 或 applay 方法）
4. ES6中class 的继承（class可以通过extends关键字实现继承）

12.简述一下你理解的面向对象

面向对象是基于万物皆对象这个哲学观点. 把一个对象抽象成类，具体上就是把一个对象的静态特征和动态特征抽象成属性和方法，也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的。

面向对象具有封装性,继承性,多态性。

封装：隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性。
继承：使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器。
多态：继承和实现接口和运行时的类型绑定机制所产生的多态，使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.。
————————————————

13. == 和 ===的区别

相同点：都是判定两个值是否相等
不同点：== 只比较值不比较类型，而 ===会判断类型

14. 数组有哪些方法

15. 普通的数组去重（笔试一般都会有）

1. IndexOf()
2. 双重for循环
3. es6的 […new Set()]
4. filter()
5. sort()
6. 面试随便写一两种就行、项目直接用new Set()（方便）
7. 注 ：如果有多维数组如 [1,[2],[3,[2,3,4,5]] ] 先扁平化再去重,
8. 用Array.flat(Infinity)实现扁平化。

————————————————
 

16. Promise

含义：异步编程的一种解决方案，用来解决回调地狱。
三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） （Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。）

resolved函数作用：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）。
reject函数的作用：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。

缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

更多详情请看Promise 对象
————————————————

17.JS中new操作符有什么用？

• 创建临时对象，并将this指向临时对象
• 将构造函数的原型属性和方法挂载到新对象的__proto__(原型指针)上
• return 临时对象

18.JS获取HTML DOM元素的方法

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
用法以及防坑可看JS获取HTML DOM元素的方法
————————————————

19.事件捕获和事件冒泡

1. 事件捕获和事件冒泡主要解决了页面事件流的问题。页面的事件流经过了三个阶段，分别是事件捕获、目标阶段和事件冒泡阶段。
2. 事件捕获是由外向内；而事件冒泡则是由内向外。
3. event.stopPropagation() 可以阻止事件流的进一步传播。
4. 采用事件代理的方式，能够节省内存消耗，对于动态改变子元素的时候，也非常有利，避免了很多麻烦的步骤，比如重新绑定事件。（把子元素的事件委托给父元素来处理

————————————————
 

20.虚拟dom

定义：虚拟DOM就是普通的js对象。用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。
作用：虚拟dom可以很好地跟踪当前dom状态，因为它会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发生变化时，有生成一个新的虚拟dom，而两个虚拟dom恰好保存了变化前后的状态。然后通过diff算法，计算出当前两个虚拟dom之间的差异，得出一个更好的替换方案。
————————————————
 

21.排序方式

1. 冒泡排序：比较所有相邻元素,如果第一个比第二个大，则交换它们。
2. 选择排序：找到数组中的最小值，选中它并将其放置在第一位。
3. 插入排序：从第二个数开始往前比，比它大就往后排。
4. 归并排序：把数组劈成两半，再递归地对数组进行“分”操作，直到分成一个个单独的数。
5. 快速排序：从数组中任意选择一个基准，所有比基准小的元素放到基准前面，比基准大的元素放到基准的后面。

————————————————
 

22.数组操作方法会改变原数组

会改变：push()，pop(),shift(),unshift() ,splice(),sort(),reverse()。
不变：concat(),split(),slice()。

23.JS有几种方法判断变量的类型？

1. typeof-判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object’。
2. instanceof-区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。
3. constructor-检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。
4. Object.prototype.toString.call()-适用于所有类型的判断检测，检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。(举例：字符串返回的是[object String])

instanceof的实现原理：验证当前类的原型prototype是否会出现在实例的原型链__proto__上，只要在它的原型链上，则结果都为true。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，找到返回true，未找到返回false。
Object.prototype.toString.call原理：Object.prototype.toString 表示一个返回对象类型的字符串，call()方法可以改变this的指向，那么把Object.prototype.toString()方法指向不同的数据类型上面，返回不同的结果
————————————————
 

24.如何判断一个对象是否存在？

直接!XXX 这样会报错，因为没有定义

建议使用typeof运算符，判断XXX是否有定义。