面试题总结一

曲折
57 阅读6分钟

1、浏览器的渲染机制

基本流程
  1. 解析html:浏览器解析html文档，构建dom树
  2. 解析css:浏览器解析css样式，构建cssom树
  3. 构建渲染树：将dom树与cssom树结合，生成渲染树（render tree）
  4. 布局：计算每个节点在屏幕上的位置和大小（这个过程也被称为回流）
  5. 绘制：将渲染树的节点绘制到屏幕上
重绘和重排（回流）
  • 重排：当元素的大小位置发生变化时，需要重新计算渲染树，就是重排，常见的样式有width、height、padding、margin、border
  • 重绘：改变dom样式不改变dom大小形状时，会触发重绘，重绘的性能大于重排

如何减少重排？

  • 使用translate替代top
  • 使用class替代style
  • 使用visibility替代display:none，前者重绘，后者回流

如何根据浏览器渲染机制加快首屏速度？

  • 优化文件打下：html和css的加载和解析会影响渲染树的生成，影响首屏显示速度，可以通过优化文件大小，减少css文件层级来优化
  • 避免资源文件下载阻塞文档解析：当解析到<script>标签时，会阻塞文档解析，所以将<script>放到html文档最下面，或着加上async进行异步下载

2、浏览器的垃圾回收机制

在js中创建变量、对象或者函数时，都会被存储在内存中。垃圾回收就是浏览器清理那些不再需要、无法访问的数据，回收她它们占用的内存空间，从而防止内存泄漏和程序性能下降。目前主流浏览器采用“标记-清除(Mark-Sweep)”算法为主。

js具有自动垃圾回收机制。

3、three.js三要素

场景、相机、渲染器

4、vue2与vue3的区别

  1. 根节点：vue2是单节点，vue3是多节点
  2. 组合式api和选项式api：选项式api中有data、menthod等，将代码逻辑分割开来，不方便后期维护；组合式api可以将代码逻辑放在一起
  3. vue3能更好的支持Ts
  4. 响应式系统的优化：vue2是通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者的模式来实现；vue3是使用proxy代理来实现的
  5. 生命周期，vue2的beforeCreate和created在vue3中是setup
  6. v-if和v-for的优先级：vue2中v-for大于v-if，且可以放在一起使用，vue3中v-if大于v-for，且不可以一起使用
  7. diff算法的优化：vue2中是遍历每一个虚拟节点，进行虚拟节点对比，返回一个patch对象，用来存储两个不同的节点，用patch记录去更新dom;vue3是初始化的时候就给每一个虚拟节点添加了一个patchFlags,只会比较patchFlags发生变化的节点，进行识图更新，对于没有变化的，直接复用

5、如何看待前端工程化

前端工程化是一个种系统化的方法论，通过引入自动化工具、开发规范、模块化设计等工程理念，将前端开发的各个环节连接起来。

  1. 项目的构建：使用自动化构建工具webpack、vite等来处理和打包前端资源（js、css、图片等），简化开发流程；
  2. 模块化开发：如es模块、commonJs等奖代码拆分为更小的、更易于管理的部分，每个模块负责单一的功能，提高代码复用率；
  3. 组件化开发：独立且可复用的UI构建块，封装自身的逻辑和样式，在不同的页面或者应用之间共享
  4. 版本控制：利用git或其他版本控制系统来跟踪代码的变化历史，方便团队成员之间的协作开发
  5. 持续集成/持续部署（CI/CD）：设置CI/CD流程自动化测试、构建和部署过程
  6. 静态代码分析：通过ESLint、Prettier等工具进行代码的风格规范
  7. 性能优化：优化web应用的加载速度和运行性能，如图片懒加载、服务端渲染（SSR）、客户端缓存策略、减少HTTP的请求次数、使用CDN分发静态资源等
  8. 文档的生成与维护：包括一些API文档、开发架构设计文档
  9. 依赖管理：常用工具npm等
  10. 单元测试与集成测试

6、前端组件封装思路

7、微前端的间隔机制

8、websocket的心跳机制和断线重连

  1. 在客户端连接成功后开启心跳检测；
  2. 心跳处理函数的内部使用定时器延时触发向服务端发送消息的方法；
  3. 服务端返回消息证明是成功连线状态，就继续调用心跳检测方法；
  4. 但如果在规定的时间内客服端没有收到回复，则说明断线了，此时触发客服端websocket的连接关闭回调函数；
  5. 在关闭函数中，关闭断掉的连接后再重新连接websocket，如果连接失败继续触发连接关闭回调函数，一直循环
  6. 等断线连接起来后，再在客户端中连接成功的回调中开始心跳检测。

9、windicss原子化的好处，为什么选择windicss

  1. 性能优化和按需生成
    • windicss在编译速度和运行时性能上显著优秀于tailwindcss；
    • 通过按需生成css的特性，windicss仅打包项目中实际使用的样式类，大幅减少生成的css体积；
    • 热更新响应更快，特别是大型项目中，windicss能显著缩短时间
  2. windicss支持属性模式，允许将多个类合并到独立的html属性中，使代码更简洁易读
  3. 支持动态断点语法，如@sm表示max-width，无需繁琐的配置文件就可灵活调整响应式设计
  4. windicss与vite等工具深度集成

10、防抖和节流

  • 防抖：在事件触发n秒后再执行操作，如果在n秒内又被触发，则重新记时
function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
  • 节流：在单位时间内只触发一次函数，如果在这个时间内多次触发，也只有一次生效
function throttle(fn, delay) {
 let timer = null;
 return function (...args) {
   if (timer) return;
   timer = setTimeout(() => {
     fn.apply(this, args)
     timer = null
   }, delay)
 }
}

11、promise

promise是一种异步编程的解决方案，用于处理异步操作

1、promise的状态

  • pending(进行中)：异步操作未完成
  • resolved(已完成)
  • rejected(已失败) 状态一旦从pendingz转为resolved或者rejected，无法再次改变

2、一些常用方法

  • promise.all():接收promise数组，多个promise任务同时执行，全部成功，以数组的形式返回结果，有一个失败，则只返回rejected任务结果
  • promise.race():接收promise数组，多个promise同时执行，返回最先执行的结果，不能是成功还是失败
avatar
文章
阅读
粉丝