#项目总结

#问题模板

来源：Notion 页面“问题模板”

• 原始链接：问题模板

#自我介绍模板

XX，XX 年工作经验，非计算机相关专业。

• 前端安全
• 浏览器渲染机制
• React、Vue 原理
• Typescript
• NodeJS
• 模块化规范
• 工程化
• 多端技术
• 微信生态
• 后端技术
• 项目相关
• 架构理解
• 其他

#项目表达提纲

• 私有化痛点与解决方案 从标准功能与定制代码隔离、归档冲突控制、打基线、部署自动化、配置精简、自动化测试、操作文档建设几个角度展开。
• SaaS 定制痛点与解决方案 重点回答如何在同一套环境支持不同租户，包括登录入口区分、前端资源分流、后端请求携带定制标识等。
• 效率优化 从开发流程、脚手架、前端基建、构建性能、网站性能几个层次来讲，避免只讲某一个工具。
• 架构理解 要能从业务背景、系统边界、关键约束、技术选型、落地收益几个维度解释，而不是只列技术名词。

#基础问题清单

• MVC vs MVP vs MVVM
• 前端工程化
• 大文件上传与下载
• SEO
• 性能优化
• 前端监控
• HTTP / HTTPS
• 前端安全
• setState 如何触发 React 渲染
• 常用 Hook 的实现原理
• BFC
• 元素隐藏方式及区别
• Webpack 插件与 compiler / compilation
• TypeScript 中 Omit / key remap
• useEffect 与 useLayoutEffect
• SSR 为什么需要水合

#复习入口

• 系统题库优先看 面试问题示例.md
• 代码与原理题优先看 必读系列.md
• 架构表达可结合 架构学习.md

#前端错误监控原理

#兔展前端性能/监控

renderer:

• TPS: 大约 8k
• PV: 150 万 ~ 250 万
• UV: 50 万 ~ 70 万

editor:

• PV: 1 万
• UV: 2k ~ 4k

store:

• PV: 1 万
• UV: 2k

home:

• PV: 1 万
• UV: 2k

workbench:

• PV: 2k
• UV: 500

#前端性能优化

• HTTP 请求 - 使用 HTTP 缓存, Http2, Gzip 压缩, 减少 Cookie 的使用
• 服务端处理请求 - 静态资源用 CDN 缓存, 可以使用 SSR, CSR + CDN, ESI(Edge Server Include), ESR(边缘流式渲染), 服务器端也可以加上数据缓存
• 前端减少首屏请求的代码量, 动态加载, 图片使用 webp 格式, 渐进式注水, ServiceWorker 缓存
• 减少回聊, 减少 DOM 操作
• 使用 WebWorker

补充表达角度：

• 运维优化：HTTP/2、多路复用、头部压缩、Gzip、CDN 缓存、静态域名与 API 域名分离
• 开发优化：图片压缩、字体裁切、代码压缩与 Tree Shaking、业务数据精简、预加载、懒加载、Service Worker
• 运行优化：WebWorker、WASM、离屏渲染、防止回流、只渲染可见区域
• 产品优化：加载页、Skeleton、动效、避免不必要的实时通信

#小程序框架的选择

• 编译时偏动态还是静态
• DSL 类型, 上手和编码难度是否较大
• 语法校验是否完善
• 是否支持 TS
• 是否支持 LESS 和 SASS
• 底层实现
• 是否支持跨端编译
• 是否支持拓展和工程复用, 或者使用 Webpack 来进行打包
• 有无比较好的生态, 有没有相应的组件库和工具库
• 是否有比较完善的状态管理工具
• 维护的团队是否反映积极, 是否开源, 以及功能是否稳定

#小程序编辑器

#小程序渲染引擎的调研

• 市场上现有的小程序编辑器的功能, 来确定产品方向
• 是否可以实现开发, 预览, 审核, 线上的数据版本控制
• 是否支持动态渲染, 以及选择贴近项目的小程序开发框架
• 小程序动态渲染的边界, 以及如何尽可能的实现软发布
• 如何组织项目结构, 来实现共用代码
• 动态加载, 更细粒度 WSL, 或者 dynamic-import

#小程序渲染引擎的几大模块

打包构建模块

通用代码模块

行业模板模块

• 数据获取
• 授权封装
• 动作触发封装
• 导航封装
• 埋点封装
• 组件逻辑
• 页面渲染器

#webpack

配置:

• mode
• entry
• output
• module
  • cache-loader
  • babel-loader, cache
  • thread-loader
  • happypack/loader
• plugins
  • MiniCssExtractPlugin
  • html-webpack-plugin
  • clean-webpack-plugin
  • webpack-bundle-analyzer
  • speed-measure-webpack-plugin
  • terser-webpack-plugin, parallel|cache
  • HappyPack
  • DLLPlugin
  • DllReferencePlugin
  • ProvidePlugin
• dev-server

性能优化:

• 升级 webpack

#小程序底层框架

#小程序 vs RN vs Flutter