【每日前端面经】2024-03-06

最新推荐文章于 2024-07-29 15:46:22 发布

ByeByeWorld02

最新推荐文章于 2024-07-29 15:46:22 发布

阅读量486

点赞数 9

分类专栏：每日前端面经文章标签：前端面试

本文链接：https://blog.csdn.net/m0_66681776/article/details/136498733

版权

每日前端面经专栏收录该内容

26 篇文章 2 订阅

订阅专栏

【每日前端面经】2024-03-06

欢迎订阅我的前端面经专栏: 每日前端面经

本期题目来源: 牛客

async / defer 区别

defer 的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到整个页面都解析完毕后再运行。因此，在 <script> 元素中设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行
async 属性与 defer 属性类似，都用于改变处理脚本的行为。建议异步脚本不要在加载期间修改 DOM。

defer 与 async 的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer 是“渲染完再执行”，async 是“下载完就执行”。另外，如果有多个 defer 脚本，会按照它们在页面出现的顺序加载，而多个 async 脚本是不能保证加载顺序的

get / post 区别

	GET	POST
后退按钮/刷新	无害	数据会被重新提交
书签	可收藏为书签	不可收藏为书签
缓存	可能会被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencode 或 multipart/form-data
历史	参数保留再浏览器历史中	参数不会被保留在浏览器历史中
数据长度限制	URL最大长度为2048字符	无限制
数据类型限制	只允许 ASII 字符	无限制
安全性	较差，发送的数据是 URL 的一部分	相对安全，参数不会被保存在日志中
可见性	数据在 URL 中对所有人都可见	不会显示在 URL 中

v-if / v-for 优先级

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名

v-for 优先级比 v-if 高，每次渲染 item 元素都会先进行判断。可以将外层包裹 template 再进行 v-if 判断

css 实现多行文本省略文字

单行省略

<body>
    <style>
        .single-line {
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
        }
    </style>

    <div class="single-line">
        1234567890
    </div>
</body>

两行省略

<body>
    <style>
        .double-line {
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>

    <div class="double-line">
        1234567890
    </div>
</body>

超出元素宽高省略

<body>
    <style>
        .over-line {
            height: 65px;
            word-break: break-all;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>

    <div class="over-line">
        1234567890
    </div>
</body>

Promise.all

function PromiseAll(promises: Array<Promise<any>>) {
    return new Promise<any>((resolve, reject) => {
        const total = promises.length;
        let current = 0;
        const results: Array<any> = [];
        promises.forEach((promise) => {
            promise.then((data) => {
                current += 1;
                results.push(data)
                if (current === total) resolve(results);
            }).catch((reason) => {
                reject(reason);
            });
        });
    });
}