InfoQ 潜水
  • 12发帖数
  • 12主题数
  • 0关注数
  • 0粉丝
开启左侧

我对 Twitter 前 10 行源代码的理解

[复制链接]
 楼主| InfoQ 发表于 2022-4-21 19:00:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

                               
登录/注册后可看大图

本文最初发布于 CSS-Tricks 博客,由 InfoQ 中文站翻译并分享。


过去几周,我不绝在为我的家具租赁公司Pabio招聘一名高级全栈JavaScript 工程师。由于是一个远程团队,面试是在 Zoom 上进行的。根据我的观察,部分开发人员不善于现场编码或白板面试,即使他们对这项工作很在行。以是取而代之,我们会进行一小时的技术讨论,我会问他们关于 Web Vitals、可访问性、浏览器战役以及其他雷同 Web 话题的题目。我很喜欢问的一个题目是:“表明一下 Twitter 源代码的前十几行”。


我认为这是一个很简单的测试,可以借此了解应聘者对前端底子知识的把握程度。本文列出了这个题目的最佳答案。


我打开 Twitter.com,点击检察源代码并分享我的屏幕,然后要求他们逐行进行表明,他们想说多少就说多少。我放大了文本,使其更加清晰,以是你看不到整行的内容,不过可以大概有个了解,如下所示:



                               
登录/注册后可看大图



留意,既然我们的技术讨论是一种谈话,以是我并不期望任何人能给出完善答案。只要听到一些正确的关键词,我就知道应聘者了解这个概念,我就会试着把他们引向正确的方向。


第 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 行:

精彩评论12

老董搬代码 发表于 2022-4-21 21:29:50 | 显示全部楼层
确定一堆css代码前面没有style标签?
潘天拍 发表于 2022-4-21 22:47:48 | 显示全部楼层
很好的学习材料,掌握现代html
海斯克Haisk 发表于 2022-4-21 23:42:31 | 显示全部楼层
学习
风里落花笑 发表于 2022-4-22 01:42:38 | 显示全部楼层
你在干嘛啊
ET猛犸 发表于 2022-4-22 04:47:32 | 显示全部楼层
转发了
杰森-伯恩644 发表于 2022-4-22 08:45:57 | 显示全部楼层
转发了
沃是王宇生 发表于 2022-4-22 09:28:49 | 显示全部楼层
源代码的前十几行…………
坦荡的可乐mz 发表于 2022-4-22 10:31:32 | 显示全部楼层
转发了
神话滨 发表于 2022-4-22 10:54:49 | 显示全部楼层
转发了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

猜你喜欢
在线客服QQ
2241998733

24x7小时免费咨询

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城繁体中文