每日五道前端面试题--day13

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第13天要刷的面试题如下：

1. img标签的srcset属性的作用是什么？

回答思路：从属性定义、属性值的结构和属性在浏览器中的作用原理三个方面回答。

定义：srcset用于指定一系列的备选图像，以便根据显示设备的特性和屏幕大小来 选择最合适的图像进行加载和显示。通过使用不同分辨率或者像素密度的图像，可以为不同设备提供适当的图像，从而改善页面加载速度和用户体验。
属性值组成 ：srcset属性的值有多个逗号间隔的图像源列表组成，每一个图像源包括图像URL和描述符 ，描述符可以是宽度w或者像素密度x ，描述符的作用是指定图像源的特性。<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px" />
作用原理：浏览器将会根据目前显示区域的大小和设备的特性选择备选列表中合适的图像进行加载显示。

可能的追问：屏幕有几种？ -- 四种，1x 2x 3x 4x

常见的行内元素：a b span img input select strong
常见的块级元素：div ul ol li dl dt dd h1~h6 p
常见的空元素： br hr img input link meta area base col colgroup command embed keygen param source track wbr
最后需要说一下空元素的定义：内有内容的html元素，空元素在开始标签中关闭，也就是没有闭合标签。

回答思路：定义-优点-使用步骤-缺点

定义：webworker本质上是一种js API, 它允许在浏览器中创建一个独立的后台线程，与主线程并行运行，而不会阻塞用户界面的响应。
优点：使用web worker可以执行一些复杂任务，这些任务往往具有密集型的计算；web worker将计算任务分离出来，通过异步进行计算，提高了页面性能和响应速度。
步骤：1.使用js路径作为参数实例化一个Worker对象； 2.在Worker线程中监听来自主线程的消息； 3.同时也要在主线程中监听Worker线程的消息。他们之间是通过postMessage进行通信的
缺点：天然不支持对dom和一些全局api的操作，这很大程度上限制了Web Worker的应用范围。

回答思路：从离线缓存清单 ，缓存清单更新 ，资源下载和缓存 ，更新检查和下载 ，离线下载 五个顺序回答此问题即可！

离线缓存清单：在HTML文档中，可以通过形如<html manifest="cache.manifest">的标签指定离线缓存清单文件的路径，这个清单文件是一个纯文本文件，文件的内容就是需要进行离线存储的资源列表。
缓存清单更新：浏览器的内建机制会定期检查缓存清单文件是否更新。同时还可以通过设置服务器上的响应头 ，例如Cache-Control: no-cache, must-revalidate来强制浏览器每次都检查清单文件是否有所变化。
资源下载和缓存：当浏览器首次访问设置manifest属性的页面的时候，会下载清单文件 ，并且清单文件中列出的资源将会被下载到本地浏览器的缓存中，以后每次访问相同的页面都会从缓存中加载资源，而不是从浏览器中重新加载。
更新检查和下载：当浏览器再次访问此页面的时候，会检查缓存清单文件的内容是否发生了更新，如果有更新，浏览器会重新下载清单文件并对比新旧版本之间的差异，并根据差异下载缓存新的资源。
离线下载：当浏览器处于离线状态的时候，它会直接从本地缓存加载所需的资源，而无需与服务器通信。这使得网页在离线状态下仍然可以使用。

对比title和h1 : title标签用于定义文档的标题，常位于html文档的head标签中，不会再页面上显示任何内容，而是在浏览器的标题栏或者书签中显示，每一个文档应该只有一个title标签；而h1标签表示文档中的主要标题，同样文档中也应该只有一个h1标签，h1标签对于爬虫抓取页面信息有很大的影响；
对比b和strong：两者都是对文字加粗，但是strong具有更强的语义；
对比i和em: i只是对文本进行倾斜处理，而em有更强的语义，搜索引擎会根据em标签来确定文本的重要性和权重。