前端面试问题 - HTML

收集一些前端面试题

DOCTYPE 有什么作用?

DOCTYPE 是 “document type” 的简写。它是HTML中用来区分标准模式和严格模式的声明。 它的存在告诉浏览器以标准模式呈现网页。只需在页面开始处添加 <!DOCTYPE html> 即可。

data- 属性的优点？

在JavaScript框架流行之前，前端开发人员使用 data- 属性在DOM上存储储本身的额外数据， 它旨在将自定义数据存储到页面或应用程序，为此没有更多适当的属性或元素。 现在，不鼓励使用 data- 属性。 原因之一是用户可以通过在浏览器中使用审查元素轻松修改数据属性。 数据模型最好存储在JavaScript本身中，并通过数据绑定（通过库或框架）与DOM保持更新。

将HTML5视为开放的网络平台。什么是HTML5的基石？

  • 语义化 - 允许您更准确地描述您的内容。
  • 连接 - 允许您以创新方式与服务器通信。
  • 离线和存储 - 允许网页在客户端本地存储数据并更有效地离线运行。
  • 多媒体 - video 和 audio 现在是web 的一级公民
  • 性能和集成 - 提供更高的速度优化和更好的计算机硬件使用。
  • 设备访问 - 允许使用各种输入和输出设备。
  • 样式 - 可以创作更复杂的主题。

cookies sessionStorage 和 localStorage 的区别?

cookie:

  • 最大 4K
  • 可以设置过期时间
  • 会随着请求在浏览器-服务器之间传递(服务器通过 Set-Cookie header 设置)
  • 有域关联 可以设置 http-only 使客户端无法读取/修改 sessionStorage：
  • 最大 2.5MB (各浏览器不同)
  • 不会随请求发送到服务器
  • 关闭一个使用sessionStorage中的tab/ 新建一个tab / 退去浏览器 ，都会丢失其中的数据 localStorage:
  • 最大 2.5MB (各浏览器不同)
  • 不会随请求发送到服务器 没有过期时间
  • 关闭tab/浏览器 也不会丢失

<script>, <script async> and <script defer> 之间的区别

普通的 <script> 标记将阻止页面的呈现，并且该页面将不会继续加载直到脚本结束。

<script async>将异步运行脚本，这意味着它不会阻止渲染，但会在脚本可用后立即运行。 这通常用于CDN文件或其他不改变页面结构的文件。

<script defer> 将延迟脚本在页面完成解析之后和onload事件之前运行。

为什么在 <head> </ head> 之间放置CSS <link> ，在</body> 之前放置 <script> 通常是一个好主意，有哪些例外吗？

把<link>放在头上是规范的一部分。除此之外，放置在顶部允许页面逐步呈现，这提高了用户体验。 还可以防止无样式内容的闪烁，从而在解析页面的其余部分时为用户提供一些内容。

由于JavaScript在默认情况下阻止了渲染，并且DOM和CSSOM构造也可能被延迟，所以通常最好将脚本保留在页面的底部。 例外情况是，如果您异步获取脚本，或者至少将它们推迟到页面末尾。

什么是渐进渲染？

渐进式渲染是用于提高网页性能（尤其是提高感知加载时间）以尽可能快地呈现内容以供显示的技术。 过去在宽带互联网之前的日子里它更普遍，但它在现代发展中仍然有用，因为移动数据连接变得越来越流行（并且不可靠）！ 这种技术的例子： 这种技术的例子：

  • 延迟加载图像 - 页面上的图像不会一次全部加载。当用户滚动到显示图像的页面部分时，JavaScript将用于加载图像。
  • 确定可见内容的优先级（或折叠渲染） - 仅包含将在用户浏览器中呈现的页面数量所需的最小CSS /内容/脚本，以便尽可能快地显示 您可以使用延迟脚本或监听DOMContentLoaded / load事件来加载其他资源和内容。
  • 异步HTML片段 - 当页面在后端构建时，将HTML的一部分刷新到浏览器。

为什么你会在图片标签中使用srcset属性？解释浏览器在评估此属性内容时使用的过程。

响应式图片

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset 包含 文件名 空格 图像的固有尺寸
sizes 包括 一个媒体条件 空格 当条件为真时， 图片将填充的宽度。定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。

Written on February 26, 2018