本文最初发布于 css-tricks 博客，由 infoq 中文站翻译并分享。
过去几周，我一直在为我的家具租赁公司招聘一名高级javascript 工程师。由于是一个远程团队，面试是在 zoom 上进行的。根据我的观察，部分开发人员不擅长现场编码或白板面试，即使他们对这项工作很在行。所以取而代之，我们会进行一小时的技术讨论，我会问他们关于 web vitals、可访问性、浏览器战争以及其他类似 web 话题的问题。我很喜欢问的一个问题是：“解释一下 twitter 源代码的前十几行”。
我认为这是一个很简单的测试，可以借此了解应聘者对前端基础知识的掌握程度。本文列出了这个问题的最佳答案。
我打开 twitter.com，点击查看源代码并分享我的屏幕，然后要求他们逐行进行解释，他们想说多少就说多少。我放大了文本，使其更加清晰，所以你看不到整行的内容，不过可以大概有个了解，如下所示：
注意，既然我们的技术讨论是一种谈话，所以我并不期望任何人能给出完美答案。只要听到一些正确的关键词，我就知道应聘者了解这个概念，我就会试着把他们引向正确的方向。
第 1 行：
每个源代码文档的第一行都非常适合这个面试，因为应聘者对doctype声明的了解程度与他们的工作年限密切相关。我仍然记得，在 dreamweaver 时代，xhtml doctype 行很长，就像 2009 年 chris 在文章“”中所写的那样。
最佳答案：这是文档类型（doc-type）声明，我们总是把它放在 html 文件的第一行。你可能认为这些信息是多余的，因为浏览器已经知道响应的 mime 类型是text/html；但在，浏览器要从多个相互竞争的版本中找出要使用哪个 html 标准来渲染页面，这是一项困难的任务。
这一点尤其令人讨厌，因为每个标准都会产生不同的布局，所以采用这个标签是为了让浏览器更容易判断。以前，doctype标签很长，甚至包括规范链接（有点像现在的 svg），但幸运的是，在 html5 中得到了标准化，延续了下来。
也可接受：doctype标签告诉浏览器这是一个 html5 页面，应该这样渲染。
第 2 行：
这一行代码可以告诉我应聘者是否了解可访问性和本地化的问题。令人惊讶的是，在我的面试中，只有少数人知道dir属性，但这是讨论屏幕阅读器的一个很好的切入点。几乎每个人都能说清楚lang="en"属性，即使他们以前没有用过。
最佳答案：这是 html 文档的根元素，其他所有元素都包在这个元素里。它有两个属性：方向和语言。方向属性的值是从左到右，它告诉浏览器代理内容方向；另一个值是从右到左，适用于阿拉伯语等语言，或者是auto，让浏览器自己来决定。
语言属性告诉我们，这个标签里的所有内容都是英文的；你可以把这个值设置为任何语言，甚至可以区分en-us和en-gb。这对屏幕阅读器来说也很有用，可以知道用哪种语言来播音。
第 3 行：
最佳答案：源代码中的元标签用来提供关于这个文件的元数据。字符集（char-set）属性告诉浏览器要使用哪种字符编码，而 twitter 使用的是标准的 utf-8 编码。utf-8 很好，因为它有很多字符代码点，所以你可以在源代码中使用各种符号和表情。把这个标签放在代码开头附近，这很重要，这样浏览器就不会在遇到这一行之前解析太多的文本；我觉得可以定个这样的规则，就是把它放在文档的前 1000 个字节里，但我认为最好的做法是把它放在的正上方。
顺便提一下，twitter 似乎是出于性能方面的考虑（加载的代码较少）省略了标签，但我还是喜欢明确定义，因为它是所有元数据、样式等的大本营。
第 4 行:最佳答案：源代码中的这个元标签是为了在小屏幕上（比如智能手机）可以适当调整网页的大小。如果你还记得最早的 iphone 主题演讲，史蒂夫·乔布斯在那个 4.5 英寸的小屏幕上展示了整个《纽约时报》的网站；在那时，这是一个了不起的功能，你必须捏住放大才能阅读。
现在，网站的设计是响应式的，width=device-width告诉浏览器使用设备的整个宽度作为视口，所以没有水平滚动条，但你甚至可以使用具体的像素值指定宽度。通常，最佳的做法是将初始缩放比例设置为1，宽度设置为device-width，这让人们仍然可以根据自己的需要进行缩放。
还有些值源代码截图中没有显示出来，但你最好也了解下：twitter 还应用了user-scalable=0，顾名思义，就是禁用了缩放功能。这对可访问性没什么好处，但使网页感觉更像一个本地应用程序。出于同样的原因，它还设置了maximum-scale=1（你可以使用最小和最大缩放比例，并使用两者之间的值限制缩放能力）。一般来说，设置全宽和初始缩放比例就足够了。
第 5 行：大约 50%的应聘者知道 open graph 标签，如果他们这个问题回答得比较好，就表明他们了解 seo。
最佳答案：这个标签是网站名称 twitter 的 open graph（og）元标签。协议是由 facebook 制定的，目的是使链接更容易打开，并；开发者可以添加各种著作权详情和封面图片，实现花式分享。而事实上，使用 puppeteer 之类的东西自动生成 open graph 图片，现在也很常见。（）
另外提一个比较有趣的点，元标签通常具有name属性，但 og 使用非标准的property属性。我猜这只是 facebook 的特色。标题、url 和描述 open graph 标签有点多余，因为我们已经有了这些常规的元标签，人们添加它们只是为了安全。现在的大多数网站都搭配使用 open graph 和其他元标签以及页面上的内容来生成丰富多彩的预览。
第 6 行：
大多数应聘者都不知道这个，但有经验的开发者可以谈下如何针对苹果设备优化网站，比如apple-touch-icon和 safari 固定标签 svg。
最佳答案：你可以将网站固定在 iphone 主屏幕上，让它感觉像一个原生应用程序。safari 不支持渐进式 web 应用，你也无法在 ios 上使用其他浏览器引擎，所以如果你想要类似于原生的体验，真的没有其他选择，当然，twitter 是喜欢这种体验的。所以他们添加了这个，告诉 safari 这个应用的标题是 twitter。下一行类似，控制应用程序启动后状态栏如何显示。
第 8 行：
最佳答案：这是一个符合 web 标准的、相当于苹果状态栏颜色元标签的标签。。chrome on android 和 brave on desktop 在这方面都做得很好。你可以把任何 css 颜色放在内容中，甚至可以使用media属性，只为特定的媒体查询显示这种颜色，如支持深色主题。你也可以在 web 应用清单中定义这个及其他属性。
第 9 行：我面试过的人都不知道这个。我想，只有对标准化阶段发生的所有新鲜事都有深入的了解时，才会知道这个。
最佳答案：起源试验让我们可以在网站上使用实验性的新特性，跟踪用户代理反馈，并报告给 web 标准社区，而无需用户选择加入一个特性标识。例如，edge 有一个针对双屏和可折叠设备基元的起源试验，这非常酷，因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
也可接受：这个我不知道。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一行；只有了解 css 的边缘情况和优化时，才能看懂这一行。
最佳答案：想象一下，如果没有一个移动端响应式站点，那么当你在一个小屏幕上打开时，浏览器可能会调大字体，以方便阅读。css 的text-size-adjust属性可以用none值禁用，也可以指定一个百分比，允许浏览器调大字体。
在这种情况下，twitter 设置的最大比例是100%，所以文本不会大于实际尺寸；他们这样做是因为他们的网站已经是响应式的，他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 html 标签，所以它作用于根标签中的所有内容。由于这是一个实验性的 css 属性，所以需要供应商前缀。另外，这行 css 代码之前少了
现在，网站的设计是响应式的，width=device-width告诉浏览器使用设备的整个宽度作为视口，所以没有水平滚动条，但你甚至可以使用具体的像素值指定宽度。通常，最佳的做法是将初始缩放比例设置为1，宽度设置为device-width，这让人们仍然可以根据自己的需要进行缩放。
还有些值源代码截图中没有显示出来，但你最好也了解下：twitter 还应用了user-scalable=0，顾名思义，就是禁用了缩放功能。这对可访问性没什么好处，但使网页感觉更像一个本地应用程序。出于同样的原因，它还设置了maximum-scale=1（你可以使用最小和最大缩放比例，并使用两者之间的值限制缩放能力）。一般来说，设置全宽和初始缩放比例就足够了。
第 5 行：大约 50%的应聘者知道 open graph 标签，如果他们这个问题回答得比较好，就表明他们了解 seo。
最佳答案：这个标签是网站名称 twitter 的 open graph（og）元标签。协议是由 facebook 制定的，目的是使链接更容易打开，并；开发者可以添加各种著作权详情和封面图片，实现花式分享。而事实上，使用 puppeteer 之类的东西自动生成 open graph 图片，现在也很常见。（）
另外提一个比较有趣的点，元标签通常具有name属性，但 og 使用非标准的property属性。我猜这只是 facebook 的特色。标题、url 和描述 open graph 标签有点多余，因为我们已经有了这些常规的元标签，人们添加它们只是为了安全。现在的大多数网站都搭配使用 open graph 和其他元标签以及页面上的内容来生成丰富多彩的预览。
第 6 行：
大多数应聘者都不知道这个，但有经验的开发者可以谈下如何针对苹果设备优化网站，比如apple-touch-icon和 safari 固定标签 svg。
最佳答案：你可以将网站固定在 iphone 主屏幕上，让它感觉像一个原生应用程序。safari 不支持渐进式 web 应用，你也无法在 ios 上使用其他浏览器引擎，所以如果你想要类似于原生的体验，真的没有其他选择，当然，twitter 是喜欢这种体验的。所以他们添加了这个，告诉 safari 这个应用的标题是 twitter。下一行类似，控制应用程序启动后状态栏如何显示。
第 8 行：
最佳答案：这是一个符合 web 标准的、相当于苹果状态栏颜色元标签的标签。。chrome on android 和 brave on desktop 在这方面都做得很好。你可以把任何 css 颜色放在内容中，甚至可以使用media属性，只为特定的媒体查询显示这种颜色，如支持深色主题。你也可以在 web 应用清单中定义这个及其他属性。
第 9 行：我面试过的人都不知道这个。我想，只有对标准化阶段发生的所有新鲜事都有深入的了解时，才会知道这个。
最佳答案：起源试验让我们可以在网站上使用实验性的新特性，跟踪用户代理反馈，并报告给 web 标准社区，而无需用户选择加入一个特性标识。例如，edge 有一个针对双屏和可折叠设备基元的起源试验，这非常酷，因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
也可接受：这个我不知道。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一行；只有了解 css 的边缘情况和优化时，才能看懂这一行。
最佳答案：想象一下，如果没有一个移动端响应式站点，那么当你在一个小屏幕上打开时，浏览器可能会调大字体，以方便阅读。css 的text-size-adjust属性可以用none值禁用，也可以指定一个百分比，允许浏览器调大字体。
在这种情况下，twitter 设置的最大比例是100%，所以文本不会大于实际尺寸；他们这样做是因为他们的网站已经是响应式的，他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 html 标签，所以它作用于根标签中的所有内容。由于这是一个实验性的 css 属性，所以需要供应商前缀。另外，这行 css 代码之前少了
最佳答案：这个标签是网站名称 twitter 的 open graph（og）元标签。协议是由 facebook 制定的，目的是使链接更容易打开，并；开发者可以添加各种著作权详情和封面图片，实现花式分享。而事实上，使用 puppeteer 之类的东西自动生成 open graph 图片，现在也很常见。（）
另外提一个比较有趣的点，元标签通常具有name属性，但 og 使用非标准的property属性。我猜这只是 facebook 的特色。标题、url 和描述 open graph 标签有点多余，因为我们已经有了这些常规的元标签，人们添加它们只是为了安全。现在的大多数网站都搭配使用 open graph 和其他元标签以及页面上的内容来生成丰富多彩的预览。
第 6 行：
大多数应聘者都不知道这个，但有经验的开发者可以谈下如何针对苹果设备优化网站，比如apple-touch-icon和 safari 固定标签 svg。
最佳答案：你可以将网站固定在 iphone 主屏幕上，让它感觉像一个原生应用程序。safari 不支持渐进式 web 应用，你也无法在 ios 上使用其他浏览器引擎，所以如果你想要类似于原生的体验，真的没有其他选择，当然，twitter 是喜欢这种体验的。所以他们添加了这个，告诉 safari 这个应用的标题是 twitter。下一行类似，控制应用程序启动后状态栏如何显示。
第 8 行：
最佳答案：这是一个符合 web 标准的、相当于苹果状态栏颜色元标签的标签。。chrome on android 和 brave on desktop 在这方面都做得很好。你可以把任何 css 颜色放在内容中，甚至可以使用media属性，只为特定的媒体查询显示这种颜色，如支持深色主题。你也可以在 web 应用清单中定义这个及其他属性。
第 9 行：我面试过的人都不知道这个。我想，只有对标准化阶段发生的所有新鲜事都有深入的了解时，才会知道这个。
最佳答案：起源试验让我们可以在网站上使用实验性的新特性，跟踪用户代理反馈，并报告给 web 标准社区，而无需用户选择加入一个特性标识。例如，edge 有一个针对双屏和可折叠设备基元的起源试验，这非常酷，因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
也可接受：这个我不知道。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一行；只有了解 css 的边缘情况和优化时，才能看懂这一行。
最佳答案：想象一下，如果没有一个移动端响应式站点，那么当你在一个小屏幕上打开时，浏览器可能会调大字体，以方便阅读。css 的text-size-adjust属性可以用none值禁用，也可以指定一个百分比，允许浏览器调大字体。
在这种情况下，twitter 设置的最大比例是100%，所以文本不会大于实际尺寸；他们这样做是因为他们的网站已经是响应式的，他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 html 标签，所以它作用于根标签中的所有内容。由于这是一个实验性的 css 属性，所以需要供应商前缀。另外，这行 css 代码之前少了
第 9 行：我面试过的人都不知道这个。我想，只有对标准化阶段发生的所有新鲜事都有深入的了解时，才会知道这个。
最佳答案：起源试验让我们可以在网站上使用实验性的新特性，跟踪用户代理反馈，并报告给 web 标准社区，而无需用户选择加入一个特性标识。例如，edge 有一个针对双屏和可折叠设备基元的起源试验，这非常酷，因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
也可接受：这个我不知道。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一行；只有了解 css 的边缘情况和优化时，才能看懂这一行。
最佳答案：想象一下，如果没有一个移动端响应式站点，那么当你在一个小屏幕上打开时，浏览器可能会调大字体，以方便阅读。css 的text-size-adjust属性可以用none值禁用，也可以指定一个百分比，允许浏览器调大字体。
在这种情况下，twitter 设置的最大比例是100%，所以文本不会大于实际尺寸；他们这样做是因为他们的网站已经是响应式的，他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 html 标签，所以它作用于根标签中的所有内容。由于这是一个实验性的 css 属性，所以需要供应商前缀。另外，这行 css 代码之前少了