网站建设定位分析论文,网站方案书,济南网站建设 力选聚搜网络,泸州网页设计自我介绍 1.自我介绍2.快手实习难点#xff1a;上锁函数 防抖函数结合亮点#xff1a;技术选型 Uber实习auth0 原理 1.自我介绍
#xff08;乖巧#xff0c;听话的声音#xff09; 好的#xff0c;面试官你好。我是一名前端开发工程师#xff0c;叫李小菲#xff0c;… 自我介绍 1.自我介绍2.快手实习难点上锁函数 防抖函数结合亮点技术选型 Uber实习auth0 原理 1.自我介绍
乖巧听话的声音 好的面试官你好。我是一名前端开发工程师叫李小菲目前是英国诺丁汉大学计算机科学专业的研究生也是快手商业化部门品牌广告小组的前端开发实习生。
在前端领域我有幸获得3段前端开发实习机会在实习的过程中我经历了完整的开发流程技术方案评审、排期、开发、联调、测试、上线做过技术选型、第三方库的调研、封装hooks、写组件供同事用、页面开发等工作我深入了解浏览的工作原理、事件循环、Dom事件流、存储与缓存、知道如何做前端性能优化、以及前端安全性相关知识我最近经常使用的技术是react与TSVue也会使用但是很久没用了。
在当实习生的这段时间我经历了很大的心态转变从学生转变成能独立承担企业项目开发的职场人也明白了在职场大家不太关注把事做成的过程大家更关注事情的结果。
除了我的技术能力我也非常注重自己的沟通能力和团队协作能力。我在团队中很乐于分享我的想法和经验我也曾担任过项目组长的角色第一次是2020年做了一个基于计算机视觉的智能无人机项目获得了中国大学生计算机设计大赛的国家级二等奖第二次是我2021年与我的小组成员一起完成了 基于Echarts与Vue的疫情数据可视化平台也拿到了中国大学生计算机设计大赛的国家级三等奖。拿到了专利申请。
最后我非常感谢您抽出时间来面试我。我希望能够有机会加入xxx公司\团队把我学习到的这些知识应用在实际企业项目中。
2.快手实习
难点上锁函数 防抖函数结合 Situation (情境) 你被分配到一个任务需要在品广平台的售前系统中实现一个营销案例卡片组件和详情页。这个功能目的是为潜在的广告主提供优秀的营销案例展示推动销售并缩短广告主的犹豫时间。 Task (任务) 你需要设计和实现一个响应式的营销案例卡片组件这个组件应该能够展示图片、文字、链接、视频、文档等多种内容。同时还需要一个详情页用户可以点击卡片查看具体的营销案例详情其中包括图片、视频和PDF预览。你只有11天的开发时间并需要确保最终的组件可以在移动端和桌面端都有良好的展示效果。 Action (行动)
响应式设计你利用media、flex和%的组合来实现了响应式设计确保了组件在各种屏幕大小上都可以良好地展示。 上锁函数实现为了避免用户在PDF下载过程中频繁点击下载按钮你首先尝试使用了防抖函数但发现这并不适用于当前的问题。于是你参考了小组成员的建议设计并实现了一个上锁函数。这个函数能够确保在异步函数如PDF下载执行期间用户不能再次触发这个函数直到异步函数执行完毕。状态管理优化在实现上锁函数时你选择使用useRef而不是useState来管理函数的执行状态因为useRef的状态改变不会引起组件的重新渲染从而提高了性能。
Result (结果) 在规定的时间内你成功完成了这个需求并且成功上线。最终的组件在移动端和桌面端都表现良好稳定运行没有出现bug。截止9.20售前工具pc移动端总 PV访问7130UV访问3927。这个项目最后的质效指标前端投入5人力合计54PD冒烟通过率100%线下bug数 16个千行bug率 PC端 0.16%27/17130移动端 0.1%16/16428
亮点技术选型
Situation情境: 我的需求是在品广平台品牌广告平台帮助广告主在快手客户端app 上投放广告上我们需要一个营销案例组件展示广告的预览效果和优秀的营销案例能够同时预览图片和视频。并且要确保这个组件在各种设备和浏览器上都有良好的表现特别是在移动端。
Objective目标: 主要目标是找到一个解决方案使得我们能够同时展示视频和图片并且在移动端有出色的触摸响应效果。同时我们还需要扩展该组件添加显示图片介绍的功能。
Action行动: 对多个流行的开源库如 Lightbox、FancyBox 和 Viewer.js 等进行了深入研究和对比。 考虑到移动端的特殊要求尤其是触摸事件响应和图片双指缩放功能。 最终选择了react-photo-view并使用了高阶组件HOC来对其进行扩展添加了显示图片介绍的功能。
Result结果: 成功完成了PC端的需求后面移动端的开发在图片视频预览这块也相当顺利PC并且已经上线并稳定运行了一个月移动端稳定运行半个月。在整个开发过程中我只出现了两个bug并且在组内是少数。这得益于我们对技术选型的仔细考虑以及对代码的自测和调试工作。这是我的成绩与亮点
Uber实习
刚进入Uber进行实习在新人培训期间接触了PWA技术我实现了一个TodoList PWA应用PWA应用是一个类似原生APP的浏览器应用它可以实现离线访问、系统级别的消息推送、后台数据同步等功能
它在第一次加载后可以实现离线访问、提供系统级别的消息推送(定时提醒功能)、后台数据同步功能
实现离线访问使用了缓存Cache、IndexDB、service worker请求拦截 系统级别的消息推送Notification API 后台数据同步功能使用了Service Worker的Background Sync功能进行后台数据同步
在实现这些功能的过程中我遇到了一些难点
我在实现后台数据同步功能的时候使用了service worker和Background Sync来实现
Background Sync 是一个允许在网络恢复后进行延迟操作的Web API。这意味着当用户处于离线状态或网络连接不稳定时应用程序仍然可以完成某些操作例如发送数据存储在本地数据库中然后等待网络连接恢复后再实际执行这些操作。这种技术通常与 Service Worker 一起使用以实现更复杂的离线功能和性能优化。
在实现后台数据同步功能的时候可能会遇到网络不稳定导致的同步失败需要等到下一次 sync 事件自然触发来尝试重新进行数据同步。这种情况下如果用户或应用没有再次触发 sync 事件那么数据同步可能会长时间得不到处理。
为了解决这个问题我需要去实现一个重试机制在操作失败时自动尝试重试操作。
首先我在service worker文件中配置了一些重传机制的基础变量比如已经重试了多少次、最大重试次数、两次重试之间的时间间隔默认2秒定义一个异步函数使用try catch向服务器发送同步数据的请求如果成功则重制已经重试了0次。失败则使用setTimeout定时器重新发送同步数据的请求使用默认时间间隔。我这样做是为了在短时间内尝试多次如果问题是暂时的那么很快就能恢复。
但是在实际情况中并没有这么简单用户发送数据同步请求失败经常是在网络不稳定的时候或服务器过载的时候高频率的重试可能加重服务端的负担和网络拥塞这个时候如果单纯将默认间隔时间设置得更长那就会造成等待时间过长同样影响数据同步的速度。
最后我是使用了 指数退避策略 来优化了重传机制 指数退避策略在每次失败后都会增加等待时间。这通常是通过将等待时间与2的重试次数次方或其他基数相乘来实现的。
const delay Math.pow(2, retryCount) * 1000;在这个例子中第一次失败后程序会等待 2^0 * 1000 1000 毫秒然后是 2^1 * 1000 2000 毫秒2^2 * 1000 4000 毫秒以此类推直到达到 maxRetry。指数退避通常更适用于网络不稳定或服务器过载的情况因为它给系统更多的时间来恢复。
因为它给系统更多的时间来恢复。而普通的重试机制则更简单和直接。
指数退避策略Exponential Backoff是一种错误恢复机制用于自适应地调整两次重试操作之间的等待时间。该策略的核心思想是在遇到失败时不立即进行下一次尝试而是等待一段时间后再重试并且每次失败后都会增加等待时间。等待时间通常是指数增长的例如2的n次方乘以一个基础的延迟时间。 样做有几个好处
减少网络拥堵如果服务暂时不可用或网络状况不好立即进行下一次尝试可能会加剧问题。指数退避通过增加延迟来减少网络请求降低了进一步拥堵网络或压垮服务的风险。
自适应如果第一次重试失败那么可能需要更多的时间来解决问题。指数退避通过延长等待时间来给系统更多的自我恢复时间。
提高成功率通过给系统更多的时间来恢复和减少网络负担指数退避策略可以提高重试请求的成功率。
auth0 原理
Auth0 是一种身份验证和授权平台提供多种身份验证方法和协议如 OAuth2、OpenID Connect、SAML 等的封装使得开发者能够更简单地在应用中实现用户身份验证和授权。
下面简要概述 Auth0 的基础工作原理
用户请求身份验证
当用户尝试登录应用时应用会将用户重定向到 Auth0 的授权服务器或者通过嵌入式登录表单来请求 Auth0 进行身份验证。
身份验证
Auth0 提供多种身份验证方式包括社交登录Google、Facebook 等、企业身份提供商如 Active Directory、或者通过 Auth0 自己的用户存储。用户的凭证不会直接传递给应用而是由 Auth0 来验证。
生成令牌
一旦身份验证成功Auth0 会生成一个或多个令牌通常是 JSON Web TokenJWT来表示用户的身份和/或他们有权访问的资源。
重定向回应用
用户会被重定向回原始应用并附带上令牌。这通常通过 URL 参数或者是 POST 操作来完成。
解码和验证令牌
应用需要验证从 Auth0 收到的令牌。这通常是通过使用 Auth0 公钥来完成的以确保令牌是由 Auth0 签发的并且没有被篡改。
授权
应用可以根据令牌中的声明claims来授权用户决定用户可以访问哪些资源或执行哪些操作。
续期和登出
Auth0 也提供了令牌续期和用户登出的机制以便更好地管理用户会话。
通过这种方式Auth0 能够为多种应用和服务提供统一、安全和高度可配置的身份验证解决方案。它大大简化了在现代应用中实现安全身份验证和授权的复杂性。
