Twitter源码中前十行的作用是？

BetaSu commented 2 years ago

要回答的问题

这是Twitter的前十行代码，请逐行解释他们的作用：

<!DOCTYPE html>
<html dir="ltr" lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
<link rel="preconnect" href="//abs.twimg.com" />
<link rel="dns-prefetch" href="//abs.twimg.com" />
<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/vendors~main.251a14e5.js" nonce="ODlhNDZiYmMtZGNiOC00MDcxLTg5MmYtMTg2Y2NkYjVhOTg2" />
<meta property="og:site_name" content="Twitter" />
<meta name="apple-mobile-web-app-title" content="Twitter" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />

最佳答案评选标准

逐行解释清楚并附带使用场景是加分项

最佳答案

childrentime的回答

答题同学须知

答题规范：请在一次评论中完成作答，后续修改也请编辑该评论，而不是追加新的评论
评选标准：最佳答案由围观同学的 👍 和卡颂共同决定
评选时间：一般是当日18：00左右评选，如果问题发布当天回答数较少，问题悬赏金额可能增加，同时悬赏时间也会增加

围观同学须知

对于你满意的答案，请不要吝惜你的 👍，这是评选最佳答案的依据
非答题的评论会被删除，问题相关讨论请在赏金猎人群中进行

nonzzz commented 2 years ago

第一行dir是代表页面文字从左到右语言是英语。这是属于w3c标准规范。第二行代表了页面的编码是utf-8编码，相较于中文站的gbk(因为中文字符在gkb占用编码是2个字节更小)英文站utf-8更适用第三行代表了网页的视口宽度。content里面的表示了页面用户是否可以缩放。上述是禁用了。并且保证了1比1的视口。可以在不同机型上有更好的体验。(至于为什么要禁用,理论上是不需要禁用了但是你在ios上你会发现当你页面的字体小于12还是14px的时候，用户点击Input 页面居然会放大 wtf!!! 为了避免这种情况还是禁用吧) 第四行到第六行就是老生常谈的性能优化相关了。前面2个和加载资源有关。第一个代表了先和服务器建立连接等待使用的时候在下载资源。第二个是主动解析资源。第三个就是预加载相关资源。剩下的就和SEO有关系了。og:site_name代表了网页的名字，剩下2个就是个IOS移动端设备使用的。一个是添加到桌面上显示的名字，另外一个是ios设备上工具栏的颜色

childrentime commented 2 years ago

<!DOCTYPE html>

文档类型声明，保证浏览器以标准模式渲染我们的文档。否则浏览器会以兼容模式渲染我们的文档。在兼容下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。

<html dir="ltr" lang="en">

html标签为根元素，dir是一个指示元素中文本方向的枚举属性,ltr的值含义是left to right，表示文本从左到右书写。lang定义了元素的语言类型,en的值含义是英语。dir和lang都是全局属性。

<meta charset="utf-8" />

meta是元数据标签，charset指定文档的字符编码为'utf-8'

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />

name为全局属性，表明元数据名称，content包含了元素的值，与name形成键值对映射。viewport是css提供的元数据名称，为的初始大小提供指示，仅仅用于移动设备。width定义视口的宽度，device-width就是设备宽度；

initial-scale表示初始的缩放比例(纵向屏幕是 device-width与viewport的缩放比例，横向则是device-height); maximum-scale定义缩放的最大值（取值为0.0-10.0),user-scalable指定用户是否可以缩放界面，0表示无法缩放（iOS 10 开始，Safari iOS 默认忽略此规则）; 禁止缩放会导致a11问题，因为有些用户可能视力不好

viewport-fit=cover用来适应iponeX的刘海屏，缩放视口去填充设备。

<link rel="preconnect" href="//abs.twimg.com" />

preconnect向浏览器提示用户可能需要来自目标资源源的资源

<link rel="dns-prefetch" href="//abs.twimg.com" />

dns-prefetch是尝试在请求资源之前解析域名,节省dns解析时间。

<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/vendors~main.251a14e5.js" nonce="ODlhNDZiYmMtZGNiOC00MDcxLTg5MmYtMTg2Y2NkYjVhOTg2" />

preload指示预先获取和缓存对应资源,as表示资源类型，crossorigin是跨域资源共享属性, anonymous将 credentials mode 设置为 same-origin，同域的请求会带上 Credentials。

Credentials 是指 HTTP cookies，TLS client certificates，authentication entries (for HTTP authentication)

<meta property="og:site_name" content="Twitter" />

property表示同意网页内容被其他网站引用,og是开放图协议，site_name就是网站名称了。

<meta name="apple-mobile-web-app-title" content="Twitter" />

apple-mobile-web-app-title是将web应用添加到苹果启动图标上的名称。

<meta name="apple-mobile-web-app-status-bar-style" content="white" />

apple-mobile-web-app-status-bar-style是苹果特定的元标记,设置 Web 应用程序状态栏的样式

myNameIsDu commented 2 years ago

<!DOCTYPE html>: 声明html5版本，避免浏览器使用怪异模式解析

<html dir="ltr" lang="en">: html是文档的根元素，dir 告诉浏览器语言的方向，lang 表示这个标签里的内容是英文

<meta charset="utf-8">: meta 标签用于提供文档的元数据, charset="utf-8" 表示使用 utf-8 编码规则

<meta name="viewport" content="width=device-...: 用于在小屏幕手机上调整网页大小

width=device-width: 定义viewport 为屏幕宽度，
initial-scale=1,maximum-scale=1,user-scalable=0 初始缩放为1，最大缩放为1，不允许用户进行缩放，
viewport-fit=cover 视口裁剪方式为 cover
dns-prefetch: 提示浏览器进行预 dns 查询
preconnect: 提前打开连接
prefetch: 预加载未来会用到的资源
preload: 预加载当下会用到的资源 as 设置当前内容类型，以便浏览器根据优先级加载

og:site_name: open graph 是face book 开源的协议，意在以更漂亮的形式展示连接 google-site-verification: google 的网站认证

facebook-domain-verification: face book 网站认证 manifest: PWA 的 web app manifests

<link rel="alternate" hreflang="x-default": 文档语言，用于google search,参考: https://developers.google.com/search/blog/2013/04/x-default-hreflang-for-international-pages

<link rel="search" type="application/opensearchdescription+xml": openSearch 资源

<meta name="mobile-web-app-capable" content="yes" />: 否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏

mask-icon: safar 的svg icon

shortcut icon: ie 专有的

apple-touch-icon: ios 配置 web app 图标

apple-mobile-web-app-title: safar 的web app title

apple-mobile-web-app-status-bar-style: safar web app 的状态栏颜色

<meta name="theme-color" content="#ffffff" />: 浏览器主题色

origin-trial: 启用实验性的功能

text-size-adjust: 设置在小屏幕上的文本溢出算法，这里是不放大，因为twitter 已经适配

BetaSu / fe-hunter