获得完整访问权限
新与我们合作推广 ->
获得完整访问权限
推荐

前端系统设计指南

前端系统设计面试的唯一指南
健壮的框架
10+ 个已解决的问题
深入了解实际应用
系统设计面试通常是针对中高级角色，重点考察你设计复杂、可扩展和可维护系统的能力。由于前端系统设计方面的资源很少，我们创建了《前端系统设计指南》——目前最全面的资源。

技巧和指南

  • 前端系统设计：简介学习有用的技术以及如何处理顶尖前端系统设计问题。由前 FAANG 面试官撰写。
  • 前端系统设计问题的类型您可以在前端系统设计面试中期望的问题格式。
  • RADIO 框架以结构化的方式进行前端系统设计面试。一个好的结构是成功的一半。
  • 前端系统设计面试的评估标准面试官在前端系统设计面试中寻找的特定行为和信号。
  • 前端系统设计面试中要避免的常见错误了解候选人在前端系统设计面试中常犯的错误以及如何避免这些错误。
  • 前端系统设计面试备忘单总结前端系统设计面试中您应该注意的最重要的事情。

练习题

题目列表

  • News Feed (e.g. Facebook)Design a news feed user interface similar to Facebook and Twitter
    主题
    可访问性性能
  • AutocompleteDesign an autocomplete component seen on Google and Facebook search
    主题
    可访问性UI 组件
  • Poll Widget高级Design a poll widget that can be embedded on websites
    主题
    UI 组件
  • Travel Booking (e.g. Airbnb)高级Design a travel booking website like Airbnb and Expedia
    主题
    性能搜索引擎优化
  • Photo Sharing (e.g. Instagram)高级Design a photo sharing application like Instagram
    主题
    可访问性网络性能
  • Dropdown Menu高级Design a dropdown menu component that reveals a menu containing a list of actions
    主题
    可访问性UI 组件
  • Image Carousel高级Design a horizontally-scrolling image carousel component
    主题
    可访问性性能UI 组件
  • Modal Dialog高级Design a modal/dialog component that shows a window overlaying the contents on the page
    主题
    可访问性UI 组件
  • Email Client (e.g. Microsoft Outlook)高级Design a desktop email client like Microsoft Outlook and Apple Mail
  • E-commerce Marketplace (e.g. Amazon)高级Design an e-commerce marketplace website like Amazon and eBay
    主题
    搜索引擎优化
  • Pinterest高级Design Pinterest homepage, focusing on the masonry layout
    主题
    可访问性网络性能
  • Chat App (e.g. Messenger)高级Design a chat application like Messenger and Slack
    主题
    网络
  • Diagram Tool (e.g. Lucidchart)高级即将推出Design a design tool like Lucidchart
  • Music Streaming (e.g. Spotify)高级即将推出Design a music streaming website like Spotify and Pandora
    主题
    网络
  • Video Conferencing (e.g. Zoom)高级即将推出Design a video conferencing app like Zoom and Google Meet
    主题
    网络性能
  • Rich Text Editor高级Design a rich text editor component used on websites like Medium and Gmail
    主题
    性能UI 组件
  • Google Docs高级Design a collaborative editor like Google Docs and Notion
    主题
    网络
  • Google Sheets高级即将推出Design a collaborative spreadsheet like Google Sheet and Excel
  • Video Streaming (e.g. Netflix)高级Design a video streaming application like Netflix and YouTube
    主题
    网络性能