2020面试总结 —— 性能优化、工程化、设计模式

[fengmiaosen]

1. 关于 cdn、回源等问题一网打尽

   https://juejin.im/post/5af46498f265da0b8d41f6a3
   https://cloud.tencent.com/developer/article/1439913

2. 前端性能优化

   TODO
   可按照url输入到页面展现的流程叙述

   https://juejin.im/post/5b6fa8c86fb9a0099910ac91

   2.1 前端页面资源加载、解析、执行

   • 减少资源加载体积、数量

     • js、css资源合并压缩，开启gzip压缩（图片资源除外）
     • js、css 减少首页（核心）资源加载
       • 代码分割、延迟加载、预加载、异步加载
       • preload、prefetch、dns-prefetch
     • 合并图片请求（雪碧图）、使用font icon、svg

   • 充分利用缓存

     • 静态资源强缓存、协商缓存 cache-control、expires、ETag
     • localstorage、cookie、indexDB本地缓存（参考微信公众号、天猫首页、京东）
     • 资源代理缓存，PWA、service worker

   • 减少js阻塞渲染

   • 减少页面回流、重绘

     • 限制dom操作，可利用缓存、分片执行、防抖、节流
     • 控制css样式读写操作，充分利用GPU渲染层

   2.2 网络传输层资源加载

   • 资源部署CDN
   • 开启长连接
   • 升级使用HTTP2

   2.3 后端服务器相关

   • 负载均衡
   • 首页模板缓存
   • 数据缓存
   • 首页渲染
   • 同构渲染

   2.4 构建打包优化

   • tree-shaking
   • scope hoisting 作用域提升
   • webpack-bundle-analyzer 分析module打包情况

3. Webpack HMR 原理解析

   hmr
   https://zhuanlan.zhihu.com/p/30669007

4. 下拉刷新&无限滚动性能优化

   infinite-scroll
   设计无限滚动下拉加载
   Complexities of an Infinite Scroller
   
   Infinite Scrolling Best Practices
   H5下拉刷新和上拉加载

5. WebAssembly、PWA、AMP

6. 全景图的实现原理

   聊一聊全景图
   一种街景全景生成的改进算法
   无缝的 Google 街景全景图

7. 收获最大的一个或者若干个项目？

8. 软件架构

   软件架构通常涵盖三个部分：

   • 架构模型：定义了系统组件是如何组织和拼装的，明确系统的组件模块，划分各自边界以及如何组合在一起。

   • 通信接口：定义了系统组件之间是如何进行通信的，通常指的是组件/模块之间的通信方式、接口定义、API。

   • 质量要求：定义了非功能性的系统要求，例如扩展性、稳定性、高可用性、高并发、高性能、安全等等

9. 前端架构的演进

   • 刀耕火种（前后端不分）
   • 前后端分离（AJAX）
   • Node BFF
   • Serverless BFF

10. 组件化架构的变化

    组件化也经历了不同阶段的演进：

    • 组件库：以Ant Design、Element为代表，提供一系列统一设计语言的原子组件。

    • 模板库：以Ant Design Pro为代表，提供一系列的组件模板/页面模板，例如用户详情页、登录页等等，方便快速搭建功能页面。

    • 配置化：以Fusion Design、飞冰、云凤蝶为代表，通过可视化拖拽来自由拼装页面，进一步提升前端研发效率。

11. 骨架屏自动化生成

    一种自动化生成骨架屏的方案

12. 优雅的提交你的 Git Commit Message

    https://juejin.im/post/5afc5242f265da0b7f44bee4

13. GitHub Action
    https://github.com/features/actions

14. 5 分钟撸一个前端性能监控工具

    https://juejin.im/post/5b7a50c0e51d4538af60d995

15. 如何优雅处理前端异常？

16. 从 0 到 1 实现一款简易版 Webpack

    https://juejin.im/post/5da56e34f265da5b932e73fa

17. HTTPS原理

https://developers.weixin.qq.com/community/develop/article/doc/000046a5fdc7802a15f7508b556413

https://juejin.im/post/5b0274ac6fb9a07aaa118f49

21. 前后端联调数据解决方案

    pont 其主要原理是通过分析各种接口平台（如： Swagger）的数据产生一个 Typescript 类型完美、正确可靠的 API 代码库

22. 谈谈如何设计一个插件（Plugin）体系
    谈谈如何设计一个插件（Plugin）体系
    微内核架构在前端的应用

23. 多站点单点登录实现方案

    https://juejin.im/post/5d04d946f265da1b9163915a
    https://juejin.im/post/5b8116afe51d4538d23db11e

24. Webpack 新功能 Module Federation

    https://mp.weixin.qq.com/s/zhkgudIjeuKWi536U5pJhw

    Webpack5 上手测评
    调研 Federated Modules，应用秒开，应用集方案，微前端加载方案改进等

25. preload 与 prefetch 的关系
    prefetch 和 preload 都可以声明一个资源及其获取属性，但在用户代理获取资源的方式和时间上有所不同：prefetch 是可选的，通常是用于后续导航可能使用的资源的低优先级获取；preload 是当前导航所必需的资源的强制获取。开发人员应该合理使用它们来最小化资源争用和优化加载性能。
    另外，在 preload 中 as 属性对于保证正确的优先级、请求匹配、请求对应正确的内容安全策略（Content-Security-Policy ）指令以及基于资源类型发送正确的 Accept 首部是必需的。
    更多可以参考： Preload: What Is It Good For? by Yoav Weiss

26. Webpack 中的 Tree shaking 机制学习

https://mmear.github.io/2019/04/15/Tree-shaking-in-Webpack/

27. 你不知道的 npm init
    https://zhuanlan.zhihu.com/p/45151808

npm init react-app 

# same as
npx create-react-app 

参考资料

• 函数式编程，真香
• 前端性能优化清单
• 记一次前端性能优化
• 洽客前端性能优化指南V1.0.0
• 一个白学家眼里的 WebAssembly
• 淘宝如何打造承载亿级流量的首页？
• 一文道尽软件架构及前端架构演进
• 前端高级进阶：前端部署的发展历程
• 大型项目前端架构浅谈
• 如何设计大型前端团队基建路线
• 基于node.js的脚手架工具开发经历
• 从零开始搭建脚手架
• 如何推动前端团队的基础设施建设
• 把前端监控做到极致
• 学习 sentry 源码整体架构，打造属于自己的前端异常监控SDK
• Pont - 搭建前后端之桥
• 不知道Web性能标准就别说你会性能优化
• 十亿级流量的搜索前端，是怎么做架构升级的？
• 移动端 JS 引擎哪家强？美国硅谷找......