A Complete Tech Guide For Frontend Job Interview #1

I believe every web developers who already have some working experience, know how it feels when you’re trying to find a new job.

The preparation seems endless. You’ll need to pick up the knowledge in broken pieces. Luckily, you may find some series of articles or video clips that gathers everything you need all at once. But in fact, that doesn’t happen every time, and what’s worse, you might not even know where to start for the preparation!

So I, who just spent almost half of a year finishing this journey, am here to bring up some directions for you. My goal is to make this series of articles a complete guide for any frontend developers who seeks for a start without any experience and ideas.

I hope to make it similar as a dictionary that gathers most of the technical knowledges one needs to know for job interview, meanwhile, classifies each resources in topics. You may re-open it anytime when you need some references for specific topics.

Table of contents here, feel free to pick up your individual path:

1. Browser And Internet Related (Topic today)
2. Coming Soon…

If you’re ready now, let’s rock and roll !

---

Browser And Internet Related

If there’s a ranking system representing the importance of all topics, this one would definitely get the highest score.

Chances are that interviewers may not prepare for frontend framework related questions such as React, Vue, Angular, etc., but the topic we’re talking about now will always show up as any kind of pattern in every corner of an interview.

The best way to start this topic is simply ask ourself a question:

What Happens When You Type in a URL ?

1. You enter a URL into a web browser
2. The browser looks up the IP address for the domain name via DNS
3. The browser sends a HTTP request to the server
4. The server sends back a HTTP response
5. The browser begins rendering the HTML
6. The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3–5.
7. Once the page is loaded, the browser sends further async requests as needed.

After we got the simple answer for this question, we can try to dig a bit more into those steps.

3 and 4 — HTTP request and response

The following list is the extensions for these two steps:

• HTTP status codes: What are the common codes, and how does the spec separate each types.
• HTTP cookies: You must heard of or even managed cookies before, but how far do you learn about it? Do you know “Domain Matching” which comes from the RFC spec? What about the Weakness of using cookies? Do you know what HttpOnly and Secure attributes do? And how do you manage them to prevent from weakness?
• SessionID with cookies: “Authentication” is a common feature in most applications. In most cases, we may try to build it with SessionID to provide stateful requests between client and server sides. Common sense for sure, then what about the attacks? How could we reduce the vulnerability of Hijacking and Fixation attack?
• cookies vs. localStorage: Both of them are provided from web browser to serve as small registers, but do you know their actual purpose, meanwhile, telling their best using scenario separately?
• HTTP cache: There’s a bunch of Headers including Pragma, Cache-Control, Etag, Last-Modified, Expires, etc. What are each of them for? BTW, there’s a frequently asked question in Cache-Control — What’s the difference between no-cache and no-store. Which should we use when we’re totally preventing the use of HTTP cache.
• HTTP vs. HTTPS: You must know about the Three-way Handshakes (TCP) in HTTP, then what about the Transport Layer Security (TLS) handshakes? Could you briefly describe it?
• CORS: Why is CORS happening and how can we avoid this issue? What kind of Access-Control-* do we have in Header, and what are each of them for?

Other References:

• HTTP cache in MDN
• IETF Documents — HTTP/1.1 RFC — Caches
• CORS series articles written by Huli. Strongly recommend this to get fully understand of CORS!! Though it’s written in mandarin.
• RFC — HTTP over TLS

5 — Browser rendering

we can then move on to our next stop, which surrounds with a topic — Critical Rendering Path:

• Styling Stage: The whole point of this stage is to build the render tree for the browser page. Do you know it is merged by the DOM and CSSOM trees? If you know it already, how much do you know about the rules of building the trees themselves? Could you briefly explain it? Do you know the difference between using display: none compare with visibility: hidden caused in this stage?
• Layout Stage: In this stage, we traverse the render tree, transforming the relative positions to absolute geometry in pixels, so called “box-model”. Same question as usual, could you briefly describe the characteristic of a box-model? Do you know what “Margin-collapse” is? How do we fix this issue?
• Paint Stage: This stage paints each objects into layers, including box-shadow, border-radius, background-color, etc. It causes the most time compare to all the other layers. When it comes to the CSS-animation that needs to move or resize an element, What are the tips to prevent from building a slow and janky animation.

Other References:

• CSS-Tricks — What you should know about collapsing margins
• CSS-Tricks — Rules of margin collapse

7 — Asynchronous

I believe things like “Ajax”, “Restful api”, “Promise / Async Await” should be intuitively connected with Async requests:

• What objects do we have in Restful apis? Could you introduce each of their best using scenario?
• Is there really any security vulnerabilities while using GET to do action queries instead of using POST? (Make sure you did a full research for this question. Quite a tricky one)
• The last one is about Promise syntax — Please build a function that can limit the concurrency by using Promise / Async Await. It means the api call would be blocked temporarily when it hits its limit passed by the function user, until one of the api calls returns and we get one more space for the api call.

Other References:

StackOverflow — Is either GET or POST more secure than the other?
HTTP POST vs GET: Is One More Secure For Use In REST APIs?

Conclusion

This is the end of today, any feedback is welcomed :>

Also I’d like to share some references related to FE Interview preparation that I find it useful for me:

• Front-end-Developer-Interview-Questions
• muyiy-questions — A blog written in mandarin. It gathers over hundred of FE interview questions including a variety of topics

Hope ya all find yourself a painless preparation journey !