作者 | Anand Chowdhary 译者 | 弯月
出品 | CSDN（ID：CSDNnews）
最近，我在为公司雇用一名高级全栈JavaScript工程师。由于我们是远程工作，因此面试在Zoom上举行，而且我留意到一些开发人员非常适合这份工作，却不擅长在白板上编写程序。以是，我们采取了一小时技术交流的方式，我提出有关Web指标、可访问性、欣赏器之战，以及其他有关Web的题目。每次我都要问的一个题目是：“请解释一下Twitter的网页源代码前10行。”
我认为，这是一个很简单的测试，但能检验出候选人对于前端基础知识把握的深度。
面试时，我会共享我的屏幕，打开Twitter.com并点击“查看源代码”。然后，我会让他们逐行解释HTML代码，至于解释的深度由他们自行决定。我还会放大屏幕，这样候选人看不到每一行完备的代码，但能大致了解代码的意思。如下所示：
请留意，我们的技术讨论只是一次对话，以是我并不会期待完善的答案。如果我听到一些正确的关键字，我就知道候选人了解这个概念，然后我会朝着正确的方向引导他们。
第一行：
网页源代码的第一行非常适合这类面试，由于候选人对于DOCTYPE的了解水平根本上能反映出他们的经验。我还记得当年Dreamweaver流行的时间，必要编写一串XHTML DOCTYPE，就像2009年Chris在文章《The Common DOCTYPES》中列出的一样（https://css-tricks.com/snippets/html/the-common-doctypes/）。
最佳答案：这一行是文档类型界说，所有HTML文件的第一行必须这么写。有人可能会认为这行代码是多余的，由于欣赏器已经知道响应的MIME类型是text/html，但在Netscape和Internet Explorer的期间，有许多不同的HTML标准，因此欣赏器很难判断应该遵照哪个标准来渲染页面。
这一点非常烦人，由于每个标准都会生成不同的布局，这才必要使用这个标签，帮助欣赏器举行渲染。从前，DOCTYPE非常长，而且还会包含标准的连接（就像本日的SVG文件那样），但幸运的是，这种简洁的成为了HTML 5的标准，并连续至今。
可以接受的答案：这是DOCTYPE标签，让欣赏器知道这是一个HTML 5网页，并应按照HTML 5渲染。
第二行：
这一行可以判断出候选人是否了解可访问性和本地化。令人惊讶的是，我面试过的人中很少有人知道dir属性，但这个属性能引发有关屏幕阅读器的讨论。险些每个人都能判断出lang="en"属性的含义，纵然他们从未用过。
最佳答案：这是HTML文档的根元素，其他元素都位于该元素之内。它有两个属性：方向和语言。方向属性的值为“从左到右”，告诉用户代理内容的方向；这个值也可以是“从右到左”，好比阿拉伯语；或者是“auto”，让欣赏器自行判断方向。
lang（语言）属性指明白该标签内的所有代码都是英语。你可以将这个值设置成任何语言标签，甚至可以区分en-us和en-gb。它也可以帮助屏幕阅读器判断该用哪种语言来读出笔墨。
第三行：
最佳答案：源代码中的meta标签为文档提供了元数据。字符集（charset）属性告诉欣赏器该使用哪种字符编码，Twitter使用的是标准的UTF-8编码。UTF-8非常好，由于它包含了许多字符点，因此可以在源代码中使用各种符号，甚至是心情符号。将这个标签放在文档开头非常紧张，保证欣赏器在碰到该标签时不至于已开始解析太多文本。我记得规则是要放在文档开头1k字节内，但我认为最佳实践是放在的第一行。
另外，似乎Twitter出于性能原因省略了标签（以减少加载的代码量），但我依然认为应当明确地写出，由于是容纳元信息、样式等的容器。
<strong><span >第四行： |
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
