关于前端网页的一点疑惑

Question

最近在浏览某些网站时候，有很多地方有疑惑：

1、meta 设置的 theme-color 在什么时候生效
2、标签中的 data-n-head="ssr" 是什么意思？有什么效果和作用？
3、网页的 ico 为什么需要引入多个尺寸的，比如16*16，32*32？我知道你们会说适配，这么小的东西完全不需要这样去弄吧？
4、link 中的 dns-prefetch 又是什么作用，dns的预加载？
5、可以通过 <link rel='preload' href='xxx' as='script'> 这种方式预加载js文件？那它和 <script async src='xxx'> 有什么区别？
6、link 中的 canonical 的作用和效果？？

Answer 1

1、theme-color 在移动端用的比较多，可以用来控制浏览器顶栏和系统通知栏的颜色，比如 Android 上的 Chrome、Via 浏览器等就实现的有。

• theme-color - HTML（超文本标记语言） | MDN

2、这个看起来是 nuxtjs 带来的自定义属性，具体不详

3、Icon 这个，部分浏览器是可以添加到桌面的，会显示一个快捷方式，这个图标就可以用在这里。

• Use Apple touch icon | webhint documentation

4、简单的说，就是如果你的网页上需要加载一些第三方的资源时，可以通过这个指令预先解析列出这些地址的 DNS 信息，可以起到一定加速效果。

• dns-prefetch - Web 性能 | MDN

5、preload 的目的是提升一个资源的加载优先级，让这个资源在优先加载了，最后还是需要使用 script 来加载资源（从缓存），async 属性的目的是异步的加载资源，并尽快执行。

• 链接类型：preload - HTML（超文本标记语言） | MDN

6、这个查一下就知道，用于 SEO 的，如果遇到近似、相同的内容时，这个链接指向 权威 的地址

• 整合重复网址与规范网址 | Google 搜索中心 | 文档 | Google Developers

Answer 2

别的东西直接百度即可，我来回答一下二，data-* 是HTML标签的自定义属性，你看到的data-ssr通常是Vue的第三方SSR框架nuxt.js搭建的网站在渲染时添加的属性