03-14 17:38 已编辑腾讯_cdg_后端研发

关注

字节跳动前端一面解析（关键问题）

嗨～我是可拟雀，一个全栈开发工程师，毕业于某985大学，目前供职于bat某大厂核心部门后端。每天分享最新面经答案，希望在大环境不好的当下能帮到你，让你多积累面试经验。免费分享个人学习2个月速通大厂路线（请看认证标），需要面经合集的请私信我～

1. 为什么选择学习前端

2. PC端和移动端项目CSS的适配区别

答：设备屏幕尺寸和分辨率：PC端设备通常有较大的屏幕尺寸和较高的分辨率，而移动端设备则屏幕尺寸较小，分辨率也相对较低。因此，在CSS适配时，移动端项目需要更多地考虑屏幕适配和分辨率适配，以确保页面在不同设备上的显示效果一致。

浏览器兼容性：PC端项目需要考虑各种浏览器的兼容性，包括IE、Firefox、Chrome等。而移动端项目则主要关注主流移动设备上的浏览器，如Chrome、Safari和Android的默认浏览器等。因此，在编写CSS时，移动端项目可能不需要考虑像PC端那样多的浏览器兼容性问题。

交互方式：PC端通常使用鼠标和键盘进行交互，而移动端则主要通过触摸屏幕进行交互。因此，在移动端项目中，CSS可能需要更多地考虑触屏事件的处理，如点击、滑动等。

动画和特效：由于移动端设备的性能相对较弱，因此在处理动画和特效时，移动端项目可能需要更多地考虑性能和效率。一般来说，移动端项目更倾向于使用CSS3来实现动画和特效，因为CSS3具有更高的效率和更好的兼容性。

3. rem是怎么设置的，手动算的还是用了库

4. rem和em的区别？

相对性质：rem是相对于根元素（通常是元素）的字体大小，而em是相对于父元素的字体大小。这意味着，如果你改变了根元素的字体大小，所有使用rem单位的元素都将相应地调整大小。而对于使用em单位的元素，只有当其父元素的字体大小改变时，它们的大小才会改变。利用这个性质可以结合响应式设计思考。

计算方式：rem单位的大小是相对于根元素的字体大小的倍数，而em单位的大小是相对于父元素的字体大小的倍数。因此，使用rem单位进行单位换算时，只需要知道根元素的字体大小即可。而使用em单位时，需要逐级计算每个父元素的字体大小。

简洁性和可维护性：使用rem单位可以简化样式表的编写，因为只需要设置根元素的字体大小，其他元素的大小都可以使用rem单位进行计算。这使得页面的维护更加方便。而使用em单位时，需要逐级设置每个父元素的字体大小，这可能会增加维护的复杂性。

响应式设计：由于rem单位的相对性质是固定的，因此在实现响应式设计方面，rem单位具有更大的优势。只需要在根元素上设置字体大小，就可以影响整个页面的尺寸。而em单位则需要考虑父元素的字体大小，这在实现响应式设计时可能会更加复杂。

兼容性：rem单位在一些旧版本的浏览器中不被支持，而em单位在所有浏览器中都被支持。因此，在使用rem单位时，需要考虑浏览器的兼容性。

5. 屏幕大小变化的时候是如何适配的？

多套资源适配：为不同尺寸和密度的屏幕提供多套可选的资源文件，确保应用在各种设备上都有良好的显示效果。

响应式布局：页面元素的位置和大小随屏幕尺寸变化而变化，通常使用百分比定位，预留可压缩空间以适应不同屏幕。

背景图像适配：采用Cover或Contain布局，保持图像宽高比，确保背景图像在各种屏幕上都能合适显示。

Flexbox或Grid布局：使用这些现代CSS布局技术，可以轻松调整元素的对齐、方向和顺序，或定义复杂的行和列结构，以适应不同屏幕尺寸。

6. 直接写rem计算屏幕的宽高是怎么获取的

先确定一个基准字体大小（通常是 16px），这将作为 rem 计算的基准。

确定一个比例，该比例将用于计算根元素字体大小与视口宽度的关系。

创建一个函数（如 setRootFontSize），用于计算并设置根元素（<html>）的字体大小。

在这个函数中，获取当前视口的宽度（window.innerWidth）。

使用定义的比例和基准字体大小来计算新的字体大小。

将计算出的字体大小应用到根元素上，使用 CSS 的 fontSize 属性。

初始化设置：

在页面加载完成后（window.onload），调用该函数来设置初始的根元素字体大小。

监听窗口变化：

添加事件监听器，以便在窗口大小发生变化时（resize 事件）重新调用上述函数，更新根元素的字体大小。

7. 其他移动端适配的方法？

一般来说rem+@media比较不错的一个方案了。

9. 逻辑像素和物理像素的区别

10. 浏览器渲染是如何解析渲染html文档的

11. css下载的过程会阻塞js的下载吗

12. 为什么阻塞？

13. 项目性能优化的方式

14. tree shaking的限制条件？比如模块化方式commonJS或ES6module的方法能实现吗

15. 原生JS 类的实现方法，比如new一个函数的过程

16. ES6的class编译完成后产物是什么样的，比如是函数or对象or数组

17. 可以用var a = new

18. ES6中继承的原理？

19. 原型链

20. function的prototype是什么

21. 闭包原理

22. ES5有哪些作用域，ES6呢

23. 项目中用过的异步方法怎么实现的

24. promise传的参数(resolve，reject)执行时机是异步还是同步的？

答：同步的。

25. 函数里有error会怎么样？

答：可以在外层catch或者then第二个参数处理

26. 必须catch吗，用then呢。

27. then后面再有then，是会进入resolve还是reject的回调

28. async await原理？

当一个函数被标记为 async 时，它总是返回一个 Promise 对象。这意味着你可以在 async 函数内部使用 return 语句返回一个值，这个值会被 Promise 对象解析，并且可以使用 then 方法添加回调函数来处理这个值。如果 async 函数内部抛出一个错误，那么返回的 Promise 对象会变为 reject 状态，并且这个错误对象会被 .then() 方法的第二个回调函数或者 .catch() 方法回调函数接收。

await 关键字只能在 async 函数中使用。它会暂停 async 函数的执行，等待 Promise 对象的解析结果，并且返回这个结果。如果 await 后面不是一个 Promise 对象，那么它会直接返回对应的值。如果 await 后面是一个非 Promise 对象，那么它会被转换为一个已解析的 Promise 对象。

29. await后面跟一个1或者字符串可以吗？

答：可以，会转为Promise对象。

30. Generator函数接触过吗？

答：大家可以思考一下如何实现扩展运算符，就是用到这个的。

31. 浏览器的Eventloop和node的Eventloop区别

32. 提示：事件循环

33. 异步任务挂起之后还可以给下一个用户提供服务吗，(挂起期间有新用户访问)？

答：当异步任务挂起时，它不会阻止为下一个用户提供服务。异步任务的设计目标就是在不阻塞主线程的情况下执行操作，以便程序可以继续处理其他任务。

当异步任务挂起时，通常是因为它在等待某些操作完成，比如等待网络请求、文件读写等。在等待期间，程序可以继续执行其他任务，包括为新的用户提供服务。

在Web中，这种并发处理是非常常见的。当一个用户发起请求时，服务器可能会启动一个异步任务来处理该请求，然后在任务完成之前继续处理其他用户的请求。这样，服务器就可以高效地处理多个用户的并发请求，而不会出现阻塞或延迟的情况。

所以node做后端其实很厉害，处理io密集的场景很不错。

34. git用到哪些命令多一些