js部分
1.问：localStorage,sessionStorage和cookie的区别?
概述：localStorage,sessionStorage是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。sessionStorage、localStorage、cookie都是在浏览器端存储的数据。
共同点:都是保存在浏览器端，且同源的.
区别:
(1）cookie在浏览器和服务器间来回传递；sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
(2)存储大小：
localStorage存储空间小于等于5M；
sessionStorage存储空间小于等于5M；
cookie存储空间小于4K；
(3)有效性：
localStorage：永久存储，始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；需要手动清除。
sessionStorage：会话级别的存储，仅在当前浏览器窗口关闭前有效，不能持久保持；
cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭也不会消失；
2.问:下面代码运行后输出结果
console.log('script start')async function async1() {await async2()console.log('async1 end')}async function async2(){console.log('async2 end')}async1()window.setTimeout(function(){console.log('setTimeout end')},0)var promise1=new Promise(function (resolve,reject) {console.log('Promise build')resolve()})promise1.then(function (){console.log('promise1 end')}).then(function (){console.log('promise2 end')})console.log('script end')
答案依次为:
script startasync2 endPromise buildscript endasync1 endpromise1 endpromise2 endsetTimeout end
3.es6的新特性中，var let const之间的区别
(1)var存在变量提升
(2)var可重复声明
(3)var不存在块级作用域
(4)存在for循环变量污染的问题
let、const
(1)不存在变量提升
(2) 不可重复声明
(3)存在块级作用域
(4)不存在for循环变量污染的问题，const一旦声明必须赋值。
4.问：下面代码输出结果
function fun(n, o) {console.log(o)return {fun: function (m) {return fun(m, n)}}}var a = fun(0) //undefined a={fun:function(m){ ruturn fun(m,0)}}a.fun(1) // 0 再执行fun(1,0),结果{fun:function(m){return fun(m,1)}}(=>fun(2,1),结果{fun:function(m){retun fun(m,2)}})a.fun(2) //0 再执行fun(2,0),结果{fun:function(m){return fun(m,2)}}a.fun(3) //0 再执行fun(3,0),结果{fun:function(m){return fun(m,3)}}var b = fun(0).fun(1).fun(2).fun(3) //undefined,0,1,2var c = fun(0).fun(1) //undefined,0,c.fun(2) //1
5.问：浅拷贝和深拷贝的区别，使用原生js写出一种深拷贝的方法
（1）浅拷贝
浅拷贝之所以被称为浅拷贝，是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存.
// 浅拷贝函数function shallowClone(m) {const Obj = {};for ( let i in m) {Obj[i] = m[i];}return Obj;}// 被拷贝的对象const originObj = {a: 1,b: [ 'e', 'f', 'g' ],c: { h: { i: 2 } }};const newObj = shallowClone(originObj);console.log(newObj.c.h, originObj.c.h); // { i: 2 } { i: 2 }console.log(originObj.c.h === newObj.c.h); // true
我们可以看到,很明显虽然originObj.c.h被拷贝了,但是它还与originObj.c.h相等,这表明他们依然指向同一段堆内存,这就造成了如果对newObj.c.h进行修改,也会影响originObj.c.h,这就不是一版好的拷贝
（2）深拷贝
可以拷贝对象里面所有的层级，在堆里面开辟一个新的存储空间，复制出一个一模一样的对象出来，复制出来的对象属性值改变时不会影响原来的对象。
function deepCopy(obj) {if (typeof obj == 'object') {var result = obj instanceof Array ? [] : {}for (let i in obj) {if (typeof obj[i] == 'object') {result[i] = deepCopy(obj[i])} else {result[i] = obj[i]}}} else {var result = obj}return result}var a = 'aaaa'var aa = deepCopy(a)console.log(a === aa) //truevar b = [1, 2, [3, [4, 5]]]var bb = deepCopy(b) //falseconsole.log(b === bb)var c = {a: '11',b: {c: '22',}}var cc = deepCopy(c)console.log(c === cc) //false
6.类型识别的方法
一、数据类型的分类：
（1）基本数据类型：
string（字符串）boolean（布尔值）number（数字）symbol（符号）null（空值）undefined（未定义）
Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
（2）引用数据类型
a.内置对象/原生对象
String、Number、Boolean、Array、Date、RegExp、Math、 Error、 Object、Function、 Global
b.宿主对象
b-1BOM对象： Window、Navigator、Screen、History、Location
b-2DOM对象：Document、Body、Button、Canvas等
二、数据类型的判断
(1)typeof一般通过 typeof 操作符来判断一个值属于哪种基本类型。但无法区分对象类型
typeof 'some' // 'string'typeof true // 'boolean'typeof 10// 'number'typeof Symbol() // 'symbol'typeof null // 'object' 无法判定是否为 nulltypeof undefined // 'undefined'typeof {} // 'object'typeof [] // 'object'
(2)instanceof判断对象类型：测试构造函数的 prototype 是否出现在被检测对象的原型链上。d但无法判断一个值到底属于数组还是普通对象。
[] instanceof Array // true({}) instanceof Object // true(()=>{}) instanceof Function // truelet arr = []let obj = {}arr instanceof Array // truearr instanceof Object // trueobj instanceof Object // true在这个例子中，arr 数组相当于 new Array() 出的一个实例，所以 arr.__proto__ === Array.prototype，又因为 Array 属于 Object 子类型，即 Array.prototype.__proto__ === Object.prototype，所以 Object 构造函数在 arr 的原型链上
判断不了原始类型
console.log(true instanceof Boolean);// falseconsole.log(undefined instanceof Object); // falseconsole.log(arr instanceof Array); // trueconsole.log(null instanceof Object); // falseconsole.log({} instanceof Object); // trueconsole.log(function(){} instanceof Function);// true
（3）Object.prototype.toString.call()全能型，几乎都能判断
Object.prototype.toString.call({})// '[object Object]'Object.prototype.toString.call([])// '[object Array]'Object.prototype.toString.call(() => {})// '[object Function]'Object.prototype.toString.call('abc')// '[object String]'
（4） Array.isArray(b) 判断一个变量是否是一个数组
A.constructor==Array 判断是否为数组
7.写出下面代码输出结果
<script>var length = 10function fn() {console.log(this.length)}let obj = {method: function (fn) {fn();arguments[0]();}}obj.method(fn, 1) // 10 2</script>
8.问：call,apply,bind的区别？
相同点：call,apply,bind都可改变this的指向
区别:call,apply都是立即调用一个函数，它们第一个参数都是this指向的对象，call传参是一个个的传，apply传的是一个数组；bind会生成一个新的函数，并不会立即调用。
9.谈谈性能优化问题(至少列出4点)
(1)减少请求次数：
a.将图片转为base64、使用字体图标
b.使用强缓存和协商缓存
c.避免使用空的src和href
(2)减少资源大小：使用GZIP压缩，压缩html、js、css和图片资源
(3)优化网络连接:使用DNS预解析
(4)webpack性能优化：
a.使用tree shaking去掉未引用的代码
b.使用external把没有必要打包的库文件分离出来，减少打包后项目体积
CSS部分
1.问：实现一边宽度固定，另一边自适应(至少2中方法）
html部分
<div class="box"><div class="b"></div><div class="c"></div></div>
方法一：对自适应元素设置absolute定位，通过left： 0， right： 0对自适应元素进行宽度拉伸，再通过设置margin-left避免元素重叠
.box{position: relative;}.b{width: 200px;height: 200px;background-color: aqua;}.c{height: 200px;position: absolute;top: 0;right: 0;left: 0;margin-left: 200px;background-color: blue;}
方法二：flex布局
.box{display: flex;}.b{ width: 200px;height: 200px;background-color: aqua;}.c{height: 200px;flex: 1;background-color: blue;}
2.div中子元素垂直水平居中的方法（至少两种)
方法一：定位
<template><div class="father"><div class="son"></div></div></template><style scoped>.father {background: red;height: 200px;position: relative;}.son {background: green;width: 80%;height: 100px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style>
方法二：display: table-cell
<template><div class="father"><div class="son"></div></div></template><style scoped>.father {background: red;height: 200px;width: 200px;display: table-cell;vertical-align: middle;}.son {background: green;width: 80%;height: 100px;margin: 0 auto;}</style>
3.问：CSS3动画实现方式
<body><div><div class="guodu">过度动画</div><div class="guanjian">关键帧动画</div></div></body><style>.guodu {width: 100px;height: 100px;background-color: aqua;transition: all 0.3s linear;}.guodu:hover {width: 500px;height: 100px;background-color: purple;}.guanjian {width: 100px;height: 100px;background-color: rgb(197, 28, 127);}.guanjian:hover {width: 500px;animation: mykey 0.3s linear;}@keyframes mykey {from {background-color: rgb(47, 0, 255);}to {background-color: rgb(22, 190, 50);}}</style>
4.问：了解的哪些可视化工具
Echarts, canvas, svg
5.移动端的适配方法
（1）百分比适配方式
这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死
需求：是四个div高度为100px，宽度等宽横向排列
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width,user-scalable=no"><style type="text/css">body {margin: 0;}div {width: 25%;height: 100px;float: left;}.a {background: red;}.b {background: blue;}.c {background: green;}.d {background: yellow;}</style></head><body><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div></body></html>
（2）动态生成viewport适配方式
这种方式其实是动态设置缩放比例，动态创建meta标签，并且将计算出来的缩放比例放到这个标签的content属性里面
如果目标尺寸设置320,那么整个屏幕宽度就是320px，设置为750那么整个屏幕就是750px，这样我们页面中的每个元素就可以根据设计图来设置宽高了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">(function(){var w = window.screen.width;var targetW = 320;var scale = w/targetW; //当前尺寸/目标尺寸var meta = document.createElement("meta");meta.name = "viewport";meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""console.log(scale);document.head.appendChild(meta);})();</script><!--<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">--><style type="text/css">body {margin: 0;}div {width: 80px;height: 100px;float: left;}.box1 {background: red;}.box2 {background: blue;}.box3 {background: green;}.box4 {background: yellow;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>
（3）rem适配方式
rem适配方式第一步首先需要设置视口的约束（固定的）
先来看一下在rem适配之前是怎么样的
分析运行结果，当屏幕的宽度是320的时候，这个box的宽度比例是200/320，当换一个手机屏幕大小不一样的，比如375的那么box的宽度比例是200/375
那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了，所以呈现的效果也是不一样的
那么对于这个问题可以使用rem来做适配，rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度，这样整个屏幕就变成了1rem为基准，然后在设置每个元素的时候试用rem来做单位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Title</title></head><style>*{margin: 0;padding: 0;}.box{width:2rem;height: 0.5rem;background-color: red;}</style><script>(function () {// 获取屏幕区域的宽度var w = document.documentElement.clientWidth// 获取html根元素var htmlNode = document.querySelector('html')// 设置字体大小htmlNode.style.fontSize = w + 'px'})()</script><body><div class="box"></div></body></html>
