收藏文章 楼主
Twitter的前10行源代码的理解分享
网友【Ranger】 2022-04-25 04:23:11 分享在【时代发展的印记】版块    1    1

网友分享在meiguo.com上的图片

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

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

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

网友分享在meiguo.com上的图片

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

第 1 行:<!DOCTYPE html>

每个源代码文档的第一行都非常适合这个面试,因为应聘者对DOCTYPE声明的了解程度与他们的工作年限密切相关。我仍然记得,在 Dreamweaver 时代,XHTML DOCTYPE 行很长,就像 2009 年 Chris 在文章“常见DOCTYPE”中所写的那样。

最佳答案:这是文档类型(doc-type)声明,我们总是把它放在 HTML 文件的第一行。你可能认为这些信息是多余的,因为浏览器已经知道响应的 MIME 类型是text/html;但在Netscape/Internet Explorer时代,浏览器要从多个相互竞争的版本中找出要使用哪个 HTML 标准来渲染页面,这是一项困难的任务。

这一点尤其令人讨厌,因为每个标准都会产生不同的布局,所以采用这个标签是为了让浏览器更容易判断。以前,DOCTYPE标签很长,甚至包括规范链接(有点像现在的 SVG),但幸运的是,<!doctype html>在 HTML5 中得到了标准化,延续了下来。

也可接受:DOCTYPE标签告诉浏览器这是一个 HTML5 页面,应该这样渲染。

第 2 行:<html lang="en">

这一行代码可以告诉我应聘者是否了解可访问性和本地化的问题。令人惊讶的是,在我的面试中,只有少数人知道dir属性,但这是讨论屏幕阅读器的一个很好的切入点。几乎每个人都能说清楚lang="en"属性,即使他们以前没有用过。

最佳答案:这是 HTML 文档的根元素,其他所有元素都包在这个元素里。它有两个属性:方向和语言。方向属性的值是从左到右,它告诉浏览器代理内容方向;另一个值是从右到左,适用于阿拉伯语等语言,或者是auto,让浏览器自己来决定。

语言属性告诉我们,这个标签里的所有内容都是英文的;你可以把这个值设置为任何语言,甚至可以区分en-us和en-gb。这对屏幕阅读器来说也很有用,可以知道用哪种语言来播音。

第 3 行:<meta>

最佳答案:源代码中的元标签用来提供关于这个文件的元数据。字符集(char-set)属性告诉浏览器要使用哪种字符编码,而 Twitter 使用的是标准的 UTF-8 编码。UTF-8 很好,因为它有很多字符代码点,所以你可以在源代码中使用各种符号和表情。把这个标签放在代码开头附近,这很重要,这样浏览器就不会在遇到这一行之前解析太多的文本;我觉得可以定个这样的规则,就是把它放在文档的前 1000 个字节里,但我认为最好的做法是把它放在<head>的正上方。

顺便提一下,Twitter 似乎是出于性能方面的考虑(加载的代码较少)省略了<head>标签,但我还是喜欢明确定义,因为它是所有元数据、样式等的大本营。

第 4 行:<meta content="width=device-...

最佳答案:源代码中的这个元标签是为了在小屏幕上(比如智能手机)可以适当调整网页的大小。如果你还记得最早的 iPhone 主题演讲,史蒂夫·乔布斯在那个 4.5 英寸的小屏幕上展示了整个《纽约时报》的网站;在那时,这是一个了不起的功能,你必须捏住放大才能阅读。

现在,网站的设计是响应式的,width=device-width告诉浏览器使用设备的整个宽度作为视口,所以没有水平滚动条,但你甚至可以使用具体的像素值指定宽度。通常,最佳的做法是将初始缩放比例设置为1,宽度设置为device-width,这让人们仍然可以根据自己的需要进行缩放。

还有些值源代码截图中没有显示出来,但你最好也了解下:Twitter 还应用了user-scalable=0,顾名思义,就是禁用了缩放功能。这对可访问性没什么好处,但使网页感觉更像一个本地应用程序。出于同样的原因,它还设置了maximum-scale=1(你可以使用最小和最大缩放比例,并使用两者之间的值限制缩放能力)。一般来说,设置全宽和初始缩放比例就足够了。

第 5 行:<meta property="og:site_name" content="Twitt...

大约 50%的应聘者知道 Open Graph 标签,如果他们这个问题回答得比较好,就表明他们了解 SEO。

最佳答案:这个标签是网站名称 Twitter 的 Open Graph(OG)元标签。Open Graph协议是由 Facebook 制定的,目的是使链接更容易打开,并在一个漂亮的卡片布局中显示预览;开发者可以添加各种著作权详情和封面图片,实现花式分享。而事实上,使用 Puppeteer 之类的东西自动生成 Open Graph 图片,现在也很常见。(CSS-Tricks使用了一个WordPress插件来做到这一点。)

另外提一个比较有趣的点,元标签通常具有name属性,但 OG 使用非标准的property属性。我猜这只是 Facebook 的特色。标题、URL 和描述 Open Graph 标签有点多余,因为我们已经有了这些常规的元标签,人们添加它们只是为了安全。现在的大多数网站都搭配使用 Open Graph 和其他元标签以及页面上的内容来生成丰富多彩的预览。

第 6 行:<meta cont...

大多数应聘者都不知道这个,但有经验的开发者可以谈下如何针对苹果设备优化网站,比如apple-touch-icon和 Safari 固定标签 SVG。

最佳答案:你可以将网站固定在 iPhone 主屏幕上,让它感觉像一个原生应用程序。Safari 不支持渐进式 Web 应用,你也无法在 iOS 上使用其他浏览器引擎,所以如果你想要类似于原生的体验,真的没有其他选择,当然,Twitter 是喜欢这种体验的。所以他们添加了这个,告诉 Safari 这个应用的标题是 Twitter。下一行类似,控制应用程序启动后状态栏如何显示。

第 8 行:<meta content="#ffffff"...

最佳答案:这是一个符合 Web 标准的、相当于苹果状态栏颜色元标签的标签。它告诉浏览器周边UI使用什么主题色。Chrome on Android 和 Brave on Desktop 在这方面都做得很好。你可以把任何 CSS 颜色放在内容中,甚至可以使用media属性,只为特定的媒体查询显示这种颜色,如支持深色主题。你也可以在 Web 应用清单中定义这个及其他属性。

第 9 行:<meta http-equiv="origin-trial" content="...

我面试过的人都不知道这个。我想,只有对标准化阶段发生的所有新鲜事都有深入的了解时,才会知道这个。

最佳答案:起源试验让我们可以在网站上使用实验性的新特性,跟踪用户代理反馈,并报告给 Web 标准社区,而无需用户选择加入一个特性标识。例如,Edge 有一个针对双屏和可折叠设备基元的起源试验,这非常酷,因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。

也可接受:这个我不知道。

第 10 行:html{-ms- ">几乎没有人知道这一行;只有了解 CSS 的边缘情况和优化时,才能看懂这一行。

最佳答案:想象一下,如果没有一个移动端响应式站点,那么当你在一个小屏幕上打开时,浏览器可能会调大字体,以方便阅读。CSS 的text-size-adjust属性可以用none值禁用,也可以指定一个百分比,允许浏览器调大字体。

在这种情况下,Twitter 设置的最大比例是100%,所以文本不会大于实际尺寸;他们这样做是因为他们的网站已经是响应式的,他们不想冒因浏览器调大字体而破坏布局的风险。它作用于根 HTML 标签,所以它作用于根标签中的所有内容。由于这是一个实验性的 CSS 属性,所以需要供应商前缀。另外,这行 CSS 代码之前少了<style>,但我猜这是在前一行去掉的,所以我们没有看到。

也可接受:我不特别了解这个属性,但-ms和 ">

意外收获——第 11 行:body{}

Twitter 源代码中的这一行特别有趣,因为你可以跟进一个问题,即网页重置和规范化之间有什么区别。几乎每个人都有一个版本的正确答案。

最佳答案:不同浏览器有不同的默认样式(用户代理样式表),而你希望通过重置属性来覆盖它们,使得网站在不同的设备上看起来都一样。在这种情况下,Twitter 就告诉浏览器删除body标签的默认边距。这只是为了降低浏览器的不一致性,但我更喜欢将样式规范化,而不是重置它们,也就是说,在不同的浏览器上应用相同的默认值,而不是完全删除它们。人们甚至曾经使用* { ">

更多有趣的代码

我一直很喜欢玩浏览器的检查器工具,看一看网站是如何制作的,我就是因为这个想出了这样的面试方法。尽管我自认为算是语义 HTML 方面的专家,但每次这样做时我都会学到一些新东西。

因为 Twitter 主要是一个客户端 React 应用,所以源代码只有几十行。即使这样还是有很多东西可以学!在 Twitter 的源代码中,还有一些更有趣的行,我留给读者做练习。你能在面试中解释其中的多少个?

<link type="application/opensearchdescription+xml" href="/opensearch.xml">

…告诉浏览器用户可以将 Twitter 添加为一个搜索引擎。

<link as="script" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />

…有许多有趣的属性可供讨论,尤其是nonce。

<link href="https://twitter.com/" />

…针对国际登录页。

:focus:not([data-focusvisible-polyfill]){}

…在不使用键盘导航时移除焦点轮廓(这里的:focus-visible选择器是 CSS 增强插件)。

撰文:CSS-Tricks

出处:InfoQ

meiguo.com 发布人签名/座右铭谁还没年轻过呢?呵呵呵
大家都在看
楼主新近贴
回复/评论列表
默认   热门   正序   倒序
meiguo.com 创始人

emotion

1   2022-04-25 04:23:11  回复

回复/评论:Twitter的前10行源代码的理解分享

暂无用户组 升级
退出
等级:0级
美果:
美过
精华推荐
  1. 能熟练运用AI也不行?硅谷的40万人在近期被炒鱿鱼
  2. 英国2岁男童竟然刷新了门萨俱乐部“最年轻男性”会员纪录
  3. 宗庆后家族的多处海外房产曝光,价值数亿元!
  4. 川普总统声称希望中国“增加美油采购”
  5. 韦伯望远镜(JWST)发布迄今为止最大的早期宇宙地图
  6. 任天堂的Switch 2正式发售,参数细节全曝光!
  7. 手机充电习惯是影响电池寿命的根本原因
  8. QQ等级256级用户诞生,首次解锁“时光企鹅”图标!
  9. 比尔盖茨的财富突然蒸发了510亿美元,真相却令人肃然起敬!
  10. 互联网女皇“340页AI报告”猛料刷屏
  11. 川普总统宣布“金卡计划”网站开放
  12. 美国新法案“大漂亮”引发了全球资本配置大调整
  13. 世界瞩目的电话,十个不寻常的细节剖析!
  14. 马斯克声称川普在“爱泼斯坦名单”,白宫回应:局面令人遗憾!
  15. 美国“非法移民家庭”遣返行动引发了“婴幼儿无国籍”的危机
  16. 川普政府的关税政策或将加速中国崛起,助力中国成为全球的经济主导力量!
  17. 属于中国的世纪可能已经到来
  18. 遥控器电池,被幼儿误吞… 欧系保险公司赔付了近1.4亿元人民币!
  19. 美国再次宣布退出联合国教科文组织
  20. 美国暂停了学生签证预约,申请者在社交媒体平台的活动须谨慎!
  21. 马斯克的“130天政府生涯”终结后…
  22. 难怪马斯克公开认错… 川普总统的相关杀器可以更多?
  23. 川普和马斯克的公开交锋升级了
  24. 鲁比奥声称将会收紧中国留学生的签证审批政策
  25. 美国国会通过了减税法案,马斯克和川普总统再次激烈交锋!
  26. 萝莉岛是美国的政治中心?马斯克并非不懂政治,而是太懂了!
  27. 中国政府在构筑战略资源防线,重拳打击稀土走私!
  28. 英伟达的市值突破了四万亿美元,创人类历史纪录!
  29. 孩子沉迷手机的真相和破局之道
  30. 马斯克打算组建新党“美国党”代表中间派
  31. 川普总统批评支持者,马斯克激烈回应!
  32. 川普总统:加拿大可以免费加入“金穹”导弹防御系统
  33. 中美两国元首针对当下双边关系和经贸合作,☎️通话交流!
  34. 川普家族“哈佛风波”和签证政策的突变
  35. 美国移民新机遇:紧缺人才的绿卡通道“无需排期”
  36. 美国房价仍然高位,“美国梦”成奢望!

美国动态 美果搜索

Your IP: 216.73.216.93, 2025-07-28 13:49:33

Processed in 0.08083 second(s)

头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息