网站源码建站(“请解释一下Twitter的前10行源代码”)

作者 | 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出于性能原因省略了标签（以减少加载的代码量），但我依然认为应当明确地写出，因为是容纳元信息、样式等的容器。

第四行：

第五行：

第六行：

最佳答案：你可以将一个网站锚定到iPhone的主屏幕上，使它看起来像是一个原生应用Safari不支持渐进式Web应用，而且在iOS上无法真正使用其他浏览器引擎，所以如果想实现类似于原生的体验，你别无选择。

Twiiter为了实现原生效果，使用了这一行告诉Safari该应用的名称为Twitter下一行很相似，控制当应用启动时状态栏的显示方式

第八行：

安卓上的Chrome和桌面上的Brave浏览器都能很好地处理它content中可以设置任何CSS颜色，甚至可以通过media属性仅在特定媒体查询（例如暗色模式）满足时显示颜色你也可以在Web应用的manifest中定义该属性以及额外的属性。

第九行：

第十行：html{-ms-text-size-adjust:100%;-webkit-text...几乎没人知道这个选项，只有那些特别了解CSS的极端情况和优化措施的人才知道最佳答案：假设你的网站不支持移动端响应式，然后在一个小屏幕设备上打开该网站。

浏览器有可能会放大字体，以方便阅读CSS的text-size-adjust属性设置为none即可禁止该特性，或设置为一个百分比，告诉浏览器最多能放大多少这里，Twitter将最大值设置为100%，也就是说文字不会超过其实际大小。

这样做的原因是网站已经是响应式网站了，因此他们不希望冒着布局被破坏的风险来允许大号字体这个标签应用到根HTML标签上，所以对所有内容生效因为这是一个试验性的CSS，所以需要加上厂商前缀此外，在这个CSS之前少了一个，不过应该是被最小化到上一行了，我们没看到而已。

可接受答案：我不知道这个选项的具体情况，但-ms和-webkit-分别是Internet Exporer和基于Webkit的浏览器的厂商前缀，用于非标准属性在CSS3出现时我们曾经使用过这些前缀，但随着属性从试验阶段进入稳定阶段，或被标准接受，这些前缀就不再需要了。

额外奖励：第十一行：body{margin:0;}Twitter的这行代码非常有意思，因为你可以顺便问一下网页重置和标准化的区别几乎每个人都知道某个版本的正确答案最佳答案：因为不同的浏览器有不同的默认样式（用户代理样式表），所以你应该通过重置属性的方式覆盖默认样式，使网站在不同设备上拥有同样的外观。

此处，Twitter告诉浏览器去掉body标签的默认margin这样可以减少浏览器之间的不一致，但与重置相比，我更喜欢使用正规化样式，即在所有浏览器上应用同样的默认样式，而不是简单地删除有些人甚至会使用 * {margin:0 }，这一条过于强大了，而且会影响性能，但现在更常见的做法是导入 normalize.css或 reset.css等样式表。