前端面试题宝典

小厂的“死亡”一面

简介：看够了各种大厂面经，今天看看小厂的是什么口味
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

大家好，今天的文章，由团队金牌导师uncle13带来。看够了各种大厂的面经，今天换换口味，来品尝下小厂的一面是怎么个节奏。

最近的前端就业有点惨淡，工作不到一年，被裁员。休息了半个月，准备面试一个月，投递简历一个月，就面试了两家，都挂在了一面上面。下面是一个小厂的前端题，简单总结了下 ，希望对大家有所帮助。

1. HTML代码第一行的作用

回答要点:

  • <!DOCTYPE html>声明了文档类型和HTML版本，对于HTML5来说，它告诉浏览器这是一个HTML5文档。
  • 它是HTML文档的第一行，帮助浏览器正确地渲染页面。
  • 它不是HTML标签，但对页面渲染模式有重要影响，确保浏览器以标准模式而非怪异模式（quirks mode）来解析页面。

2. HTML里的meta属性

回答要点:

  • Meta标签提供了关于HTML文档的元数据，如文档描述、关键字、作者、字符集声明等。
  • 常见用途包括设置页面编码（<meta charset="UTF-8">）、页面描述（<meta name="description" content="...">）、关键字（<meta name="keywords" content="...">）、控制页面缩放（<meta name="viewport" content="width=device-width, initial-scale=1.0">）等。

3. 聊聊CSS中的布局方式

回答要点:

  • 静态布局（Static Layout）：传统布局方式，固定宽度。
  • 弹性盒布局（Flexbox Layout）：一维布局模型，非常适合组件和小范围内的布局调整。
  • 网格布局（Grid Layout）：二维布局系统，用于更复杂的页面布局。
  • 绝对定位（Absolute Positioning）：元素脱离文档流，通过指定位置进行布局。
  • 浮动布局（Floats）：通过浮动元素进行布局，但已逐渐被Flexbox和Grid替代。

4. 聊聊Flexable弹性布局

回答要点:

  • Flexbox是一个一维布局方法，主要思想是让容器能够自动调整子元素的宽度/高度，以最佳方式填充可用空间。
  • 核心概念包括容器（flex container）和项目（flex item）、主轴（main axis）和交叉轴（cross axis）、flex-grow、flex-shrink、flex-basis等。
  • 优势在于提供了更灵活的对齐方式、可以动态地改变项目的大小和顺序，以及简化了布局代码。

5. rem实现移动端适配的原理是什么

回答要点:

  • rem是相对于根元素（html）的字体大小的单位。
  • 通过在CSS中设置根元素的字体大小（通常通过媒体查询根据屏幕宽度动态设置），可以使rem单位的大小随着屏幕宽度的变化而变化。
  • 使用rem作为布局单位，可以实现不同屏幕尺寸下的自适应布局。

6. 浏览器缓存

回答要点:

  • 浏览器缓存减少了服务器请求和响应时间，提高了页面加载速度。
  • 缓存类型包括强缓存（如Expires、Cache-Control）和协商缓存（如Last-Modified、ETag）。
  • 缓存策略需要根据实际业务场景和性能需求来制定，包括缓存时间、缓存内容等。

7. 小程序和H5的区别

回答要点:

  • 开发环境：小程序有专门的开发工具和IDE，而H5通常使用Web开发工具和语言。
  • 运行环境：小程序运行在特定的小程序平台上，而H5运行在浏览器中。
  • 用户体验：小程序通常具有更快的启动速度和更好的性能，而H5可能受到浏览器兼容性和网络延迟的影响。

8. 为什么要使用uniapp开发小程序

回答要点:

  • 跨平台：uniapp支持一次编写，发布到iOS、Android、H5、以及各种小程序等多个平台。
  • 开发效率高：提供了丰富的组件和API，降低了开发成本和时间。
  • 易于维护：统一的代码库，便于管理和维护。

9. 为什么Vue的data要写成函数的形式而不是写成对象

回答要点:

  • 当组件被多次复用时，如果data是一个对象，那么所有的实例将共享同一个data对象，这会导致数据污染。
  • 当data是一个函数时，每次创建新的组件实例时，都会调用该函数并返回一个新的对象，确保了每个实例都有自己独立的数据副本。

10. 组件开发的第一要素是什么

回答要点:

  • 组件的复用性：组件应该设计为可复用的，以便在多个不同的场景或项目中重复使用。

  • 组件的可维护性：组件的代码应该清晰、易于理解，并且便于维护和更新。

  • 组件的独立性：组件应该尽量独立，避免与其他组件或全局状态产生不必要的耦合。

  • 明确的功能划分：每个组件应该有明确的功能或目的，这有助于保持代码的整洁和组织性。

11. 在开发组件的过程中如何让组件的耦合度降低

回答要点:

  • 使用清晰的接口和API：定义明确的输入和输出，确保组件之间的交互清晰且易于理解。
  • 依赖注入：通过依赖注入的方式，将组件的依赖项在组件外部配置和注入，减少组件内部对外部资源的直接引用。
  • 遵循单一职责原则：确保每个组件只负责一个功能或一组紧密相关的功能，避免功能过于复杂的组件。
  • 组件间通信通过事件或状态管理：使用事件系统或全局状态管理库（如Vuex、Redux）来传递数据和状态变更，而不是直接修改其他组件的内部状态。

12. less和sass的区别

回答要点:

  • 语法：Sass使用缩进语法（SCSS）或原始语法（Sass），而Less使用类似CSS的语法。
  • 功能：两者都提供了变量、嵌套规则、混合（Mixins）、函数等高级功能，但Sass在功能上可能更为丰富和强大。
  • 社区支持：Sass（特别是SCSS）在Web开发社区中拥有更广泛的用户基础和更多的文档、教程及插件。

13. less和sass只能在项目部署后一定会剔除吗？

回答要点:

  • less和sass是CSS预处理器，它们允许使用变量、嵌套规则等高级功能来编写更加模块化、可维护的CSS代码。
  • 在项目构建过程中，预处理器会将less或sass文件编译成普通的CSS文件，这些CSS文件才是最终部署到服务器上的内容。
  • 因此，less和sass文件本身不会直接部署到生产环境中，而是被编译后的CSS文件所替代。

14. 聊聊webpack

回答要点:

  • webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。
  • 它将应用程序的所有依赖项（包括JavaScript、CSS、图片等资源）打包成一个或多个bundle，以便在浏览器中快速加载。
  • webpack的工作流程包括入口（entry）、输出（output）、loader、plugin等关键部分。
  • loader用于处理非JavaScript文件（如CSS、图片等），将它们转换为浏览器可识别的格式。
  • plugin用于执行范围更广的任务，如打包优化、资源管理和环境变量注入等。

15. 事件循环机制

回答要点:

  • JavaScript是单线程的，但它通过事件循环（Event Loop）机制来支持异步操作。
  • 事件循环包含调用栈（Call Stack）、事件队列（Event Queue）和任务队列（Task Queue，也称为宏任务队列）以及微任务队列（Microtask Queue）。
  • 当执行同步代码时，函数被依次添加到调用栈中执行。
  • 遇到异步操作时（如setTimeout、Promise等），相应的回调函数会被添加到事件队列或任务队列中等待执行。
  • 当前执行栈为空时，事件循环会从任务队列中取出第一个任务执行，执行过程中产生的微任务会被添加到微任务队列中。
  • 当当前任务执行完毕后，会立即执行所有微任务队列中的任务，然后再从任务队列中取出下一个任务执行，如此循环。

这套面试题覆盖了前端开发的基础知识、进阶技能以及部分现代开发工具和框架的理解，整体来说是一套较为全面且具有一定深度的面试题集。

  1. 全面性：面试题涵盖了HTML、CSS、JavaScript基础、前端框架（Vue）、预处理器（Less/Sass）、构建工具（Webpack）以及移动端开发等多个方面，能够较全面地评估面试者的前端技能栈。

  2. 深度与广度：不仅考察了面试者对基础知识的掌握程度（如HTML和CSS的基本概念和用法），还涉及了更进阶的知识点，如Flexbox布局、rem适配、浏览器缓存机制、Webpack配置以及JavaScript的事件循环机制等，这有助于筛选出具有深厚技术功底和学习能力的候选人。

  3. 实战导向：部分题目（如组件开发、降低耦合度、uniapp的使用等）注重面试者的实战经验和问题解决能力，能够反映出面试者在实际项目开发中的表现。

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者前端面试题宝典的同学，如果近期准备或者正在找工作，千万不要错过，题库主打无广告和更新快哦~。

我们团队的前端辅导也做了将近2年了，陆陆续续辅导了几百位同学，分享一下最近几个结束辅导的回访。