html

1、H5新特性：

• 语义化标签 (nav header main footer menu)
• 自定义属性 data-属性
• 媒体标签 video radio
• 表单类型 tel、search、number、email、url、date、time、color、month、week
• 画布 canvas
• 本地存储 localStorage、sessionStorage
• 拖拽 ：

2、三种存储方式对比：

• localStorage：长期存储于浏览器，可以在同源窗口下共享数据，存储大小5M。
• sessionStorage：浏览器窗口关闭数据就会被销毁，只有在同一窗口共享数据，存储大小5M。
• cookie：有有效期，可存储4k。所有同源窗口共享数据，数据会随着请求存储到请求报文中。

3、盒子/图片水平垂直居中：

• 绝对定位+transform：父亲给一个高度，position：relative；子盒子position：absolute，top：50%；left：50%；transform：translate（-50%，-50%）
• 绝对定位+margin:auto：父容器给一个高度，position：relative；子容器有宽度和高度，position：absolute，上下左右都是0，margin：auto；
• display设置成table-cell，text-align设置成center，verticle-align设置为middle。
• flex布局：父容器给一个高度，display：flex，justify-content：center，align-items：center；

4、Canvas和SVG的区别

• SVG可缩放矢量图形，其特点如下：
  1. 不依赖分辨率
  2. 支持事件处理器
  3. 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  4. 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  5. 不适合游戏应用
• Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。其特点如下：
  1. 依赖分辨率
  2. 不支持事件处理器
  3. 弱的文本渲染能力
  4. 能够以 .png 或 .jpg 格式保存结果图像
  5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

css

1、 CSS选择器及其优先级

• !important > 内联样式 > id选择器 > 类选择器、属性选择器、结构伪类选择器 > 标签选择器、伪元素选择器 > 通配符选择器（继承）

2、隐藏元素的方法有哪些

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

3、display:none与visibility:hidden的区别

• display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
• display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
• 修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

4、对盒模型的理解

• 标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
  1. 标准盒模型的width和height属性的范围只包含了content，
  2. IE盒模型的width和height属性的范围包含了border、padding和content。
• 可以通过修改元素的box-sizing属性来改变元素的盒模型：
  1. box-sizing: content-box 表示标准盒模型（默认值）
  2. box-sizing: border-box 表示IE盒模型（怪异盒模型）

5、CSS3中有哪些新特性

• 新增选择器：
  1. 属性选择器
  2. 结构伪类选择器
  3. 伪类选择器
• 2D转换：transform
  1. 位移：transform：translate（100px，100px）
  2. 缩放：transform：scale（1，1）
  3. 旋转：transform：rotate（45deg）
  4. 位移：transform：translate（100px，100px，100px）
• 3D转换：transform：
  1. 位移：transform：translate（100px，100px，100px）
  2. 旋转：transform：rotate（0，0，1，45deg）
  3. 3D呈现：transform-style ---flat：子元素不开启3d空间，preserve-3d：子元素开启3d空间
  4. 透视：perspective（单位px）-----人的眼睛到屏幕的距离；近大远小。
• 动画
  1. @keyframes 动画名称 {0% {width：100px} 100% {width：200px}}
• 过渡：transition
• 其他特性
  1. 背景渐变background：linear-gradient（top left，red，pink）
  2. 图片模糊：filter：blur（5px）数值越大越模糊
  3. calc函数：width：calc（100% - 80px）
  4. 圆角：border-radius
  5. 文字特效 （text-shadow）
  6. 文字渲染 （text-decoration）

6、 常见的CSS布局单位

• 像素（px）：是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：
• 百分比（%）：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。
• em和rem：对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于自身或者父元素字体，rem相对于根元素（html字体大小）。
• vw/vh是与视口有关的单位，vw：相对于视窗的宽度，1vw = 1/100视口宽度；，vh：相对于视窗的高度，1vh = 1/100视口高度；

7、px、em、rem的区别及使用场景

1、px 是固定的像素，⼀旦设置了就⽆法因为适应⻚⾯⼤⼩⽽改变 
2、em 和rem相对于px更具有灵活性，他们是相对⻓度单位，意思是⻓度不是定死了的，更适⽤于响应式布局 
3、em 相对⾃身font-size，没有则相对于⽗元素，rem相对于根元素的font-size

8、flex:1 表示什么

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。flex:1 表示 flex: 1 1 auto，它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)：

• 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
• 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；
• 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

JavaScript

1、JavaScript有哪些数据类型，它们的区别？

2、数据类型检测的方式有哪些

3、判断数组的方式有哪些

4、ES6有哪些新增？

5、let、const、var的区别

6、箭头函数与普通函数的区别

7、new操作符的实现原理

8、浅拷贝和深拷贝

9、对原型、原型链的理解

10、Event Loop（JS执行机制）

11、对Promise的理解

12、对async/await 的理解

13、对闭包的理解

14、对作用域、作用域链的理解

15、call、bind、apply ( 函数上下文调用模式 )

16、防抖和节流

17、点击穿透现象及解决办法

18、js的继承

19、图片懒加载

20、常见的 HTTP 状态码

21、跨域

22、一个页面从输入 URL 到页面加载显示完成的过程

23、三次握手和四次挥手

24、HTTP和HTTPS区别

25、set和map的区别

26、如何理解面向对象？

27、对象创建的方式有哪些？

28、ES6模块与CommonJS模块有什么异同？

29、Object.is(value1, value2) 与比较操作符 ===和 == 的区别？

30、null和undefined区别

31、重绘和回流

性能优化

1、CDN

2、懒加载

3、节流与防抖

4、减少回流与重绘

5、图片优化

6、webpack优化

Vue

1. Vue的基本原理

2、双向数据绑定的原理

3、使用 Object.defineProperty() 来进行数据劫持有什么缺点？

4、Computed 和 Watch 的区别

5、slot是什么？有什么作用？原理是什么？

6、v-if和v-show的区别

7、v-model的实现原理

8、data为什么是一个函数而不是对象

9、vue如何监听对象或者数组某个属性的变化

10、Vue模版编译原理

11、说一下Vue的生命周期

12、常用的组件间通信方式有哪些？

13、Vuex 的原理

14、Vuex有哪几种属性？

15、Vuex 和 localStorage 的区别

16、$route 和$router 的区别

17、params和query的区别

18、Vue-router 导航守卫有哪些

19、对虚拟DOM的理解？

20、虚拟DOM的解析过程

21、DIFF算法的原理

22、Vue中key的作用

23、为什么不建议用index作为key?

24、token失效处理

25、页面优化

26、路由模式

27、如何封装组件

小程序

1、支付流程

2、小程序生命周期

3、小程序跳转方式、

4、小程序的数据绑定和vue有什么区别