我对 Twitter 前 10 行源代码的理解
https://p3.toutiaoimg.com/large/tos-cn-i-qvj2lq49k0/b8d1d0a7562b4798b331e5e7c11900c7本文最初发布于 CSS-Tricks 博客，由 InfoQ 中文站翻译并分享。
过去几周，我不绝在为我的家具租赁公司Pabio招聘一名高级全栈JavaScript 工程师。由于是一个远程团队，面试是在 Zoom 上进行的。根据我的观察，部分开发人员不善于现场编码或白板面试，即使他们对这项工作很在行。以是取而代之，我们会进行一小时的技术讨论，我会问他们关于 Web Vitals、可访问性、浏览器战役以及其他雷同 Web 话题的题目。我很喜欢问的一个题目是：“表明一下 Twitter 源代码的前十几行”。
我认为这是一个很简单的测试，可以借此了解应聘者对前端底子知识的把握程度。本文列出了这个题目的最佳答案。
我打开 Twitter.com，点击检察源代码并分享我的屏幕，然后要求他们逐行进行表明，他们想说多少就说多少。我放大了文本，使其更加清晰，以是你看不到整行的内容，不过可以大概有个了解，如下所示：
https://p3.toutiaoimg.com/large/tos-cn-i-qvj2lq49k0/81d9e06a5f8b4c799ae5b19e5aaa1375
留意，既然我们的技术讨论是一种谈话，以是我并不期望任何人能给出完善答案。只要听到一些正确的关键词，我就知道应聘者了解这个概念，我就会试着把他们引向正确的方向。
第 1 行：
每个源代码文档的第一行都非常适合这个面试，由于应聘者对DOCTYPE声明的了解程度与他们的工作年限密切相关。我仍然记得，在 Dreamweaver 期间，XHTML DOCTYPE 行很长，就像 2009 年 Chris 在文章“常见DOCTYPE”中所写的那样。
最佳答案：这是文档范例（doc-type）声明，我们总是把它放在 HTML 文件的第一行。你可能认为这些信息是多余的，由于浏览器已经知道响应的 MIME 范例是text/html；但在Netscape/Internet Explorer期间，浏览器要从多个相互竞争的版本中找出要使用哪个 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 行: 确定一堆css代码前面没有style标签？ 很好的学习材料，掌握现代html 学习 你在干嘛啊 转发了 转发了 源代码的前十几行………… 转发了 转发了
页:
[1]
2