{T}

HTML 面试题

meta viewport

目的 是为了在移动端不让用户缩放页面使用的

ini
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

解释每个单词的含义

  • with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度
  • initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
  • maximum-scale=1 指定用户能够放大的最大比例
  • minimum-scale=1 指定用户能够缩小的最大比例

浏览器乱码的原因

  • 编码格式不匹配

    • 浏览器打开网页时,需要根据网页源代码的编码格式来解码。如果网页的编码格式与浏览器的编码格式不匹配,就会出现乱码。比如,网页的编码格式为 UTF-8,而浏览器的编码格式是 GB2312,那么就会出现乱码。

  • 网页编码错误

    • 在编写网页的时候,如果编码出现错误,也会导致浏览器打开网页时出现乱码。比如,在写 HTML 代码时,如果忘记给中文字符指定编码格式,就会出现乱码。

  • 字体缺失

    • 有些网页会使用比较特殊的字体,如果浏览器中没有这个字体,就会找不到对应的字符,从而出现乱码

iframe 优点和缺点

优点：

  • 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突
  • 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余
  • 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
  • 方便地实现跨域访问

缺点：

  • 搜索引擎可能无法正确解析 iframe 中的内容
  • 会阻塞主页面的 onload 事件
  • 和主页面共享连接池,影响页面并行加载

HTML5 新特性

  • 语义化标签
  • 增强型表单(如可以通过 input 的 type 属性指定类型是 color 还是 date 或者 url 等)
  • 媒体元素标签(video,audio)
  • canvas,svg
  • svg 绘图
  • 地理等位(navigator.geolocation.getCurrentPosition(callback))
  • 拖放 API(给标签元素设置属性 draggable 值为 true,能够实现对目标元素的拖动)
  • Web Worker(可以开启一个子线程运行脚本)
  • Web Storage(即 sessionStorage 与 localStorage)
  • Websocket(双向通信协议,可以让浏览器接收服务端的请求)
  • dom 查询(document.querySelector()和 document.querySelectorAll())

data-属性

在 JavaScript 框架变得流行之前，前端开发者经常使用 data- 属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。

而现在，不鼓励使用 data- 属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新

cookie、sessionStorage 和 localStorage 的区别

cookielocalStoragesessionStorage
由谁初始化客户端或服务器，服务器可以使用 Set-Cookie 请求头。客户端客户端
过期时间手动设置永不过期当前页面关闭时
在当前浏览器会话（browser sessions）中是否保持不变取决于是否设置了过期时间是否
是否随着每个 HTTP 请求发送给服务器是，Cookies 会通过 Cookie 请求头，自动发送给服务器否否
容量（每个域名）4kb5MB5MB
访问权限任意窗口任意窗口当前页面窗口

请描述 script、script async 和 script defer 的区别

  • <script> - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
  • <script async> - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用 async，比如用作页面统计分析。
  • <script defer> - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含 defer 的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。

注意：没有 src 属性的脚本，async 和 defer 属性会被忽略

把 CSS 和 JS 的 script 放置位置

把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把 <script> 标签恰好放在 </body> 之前

脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含 document.write() 时。但是现在，document.write() 不推荐使用。同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档 （document） 被解析。也许，对此比较好的做法是，<script> 使用 defer 属性，放在 <head> 中

渐进式渲染

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

  • 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像

  • 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听 DOMContentLoaded / load 事件加载其他资源和内容

  • 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器