一招制敌，搞定前端系统设计和优化题

建站经验
来源：站三界导航
63阅读
2022-04-28

最近接触了不少面试题目，有这么一类常见的题目，没有标准答案，上下限差距很大，第一次碰到没有准备的话，回答起来总会比较纠结。具体的题目有性能优化，提升代码质量，做埋点系统，优化webpack等，这里我把他们统称为系统设计和优化题。在这里我尝试找一下应对这些问题的套路，让大家可以在工作和面试中找到感觉，顺利过关。下面我就同时写题目和我自己的答案，希望大家能在阅读的过程中找到一些规律。具体题目如何做性能优化？问题的关键是性能，那么，性能指的是什么？页面加载的快慢和页面是否流畅。那么用什么指标来衡量呢?页面加载时长和帧率怎么计算这些指标呢?加载时长可以使用performance.timing,API上报，onload等事件。而帧率可以使用raf来计算。那么我们要怎么做性能优化呢?针对用户访问的全流程，每一步进行优化。如dns解析，tcp链接，渲染页面等。详情可以查看我的文章。如何提升代码质量? 同样我们要先想以下的问题什么是代码质量？代码质量有哪些指标（代码性能、代码的缺陷数量）？怎么计算指标？怎么提升代码质量？从研发的流程着手。需求评审、代码初始化、写代码（eslint）、提交代码(git commit钩子)、测试代码、发布代码（规则拦截）、数据监控如何进行效率提升怎么衡量效率？人日？怎么提升效率?跟上面的提升代码质量的阶段比较接近，不重复讲了。怎么设计埋点系统关键的问题是数据，因此我们要从数据着手，了解我们要上报哪些数据（性能/用户行为/错误），怎么上报数据（gif，api），怎么处理数据（日志清洗，归类，存储），怎么查看数据（可视化，权限系统），怎么利用数据（生成报表，报警监控）怎么做搭建系统关键的元素是页面。因此我们要围绕页面的生产，页面的配置，页面的管理，页面的渲染等来进行讨论怎么做客户端离线资源系统？关键问题是资源。因为我们要解答发放什么资源，什么时候发放，怎么发放，怎么更新、删除资源，怎么使用资源，资源的优先级、有效期等问题怎么优化webpack webpack的优化可以分为缩小体积和减少打包时间两个方向。我们可以从webpack打包的流程为切入点进行分析。初始化参数阶段、加载插件阶段、确定入口阶段、编译阶段、完成编译、输出资源、写入文件尾声不知道大家找到一些规律了吗？下面是我的思路。找到问题的关键点，找到如何衡量关键点的方法，从系统运行的全流程进行分析，针对每个流程进行分别优化。希望大家可以有一些收获。本文结束

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/2986.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：常见的HTTP状态码(200/301/404/500)

下一篇：如何加速 Web 应用程序并提高网站性能