字节面试问题

实现三列布局的方法

第一种：可以使用浮动+margin

第二种：浮动+BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

<style>
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: green;
    }
    // 通过margin
    .main {
        margin-left: 200px;
        margin-right: 200px;
        height: 200px;
        background: darkblue;
    }

    // 通过BFC
    .main {
        ovflow: hidden;
        height: 200px;
        background: darkblue;
    }
</style>

第三种：flex布局

flex: 1的实现：代表了子项目将会占据所有的空闲空间

flex: 1其实是代表三个属性的简写，flex-grow、flex-shirnk、flex-basis

flex-grow: 该属性定义项目放大的比例，取值越大，代表向父级索取的宽度越大，默认值是1

flex-shirnk: 该属性代表项目缩小的比例，取值越大，代表缩小的比例越大，默认值是1

flex-basis: 该属性代表每个弹性盒子在主轴方向上所占用的空间大小，默认值0%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

<style>
    .box {
        display: flex;
    }
    .left {
        width: 200px;
        height: 200px;
        background: red;
    }
    .right {
        width: 200px;
        height: 200px;
        background: green;
    }
    .main {
        flex: 1;
        height: 200px;
        background: rgb(194, 12, 139);
    }
</style>

第四种：定位+margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

<style>
    .box {
        position: relative;
    }
    .left {
        position: absolute;
        left: 0;
        width: 200px;
        height: 200px;
        background: red;
    }
    .right {
        position: absolute;
        right: 0;
        width: 200px;
        height: 200px;
        background: green;
    }
    .main {
        margin-left: 200px;
        margin-right: 200px;
        height: 200px;
        background: rgb(194, 12, 139);
    }
</style>

第五种：table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

<style>
    .box {
        display: table;
        width: 100%;
    }
    .left {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: red;
    }
    .right {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: green;
    }
    .main {
        display: table-cell;
        height: 200px;
        background: rgb(194, 12, 139);
    }
</style>

第六种：flex+calc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

<style>
    .box {
        display: flex;
        width: 100%;
    }
    .left {
        width: 200px;
        height: 200px;
        background: red;
    }
    .right {
        width: 200px;
        height: 200px;
        background: green;
    }
    .main {
        width: calc(100% - 400px);
        height: 200px;
        background: rgb(194, 12, 139);
    }
</style>

JSON转化函数时的方法

浏览器缓存

什么是缓存？

缓存的原理是在首次缓存之后保存一份请求资源的响应副本，当用户再次发起相同请求时，如果判断缓存命中则拦截请求，将之前存储的响应副本返回给用户，从而避免从新向服务器发送请求

浏览器缓存主要分为两块，协商缓存和强制缓存

强制缓存

不会向服务器发送请求，直接从缓存中读取资源

使用强制缓存在响应头中的配置

express：响应头中设置过期时间，如果在过期时间之内，则命中缓存

cache-control：有以下几个值的选项

max-age：在设置的时间之内，不会再次发起请求

-no-cache：可以在本地进行缓存，但每次发请求时，都要向服务器进行验证，如果服务器允许，才能使用本地缓存。

-no-store：禁止浏览器缓存数据

-public：可以被所有用户缓存资源，包括终端用户和中间的代理服务器

-private：只能被终端的浏览器用户缓存

注：

1、express设置以分钟为单位的过期时间，max-age指明以秒为单位的过期时间

2、express优先级比cache-control低

协商缓存

需要向服务器发送请求，服务器会根据请求头中的参数来判断是否命中缓存，如果命中则返回304，通知浏览器从缓存中读取数据，如果没有命中，则重新请求资源，协商缓存可以解决强制缓存下资源不更新的问题

第一种方式：Last-Modify/If-Modify-Scene

浏览器第一次请求服务器时，服务器会在响应头中返回一个Last-Modify,是资源最后的修改时间标识，单位是秒，当浏览器再次向服务器发送请求时，会在请求头中加上If-Modify-Scene,如果If-Modify-Scene等于服务器中文件最后的修改时间，则返回给浏览器304，使用缓存，否则重新返回资源

第二种方式：Etag/If-None-Match

浏览器第一次请求服务器时，服务器会在响应头中返回一个Etag,是资源文件的hash值，当浏览器再次向服务器发送请求时，会在请求头中加上If-None-Match,如果If-None-Match等于服务器中文件中的hash，则返回给浏览器304，使用缓存，否则重新返回资源

Etag和If-None-Match的区别？

1、在精度上，Etag要优于If-None-Match，If-None-Match的时间单位是秒，如果在一秒内多次改动文件，那么他们的Last-Modify并没有体现出修改，而Etag每次都会改变，确保了精度

2、在性能上，If-None-Match要优于Etag，If-None-Match只需要记录时间，Etag则需要根据算法算出hash

3、在优先级上，服务器会优先考虑Etag

浏览器渲染

推荐看这位同学的总结，很全面：浏览器渲染流程 - 知乎

渲染器的核心就是把HTML、css、js转换为用户可以与之交互的网页，

按照渲染时间的顺序，流水线可以分为以下几个步骤：构建DOM树、样式计算、布局、分层、绘制、分块、光栅化、合成

1、构建DOM树

痛过HTML渲染器将HTML字节流转换为DOM树

2、解析css,生成cssom树

3、根据生成的DOM树和cssom构建一个渲染树

4、接下来是布局（回流），来计算每个模块的大小、颜色和位置

5、最后一步就是绘制，根据计算得出来的页面绘制到浏览器上

通过渲染过程可做的性能优化

1、减少http请求的次数

2、资源合并压缩

3、减少dom操作，否则会引起回流和重构，多操作js

inline-block会有什么问题

1、使用display: inline-block布局块级元素，会使元素之间有空隙

解决方法：

1、可以使元素写在一行，解决空隙

2、或者在父元素中将字号设置为0

2、也有可能会出现上下错位的问题

解决办法：

1、让两个div高度相同

2、使用vertical-align: top进行对齐

content-type的值

异步任务的执行时间可能会超过所设置的时间

借鉴博文：setTimeout不准时？你大意了_onmessage时间不稳定-CSDN博客

解决超时第一种方法：

思路：获取最开始的时间，然后轮询去查看，如果时间符合就执行

   const loop = (delay, cb, startTime) => {
        const now = Date.now()
        if (now - startTime > delay) {
            cb()
            return
        } else {
            loop(delay, cb, startTime)
        }
    }
    const startTime = Date.now()
    loop(5000, cb, startTime)

解决超时第二种方法：Web Worker

解决超时第三种方法：window.requestAnimationFrame()

思路：告诉浏览器你需要执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数，回调函数执行次数一般是每秒60次，也就是16.8ms执行一次

   const loop = (delay, cb, startTime) => {
        const now = Date.now()
        if (now - startTime > delay) {
            cb()
            return
        } else {
            requestAnimationFrame(loop(delay, cb, startTime))
        }
    }
    const startTime = Date.now()
    loop(5000, cb, startTime)