顺丰面试题

1. 你擅长处理哪类问题

推荐回答
"我比较擅长处理以下几类前端问题:

  1. 性能优化:包括加载优化(代码分割、懒加载)、运行时优化(减少重排重绘)等

  2. 复杂组件开发:如表单联动、可视化图表等交互复杂的组件

  3. 工程化问题:Webpack配置优化、自动化部署等

  4. 跨平台兼容:解决不同浏览器和设备下的兼容性问题

2. 数组 for in 和 for of 区别

const arr = ['a', 'b', 'c'];
arr.customProp = 'd';// for in (遍历键名)
for (let key in arr) {console.log(key); // 输出: 0, 1, 2, 'customProp'console.log(typeof key); // 'string'
}// for of (遍历值)
for (let value of arr) {console.log(value); // 输出: 'a', 'b', 'c'
}

区别总结

特性for...infor...of
遍历内容可枚举属性(包括原型链)可迭代对象的值
适用对象对象/数组数组/Map/Set等可迭代对象
顺序保证不保证顺序保证迭代顺序
原型属性会遍历原型链上的属性只遍历对象自身值

3. 数组截取方法

常用方法

const arr = [1, 2, 3, 4, 5];// 1. slice (不改变原数组)
arr.slice(1, 3); // [2, 3]// 2. splice (改变原数组)
arr.splice(1, 2); // 返回[2, 3], arr变为[1, 4, 5]// 3. 扩展运算符
const [first, ...rest] = arr; // first=1, rest=[2,3,4,5]// 4. filter (条件截取)
arr.filter(x => x > 2); // [3,4,5]

对比选择

  • 需要原数组不变 → slice

  • 需要修改原数组 → splice

  • 需要条件筛选 → filter

4. 数组包含方法

检测方法

const arr = [1, 2, 3];// 1. includes (ES7)
arr.includes(2); // true// 2. indexOf
arr.indexOf(2) !== -1; // true// 3. some (复杂条件)
arr.some(x => x > 2); // true// 4. find/findIndex (对象数组)
const objArr = [{id:1}, {id:2}];
objArr.find(o => o.id === 2); // {id:2}

性能建议

  • 简单值判断用 includes 最直观

  • 对象数组用 some/find

  • 需要索引值时用 indexOf/findIndex

5. 类型检测的方法

全面方案

// 1. typeof (基本类型)
typeof 'str'; // 'string'
typeof 123; // 'number'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Symbol(); // 'symbol'
typeof 123n; // 'bigint'
typeof function(){}; // 'function'// 局限性
typeof null; // 'object'
typeof []; // 'object'// 2. instanceof (对象类型)
[] instanceof Array; // true
new Date() instanceof Date; // true// 3. Object.prototype.toString.call (最准确)
Object.prototype.toString.call(null); // '[object Null]'
Object.prototype.toString.call([]); // '[object Array]'// 4. Array.isArray (专用于数组)
Array.isArray([]); // true// 5. 自定义类型检查
class MyClass {}
const obj = new MyClass();
obj.constructor === MyClass; // true

最佳实践

  • 基本类型 → typeof

  • 数组 → Array.isArray()

  • 通用对象类型 → Object.prototype.toString.call()

  • 自定义类实例 → instanceof 或 constructor 检查

6. Vue 路由传参的方式

三种主要方式

1. 动态路由

// 路由配置
{path: '/user/:id',component: User
}// 跳转
router.push('/user/123')// 获取
this.$route.params.id // '123'

2. query 传参

// 跳转
router.push({path: '/user',query: { id: '123' }
})// 获取
this.$route.query.id // '123'// URL表现: /user?id=123

3. props 解耦

// 路由配置
{path: '/user/:id',component: User,props: true
}// 组件接收
export default {props: ['id']
}

高级用法

// 命名路由
router.push({ name: 'user', params: { id: '123' } })// 替换当前路由
router.replace({ path: '/user/123' })// 保持查询参数
router.push({ query: { ...this.$route.query, id: '123' } })

7. 插槽怎么传参

作用域插槽示例

<!-- 子组件 -->
<template><div><slot name="header" :user="user"></slot><slot :data="listData"></slot></div>
</template><script>
export default {data() {return {user: { name: 'John' },listData: [1, 2, 3]}}
}
</script><!-- 父组件使用 -->
<ChildComponent><template #header="{ user }"><h1>{{ user.name }}的头像</h1></template><template v-slot:default="slotProps"><div v-for="item in slotProps.data" :key="item">{{ item }}</div></template>
</ChildComponent>

Vue3 组合式API写法

<!-- 子组件 -->
<script setup>
const user = ref({ name: 'John' })
const listData = ref([1, 2, 3])
</script><template><slot name="header" :user="user"></slot><slot :data="listData"></slot>
</template>

8. 使用过哪些微前端

主流方案经验

1. qiankun (基于single-spa)

// 主应用
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'vueApp',entry: '//localhost:7100',container: '#subapp-container',activeRule: '/vue',}
]);start();// 子应用导出生命周期
export async function bootstrap() {}
export async function mount() {}
export async function unmount() {}

2. Module Federation (Webpack5)

// webpack.config.js (主应用)
new ModuleFederationPlugin({name: 'host',remotes: {app1: 'app1@http://localhost:3001/remoteEntry.js'}
});// 使用
import('app1/Button').then(ButtonModule => {const Button = ButtonModule.default;// 渲染Button
});

3. iframe (传统方案)

优缺点

  • 优点:隔离彻底,实现简单

  • 缺点:通信复杂,体验不一致

选型建议

  • 需要快速接入 → qiankun

  • 需要细粒度控制 → Module Federation

  • 需要强隔离 → iframe

9. 服务端渲染

核心流程

优势

  • 更好的SEO

  • 更快的首屏渲染

  • 更好的低端设备兼容性

实现方案

  1. Next.js (React):开箱即用SSR支持

  2. Nuxt.js (Vue):约定式路由SSR

  3. 自定义SSR:使用Vue Server Renderer / ReactDOMServer

10. 页面渲染做了哪些操作

详细渲染过程

  1. 解析HTML

    • 构建DOM树

    • 遇到CSS/JS会并行下载

  2. 解析CSS

    • 构建CSSOM树

    • 阻塞渲染(CSS是渲染阻塞资源)

  3. 合并渲染树

    • 结合DOM和CSSOM

    • 排除display:none等不可见元素

  4. 布局计算

    • 计算每个节点的确切位置和大小

    • 也称为"回流"(Reflow)

  5. 绘制

    • 将渲染树转换为屏幕像素

    • 分层(Layer)绘制,使用GPU加速

  6. 合成

    • 将各层合并为最终页面

    • 处理transform/opacity等属性

优化点

  • 减少重排重绘

  • 使用will-change提示浏览器

  • 关键渲染路径优化

11. 服务器端渲染和客户端渲染的区别

对比表格

特性服务端渲染 (SSR)客户端渲染 (CSR)
渲染位置服务器端浏览器端
首次响应内容完整HTML空HTML骨架+JS
SEO友好性优秀较差(需额外处理)
首屏时间快(立即显示内容)慢(需等待JS执行)
服务器压力高(每次请求需渲染)低(静态文件托管)
交互响应速度需等待JS加载完成后续交互更快
技术复杂度高(需处理同构等)

选型建议

  • 需要SEO/首屏速度 → SSR

  • 复杂交互/后台系统 → CSR

  • 混合方案 → 关键页面SSR + 其他CSR

12. 开发中配置跨域和上线后配置跨域

开发环境配置

Vue CLI

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://backend:8080',changeOrigin: true,pathRewrite: { '^/api': '' }}}}
}

Vite

// vite.config.js
export default defineConfig({server: {proxy: {'/api': {target: 'http://backend:8080',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})

生产环境Nginx配置

server {listen 80;server_name yourdomain.com;location /api/ {proxy_pass http://backend-server/;# CORS配置add_header 'Access-Control-Allow-Origin' '$http_origin';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';# 预检请求处理if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;return 204;}}# 前端静态资源location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html;}
}

高级配置

# 多环境配置
map $env $backend {default "http://default-server";staging "http://staging-server";prod "http://prod-server";
}# HTTPS配置
server {listen 443 ssl;ssl_certificate /path/to/cert.pem;ssl_certificate_key /path/to/key.pem;location /api/ {proxy_pass $backend;# ...其他配置同上}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/95688.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/95688.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Warmup_steps 设置经验

文章目录什么是 Warmup&#xff1f;实现示例科学设置 Warmup 的黄金法则直观例子什么是 Warmup&#xff1f; Warmup 是一种学习率调度策略&#xff0c;在训练初期逐步增加学习率&#xff08;LR&#xff09;&#xff0c;而不是直接使用目标学习率。它解决了两个关键问题&#x…

vue一个超简单的菜单栏伸缩示例

代码<template><div class"container"><!-- 左侧区域 --><div class"left-side" :style"{ width: leftWidth px }">左侧内容</div><!-- 右侧区域 --><div class"right-side" :style"{ l…

Spark学习(Pyspark)

&#xff08;1&#xff09;Spark基础入门 ①什么是Spark Spark是一款分布式内存计算的统一分析引擎。其特点就是对任意类型的数据进行自定义计算。Spark可以计算&#xff1a;结构化、半结构化、非结构化等各种类型的数据结构&#xff0c;同时也支持使用Python、Java、Scala、R以…

PDF压缩原理详解:如何在不失真的前提下减小文件体积?

与直接删除内容不同&#xff0c;良好的PDF压缩能在大幅减小体积的同时&#xff0c;较好地保留原有文字清晰度和图像质量&#xff0c;兼顾实用性与视觉效果。软件操作十分直观&#xff0c;仅需设置输入文件与输出路径&#xff0c;点击【开始压缩】按钮即可启动处理。画质压缩等级…

从应用场景看国产化FPGA潜力,紫光同创研讨会武汉·北京站回顾

八月&#xff0c;紫光同创 FPGA 技术研讨会先后在武汉、北京举行。作为紫光同创官方合作伙伴&#xff0c;ALINX 携紫光同创 FPGA 开发板及行业解决方案亮相&#xff0c;与来自通信、工业控制、医疗、图像视频、消费电子等领域的近 200 位行业专家齐聚一堂&#xff0c;通过主题演…

安卓APK包体优化全攻略

目录 正常默认打包流程&#xff08;以Android平台为例&#xff09; 查看编辑器打包日志 压缩图片 压缩网格模型 压缩贴图 压缩音频文件 只打64位包 最终大小 正常默认打包流程&#xff08;以Android平台为例&#xff09; 准备工作&#xff1a; 确保已安装最新版Unity H…

嵌入式学习日记(28)进程、线程

回收资源空间子进程回收策略1、wait阻塞回收&#xff1a;一般情况下父进程专门负责回收2、waitpid非阻塞回收&#xff1a;搭配轮询方式回收3、不回收&#xff1a;子进程任务一致执行4、异步回收&#xff1a;子进程结束后通知父进程进行回收exec 函数族三种调用外部程序的方式#i…

测试用例的一些事项

为什么要写测试用例&#xff1f;写测试用例的原因是为了避免遗漏测试&#xff0c;我们要根据给的文档将逻辑都表达出来&#xff0c;不能因为简单而不写&#xff0c;日后版本更新就知道自己哪些测了哪些没测。在没有文档的时候测试用例该怎么写&#xff1f;大家可以考虑安全测试…

当Java遇见AI:飞算驱动的个人博客介绍智能生成风暴

一、飞算JavaAI&#xff1a;重新定义个人开发的"智能魔法棒" 1.1 开发者需求变革&#xff1a;从"技术门槛"到"创意优先"的时代 在数字化浪潮席卷全球的今天&#xff0c;个人品牌建设已成为技术从业者、创业者乃至学生的刚需——无论是程序员分享…

小程序排名优化:用户行为数据背后的提升密码

用户在小程序中的每一次点击、每一次停留、每一次分享&#xff0c;都在产生着有价值的数据。这些看似零散的用户行为数据&#xff0c;其实隐藏着提升小程序排名的密码。平台在判定小程序排名时&#xff0c;用户行为数据是重要的参考依据&#xff0c;因为它直接反映了小程序对用…

【DSP28335 入门教程】深度解析中断系统:三级架构与响应机制

大家好&#xff0c;欢迎来到我们的 DSP28335 深度解析系列。在之前的实战中&#xff0c;我们通过 while(1) 循环和延时函数实现了各种控制&#xff0c;这种方式被称为轮询。但轮询就像一个焦急的门卫&#xff0c;需要不停地去检查每个门口是否有人&#xff0c;既浪费精力又效率…

代码随想录二刷之“字符串”~GO

1.344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; func reverseString(s []byte) {left : 0right : len(s)-1for left < right{s[left],s[right] s[right],s[left]leftright--}return } 感悟&#xff1a;还是go语法熟练程度的问题&#xff0c;需要注意的是&am…

(!万字血书!)文本预处理:NLP 版 “给数据洗澡” 指南

好吧&#xff0c;我承认我是个标题党&#xff01;(不这样你会点进来享受这篇 通俗易懂 的好文章吗&#xff1f;) 正经标题&#xff1a;文本预处理全流程:从基础到实践 &#xff08;屏幕前的你&#xff0c;帅气低调有内涵&#xff0c;美丽大方很优雅… 所以&#xff0c;求…

最新chrome浏览器elasticsearch-head无法安装使用问题

chrome浏览器网址栏复制粘贴以下内容输入回车 chrome://flags/#allow-legacy-mv2-extensions 找到Allow legacy extension manifest versions项右侧选择Enabled启用&#xff0c;重启浏览器即可。

CSS aspect-ratio 属性

aspect-ratio 是 CSS 中用于控制元素宽高比的属性&#xff0c;通过一行代码即可实现响应式比例布局&#xff0c;无需复杂计算。它确保元素在不同屏幕尺寸下保持固定比例&#xff0c;提升响应式设计效率。一、基本语法与取值selector {aspect-ratio: <width> / <height…

FreeRTOS多核支持

个人博客&#xff1a;blogs.wurp.top 简介 1. 多核支持概述 在传统的单核系统中&#xff0c;FreeRTOS 通常运行在一个 CPU 核心上&#xff0c;负责任务调度、中断处理和资源管理。然而&#xff0c;在多核系统中&#xff0c;多个核心可以并行执行不同的任务或线程&#xff0c…

CUDA中的基本概念

要学习cuda的同学相信已经对其有一定的了解了&#xff0c;至少直到它是干什么的了。这篇文章主要是对cuda编程中的主要概念进行总结&#xff0c;有了一个大致的轮廓后就好入手了。 异构架构 异构架构即使用CPU和GPU共同进行计算。GPU不能作为一个独立的运行平台&#xff08;程序…

【LINUX网络】HTTP协议基本结构、搭建自己的HTTP简单服务器

目录 1. 初识HTTP 2. URL 2.1 基本结构 2.2 URL中的?与urldecode\urlencode 易混淆&#xff1a;URL和HTTP传输请求两者是什么关系&#xff1f; HTTP的宏观结构 3. DEMO CODE loop模块&#xff0c;核心逻辑 HttpServer 初代版本&#xff08;DEMO 0.0&#xff09; DEMO 1.0 DEMO…

Spring Boot 静态函数无法自动注入 Bean?深入解析与解决方案

在 Spring Boot 项目中&#xff0c;开发者常遇到一个典型问题&#xff1a;在静态方法或静态变量中尝试使用 Autowired 注入 Bean 时&#xff0c;始终得到 null 值。本文将深入剖析这一问题的根源&#xff0c;并提供多种可靠解决方案。问题重现&#xff1a;为什么注入失败&#…

存储过程作为系统逻辑核心的架构思考 —— 以 SaaS 系统为例

在企业级系统尤其是 SaaS 架构中&#xff0c;技术选型一旦确定&#xff0c;就意味着底层数据库类型基本不会轻易更换。既然如此&#xff0c;我们可以更大胆地将数据库能力本身纳入系统设计的核心&#xff0c;而不仅仅把它当成一个被动的存储引擎。存储过程&#xff08;Stored P…