My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Interview Question: Read view-source of Facebook page and explain their HTML

Lakshay Dulani's photo
Lakshay Dulani
·Nov 27, 2019

My interviewer asked me to open view source of Facebook page and explain why and whats of their HTML.

<html lang="en" id="facebook" class="no_js">
<head>
<link rel="preload" .. />
</head>

<script>var bigPipe = new ....</script>
<script>bigPipe.setPageID("6763951872462779246-0");CavalryLogger.setPageID("6763951872462779246-0");</script>
<script>bigPipe.beforePageletArrive("pagelet_reminders")</script>
<!-- many many inline script tags with single lines and huge lines of scripts -->

<div class="hidden_elem"><code id="u_0_w">
<!-- <div class="_5pcb _dp7 _4j3f" aria-label="News Feed" role="region" data-testid="newsFeedStream" ....

Questions (and follow up questions) with my answers:

  • Why lang attribute on html? - It tells the browser, screen reader or any other client that the content is in English language.

  • Does lang attribute help in font rendering? - Cant say

  • Why id on html tag - May be their script and css requires it. May be using id as selector speeds up rather than using html node type in selectors.

  • Whats the purpose of giving preload when its already the first demanded asset, so its going to get loaded first only - No idea why

  • Why so many different inline script tags - May be because these are generated by different services.

  • Why not in an external js file - May be these have some security based tokens which change very frequently

  • Why not merged into one big script tag? - As I guessed, they might be from different services/servers, so they are in different script tags to handle asynchronous nature. But after that I saw the script (see the bigPipe one), the scripts seems to be sequential rather than independent of each other. Dont know why FB does this.

  • What purpose does div.hidden_elem and code element serve? - May be to save config related data on the page. Just like we have hidden input tags. I know I am wrong here.

  • Why is there commented html? - I said may be its due to that we use for IE. He said the commented html is for template - I replied that tag should have been used. Also why would FB put this in main html, they can also load the different templates asynchronously.

I didnt google the above questions and posted on SO cos I thought that there can be multiple opinions on the approach FB uses, and it can be an open ended discussion.

Let me know what are the answers according to you.

2