面试分析-HTML-CSS-JS-VUE

1、H5新特性：

• 拖拽(抓取对象以后可以拖到另一个位置)
• data-属性
• 语义化标签(header、footer、nav、aside等)
• 视频音频(video、audio)
• canvas
• 本地存储(localStorage、sessionStorage)等

2、C3新特性：

• 边框圆角
• box-sizing
• rgba颜色
• 渐变
• 过渡
• 动画
• 2D转换
• 3D转换
• flex布局
• 字体图标等

3、三种存储方式对比：

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

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

• flex布局
• 子绝父相定位，左、上距离父元素百分之五十，利用transform移动-50%
• 子绝父相定位，上下左右都为0，margin为auto
• display设置成table-cell，text-align设置成center，verticle-align设置为middle

5、css盒模型：

• 盒模型是用来对元素进行布局，包括内外边距、边框、实际宽高几个部分组成；
• 主要分为两种：标准盒模型和怪异盒模型
• 区别是标准盒模型的盒子大小是实际宽高+padding值+margin值+border，而怪异盒模型则不算margin值；
• 实际开发中为了保证元素的占位大小，我们一般会通过box-sizing属性来设置盒模型的解析模式；
• box-sizing属性有两个值，一个是content-box，默认值，另一个是border-box，设置成该属性值后，盒子的宽高就会算上padding值和边框

6、块级元素和行内元素：

• 块级元素：div、ul、li、dl、dt、dd、p、h1-h6等
• 行内元素：span、a、b、img、input、button、textarea等
• 区别是块级元素独占一行，可以设置宽高属性

7、css选择器权重值：

• !important > 行内元素 > ID选择器 > 类选择器 > 标签 > 通配符

8、H5事件：

• onblur失焦事件
• onfocus聚焦事件
• onchange改变事件
• onclick点击事件
• onerror错误事件
• oninput输入事件
• onkeydown键盘按下事件
• onkeyup键盘抬起事件
• onmousemove鼠标移动事件
• onmouseover鼠标进入事件
• onmouseout鼠标移出事件等

9、H5中input元素的type属性值：

• color颜色
• password密码
• text文本
• CheckBox复选框
• radio单选框
• date日期
• button按钮
• submit提交按钮等

10、 js数据类型：

• 基本数据类型有number、string、boolean、null、undefined
• 引用数据类型有object、array
• 可以通过typeof和instanceof判断数据类型，还可以通过Array.isArray区别对象和数组

11、回流和重绘：

• 访问页面的时候浏览器会解析HTML代码并构建dom树，同时css样式也会被解析创建css对象模型树，dom树和css模型树合成渲染树，渲染树和dom树的区别就是当给一个节点设置了display：none的时候，渲染树上面是没有这个节点的，浏览器会根据渲染树进行布局，布局出来的是一个盒模型，它可以精确的捕获到每个节点在视图内的位置和尺寸，这一行为通常被称为回流或者自动重排
• 布局完成后浏览器会立即发出paint setup事件，这个过程被称为绘制，此时页面会被显示在浏览器上
• 当用户在操作浏览器的时候会经常操作重新合成渲染树和paint setup事件，此时就是回流和重绘事件
• 回流必定触发重绘，但重绘不一定触发回流
• 一般节点的布局改变或者宽高的改变，浏览器窗口大小的改变都会触发回流和重绘
• 元素的颜色、透明度、transform改变时只会触发重绘

12、闭包：

• 在函数内部声明函数，本质上是在函数内部和函数外部搭建一座桥梁，让子函数可以访问父函数中的局部变量；
• 好处就是可以保护变量不受外界污染
• 缺点就是常驻内存，消耗性能，所以开发中很少使用闭包

13、原型和原型链：

• 原型：所有引用类型都有一个–proto–属性，所有的函数都有一个prototype属性，所有引用类型的–proto–属性指向它构造函数的prototype属性
• 原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，就会去它的–proto–属性上查找，即他的构造函数的prototype，如果还没找到就会继续找他的构造函数的prototype属性，这样一层一层向上查找就会形成一个链式结构，即原型链

14、this指向问题：

• 函数形式调用指向window
• 方法形式调用指向调用对象
• 构造函数调用指向构造函数的实例对象
• 箭头函数看外层是否有函数，如果有外层函数的this就是箭头函数的，如果没有就是window

15、数组中forEach和map：

• 相同点是循环数组每一项，且都有三个参数，分别是item、index、array，只是遍历数组，不会改变原数组
• 不同点：
  • map返回一个新数组，数组中的元素是调用原数组的方法处理后的值
  • forEach是将数组中的每一项作为回调函数的参数进行处理

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

• 都是用来更改函数this指向的
• 这三者的第一个参数都是this的新指向
• 第二个之后的参数call和bind是直接传入函数值，而apply第二个参数是数组或伪数组
• bind方法和其他两种方法的不同点在于，bind不会执行该函数，而是返回一个新的函数，其他方法是直接执行该函数

17、new操作符具体过程：

• 创建一个空对象
• 将函数的this指向给这个空对象
• 执行函数代码
• 返回该对象

18、浅拷贝和深拷贝：

• 浅拷贝：将值复制一份，如果是基本类型数据就拷贝的就是基本类型的值，互不影响，但是如果有引用类型的数据则拷贝的是其地址，改变一个，另一个随之改变；可以用展开运算符进行浅拷贝
• 深拷贝：就是内存中开辟一块新地址，完整拷贝一份到新地址中，如果修改一个另一个则不会受到影响；可以用递归的方式进行深拷贝，如果只是一些字符串或者数字类的，可以用JSON的方式进行转换

19、js事件循环：

• 在js事件循环机制中，使用到三种数据对象，分别是栈、堆和队列
• 栈是后进先出的数据结构，理解的场景是：把羽毛球放入球筒中，后放进去的先拿出来
• 堆是一种树状的数据结构，可以理解为图书馆取书，通过书号索引的方式找到书
• 队列是先进先出的数据结构，可以理解为排队买东西的场景，先排先买
• 过程是当所有的同步任务都在主线程上执行就形成一个执行栈，当主线程的执行栈为空时，检查事件队列是否为空，如果为空则继续检查，如果不为空则取出队列任务的首部，加入执行栈，执行任务，如此循环称为事件循环

20、防抖和节流：

• 防抖是合并成一次进行，通过一个计时器来控制，如果在规定时间内再次触发，则取消之前的计时器重新计时，类似于游戏中的回城事件
• 节流是不管触发事件多么频繁，只有在规定时间后才可触发第二次，类似于游戏中的大招技能释放，一般搜索框会做节流事件，减少请求次数，优化性能

21、ES6新增方法：

• let
• const
• 箭头函数
• 模板字符串
• 解构赋值
• promise
• import和export
• set方法
• 展开运算符
• async和await等

22、set和map的区别：

• set用于数据重组，成员不重复，一般用于数组去重，类似于数组，只有键值，没有键名，可以遍历
• map用于数据存储，是键值对的集合，可以遍历，可以跟各种数据格式转换

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

• 现象：点击穿透的现象比如说点击mask上的关闭按钮