vue面试总结

## **HTML5**

### 语义化标签

> header、nav、footer、section、article、aside 优点：更好的SEO，更清晰的HTML结构，增强了可读性，便于维护开发

- header：定义页面或文章头部，通常包含logo、页面标题等

- nav：定义只包含导航链接的章节

- section：定义文档中的一个章节/部分

- aside：定义和页面内容关联度较低的内容（即使删除，剩下的内容仍然合理）

- footer：定义页面或章节的尾部，通常包含版权信息、法律信息和反馈建议等有效链接地址

### 媒体标签：

audio(音频)、video(视频)

不需要第三方插件就能播放音频和视频了，可以直接插入，并且用同一的API接口控制。

### SVG和Canvas

> SVG:可缩放矢量图形，svg并不是html5专有的标签

- 不依赖分辨率

- 支持事件处理器

- 最适合带有大型渲染区域的应用程序（比如谷歌地图）

- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

- 不适合游戏应用

> Canvas：画布

- 依赖分辨率

- 不支持事件处理器

- 弱的文本渲染能力

- 能够以 .png 或 .jpg 格式保存结果图像

- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

**SVG和Canvas区别：**

- Canvas是使用javaScript程序绘制动态生成的，SVG是使用xml文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图更容易编辑

- SVG是基于矢量的，所以它能够很好的处理图形大小的变大。canvas是基于位图的图像，他不能改变大小，只能缩放显示，最适合带有大型渲染区域的应用程序（比如谷歌地图）

- canvas支持的颜色比SVG多，更适合图像密集型的游戏之类使用

### Geolocation定位：

Geolocation：是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。要用该功能首先判断浏览器是否支持navigator.geolocation该对象。

### localStorage和sessionStorage和Cookie

- 用法：

    - 存储：

        - 普通类型：window.localStorage.setItem('key',value)；

        - OBject类型：window.localStorage.setItem('param',JSON.stringify(Object))

    - 读取：

        - 普通类型：window.localStorage.getItem('key')；

        - OBject类型：JSON.parse(window.localStorage.getItem('key'))

    - 删除：

        - window.localStorage.removeItem('key')

    - 清除缓存：

        - localStorage.clear()

- >  localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

    - 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

    - localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

    - sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

    - 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

- > cookie和它们的区别：

  - cookie数据始终每次http请求都会携带cookie，浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发送给服务器；

  - 存储大小限制也不同，cookie单个cookie数据不能超过4K，sessionStorage和localStorage可以达到5M或更大；

  - 数据有效期不同，cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭；

  - 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面; localstorage在所有同源窗口 中都是共享的; cookie也是在所有同源窗口中都是共享的。

- cookie使用：

  - 写入：document.cookie='username=xxxx'；

  - 读取：document.cookie;

### fetch请求方式：

- Fetch是浏览器内置API，Ajax的替代者，在浏览器环境中，封装了Promise机制，可以通过顶层对象window获取，优化了异步问题——可以直接用.then()方法。

```javascript

    const url = "https://gitee.com/api/v5/users/liyangyf";

    fetch(url).then( response=>response.json() )  // 将response数据解析成json

              .then( json=>console.log(json) )

```

### input新类型：

   - email : 提交表单时检测值是否是一个电子邮件格式

   - url: 提交表单时检测值是否是一个url格式

   - date: 年-月-日格式的控件

   - time: 时:分格式的控件

   - datetime-local : 年-月-日 时:分 格式的控件（本地时间）

   - month : 年-月格式的控件

   - week: 年-周数格式的控件

   - number: 数字输入框

   - Range : 选择区域

   - tel: 电话输入框

   - search: 用于搜索

   - color: 调用系统选色器

### input新属性：

   - placeholder: 占位符，输入框提示信息

   - required: 该input为必填项

   - autofocus: 在页面加载时，域自动地获得焦点

   - Pattern : 正则验证 如: pattern="[0-9]{7,12}"

   - min/max: input能输入的最小/最大数字的大小

   - maxlength:input能输入的最大字节的长度(最多可以输入的文字或者字母的个数)

   - Step；针对number和range类型，每次递增step的值

   - list: 指定一个datalist，作为下拉提示单

## **CSS**

### CSS3 新特性有哪些？ 

1. 颜色:新增 rgba(),HSLA 模式 

2. 文字阴影（text-shadow、） 

3. 边框: 圆角（border-radius）边框阴影: box-shadow ; 边框图片：border-image 

4. 盒子模型:box-sizing 

5. 背景:background-size 设置背景图片的尺寸 background-origin 设置背景图片的原 

   点，background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自 

   适应布局 

6. 渐变:linear-gradient、radial-gradient 

7. 过渡:transition,可实现动画 

8. 自定义动画 

9. 在 CSS3 中唯一引入的伪元素是 ::selection. 

10. 媒体查询，多栏布局

11. 2D 转换：transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y) 

12. 3D 转换：transform:translate3d(x,y,z)

### Scss与Less区别

- 变量不同：less-@  scss-$ 

- 运算： scss 加减法中 计算单位必须相同；less 加减法中可以不同单位进行运算 

- 作用域不同， less 存在变量提升   scss 没有变量提升   $number:1px    @number:1px

### 什么是BFC

 BFC直译为‘块级格式化上下文’。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 block-level box，display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 

### BFC特性

- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠

- 计算BFC的高度时，浮动元素也参与计算

- BFC的区域不会与float box发生重叠

- BFC内部的Box会在垂直方向，一个接一个的放置

- 每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此

- BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

### CSS问题

> 清除图片间隙

- 清除图片左右间距

1. 两张图片挨着写（img标签挨在一起）

2. 父元素的font-size设置为0

3. 给图片设置浮动

- 清除图片上下间距

1. 图片设置为display：block

2. 给图片设置vertical-align：top/bottom/middle    

> 元素水平垂直居中

- 弹性盒

  \- 父元素：display：flex；子元素：margin：auto；

  \- 父元素：display：flex；justify-content：center；align-item：center；

- 定位

  \- 父元素：position：relative；子元素：position：absolute；left：0；right：0；bottom：0；top：0；margin：auto；

- 定位+2D变形

  \- 父元素：position：relative；子元素：position：absolute;top:50%;left:50%;transform：translate（-50%，-50%）；                                                                                                                                                                                                      

### css长度单位

- px：常用的绝对长度单位，相对与显示器分辨率而定位的单位，兼容性较好

- 百分比：常用相对长度单位，相对于父元素的尺寸取值

- pt：绝对长度单位 1px = 0.75pt

- em：相对长度单位，相对于当前元素内部的文本尺寸

- rem：css3新增的相对长度单位，相对的是根元素HTML的文本尺寸

- vw：相对视窗宽度的百分比（1vw代表视窗宽度1%）

- vh：相对视窗高度的百分比

- vmax：当前vw和vh中较大的值

- vmin：当前vw和vh中较小的值 

### 高度塌陷

高度塌陷是因为所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷;

> 给父元素添加固定高度； 缺点:不适合高度自适应的布局。

> 给父元素添加overflow:hidden;

### 行内元素、块状元素、行内块状元素

> 行内元素

1. 设置宽高无效

2. margin设置仅左右有效，padding设置上下左右都有效

3. 不会自动换行

> 块状元素

1. 可以设置宽高

2. margin，padding上下左右均有效

3. 会自动换行

4. 块状元素排列从上至下(未脱离文档流时)

> 行内块状元素

1. 不会自动换行

2. 可以设置宽高

3. 默认排列从左至右

### css选择器

!importent > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 

### 动画和过渡区别

> animation(动画)、transition-property(过度)

- 动画不需要事件触发，过渡需要，

- 过渡只有开始和结束两个关键帧，动画可以设置多个关键帧

### 元素水平垂直居中

- 弹性盒

  - 父元素：display：flex；子元素：margin：auto；

  - 父元素：display：flex；justify-content：center；align-item：center；

- 定位

  - 父元素：position：relative；子元素：position：absolute；left：0；right：0；bottom：0；top：0；margin：auto；

- 定位+2D变形

  - 父元素：position：relative；子元素：position：absolute;top:50%;left:50%;transform：translate（-50%，-50%）；

### 重绘和回流

> 回流:当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree

> 重绘:浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘

> 当render tree中的一些元素需要更新属性时，而这些属性只是影响元素的外观、风格而不会影响布局的时候，比如background-color，文字颜色、边框颜色等。则就称为重绘。

**回流一定会触发重绘，而重绘不一定会回流**

## **JavaScript**

### js运行机制

首先我们需要了解JavaScript的特性就是单线程，单线程简单的说就是同一时间只能做一件事。那么为什么是单线程呢？作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程再某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。多线程可以将任务放到不同的线程中去处理。CPU的调度单位是线程，它会在不同的线程之间切换，任务是隶属于线程的

于是，JavaScript中所有