2024前端项目问题

爱上诺曼底
192 阅读4分钟

1. H5页面如何进行“首屏”优化？

  • 路由懒加载

    • 适用于SPA（不用用MPA）
    • 路由拆分，优先保证首页加载

  • 服务端渲染SSR Nuxt.js（Vue）

    • 传统的前后端分离（SPA）渲染页面的过程复杂
    • SSR渲染页面过程简单，性能好
    • 如果是纯H5页面，SSR是性能优化的终极方案

  • 图片预加载 lazyLoad

    • 针对详情页
    • 默认只展示文本内容，然后触发图片懒加载
    • 注意：提前设置图片尺寸，尽量只重绘不重排

  • 分页

  • Hybrid

image.png

  • APP 预取

image.png

image.png

2. 后端一次性返回10w条数据，该如何渲染？

  • 设计不合理
  • 解决方案：

    • 自定义中间层（后端的问题，首先用后端的思维去解决）

      • 自定义nodejs中间层，获取并拆分这10w条数据
      • 前端对接nodejs中间层，而不是服务端
      • 成本比较高

    • 虚拟列表（无奈的选择，实现复杂而效果不一定好）

      • 只渲染可视区域DOM
      • 其他隐藏区域不显示，只用<div>撑起高度
      • 随着浏览器滚动，创建和销毁DOM
      • 虚拟列表实现起来非常麻烦，可借助第三方lib Vue-virtural-scroll-list

image.png

3. 前端常用的设计模式有哪些？并说明使用场景

image.png

  • 设计原则

    • 最重要的思想：开放封闭原则
    • 对扩展开放
    • 对修改封闭

  • 工厂模式

    • 用一个工厂函数，来创建实例，隐藏new
    • 如：jQuery $函数

  • 单例模式

    • 全局唯一的示例（无法生成第二个）
    • 如Vuex中的store
    • 如全局唯一的dialog modal

  • 代理模式

    • 使用者不能直接访问对象，而是访问一个代理层
    • 在代理层可以监听get set 做很多事情
    • 如ES6 Proxy 实现Vue3响应式

  • 观察者模式

image.png

  • 发布订阅模式

image.png

image.png

  • 装饰器模式
    • 原功能不变，增加一些新功能（AOP面向切面编程）
    • ES6 和 TypeScript的Decorator语法
    • 类装饰器 方法装饰器

4. 你在实际工作中做过哪些Vue优化？

  • v-if 和 v-show

    • v-if彻底销毁组件
    • v-show使用CSS隐藏组件
    • 大部分情况下使用v-if更好，不要过度优化

  • v-for使用key

image.png

  • 使用computed缓存

image.png

  • keep-alive缓存组件

    • 频繁切换的组件，如tabs
    • 不要乱用，缓存太多会占用内存，且不好debug

  • 异步组件

    • 针对体积比较大的组件，如编辑器、复杂表格、复杂表单等
    • 拆包，需要时异步加载，不需要时不加载
    • 减少主包的体积，首页会加载更快

  • 路由懒加载

    • 项目比较大，拆分路由，保证首页先加载

  • 服务端渲染SSR

    • 可使用Nuxt.js
    • 按需优化，使用SSR成本比较高

image.png

5. 你在使用Vue时遇到过哪些坑？

  • 内存泄漏

    • 全局变量、全局事件、全局定时器，没有销毁
    • 自定义事件，没有销毁

  • Vue2响应式的缺陷（Vue3不再有）

    • data新增属性用Vue.set
    • data删除属性用Vue.delete
    • 无法直接修改数据 arr[index] = value

  • 路由切换时，scroll到顶部

    • SPA的通病，不仅是Vue
    • 如列表页，滚动到第二屏，点击进入详情页
    • 再返回到列表页（此时组件重新渲染）就scroll到顶部
    • 解决：
      • 在列表页缓存数据和scrollTop值
      • 当再次返回列表页时，渲染组件，执行scrollTo(xx)
      • 终极方案：MPA + App WebView

6. 如何统一监听Vue组件报错？

  • window.onerror
    • 全局监听所有JS错误
    • 但它是JS级别的，识别不了Vue组件信息

image.png

  • errorCaptured 生命周期
    • 监听所有下级组件的错误
    • 返回false会阻止向上传播

image.png

  • errorHandler配置
    • Vue全局错误监听，所有组件错误都会汇总到这里
    • 但errorCaptured返回false，不会传播到这里

image.png

  • 异步错误
    • 异步回调里的错误，errorHand了让监听不到
    • 需要使用window.onerror

image.png

image.png

7. 工作中遇到哪些项目难点，是如何解决的？

image.png

image.png

image.png

8. SPA和MPA该如何选择？

  • SPA Single-page Application 单页面应用
    • 页面较多，一个页面展示不完
    • 以操作为主，非展示为主
    • 适合一个综合Web应用
    • 应用场景
      • 大型后台管理系统
      • 知识库，如语雀、石墨文档
      • 比较复杂的WebAPP，如外卖H5
  • MPA Multi-page Application 多页面应用
    • 功能比较少，一个页面展示的完
    • 以展示为主，操作较少
    • 适合一个孤立的页面
    • 应用场景
      • 分享页，如腾讯文档分享出去
      • 新闻详情页，如新闻App的详情页，微信公众号发布的页面
  • 默认情况下，Vue React都是SPA
avatar
文章
阅读
粉丝