面试题

本文最后更新于：2024年11月17日 晚上

1.HTML

1.src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

  • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

2.对 HTML 语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

（1） 用正确的标签做正确的事情。
（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
（3） 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
（4） 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO ;
（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

常用的语义化标签：

1
2
3
4
5
6
7
8
9
10
11
12
<header></header>
头部
<section></section>
区块(有语义化的div)
<main></main>
主要区域
<nav></nav>
导航栏
<aside></aside>
侧边栏
<footer></footer>
底部
3.DOCTYPE(文档类型)的作用

DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在 HTML ⽂档的第⼀⾏。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。

4.script 标签中的 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别: image.png 其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

  • 执行顺序： 多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
  • 脚本是否并行执行：**async 属性，表示**后续文档的加载和执行与 js 脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。
5.常用的 meta 标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了 HTTP 标准固定了一些name作为大家使用的共识，开发者还可以自定义 name。

常用的 meta 标签：

（1）charset，用来描述 HTML 文档的编码类型：

1
<meta charset="UTF-8" />

（2） keywords，页面关键词：

1
<meta name="keywords" content="关键词" />

（3）description，页面描述：

1
<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

1
<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

1
2
3
4
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1"
/>

其中，content 参数有以下几种：

  • width viewport ：宽度(数值/device-width)
  • height viewport ：高度(数值/device-height)
  • initial-scale ：初始缩放比例
  • maximum-scale ：最大缩放比例
  • minimum-scale ：最小缩放比例
  • user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

1
<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • follow：页面上的链接可以被查询；
  • noindex：文件将不被检索；
  • nofollow：页面上的链接不可以被查询。
6.HTML5 有哪些更新
  1. 语义化标签
  2. 媒体标签
  3. 表单
  4. 进度条、度量器
  • progress 标签： 用来表示任务的进度，有 max 和 value 属性
1
<progress max="100" value="20"></progress>
  1. DOM 查询操作
  • document.queryselector()
  • document.queryselectorAll()
  1. web 存储
  • localStorage 永久存储在浏览器中
  • sessionStorage 随着浏览器的关闭而清空
  1. 其他
  • 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置
1
<img draggable="true" />
  • 画布 canvas
  • SVG
7.img 的 srcset 属性的作用

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset 属性。srcset 属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

1
<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为 1x 的情况下加载 image-128.png, 屏幕密度为 2x 时加载 image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有 1x,2x,3x,4x 四种，如果每一个图片都设置 4 张图片，加载就会很慢。所以就有了新的 srcset 标准。代码如下：

1
2
3
4
5
<img
  src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px"
/>

其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes 语法如下：

1
sizes="[media query] [length], [media query] [length] "

sizes 就是指默认显示 128px, 如果视区宽度小于 360px, 则显示 340px。

8.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
  • 行内元素：span a img input a b strong select
  • 块级元素：**div h1 ul ol li dl dt dd p **
  • 空元素： <br> \
    \ <img> \ \

空元素就是那些没有内容的标签,也没有闭合标签

9.说一说 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

10.HTML5 的离线储存怎么使用，它的工作原理是什么？

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

1
2
3
<html lang="en" manifest="index.manifest">
  复制代码
</html>

（2）在 cache.manifest 文件中编写需要离线存储的资源：

1
2
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png
FALLBACK: / /offline.html 复制代码
  • CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
  • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
  • FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

（1）更新 manifest 文件

（2）通过 javascript 操作

（3）清除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

11.title 与 h1 的区别、b 与 strong 的区别，i 与 em 的区别

  • strong 标签有语义，是起到加重语气的效果，而 b 标签是没有的，b 标签只是一个简单加粗标签。b 标签之间的字符都设为粗体，strong 标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重 strong 标签。

  • title 属性没有明确意义只表示是个标题，H1 则表示层次明确的标题，对页面信息的抓取有很大的影响

  • i 内容展示为斜体，em 表示强调的文本

12.浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

  • 网页源代码是==gbk==的编码，而内容中的中文字是==utf-8==编码的，这样子浏览器打开即会出现==html==乱码，反之也会出现乱码
  • ==html==网页编码是==gbk==，而程序从数据库中调出呈现是==utf-8==编码的内容也会造成编码乱码
  • 浏览器不能自动检测网页编码，造成网页乱码
  1. 兼容问题 ： link 是 HTML 提供的标签，不仅可以加 载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等，不存在兼容问题，而@import 是 CSS 提供的语法规则，在 IE5+才可以识别
  2. 加载顺序区别：link 会和页面并行加载，而@import 会等页面加载完成再进行加载
  3. DOM 可控性区别：可以通过 JS 操作 DOM，插入 link 标签来改变样式，由于 DOM 是基于文档的，无法使用@import 的方式插入样式
14.标准模式与兼容模式有什么区别

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

15.渲染页面时常见哪些不良现象
  • FOUC：主要指的是样式闪烁问题，由于浏览器渲染机制（比如 firefox），在 css 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要就是 css 加载时间过长，或者 css 被放在了文档底部
  • 白屏： 有些浏览器渲染机制(比如 chrome)要先构建 DOM 树和 CSSOM 树，构建完成之后再进行渲染，如果 css 部分放在 HTML 尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏，也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题
16.什么是重绘和重排（回流）

重绘：当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们称这样的操作为 重绘

重排： 当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为 回流

常见引起回流属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。

（1）添加或者删除可见的 DOM 元素；
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）内容变化，比如用户在 input 框中输入文字
（4）浏览器窗口尺寸改变——resize 事件发生时
（5）计算 offsetWidth 和 offsetHeight 属性
（6）设置 style 属性的值
（7）当你修改网页的默认字体时。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列
回流。

17.为什么操作 ODM 慢

一些 DOM 的操作或属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗

18.前端需要注意哪些 SEO

（1）合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超
过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不
同页面 description 有所不同；keywords 列举出重要关键词即可。

（2）语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。

（3）重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被
抓取。

（4）重要内容不要用 js 输出：爬虫不会执行 js 获取内容

（5）少用 iframe：搜索引擎不会抓取 iframe 中的内容

（6）非装饰性图片必须加 alt

（7）提高网站速度：网站速度是搜索引擎排序的一个重要指标

19.页面可见性(Page Visibility API) 可以有哪些用途

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户
不看网页，下面这些网页行为都是可以暂停的。

（1）对服务器的轮询
（2）网页动画
（3）正在播放的音频或视频

详细资料可以参考： 《Page Visibility API 教程》

20. 的 title 和 alt 有什么区别

title 通常是当鼠标滑到元素上的时候显示

alt 是 的特有的属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析

21.常用的 meat 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<meta />
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta /> 标签位于文档的头部，不包含任何内容。<meta />
标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en">
  标准的 lang 属性写法
  <meta charset="utf-8" />
  声明文档使用的字符编码
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  优先使用 IE 最新版本和 Chrome
  <meta name="description" content="不超过150个字符" />
  页面描述
  <meta name="keywords" content="" />
  页面关键词者
  <meta name="author" content="name, email@gmail.com" />
  网页作
  <meta name="robots" content="index,follow" />
  搜索引擎抓取
  <meta
    name="viewport"
    content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"
  />
  为移动设备添加 viewport
  <meta name="apple-mobile-web-app-title" content="标题" />
  iOS 设备 begin
  <meta name="apple-mobile-web-app-capable" content="yes" />
  添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp
  全屏模式，删除苹果默认的工具栏和菜单栏
  <meta
    name="apple-itunes-app"
    content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
  />
  添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telphone=no, email=no" />
  设置苹果工具栏颜色
  <meta name="renderer" content="webkit" />
  启用360浏览器的极速模式(webkit)
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  避免IE使用兼容模式
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  不让百度转码
  <meta name="HandheldFriendly" content="true" />
  针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
  <meta name="MobileOptimized" content="320" />
  微软的老式浏览器
  <meta name="screen-orientation" content="portrait" />
  uc强制竖屏
  <meta name="x5-orientation" content="portrait" />
  QQ强制竖屏
  <meta name="full-screen" content="yes" />
  UC强制全屏
  <meta name="x5-fullscreen" content="true" />
  QQ强制全屏
  <meta name="browsermode" content="application" />
  UC应用模式
  <meta name="x5-page-mode" content="app" />
  QQ应用模式
  <meta name="msapplication-tap-highlight" content="no" />
  windows phone 点击无高光 设置页面不缓存
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
</head>

详细资料可以参考： 《Meta 标签用法大全》

22.主流浏览器内核私有属性 css 前缀

mozilla 内核 （firefox,flock 等） -moz
webkit 内核 （safari,chrome 等） -webkit
opera 内核 （opera 浏览器） -o
trident 内核 （ie 浏览器） -ms

23.HTML 规范中为什么要求引用资源不加协议头 http 或者 https

如果用户当前访问的页面是通过 HTTPS 协议来浏览的，那么网页中的资源也只能通过 HTTPS 协议来引用，否则浏览器会出现
警告信息，不同浏览器警告信息展现形式不同。

为了解决这个问题，我们可以省略 URL 的协议声明，省略后浏览器照样可以正常引用相应的资源，这项解决方案称为
protocol-relative URL，暂且可译作协议相对 URL。

如果使用协议相对 URL，无论是使用 HTTPS，还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，避免弹出类似
的警告信息，同时还可以节省 5 字节的数据量。

sub 和 sup 标签

用来表示下标 H2o 像这个样子

用来表示上标 32

2.CSS

1.介绍一下标准的 CSS 的盒子模型？低版本的浏览器盒子模型有什么不同

盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同。标准盒模型的 width 和 height 属性的
范围只包含了 content，而 IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

一般来说，我们可以通过修改元素的 box-sizing 属性来改变元素的盒模型。

2.css 选择器有哪些
选择器 格式
id 选择器 #id
类选择器 .classname
属性选择器 a[ref=“eee”]
伪类选择器 li:last-child
标签选择器 div
伪元素选择器 li::after
兄弟选择器 li~a
相邻兄弟选择器 h1+p
子选择器 ul>li
后代选择器 li a
通配符选择器 *
3.::before 和 :after 中双冒号和单冒号的区别

在 css3 中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如 hover、link 等，而伪元素一般匹配的特殊的位置，比如 after、before 等。

4.伪类与伪元素的区别

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover 来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be
fore 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是 CSS3 的一部分，并尝试区分伪类和伪元素。大多数浏览
器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的 W3C 规范并未对此进行
特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

如何对伪元素进行操作？

伪类 用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

伪元素 譬如::before 和::after 伪元素，用于在 CSS 渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在 DOM 中，仅仅是在 CSS 渲染层中加入。它不存在于文档中，所以 JS 无法直接操作它。而 jQuery 的选择器都是基于 DOM 元素的，因此也并不能直接操作伪元素。那该怎样操作伪元素的样式呢？为此总结整理一篇，以备查用。

有哪些伪元素

:first-letter：向文本的第一个字母添加特殊样式。

:first-line:　向文本的首行添加特殊样式。

:before：在元素之前添加内容。

:after：在元素之后添加内容。

::placeholder：匹配占位符的文本，只有元素设置了 placeholder 属性时，该伪元素才能生效。

::selection：CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

::backdrop(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式

获取伪元素的属性值

获取伪元素的属性值可以使用 window.getComputedStyle()方法，获取伪元素的 CSS 样式声明对象。然后利用 getPropertyValue 方法或直接使用键值访问都可以获取对应的属性值。

语法： window.getComputedStyle(element[, pseudoElement])

参数：element（Object）：伪元素的所在的 DOM 元素；pseudoElement（String）：伪元素类型。可选值有：”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”；

前端

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！