前端校招字节面试 第五篇

• 能否从渲染原理来解释呢？

• 使用transform性能好的原因

• 第二题：动画？补间动画实现

• 第三题：用css画一个扇形？

• 第四题：触发了几次回流几次重绘

• 第五题：输出，为什么，有几个作用域

• 第六题：输出什么，async/await原理是什么，把下面这段代码翻译成Promise

• 第七题 src和href的区别

• • • 1 请求资源类型不同

• 2 作用结果不同

• 3 浏览器解析方式不同

• 第八题：A网站登录，B,C网站也有可以直接登录。

前端校招字节面试 第五篇

===============================================================================

第一题：说一下这三个div的布局

---

child1 content

child2 content

child3 content

.child2{

transform:translateY(200)

}

A：

刚开始是正常位置的，因为没有添加单位，我的天啊！

添加了单位之后，下移两百px。

为什么第三个div没有顶上去到第二个div的位置呢？

因为没有脱离文档流，它还是占据原来的位置

能否从渲染原理来解释呢？

由于transform是位于Composite Layers层

GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。

你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。

绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的。普通文档流就是默认复合图层，不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。

使用transform性能好的原因

俩个：

1. 因为不用占用主线程。是在GPU上上进行合成的。

2. 由于是位于Composite Layers层，从而避免了layout，避免了重排和重绘

第二题：动画？补间动画实现

---

发现字节好喜欢问动画， 几乎每场都会给个动画场景，然后问怎么实现。

补间动画就是指控制最开始的状态和最末的状态的动画，中间的状态由浏览器自动帮我们计算生成。

transition动画最主要的属性是transition属性，它其实是4个属性的缩写。

第三题：用css画一个扇形？

---

这个有意思的是，border-color的参数从一个到四个分别是什么情况

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

实例:

border-color:红，绿，蓝,粉红色;

上边框是红色

右边框是绿色

底部边框是蓝

左边框是粉红色

border-color：红，绿，蓝;

上边框是红色

左，右边框是绿色

底部边框是蓝

border-color：红，绿;

顶部和底部边框是红色

左右边框是绿色

border-color：红色;

所有四个边框是红色

第四题：触发了几次回流几次重绘

---

let el = document.getElementById(‘app’);

el.style.width = (el.offsetWidth+1) + ‘px’;

el.style.width = 1 + ‘px’

A:

这个我觉得是有意思的问题，独立分成一篇文章：

字节前端提前批面试题：下触发了几次回流几次重绘

第五题：输出，为什么，有几个作用域

---

var name = ‘World!’;

(function () {

if (typeof name === ‘undefined’) {

var name = ‘Jack’;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！