TikTok front-end development

First interview

Talk about projects:

  1. Thecommunicationmethodusedintheproject(http,udp,rpc)
  2. Howtoefficiently render lists in large quantities
  3. Howtoupdatethemessagenotification in real time (what should I doif somethinggoes
    wrong)

Talk about products:

  1. Whatis thedifference between overseas users and domestic users?
  2. Whataspects doyouthinkyouneedtoconsiderifyouaregoingoffshore?

Chat basics:

  1. Event loop
    2、Promise
  2. Howvueimplementsresponsiveness(both2and3say)
  3. Howwouldyoudesignvuex?
  4. Thehookfunctioninvue

Lucode:

  1. Implementdeepcopy
  2. Implementasimpletemplatereplacement

Secondinterview

  1. Whatnetworkprotocols haveyoubeenexposedto?
  2. Whatisthedifference between HTTPSandHTTPS?
  3. Whataresymmetricencryption andasymmetricencryptionalgorithms, what are digital
    signatures, and specific business scenarios?
  4. Commonnetworkmodels(whateachlayerdoes)
  5. Talk about commondatastructures(arrays, sets, maps) and corresponding business scenarios
  6. You mentionedmapandtalkedaboutthedifferencebetweenweakmapandmap.
  7. Whatarethevariants of anarray (queue, heap, stack), and how is the heapimplemented?
  8. Whatarethesorting algorithms (which are stable and which are unstable)?
  9. Manytimesweneedtoscheduletasks.Howdoyouimplementtaskscheduling?
  10. Haveyoulearnedaboutdatabases?Whatarerelational andnon-relational databases?
  11. Whatis thedifference between a relational database and a non-relational database?
  12. Didyouwritetheunderlyingsourcecodeofvueinyourproject?Tell meaboutyour
    implementation ideas
  13. Vueunderlyingresponsive implementation logic, why use proxy?
  14. IstheObject.definedPropoty used by vue2 not good?Howtodealwiththeresponseofthe
    vue2 array?
  15. Howtoimplementthediffalgorithm?
  16. Howdoyouimplementtheprincipleoftemplatereplacementinthesourcecodeyou
    implement?
  17. Sinceyoutalkedaboutthespecialtreatment of attributes and Properties, why?

Howtodohand-torncode(verysimple):

  1. Realize Self-Adaptation on both sides, fixed in the middle
  2. Array of flat melons and donotrepeat(usethree methods)
  3. Sequential traversal of binary trees

Write fast, then I’ll come back to your project

  1. Theplug-in system youwrote, whatisthespecific implementation of rpc communication? Tell
    methedetails?
  2. Whyuseiframandwhynotusemicrofrontend?
  3. Haveyouconsideredmemoryleakagewhenusingrpc+iframe?
  4. Iframe loading delay. Have you thought about howtooptimizethis?
  5. Whathaveyouachievedinthisproject? Whatdifficulties have you encountered and how have
    yousolved them?

Reference answer:

  1. Thecommunicationmethodsusedintheproject(HTTP,UDP,RPC)
  • HTTP:Suitable for communication basedontherequest/response pattern, commonlyused
    in webservices andAPIcalls, and supports higher-level protocols such as REST and GraphQL.
  • UDP:Suitable for scenarios with high real-time requirements but low reliability
    requirements, such as video LIVE, online games, etc. Because it does not guarantee reliable
    delivery of messages.
  • RPC(RemoteProcedureCall): makescalling remote services like calling local services,
    usually used in microservice structures, common implementations are gRPC, Thrift, etc.
  1. Howtoefficiently render lists in large quantities
    Rendering lists efficiently in large quantities is a common problem in front-end development,
    especially when dealing with large amounts of data. Directly rendering all items can lead to
    performance issues and poorUserExperience. Here are afewcommonandeffectivewaysto
    achieve high-volume rendering lists efficiently:

1. Virtual Scrolling

Virtual scrolling improves performance by rendering only list items within the user’s viewport.
List items are dynamically loaded and unloaded as theuserscrolls.

  • Implementation principle: As the user scrolls, calculate which items should be rendered and
    which itemscanbeuninstalled.
  • Library support: such as React Virtualized, Vue Virtual Scroll List.
 function VirtualizedList({ items }) {const rowRenderer = ({ index, key, style 
}) => (<div key={key} style={style}>
    {items[index]}</div>
 );
 return (<Listwidth={300}height={600}rowHeight={50}rowCount=
    {items.length}rowRenderer={rowRenderer}
 />
 );
 }

2. Lazy Loading

Lazy loading refers to loading new list items only when the user scrolls to a certain position,
avoiding loading all the data at once.

  • Implementation principle: Listen for scrolling events and load more data as the user
    approaches the bottom.
  • Library support: such as React Infinite Scroll, Vue Infinite Loading.
function InfiniteList({ items, fetchMoreData }) {return
(<InfiniteScrolldataLength={items.length}next={fetchMoreData}hasMore={true}loader={
 <h4>Loading...</h4>
 }>
 {items.map((item, index) => (
     <div key={index}>{item}</div>
     ))}</InfiniteScroll>
 );
 }

3. Pagination

Paging load is to divide the data into multiple pages, and the user needs to load the next pageof
data through the pagingcontrol.

  • Implementation principle: Load the data on the next page through paging controls or infinite
    scrolling.
  • Library support: Front-end libraries typically provide built-in paging support, such as Ant
    Design’s Pagination.
 function PaginatedList({ items, currentPage, onPageChange }) {const pageSize = 
10;const currentItems = items.slice((currentPage - 1) * pageSize, currentPage 
* pageSize);
 return (<div>
 {currentItems.map((item, index) => (<div key={index}>{item}</div>
 ))}<Pagination current={currentPage} total={items.length} pageSize=
 {pageSize} onChange={onPageChange} /></div>
 );
 }

4. Server-side rendering (SSR)

Server-side rendering can generate HTML on the server side, reducing client rendering pressure
wheninitially loaded.

  • Implementation principle: Data and templates are rendered as HTML ontheserverside and
    then sent to theclient.
  • Library support: such as Next.js (React) and Nuxt.js (Vue).
  return { props: { items } };
}
function SSRList({ items }) {return (<div>
{items.map((item, index) => (<div key={index}>{item.name}</div>
))}</div>
);
}
export default SSRList;

5. Batch Updates

Batch updates improveperformancebyreducingthenumberofDOMoperations,combining
multiple updates into one.

  • Implementation principle: Use the framework’s batch update mechanism, or manually
    mergemultiple updateoperations.
  • Library support: React unstable_batchedUpdates
   function updateItems(items) {unstable_batchedUpdates(() => {
 items.forEach(item => {
});
 });
 }