HTML 常见面试题速查

2023-05-17 15:24:44 浏览数 (1)

# doctype 的作用是什么

DOCTYPE 是 html5 标准网页声明，且必须声明在 HTML 文档的第一行。用来告知浏览器的解析器用什么文档标准来解析该文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 的解析。

文档解析类型有：

  • BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面，如果没有声明 DOCTYPE ，默认使用该模式
  • CSS1Compat：标准模式，浏览器使用 W3C 的标准解析渲染页面

# HTML、XHTML、XML 有什么区别

HTML(超文本标记语言)：在 html 4.0 之前 HTML 先有实现后有标准，导致 HTML 非常混乱和松散

XML(可扩展标记语言)：主要用于存储数据和结构，可扩展（JSON 也具有类似作用，更轻量高效，正在替代 XML ）

XHTML(可扩展文本标记语言)：基于上面两者，W3C 为了解决 HTML 混乱问题而生，并基于此诞生了 HTML5，在开头加入 <!DOCTYPE html> 的做法因此而来，如果不加就是兼容混乱的 HTML，加了就是标准模式

# 什么是 data- 属性

HTML 的数据属性，用于将数据存储于标准的 HTML 元素中作为额外信息，可以通过 JS 进行访问和操作，来实现对数据的操作

代码语言：javascript复制
<article
  id="article"
  data-columns="2"
  data-index-number="1">
</article>

# HTML 语义化的理解

语义化是指使用恰当语义的 html 标签，让页面具有良好的结构与含义，比如 <p> 标签就表示段落，<article> 代表正文内容

语义化的好处主要有两点：

  • 开发者友好：增强代码可读性，能清晰地看出网页的结构，便于开发和维护
  • 机器友好：适合搜索引擎爬虫爬取有效信息，还能支持读屏软件，根据文章自动生成目录 对于富文本类的应用很重要，助于内容传播，但是对于功能性的 web 应用，重要性不强

# HTML5 和 HTML4 的不同之处

  • 文件类型声明（<!DOCTYPE>）仅有一种：<!DOCTYPE HTML>
  • 新的解析顺序，不再基于 SGML (opens new window)
  • 新的元素： section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
  • input 元素新类型：date, email, url 等
  • 新的属性：ping(用于 a 和 area)，charset(用于 meta), async(用于 script)
  • 全域属性：id， tabindex, repeat
  • 新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck
  • 移除元素：acronnym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

# H5 新特性

  • Drag and Drop API
  • Canvas API
  • Geolocation API
  • Audio, Video API
  • LocalStorage, SessionStorage
  • WebWorker, WebSocket
  • 语义化标签 header, nav, footer, aside, article, section
  • 表达控件 calendar, date, time, email, url, search

# 常用的 meta 标签有哪些

meta 标签由 name 和 content 属性来定义，用于描述一个 HTML 网页文档的属性，如作者、日期和时间、网页描述、关键词、页面刷新等，name 由 HTML 标准进行约定，也可以使用自定义 name

charset，用于描述 HTML 文档的编码形式

代码语言：javascript复制
<meta charset="UTF-8">

http-equiv,相当于 HTTP 的头文件作用，如下面可以设置 http 缓存过期时间

代码语言：javascript复制
<meta
  http-equiv="expires"
  content="Wed, 20 Jun 2020 20:58:00 GMT">

viewport,控制视口的大小和比例

代码语言：javascript复制
<meta 
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1">

apple-mobile-web-app-status-bar-style,自定义工具栏颜色

代码语言：javascript复制
<meta
  name="apple-mobile-web-status-bar-style"
  content="black-translucent">

# src 和 href 的区别

src 用于替换当前的元素， href 用于在当前文档和引用资源建立关系

src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求 src 资源时会将其指向的资源下载并应用到文档内，如 js，图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般 js 会放在底部而不是头部

代码语言：javascript复制
<script src="a.js">

href 是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时，会并行下载资源，不会停止对当前文档的处理,所以一般建议使用 link 来加载 CSS 而不是 @import

代码语言：javascript复制
<link href="common.css" rel="stylesheet" />

# img 的 srcset 的作用是什么

可以设计响应式图片，可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的资源。

srcset 定义了允许浏览器选择的图像集，以及每个图像的大小

srcset 定义了一组媒体条件并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择 有了这些属性，浏览器会

查看设备宽度

检查 sizes 列表中哪些媒体条件是第一个为真

查看给予该媒体查询的槽大小

加载 srcset 列表中引用的最接近所选的槽大小的图像

代码语言：javascript复制
<img src="clock-demo-thumb-200.png"
  alt="clock"
  srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

还有哪一个标签能起到和 srcset 相似作用？

  • <picture> 元素通过包含零个或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> ,如果没有匹配的，就选择 <img> 元素的 src 中的 URL。然后，所选图像呈现在 <img> 元素占据的空间中。
代码语言：javascript复制
<picture>
  <source srcset="/media/examples/surfer-240-200.jpg"
    meida="(min-width: 800px)">
  <img src="/media/examples/painted-hand-298-332.jpg">
</picture>

# script 中 defer 和 async 的区别

  • defer：script 被异步加载后并不会立即执行，而是等待文档被解析完后执行
  • async：异步加载脚本，加载完毕后立即执行，导致 async 属性下的脚本是乱序的，对于 script 有先后依赖关系的情况不适合

# 有哪些前端存储的方式，区别是什么

  • cookies
    • 在 HTML5 标准前本地存储的主要方式
    • 优点是兼容性好，请求头自带 cookie 方便
    • 缺点
      • 大小只有 4k，自动请求头加入 cookie 浪费流量
      • 每个 domain 限制 20 个 cookie
      • 使用起来麻烦需要自行封装
  • localStorage
    • HTML5 加入的以键值对（Key-Value）为标准的方式
    • 优点是操作方便，永久性存储（除非手动删除）
    • 大小为 5M ，兼容 IE8
  • sessionStorage
    • 与 localStorage 基本类似，区别是 sessionStorage 当前页面关闭后会被清理
    • 与 cookie、localStorage 不同，不能在所有同源窗口中共享，是会话级别的存储方式
  • Web SQL
    • 2010 年被 W3C 废弃的本地数据库数据存储方案，但是主流浏览器都已经有了相关的实现，web sql 类似于 SQLite，是真正意义上的关系型数据库，用 sql 进行操作，当我们用 JS 时需要进行转换，比较繁琐
  • IndexedDB
    • 被正式纳入 HTML5 标准的数据库存储方案
    • 是 NoSQL 数据库，用键值对进行储存，可以进行快速读取操作
    • 非常适合 web 场景，同时用 JS 进行操作会非常方便

# 浏览器渲染原理

  1. 渲染引擎下载 HTML 解析生成 DOM Tree
  2. 遇到 CSS 标签或 JS 脚本标签就起新线程去下载，并继续构建 DOM。其中 CSS 是异步下载同步执行的，浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
  3. Layout(Flow)：通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小
  4. Paint：通过调用 Native GUI 的 API 绘制网页画面

注意：

  • Repaint 或 Reflow：当用户在浏览网页时进行交互或通过 JS 脚本改变页面结构时，上述部分操作可能重复运行
  • 重排：DOM Tree 发生结构变化时，需要重新构建 DOM 结构
  • 重绘：DOM 节点样式改变，重新绘制
  • 重排一定会导致重绘，重绘不一定有重排
  • 如何减少重排
    • 将需要多次重排的元素，position 设为 absolute 或 fixed，使其脱离文档流，它的变换不会影响到其他元素

# iframe 有哪些缺点

  1. 会阻塞主页面的 onload 事件
  2. 搜索引擎的检索程序无法解读这种页面，不利于 SEO
  3. iframe 和 主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载 解决方案：
  4. 如果需要使用 iframe 最好是通过 javascript
  5. 动态给 iframe 添加 src 属性

# label 的作用是什么，如何使用

用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表达控件上

代码语言：javascript复制
<label for="name">Name:</label>
<input type="text" name="name" id="name"/>
<label>Date:<input type="text" name="date"/></label>

# HTML5 的 form 如何关闭自动完成功能

给不需要提示的 form 或 input 设置 autocomplete = "off"

# 如何实现浏览器内多个标签页之间的通信

  1. WebSocket
  2. localStorage（另一个浏览上下文被添加、修改或删除会触发StorageEvent事件）、cookies 等本地存储方式
  3. SharedWorker

# 页面可见性（Page Visibility API）有哪些用途

  1. 检测页面当前是否可见，以及打开网页的时间
  2. 在页面被切换到其他后台进程的时候，自动暂停某些任务（如音视频播放）

# 网页制作用到的图片格式有哪些

  • png
    • png-32 像素的深度为 32 bits，RGBA 各占 8 bits
    • png-24 像素深度为 24，RGB 各占 8 bits，没有 Alpha 通道
    • png-8 将每种颜色存储在长度 255 的数组中（调色盘），每个像素上存储对应颜色在条色盘位置，只需要 8 bits 即可，颜色空间小颜色单一
  • jpeg
  • gif
  • svg
  • wbep
    • 具有更优的图像数据压缩算法
    • 同时具备无损和有损的压缩模式
    • 支持 Alpha 透明
    • 支持动画

# 从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理

  • DNS 缓存
  • CDN 缓存
  • 浏览器缓存
  • 服务器缓存

# 大图加载优化

  • 图片懒加载：先将 img 的 src 设为同一张图片，将实际图片地址存储在其他地方（如 img 自定义属性 data-src），当 JS 监听到该图片进入可视区域时（如滚动事件计算距离），将自定义属性中的地址设置到 src 中，达到懒加载效果
  • 图片预加载：在幻灯片、相册等场景，在展示当前图片时将可能下次预览（机械的下载前后图片或根据推荐算法预判）的图片进行预先下载
  • CSS 图片处理：使用 CSS Sprite, SVG Sprite, IconFont、Base64 等技术
  • 大图压缩：先加载压缩过的缩略图，正式预览再加载压缩程度更小的或原始图
  • 服务端预处理：如果图片展示区域小于真实大小，在服务端根据业务先进处理，使得处理后图片与展示区一致
html 渲染 存储 缓存 浏览器

0 人点赞