牛客博主链接： www.nowcoder.com/discuss/tin…
实现三栏布局或者两栏布局, 用float + BFC和flex两种方式
触发bfc时，是加在非浮动元素上的。让其不和浮动元素重叠。实现两栏布局。
求数组的交集，并集，差集
通过set很容易实现。
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // （a 相对于 b 的）差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
协商缓存出于什么原因有Last-Modified,Etag?etag的好处?
- 当修改元素的时候，但是其内容并没有修改，这样也会造成缓存失效。从而重新请求服务器，浪费了带宽。
- 一个文件一秒钟多次修改，但是因为修改时间是秒级，所以这一秒内的新版本无法区分
跨域时怎么携带cookie
- 服务器设置
access-control-allow-credentials: true
- 客户端设置
withCredentials: true请求头。
重绘和回流
- 回流：元素的几何位置和大小发生变化，从而让浏览器重新在布局阶段构建页面。
- 重绘：元素的绘制属性，直接从绘制阶段开始构建页面。
重排：主要是改变元素的几何属性。会使浏览器重新布局。因为他会改变元素的隐藏和显示。布局树的构建主要就是将dom树中的可见元素重新组合成一棵树。重排需要更新完整的渲染流水线，所以开销也是最大的。
重绘：主要是改变元素的绘制属性。那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
直接合成：我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段
flex解释
弹性布局，用来为盒状模型提供最大的灵活性。通过两个轴来定义元素的分布位置。
前端存储说一说
- cookie
- localStorage
- sessionStorage
- indexDB具体请看这里
画一个180度、90度、45度的扇形
学习一下clip，clip-path等知识。
clip属性定义了元素的哪一部分是可见的。clip属性只适用于position:absolute / fixed的元素。 他已被web标准移除，但是在一些浏览器依旧可以生效。 clip可以设置矩形的裁剪区域。
rect(<top>, <right>, <bottom>, <left>);
上面的属性表示
矩形的每个边的偏移量都是根据元素左上角进行偏移的。
<top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界的偏移。
- 由于clip从web标准移除，所以就有了clip-path。他提供了很多的属性值来为我们裁剪元素。
clip-pathCSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
polygon()，规定几个端点的坐标，%是相对于元素的宽高。
clip-path: polygon(50px 0, 100px 0, 100px 100px, 50px 100px);
inset(), 表示的是 上 右 下 左 到元素的距离。类似于margin. 注意不要加,。
clip-path: inset(0 0 0 50px);
上面表示到达元素本身的宽度的距离。距离上右下为0，左50px。
circle(r at cx cy), 圆的二要素，圆心坐标，半径。
clip-path: circle(`50%` at `50% 50%`);。
elipse(rx ry at cx cy), 椭圆三要素。x轴的半径， y轴的半径，然后就是圆心。
clip-path: ellipse(`25%` `40%` at `50% 50%`);
<style> .second { /* background: red; */ position: absolute; clip: rect(0 100px 100px 50px); width: 100px; height: 100px; } /* <top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。 */ .second .cir { position: absolute; width: 100px; height: 100px; background: skyblue; /* 这个属性已经被web标准移除,并且只能和position:absolute一起使用才会生效。 建议使用clip-path*/ clip: rect(0 50px 100px 0); /* 或者通过这样 */ /* clip-path: polygon(50px 0, 100px 0, 100px 100px, 50px 100px); */ border-top-left-radius: 50%; border-bottom-left-radius: 50%; transform: rotate(30deg); } </style> <div class="second"> <div class="cir"></div> </div>
token存在LocalStorage安全吗？
不安全，因为LocalStorage如果不手动删除，那么将会一直保存在浏览器。所以我们在存储数据的时候，可以设置过期时间和创建的时间，当我们取出数据是，对比时间是否过期，过期将其删除。
