2024年前端最全前端校招字节面试 第五篇(1)，面试靠背

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

• 第三题：用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:

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

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

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

---

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。