只记录一些自己没回答上来的问题
1. position的默认值static
2. 两个面试都问了proxy和defineProperty的区别
- Proxy使用上比Object.defineProperty方便的多。
- Proxy代理整个对象，Object.defineProperty只代理对象上的某个属性
- vue中，Proxy在调用时递归，Object.defineProperty在一开始就全部递归，Proxy性能优于Object.defineProperty。
- 对象上定义新属性时，Proxy可以监听到，Object.defineProperty监听不到。（Proxy代理对象，defineProperty代理对象属性）
- 数组新增删除修改时，Proxy可以监听到，Object.defineProperty监听不到。
- Proxy不兼容IE，Object.defineProperty不兼容IE8及以下。
3. 左右布局（左边固定，右边自适应）当时只答出了两种 主要就是让两个div能并排
- float + margin
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
margin-left: 200px;
background-color: blue;
}
- float + overflow:hidden
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
overflow:hidden;
background-color: blue;
}
- CSS3 float + calc
.left {
float: left;
width: 200px;
height: 100%;
background-color: red;
}
.right {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: blue;
}
- 弹性布局
.parent {
display: flex;
}
.left {
width: 200px;
height: 100%;
background-color: red;
}
.right {
display: flex;
flex: 1;
height: 100%;
background-color: blue;
#### }
4.session cookie token的区别（当时太久没看了）
-
Cookie是存储在客户端的
-
Session是存储在服务端的，可以理解为一个状态列表。拥有一个唯一会话标识
SessionId。可以根据SessionId在服务端查询到存储的信息。 -
Session会引发一个问题，即后端多台机器时Session共享的问题，解决方案可以使用Spring提供的框架。
-
Token类似一个令牌，无状态的，服务端所需的信息被Base64编码后放到Token中，服务器可以直接解码出其中的数据。
5. 求两个字符串的最长公共子串（这个面试官说很简单的算法题 我只能说 我太菜了）
1、把两个字符串分别以行和列组成一个二维矩阵。
2、比较二维矩阵中每个点对应行列字符中否相等，相等的话值设置为1，否则设置为0。
3、通过查找出值为1的最长对角线就能找到最长公共子串。
代码就不贴了 根据思路写一写
6. xss注入的代码能有哪些 我当时知道注入script
第一类：
<tag on*=*/>
在html标签中触发事件
Example:
1.加载完毕自动触发事件
<body onload="alert('xss')"></body>
2.使html某元素撑满整个页面
<p onclick="alert('1')" style="postion:fixed;width:100%;heith:100%"> </p>
3.增加属性触发事件
<input onfocus="alert('1')" autofocus/>
第二类：
<.tag src=*/>
Example:
1.在iframe标签中加载一个脚本页面
<iframe src="./alert.html"></iframe>
2.在script标签中加载一个脚本
<script src="./alert.js"></script>
6. css样式优先级 当时记忆有些模糊了 还问了important优先级是否最高
-
第一优先级：
!important会覆盖页面内任何位置的元素样式 -
1.内联样式，如
style="color: green"，权值为1000 -
2.ID选择器，如
#app，权值为0100 -
3.类、伪类、属性选择器，如
.foo, :first-child, div[class="foo"]，权值为0010 -
4.标签、伪元素选择器，如
div::first-line，权值为0001 -
5.通配符、子类选择器、兄弟选择器，如
*, >, +，权值为0000（后面出现的！important会覆盖之前出现的！important）
7. 关于项目中粒子动画使用到的requestAnimationFrame（用法 我当时忘了写的时候就那么两行写到但后来又想起来了）
requestAnimationFrame（()=>{requestAnimationFrame()}）
