声明：本文翻译自以下地址，新手翻译，欢迎指正
【原文地址】css-tricks.com/explain-the…
【原文作者】Anand Chowdhary 阿南德·乔杜里
【原文时间】2022年2月24日
在过去的几周里，我一直在为我所工作的家具租赁公司——Pabio招聘一名高级全栈JavaScript工程师。因为我们是一个远程团队，所以我们会在Zoom上进行面试。我发现有些开发者，即使他们擅长这份工作，却依然不擅长在线编码或电子面试。而当我询问他们关于Web的重要性，易用性，几次浏览器大战，以及其他类似的和Web相关的话题的时候，我们竟然能讨论长达一个小时。一个我总是喜欢一个问题:“请和我解释下Twitter源码的大概前十行代码的具体含义。”
我认为这是一个简单的测试，但是能让我知道他们 (面试者) 所掌握的前端技术栈的深度，现在这篇文章列出了关于这个问题的最佳答案。
作为面试的准备，我会共享我的屏幕，打开Twitter.com并点开查看网页源代码。然后我让他们逐行告诉我该怎么理解这行HTML代码，他们可以或多或少尽情表达。为了让文本更加清晰，我还放大了文本，这样你虽然看不到完整的代码行，但你可以自由发挥。大概就是下面这个样子:
需要说明的是，由于我们的技术探讨只是一次普通的对话，所以我也从没有想过从谁哪里得到完美的答案。如果我听到一些正确的关键词，我就知道面试者知道这个概念，然后我会尝试把他们引导到正确的方向。
第一行
<!DOCTYPE html>
这个每个HTML源代码的第一行对这次面试来说是非常合适的，因为面试者对DOCTYPE声明的了解程度与他们有多少年的工作经验是成正比。我仍然记得在Dreamweaver中使用XHTML DOCTYPE长行的日子，就像2009年Chris在他的博客《通用DOCTYPES》中列举的一样。
标准答案：这一标签声明了文档类型（doc-type），所以我们总是把它作为HTML文件的第一行。你也许认为这些信息是多余的，因为浏览器早已经通过请求的响应头MIME类型是text/html，就知道了文本类型；但是在Netscape和Internet Explorer时代，浏览器面临着一项艰巨的任务，就是从几个互相矛盾的HTML标准中确定使用哪种标准来渲染页面。
特别令人反感的是每个标准都会生成不同的布局，所以使用这个标签让浏览器更容易识别。以前，DOCTYPE标签很长，甚至包括当前规范的超链接(有点类似今天的SVG)，但幸运的是，这个简单的标签在HTML5中被标准化了，并且仍存在至今。
其他可接受答案：这是DOCTYPE标签，为了浏览器知道这是一个HTML5页面，并且依此渲染。
第二行
<html dir="ltr" lang="en">
源码中的这一行可以让我知道面试者是否了解易用性和本地化。奇怪的是，在我所有的面试中，只有少数人了解dir属性，但是这题可以很好的过渡到讨论目标用户上去。几乎所有人都能解释lang="en"属性，即便是他们以前并没有使用过。
标准答案：这一标签是HTML文档的根标签，所有其他标签都在这个根标签之内。这里，它有两个属性，direction和language。direction的属性值left-to-right (从左往右) 是用来告知浏览器UA展示内容的方向，其他属性值right-to-left（从右往左）适用阿拉伯之类的语言，也可以直接设置成auto（自动），意思是交给浏览器自己判断。
language属性告诉我们，这个标签内的所有内容都是英语的；你可以将这个值设置为任何语言缩写，比如甚至可以区分成en-us和en-gb。这对于告知读者当前使用那种语言也是很有用的。
第三行
<meta charset="utf-8">
标准答案：源码中的meta标签说明了文档的meta数据。 字符集(char-set)属性告诉浏览器使用哪种字符编码，Twitter使用标准的UTF-8编码。UTF-8非常棒，因为它有很多特性，方便你可以在源码中使用各种符号和表情。把这行标签放在代码的开头部分也是很重要的，这样当浏览器解析到这一行时，前面并没有解析多少的文本；我认为规则是把它放在文档的前一千个字节之内，但我想说最佳实践是把它刚好放在标签的最上方。
顺便提一句，这似乎表明Twitter由于性能原因 (加载较少代码) 省略了标签。但我仍然喜欢明确地使用它，因为用他包裹所有meta数据、style样式等等显得更加清晰、简洁。
第四行:
<meta name="viewport" content="width=device-...
标准答案：源代码中的这行meta标签用于在小屏幕上(如智能手机)适当调整网页大小。如果你还记得最早的iPhone主题演讲，史蒂夫·乔布斯在那块小小的4.5英寸屏幕上展示了整个《纽约时报》网站；在当时那个时候，它是一个神奇的特性，你必须双指缩放才能正常阅读。
现在网站在设计上是响应性的，width=device-width是告诉浏览器当没有水平滚动时，使用屏幕宽度的100%用来显示，甚至你可以指定具体的像素值作为宽度。标准的最佳实践是将初始比例设置为1，宽度设置为屏幕宽度，以便人们任然可以随意缩放。
有些源代码截图中没有显示，但可想而知的值：Twitter还使用了user-scalable=0，顾名思义，这禁用了缩放功能。这虽然损坏了易用性，却让网页感觉更像一个原生APP。因为同样的原因Twitter也设置maximum-scale=1(你可以使用最小和最大比例来限制某个区间内的缩放能力)。一般来说，设置全屏宽度和初始比例就可以了。
第五行
<meta property="og:site_name" content="Twitt...
大约50%的面试者知道Open Graph标签，能回答好这个问题表明他们知道SEO。
标准答案：这个标签是一个Open Graph (OG)meta标签，作用于名为Twitter的网站。Open Graph Protocol是由Facebook开发的，目的是让网站链接更易于公开传播，并以漂亮的卡片布局显示预览；开发人员可以添加各式各样的原创信息和封面图让分享更加美观。【TODO】实际上，现在甚至可以使用诸如Puppeteer之类的工具自动生成og缩略图。(CSS-Tricks uses a WordPress plugin 就是这么做的。)
另一个有趣的地方是meta标签通常都有name属性，但是OG使用的是非标准性属性。我想这就是FaceBook之所以成为FaceBook的原因吧？其中的title、URL和description这些Open Graph标签有点多余，因为我们已经有了这些常规的meta标签，但人们添加它们只是为了确保安全。现在大多数网站都结合使用Open Graph和其他meta标签，以便页面上的内容有个丰富的预览体验。
第六行
<meta name="apple-mobile-web-app-title" cont...
大多数面试者都不知道这个问题，但有经验的开发者可以谈谈如何为苹果设备优化网站，比如苹果快捷图标（apple-touch-icons）和Safari固定SVG标签。
标准答案：你可以把一个网站固定在iPhone的主屏上，从而让它看起来像一个原生应用。Safari浏览器不支持渐进式的Web应用，并且你不能在iOS上使用其他浏览器引擎做到这样。所以如果你想要这种近乎原生的体验（Twitter当然想要这种），真的没有其他的选择。所以他们添加这行用来告诉Safari这个应用的名字叫Twitter。
下一行也是类似，用来控制应用程序启动时状态栏应该展示成什么。
第八行
<meta name="theme-color" content="#ffffff"...
标准答案：这是一个符合Web标准范式等同于苹果状态栏颜色的meta标签。它告诉浏览器将周围的UI主题化。Android上的Chrome和台式机上的Brave在这方面都做得很好。您可以在内容中放入任何CSS颜色，甚至可以使用media属性显示特定的模糊media识别结果，例如，支持暗黑主题。您也可以在web应用清单中定义这个和其他属性。
第九行
<meta http-equiv="origin-trial" content="...
我面试过的人里没有一个知道这一行。我认为，只有当你对标准方向上发生的所有新事情有深入的了解时，你才会知道这一点。
标准答案：Origin trials让我们在网站上使用新的和实验性的特性，用户代理跟踪反馈并向WEB标准社区报告，而无需用户选择标记功能。例如，Edge有一个非常酷的针对双屏和可折叠设备原语的初始试用版本，你可以根据可折叠手机的打开或关闭状态调整出有趣的布局。
其他可接受答案：这个我不知道。
第十行
html{-ms-text-size-adjust:100%;-webkit-text...
这一行也几乎没有人知道；只有当你知道CSS的边界案例和优化方案，你才能理解这一行；
标准答案：想象一下，一个网站没有做移动端的响应式布局，但是你在一个小屏幕上打开它，浏览器可能会调整文本的大小，让文本更大一些，使其更容易阅读。这行CSS text-size-adjust属性既可以通过赋值none来禁用这个特性，也可以明确指定允许浏览器文本放大的百分比。
在这个例子中，Twitter设置的最大值是100%，所以文本应该不比实际大小大；他们这样设置因为他们的网站已经做了响应式布局，并且他们不想冒险让浏览器用更大的字体破坏布局。这是作用于根HTML标签，所以它适用于一切内部标签。因为这是一个实验性的CSS属性，所以需要浏览器内核的前缀。此外，在这行CSS前面，缺少一个标签，但我推测这个style标签缩略在前一行，所以我们没有看到它。
其他可接受答案：我不知道这个属性的具体情况，但-ms和-webkit-分别是Internet Explorer和基于webkit内核的浏览器的添加的非标准属性前缀。当CSS3出现时，我们曾经需要这些前缀，但随着属性从实验走向稳定或被采用到标准轨道，这些前缀就会消失，取而代之的是标准化的属性。
附录
第十一行
body{margin:0;}
Twitter源码中的这一行特别有趣，因为你可以接着问重置和正常的网页之间的区别。几乎每个人都知道某个版本的正确答案。
标准答案：因为不同的浏览器有不同的默认样式 (用户代理样式) ，通过重置属性来覆盖它们，这样你的站点在不同设备上看起来就是一样的。在本例中，Twitter告诉浏览器删除body标签的默认margin。这只是为了减少浏览器之间的不一致，但我更喜欢通用化的样式，而不是重置样式。也就是说，在不同的浏览器中使用相同的默认值，而不是完全删除它们。人们甚至曾经使用* {margin: 0}，这完全是多余的，对性能也不好，但通常现在引入的像normalize.css或reset.css (甚至还有更新的) 都是从这里开始的。
其他行
我总是喜欢用浏览器检查工具来观察网站是如何制作的，这也是我产生这个想法的原因。尽管我认为自己是语义化HTML方面的专家，但每次做这个操作时我都能学到一些新东西。
由于Twitter主要是一个客户端React应用程序，源代码中只有几十行。即便如此，依然有很多东西值得学习！在Twitter源代码中还有几行有趣的代码，我把它们留给读者作为一种练习。你能在面试中解释他们中的几个呢?
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">
这行：告诉浏览器用户可以添加Twitter作为搜索引擎。
<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />
这行：有许多有趣的属性可以讨论，特别是nonce属性。
<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />
这行：用于国际化登录页。
:focus:not([data-focusvisible-polyfill]){outline: none;}
这行：当不使用键盘导航时，移除焦点区域的边框 ( 这行CSS: focus-visible 选择器在这里是脚本化的)。
