首页 > 其他分享 >面试题速刷 - 实战会碰到的一些问题

面试题速刷 - 实战会碰到的一些问题

时间:2024-10-18 20:21:18浏览次数:1  
标签:实战 面试题 渲染 速刷 模式 列表 组件 路由 加载

  1. 页面如何进行首屏优化
  • 路由懒加载
  • 服务端渲染SSR

    只获取HTML就可以,里面包含data。
  • APP预取(啥东西)

    APP结合H5、结合JS bridge
  • 分页
  • 图片懒加载 lazyload
  • Hybrid

    总结:
  1. 后端一次性返回10w条数据,你会如何渲染?
    本身后端设计方案的设计就不合理!非要的话......
  • 自定义中间层:
  • 虚拟列表:很复杂,借助第三方lib。快速滚动会频繁创建、频繁销毁DOM。


  1. 前端常用的设计模式并说明使用场景?
    优秀的程序员并需要了解设计模式!好。
  • 设计原则:组件结构、API、数据结构...
    开放封闭原则,对扩展开放(可扩展新功能的,),对修改封闭(对现有功能保持原子性不要动了)。
  • 工厂模式

    在工厂函数内部写逻辑。
  • 单例模式 一个类只能有一个实例。


  • 代理模式

  • 观察者模式
  • 发布订阅:自定义事件

  • 装饰器模式 @testable 在不改变自身对象的基础上,在程序运行期间给对象动态地添加方法。了解一下nest.js
  1. 观察者模式和发布订阅模式的区别?

    观察者模式的 Subject和Observer不需要中间媒介。如addEventListner
    发布订阅模式Publisher和Observer互不认识,需要中间媒介。如EvenBus自定义事件。

  2. 实际工作中对Vue做过哪些优化?

  • v-if和v-show
  • v-for使用key(其实一定要用)
  • computed
    缓存未读消息列表
  • keep-alive缓存组件
  • 异步组件:import引入体积比较大的组件
    defineAsyncComponent

  • 路由懒加载;项目比较大的情况下拆分路由,保证首页先加载。
  • 服务端SSR
    可使用Nuxt.js; 按需优化,使用SSR成本比较高。
    重点:性能优化要按需进行,不要为了优化而优化。
  1. 使用Vue的过程遇到哪些坑?
  • 内存泄漏
    组件内的全局变量、全局事件、全局定时器、自定义事件绑定之后没有及时销毁导致。

  • Vue2响应式的缺陷(Vue3解决了)

    ☝无法直接修改数组。push pop是ok的但是直接arr[index]修改不了。

  • 路由切换时 scroll 到顶部

    问题:比如某个新闻列表页,一开始是第一页内容,往上滑就加载第二页,再往上滑加载第三页。点进一条新闻详情页面,SPA页面其实是路由的切换,此时左边的的列表页已经销毁了。当从详情页返回到刚才的列表页时,列表页又会重新刷新渲染第一页,第二页,第三页...

    解决办法: 缓存下来

  1. 如何统一监听Vue组件报错?
  • window.onerror (JS)

    在App.vue中,mounted内写。但是try catch捕获的错误不会上报给window.onerror。、

  • errorCaptured生命周期
    vm:组件信息

  • errorHandler:在main.js中进行配置,一旦监听到错误会阻止向window.onerror传播。

    还有warnHandler(警告)

-异步错误:Vue自己监听不了。
总结:

相关文章

  • HFSS实战项目——高带外抑制特性SIW带通滤波器
    1.引言高频应用中,由于波长过小,过于高的容差要求常常使微带线失效。波导就常用于高频情况,但是波导体积大,不易于集成。所以产生了一种新的观点:基片集成波导SIW。SIW是介于微带与介质填充波导之间的一种传输线。 SIW兼顾传统波导和微带传输线的优点,可实现高性能微波毫米波平面......
  • MyBatis入门及sql语句实战
    目录概述环境的配置MyBatis操作步骤总结创建UserMapper.java映射器接口创建UserMapper.xml映射文件在mybatis-config.xml环境配置文件中添加UserMapper.xml映射文件路径在MyBatisDemo中编写MyBatis测试代码MyBatis环境搭建MyBatis查询操作CURD操作参数传递方式Mapper映射......
  • vue实战指南 vue中使用fetch读取本地txt文件
    vue实战指南vue中使用fetch读取本地txt文件基本概念与作用fetchAPI本地文件读取技术实现示例一:基本的fetch请求示例二:处理异步加载状态示例三:使用生命周期钩子示例四:读取多个文件示例五:使用Vuex管理文件内容实际工作中的一些技巧在Vue.js应用开发中,有时我们需要......
  • vue实战指南 vue刷新跳转当前页面
    vue实战指南vue刷新跳转当前页面基本概念与作用页面刷新页面跳转技术实现示例一:使用window.location.reload进行页面刷新示例二:使用VueRouter进行页面跳转示例三:使用编程导航实现页面跳转示例四:使用beforeEach导航守卫实现页面刷新示例五:结合Vuex管理刷新状态实际工......
  • 文本生成实战:从零开始搭建Code Llama环境助力开发效率
    文章目录前言1.本地部署TextgenerationWebUI2.安装CodeLlama大模型3.实现公网远程使用CodeLlama4.固定TextgenerationWebUI公网地址前言本篇文章介绍如何在本地部署TextgenerationWebUI并搭建CodeLlama大模型运行,并且搭建CodeLlama大语言模型,结合C......
  • 一次彻底掌握数据中心级的JVM调优实战经验
    出现内存溢出的场景通常发生在应用程序中存在内存泄漏、对象生命周期过长、对象频繁创建但未能及时回收等问题。以下是几个真实的业务场景,结合内存溢出问题,并从多个角度提出优化方法,来提高内存使用效率。场景1:大量业务数据缓存导致堆内存溢出场景描述:一个企业级Web应用使用......
  • 【AI绘画】Stable Diffusion实战ControlNET插件(让小姐姐摆出你要的pose!)
    大家好我是安琪!SD插件ControlNET的诞生,无法自定义姿势成为过去,自定义姿势;根据线稿、骨骼、其他图片生成全新的图,AI绘图自主可控;包括边缘检测,深度信息估算;姿态,手势检测;分割等等场景:个人pose图,模特换装;装修出图;设计草图快速复原;颜色快速更换等等此扩展用于AUTOMATIC1111的......
  • C++ 基础-面试题01(C和C++区别、C结构体和C++结构体区别、C和C++ static区别、a和&a区
    1.C和C++的区别特性CC++编程范式面向过程编程面向对象编程+面向过程编程+泛型编程类和对象不支持类和对象支持类和对象,封装、继承、多态等特性标准库标准库有限,如stdio.h、stdlib.h丰富的标准库,如STL(容器、算法)函数和运算符重载不支持支持内存管理手动管理,使用malloc......
  • C++ 基础-面试题02(final和override关键字、sizeof和strlen区别、strcpy、sprintf 与me
    1.final和override关键字在C++中,final和override关键字是在面向对象编程中用于处理类的继承和多态的。它们主要用于管理派生类和虚函数,提供额外的安全性和代码可读性,防止意外的函数重写或错误的重载行为。1.final关键字final关键字用于防止进一步的继承或函数重......
  • Python爬虫:从入门到精通实战指南
    在数字化时代,数据已成为最宝贵的资源之一。Python,以其简洁的语法和强大的库支持,成为了编写爬虫程序的理想选择。Python爬虫可以帮助我们自动化地从网页或API中提取数据,为数据分析、机器学习、研究和开发等多种应用提供了原材料。本文将为您提供一个Python爬虫从入门到精通的实......