This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.

My first interview ever in my life, I was so nervous! Finished the morning interview, had the second round in the afternoon. It all happened incredibly fast.

MetaApp Frontend First Round Interview

Great experience, the interviewer was super gentle and told me not to be nervous.

1. Talked about my projects
2. For a very long list, how do you prevent lag while scrolling but still display content promptly?
   • Couldn’t answer. Just mentioned listening to scroll events, calculating and rendering. The interviewer said you can use div placeholders and update data.
   • Standard answer: Virtual List and Its Principles
3. A large div wrapping three small divs, how to center them, and how to center the text inside?
   • Answered flex, text-align, and vertical-align (couldn’t hear clearly)
4. You said you’re learning React, tell me about it
   • Component-based development, parent-child component communication, ref
   • Miscalculation — I forgot to mention virtual DOM and diff (though I briefly mentioned diff)
5. Your resume mentions ES6, talk about var, const, let
   • After answering, follow-up question: Have you heard of variable hoisting?
   • Answered that var has hoisting, const and let don’t. const-declared variables must be initialized and cannot be modified (but for objects, as long as you don’t change the object’s reference address it’s fine)
6. JS basic data types (age-old classic)
   • null, undefined, Number, String, Boolean, Symbol, Object
   • Briefly mentioned the bizarre case of typeof null being Object
     • Can you explain? Historical legacy issue. null’s machine code is all zeros, so it gets misidentified as Object. null is actually somewhat like a null pointer in C++, etc.
7. Talk about async and await, where have you encountered them?
   • File uploads and other async operations, solving callback hell (the interviewer deeply related)
8. Classic: Talk about the prototype chain, classes, and inheritance
   • I happened to be reading the Red Book these past few days. I have a summary: Deep Dive into JavaScript (1) - Prototype Chain and Inheritance
   • Classes are really just syntactic sugar
9. Talk about all CSS position attribute values
   • absolute, fixed, relative, static
   • absolute and fixed are taken out of the document flow. Also mentioned z-index.
10. Have you encountered any difficulties or pitfalls while building UIs?

• Margin collapse, background image settings (dug a hole), box model
• In retrospect, I should have mentioned popup layer implementation and ref

11. How did you learn frontend?
    • Studied for two months. Had experience with other languages, so getting started was fast (MDN, various frontend bootcamps, the Red Book, Bilibili, etc.)
12. Have you looked into TypeScript? Talk about its basic types.
13. Want to go the full-stack route?
    • Yes, have tinkered with cloud servers, run scripts, written web scrapers (the interviewer said “You’ve explored quite a range!”)
14. Interested in middle platform/infrastructure?
    • Yes
15. Questions for the interviewer
    • Company business direction (B2B, B2C)
    • Start date (the interviewer said she didn’t know, she handles the technical interview)

Overall, the experience was excellent. The interviewer said I did well and two months of study was impressive (is that a compliment? I’m doubtful).

Right after ending the first round, the second round call came in. Wow, transferred to the middle platform full-stack web internship (turns out HR had treated me as a 2022 graduate and assigned me to frontend, but frontend had no internship positions). Didn’t ask much about projects this time.

MetaApp Second Round - Middle Platform Full-Stack Web Internship

Interviewed the same afternoon, 1 hour.

• Self-introduction

• Difference between HTTP and HTTPS

  • Talked about asymmetric encryption

• Do you know about TCP and UDP?

  • Talked about reliable vs unreliable
  • Follow-up: Which one has higher data transmission efficiency?
  • What are UDP’s use cases?

• Briefly describe HTTP response codes

  • Mentioned 200, 301, 302, 304, 400, 401, 402, 403, 404, 409, 500, 502, 503

• Two algorithm problems (medium, easy)

  • Given an array of numbers, find the largest number that can be formed by concatenating them: 179. Largest Number - LeetCode
    • Mentioned overriding the sorting rule (dug a hole) but missed the key point: the sorting rule should be overridden as a+b > b+a (in string form)
    • Since I mentioned sorting, explain merge sort
      • A bit rusty. After explaining, I mentioned I’d recently written quicksort, so was asked to explain that too.
      • Quicksort: choose a pivot and move it to the correct position so all elements to its left are smaller and all to its right are larger.
      • For sorting 10 numbers, would you choose merge sort or quicksort?
      • When does quicksort reach its worst case?
        • Array is already sorted, or all elements are identical, and other extreme cases. Can be optimized by randomizing the pivot.
      • Are quicksort and merge sort stable?
        • Quicksort is unstable, merge sort is stable. (Follow-up: why is it stable?)
  • Poker straight detection (actually described as a straight flush, but I interpreted it as just a straight. Went with it.) Sword Offer 61. Poker Straight - LeetCode
    • This one went smoothly.

• Project questions: What problems did you encounter?

  • Server-side cross-origin issues
  • File upload to OSS, WebSocket for online user count detection
  • Sequelize embedding raw queries
  • After solving these, nothing felt particularly difficult anymore

• How did you solve the cross-origin issue?

  • On the server, I configured Nginx reverse proxy and used the koa-cors middleware

• How does cross-origin actually occur?

  • Browser same-origin policy. Also mentioned common solutions (CORS, JSONP, proxy, etc.)
  • Was about to explain why we use same-origin policy, but the interviewer said no need to go into that much detail, next topic.

• Interviewer: Suppose I’m writing the server and you’re writing the web client. A cross-origin issue occurs. Should I fix it or should you?

  • Usually let the backend handle it — just configure CORS. For the frontend, you’d need JSONP and such (interviewer’s response).

• What problems did you encounter with file uploads?

  • Talked about it at length. Done.
  • Did you choose OSS to save server space? (Yes)

• You mentioned ORM (then the interviewer explained a bit, no questions asked)

• Future plans

  • Polish projects, improve skills, go the full-stack route, etc.

• Questions for the interviewer

  • What does the department mainly work on?
    • B2B, for example the exam system used during the interview process. Internal business tools.
    • Java, Node.js, Python, etc. Java is used the most.

• “I approve of you on my end. I have no issues. HR will contact you for the next steps.” (Done)

I’m really good at talking. Hands on hips.