牛客面经每日一总结（三）

实现三栏布局或者两栏布局, 用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]);
    

    
    let intersect = new Set([...a].filter(x => b.has(x)));
    

    
    let difference = new Set([...a].filter(x => !b.has(x)));
    

协商缓存出于什么原因有Last-Modified,Etag?etag的好处?

• 当修改元素的时候，但是其内容并没有修改，这样也会造成缓存失效。从而重新请求服务器，浪费了带宽。

• 一个文件一秒钟多次修改，但是因为修改时间是秒级，所以这一秒内的新版本无法区分。

跨域时怎么携带cookie

• 服务器设置access-control-allow-credentials: true

• 客户端设置withCredentials: true请求头。

重绘和回流

• 回流：元素的几何位置和大小发生变化，从而让浏览器重新在布局阶段构建页面。

• 重绘：元素的绘制属性，直接从绘制阶段开始构建页面。

重排：主要是改变元素的几何属性。会使浏览器重新布局。因为他会改变元素的隐藏和显示。布局树的构建主要就是将dom树中的可见元素重新组合成一棵树。重排需要更新完整的渲染流水线，所以开销也是最大的。

重绘：主要是改变元素的绘制属性。那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。

直接合成：我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段

flex解释

弹性布局，用来为盒状模型提供最大的灵活性。通过两个轴来定义元素的分布位置。

前端存储说一说

• cookie

• localStorage

• sessionStorage

• indexDB 具体请看这里[2]

画一个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-path CSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

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 {
      
      position: absolute;
      clip: rect(0 100px 100px 50px);
      width: 100px;
      height: 100px;
    }

    
    .second .cir {
      position: absolute;
      width: 100px;
      height: 100px;
      background: skyblue;
      
      clip: rect(0 50px 100px 0);
      
      
      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如果不手动删除，那么将会一直保存在浏览器。所以我们在存储数据的时候，可以设置过期时间和创建的时间，当我们取出数据是，对比时间是否过期，过期将其删除。