2023年前端面经(大厂面试必备).pdf
《2023年前端面经(大厂面试必备).pdf》由会员分享,可在线阅读,更多相关《2023年前端面经(大厂面试必备).pdf(38页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、2023年 前 端 面 经(大 厂 面 试 必 备)(一)一、HTML/CSS 篇 1、标 签 上 title与 alt属 性 的 区 别 是 什 么?【仅 供 参 考】alt是 给 搜 索 引 擎 识 别,在 图 像 无 法 显 示 时 的 替 代 文 本;title是 关 于 元 素 的 注 释 信 息,主 要 是 给 用 户 解 读。当 鼠 标 放 到 文 字 或 是 图 片 上 时 有 title文 字 显 示。(因 为 IE不 标 准)在 IE浏 览 器 中 alt起 到 了 title的 作 用,变 成 文 字 提 示。在 定 义 img对 象 时,将 alt和 title属 性
2、写 全,可 以 保 证 在 各 种 浏 览 器 中 都 能 正 常 使 用。2、Canvas和 SvG的 区 别 是 什 么?【仅 供 参 考】两 者 的 区 别 如 下:(1)一 旦 Canvas绘 制 完 成 将 不 能 访 问 像 素 或 操 作 它;任 何 使 用 SVG绘 制 的 形 状 都 能 被 记 忆 和 操 作,可 以 被 浏 览 器 再 次 显 示。(2)Canvas对 绘 制 动 画 和 游 戏 非 常 有 利;SVG对 创 建 图 形(如 CAD)非 常 有 利。(3)因 为 不 需 要 记 住 以 后 事 情,所 以 Canvas运 行 更 快;因 为 为 了 之 后
3、 的 操 作,SVG需 要 记 录 坐 标,所 以 运 行 比 较 缓 慢。(4)在 Canvas中 不 能 为 绘 制 对 象 绑 定 相 关 事 件;在 SVG中 可 以 为 绘 制 对 象 绑 定 相 关 事 件。(5)Canvas绘 制 出 的 是 位 图,因 此 与 分 辨 率 有 关;SvG绘 制 出 的 是 矢 量 图,因 此 与 分 辨 率 无 关。3、哪 些 浏 览 器 支 持 HTML5?【仅 供 参 考】几 乎 所 有 的 浏 览 器(如 Safari、Chrome、Firefox、Opera、IE)都 支 持 HTML54、如 何 使 用 Canvas和 HTML5中
4、的 SVG画 一 个 矩 形?【仅 供 参 考】使 用 SVG绘 制 矩 形 的 代 码 如 下:使 用 Canvas绘 制 矩 形 的 代 码 如 下。var canvas=document.getElementByld(mycanvas);var ctx=canvas.getContext(2d);ctx.rect(100,100,300,200);ctx fillstyle=pink ctx.fill()5、HTML5中 的 应 用 缓 存 是 什 么?【仅 供 参 考】HTML5应 用 缓 存 的 最 终 目 的 是 帮 助 用 户 离 线 浏 览 页 面。换 句 话 说,如 果 网
5、络 连 接 不 可 用,打 开 的 页 面 就 来 自 浏 览 器 缓 存,离 线 应 用 缓 存 可 以 帮 助 用 户 达 到 这 个 目 的。应 用 缓 存 可 以 帮 助 用 户 指 定 哪 些 文 件 需 要 缓 存,哪 些 不 需 要 6、HTML5标 准 提 供 了 哪 些 新 的 API?【仅 供 参 考】HTML5 提 供 很 多 新 的 API,包 括 Media API、Text Track API,ApplicationCache API、User InteractionAPI Data Transfer API、Command API、Constraint ion V
6、alidation API 和 History API7、Doctype作 用?标 准 模 式 与 兼 容 模 式 各 有 什 么 区 别?【仅 供 参 考】D0CTYPE是 用 来 声 明 文 档 类 型 和 DTD规 范 的。声 明 位 于 HTML文 档 中 的 第 一 行,不 是 一 个 HTML标 签,处 于 html标 签 之 前。告 知 浏 览 器 的 解 析 器 用 什 么 文 档 标 准 解 析 这 个 文 档。D0CTYPE不 存 在 或 格 式 不 正 确 会 导 致 文 档 以 兼 容 模 式 呈 现。标 准 模 式 的 排 版 和 J S 运 作 模 式 都 是 以
7、该 浏 览 器 支 持 的 最 高 标 准 运 行。在 兼 容 模 式 中,页 面 以 宽 松 的 向 后 兼 容 的 方 式 显 示,模 拟 老 式 浏 览 器 的 行 为 以 防 止 站 点 无 法 工 作。8、如 何 区 另(J HTML和 HTML5?【仅 供 参 考】用 DOCTYPE声 明 新 增 的 结 构 元 素 和 功 能 元 素 来 区 别 它 们。9、如 何 实 现 浏 览 器 内 多 个 标 签 页 之 间 的 通 信?【仅 供 参 考】在 标 签 页 之 间,调 用 localstorge cookies等 数 据 存 储,可 以 实 现 标 签 页 之 间 的 通
8、信 10、解 释 浮 动 及 其 工 作 原 理。【仅 供 参 考】浮 动 的 元 素 可 以 向 左 或 向 右 移 动,直 到 它 的 外 边 缘 碰 到 包 含 元 素(父 元 素)或 另 一 个 浮 动 元 素 的 边 框 为 止。要 想 使 元 素 浮 动,必 须 为 元 素 设 置 一 个 宽 度(width)虽 然 浮 动 元 素 已 不 在 文 档 流 中,但 是 它 浮 动 后 所 处 的 位 置 依 然 在 浮 动 之 前 的 水 平 方 向 上。因 为 浮 动 元 素 不 在 文 档 流 中,所 以 文 档 流 中 的 块 元 素 表 现 得 就 像 浮 动 元 素 不
9、存 在 一 样,下 面 的 元 素 会 填 补 原 来 的 位 置。有 些 元 素 会 在 浮 动 元 素 的 下 方,但 是 这 些 元 素 的 内 容 并 不 一 定 会 被 浮 动 的 元 素 遮 盖。当 定 位 内 联 元 素 时,要 考 虑 浮 动 元 素 的 边 界,围 绕 浮 动 元 素 放 置 内 联 元 素。也 可 以 把 浮 动 元 素 想 象 成 被 块 元 素 忽 略 的 元 素,而 内 联 元 素 会 关 注 的 元 素。11、画 一 条 0.5px的 直 线?【仅 供 参 考】考 查 的 是 css3的 transformheight:Ipx;transform:s
10、cale(0.5);12、如 何 实 现 左 边 固 定 宽,右 边 自 适 应 布 局【仅 供 参 考】/1.圣 杯 布 局 div id=container”container padding-left:200px;padding-right:150px;)ttcontainer.column float:left;)ttcenter width:100%;)#left width:200px;margin-left:-100%;position:relative;right:200px;)Sright width:150px;margin-right:-150px;)/2.双 飞 翼 布
11、 局 div id二 container,class二 column”)div id二 left class二 columrTX/div Scontainer width:100%;),column float:left;)ttcenter margin-left:200px;margin-right:150px;)#left width:200px;margin-left:-100%;Sright width:150px;margin-left:-150px;/3.等 高 布 局(假 等 高)互 补 的 内 外 边 距.parentoverflow:hidden;.left,rightmar
12、gin-bottom:-lOOOOpx;padding-bottom:lOOOOpx;)/4.等 高 布 局(真 等 高)弹 性 盒 子.parentdisplay:flex;).childflex:1;/calc.columnfloat:left;)#leftwidth:lOOpx;)Sright width:200px;)ttcenter width:calc(100%-lOOpx-200px);/5.浮 动/div#leftfloat:left;width:lOOpx;)Wright float:right;width:200px;)#centermargin-left:lOOpx;ma
13、rgin-right:200px;)13、精 灵 图 和 base64如 何 选 择?【仅 供 参 考】精 灵 图:优 点:将 多 个 图 像 加 载 请 求 合 并 为 一 个 请 求;弊 端:难 以 维 护 和 更 新;增 加 内 存 消 耗;base64:优 点:将 多 个 图 像 加 载 请 求 合 并 为 一 个 CSS文 件 请 求;轻 松 更 新 生 成 文 件;弊 端:base64编 码 比 原 始 二 进 制 表 示 大 约 大 25%;IE6或 IE7不 支 持;14、移 动 端 lpx边 框 怎 么 设 置【仅 供 参 考】/*方 法 1*/.border width:1
14、00%;height:lpx;background:red;/*方 法 2*/.borderborder-image:url(border,png)/*方 法 3*/.borderbox-shadow:0 0 0 Ipx#000;)15、CSS优 化、提 高 性 能 的 方 法 有 哪 些?【仅 供 参 考】多 个 css合 并,尽 量 减 少 HTTP请 求 CSS雪 碧 图 抽 象 提 取 公 共 样 式,减 少 代 码 量 选 择 器 优 化 嵌 套,尽 量 避 免 层 级 过 深(用 替 换)属 性 值 为 0 时,不 加 单 位 压 缩 CSS代 码 避 免 使 用 CSS表 达 式
15、,它 们 要 计 算 成 千 上 万 次 并 且 可 能 会 对 你 页 面 的 性 能 产 生 影 响。16、vertical-align什 么 时 候 生 效【仅 供 参 考】父 元 素(iniine-blockblock)必 须 含 有 line-height(inline 元 素 有 无 皆 可),子 元 素 中 的(inline-block/inline元 素)vertical-align才 能 起 作 用 当 父 元 素 没 有 设 置 line-height时,只 对 行 内 元 素 的 兄 弟 元 素 对 齐 有 用,无 法 子 元 素 居 中 对 齐 父 元 素 17、如 何
16、 控 制 单 行 显 示 且 显 示 不 下 显 示.【仅 供 参 考】overflow:hidden;text-overflow:ellipsis;white-space:no-wrap;18、常 见 兼 容 性 问 题?【仅 供 参 考】浏 览 器 默 认 的 margin和 padding不 同。解 决 方 案 是 加 一 个 全 局 的*margin:0;padding:0;来 统 一。Chrome中 文 界 面 下 默 认 会 将 小 于 12px的 文 本 强 制 按 照 12px显 示,可 通 过 加 入 CSS 属 性-webkit-text-size-adjust:none;
17、解 决.19、如 何 让 文 字 换 行【仅 供 参 考】word-wrap,word-break,white-space 都 可 以 做 至 Uword-wrap:normal;遇 到 空 格 才 换 行 word-break:break-all;把 所 有 字 符(包 括 空 格)当 一 行,遇 到 边 界 换 行 word-break:break-word;先 按 空 格 换 行,再 拆 分 单 词 和 word-wrap:breakword 一 样 white-space:normal;正 常 遇 到 空 白 换 行 white-space:no-wrap;空 白 都 不 换 行,一
18、行 显 示 所 有 word-wrap 和 word-break 在 flex 布 局 下 的 效 果,word-wrap 不 能 换 行,wordbreak 可 以。但 是 如 果 二 者 都 有 width或 者 min-width限 制,效 果 一 样。divstyle二 border:Ipx solid red;width:200px;height:200px;display:flex;“divstyle二 flex:1;word-wrap:breakword;ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
19、ddddd divstyle二 min-width:lOOpx;border:Ipx solid greenz,sss divstyle二 border:Ipx solid red;width:200px;height:200px;display:flex;,,divstyle=z,flex:1;word-break:breakword;”ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddsss20、文 字 和 图 片 放 在 一 起,为 什 么 无 法 底 部 对 齐【仅 供 参 考】因 为 img也 相
20、当 于 一 个 inline的 元 素,inline就 要 遵 守 行 高 的 构 成,它 会 按 照 base基 线 对 齐,基 线 对 齐 的 话 那 么 它 就 会 和 底 线 间 有 一 个 缝 隙。对 于 img,因 为 它 会 遵 守 文 字 对 齐 方 案,那 么 就 把 图 片 的 对 齐 方 式 修 改 为 vertical-align:bottom。或 者 让 他 display:block,这 样 图 片 虽 然 会 换 行,但 是 没 有 间 隙 了 二、JS/ES6/TS 篇 1、JSON 的 了 解?【仅 供 参 考】JSON(JavaScript Object N
21、otation)是 一 种 轻 量 级 的 数 据 交 换 格 式。它 是 基 于 JavaScript的 一 个 子 集。数 据 格 式 简 单,易 于 读 写,占 用 带 宽 小 age:12,name:back 2、什 么 是 回 调【仅 供 参 考】回 调 函 数 是 作 为 参 数 或 选 项 传 递 给 某 个 方 法 的 普 通 JS函 数。它 是 一 个 函 数,在 另 一 个 函 数 完 成 调 用 后 执 行,因 此 称 为 回 调。3、async/await【仅 供 参 考】async是 一 个 通 过 异 步 执 行 并 隐 式 返 回 Promise作 为 结 果 的
22、 函 数。是 Generator函 数 的 语 法 糖,并 对 Generator函 数 进 行 了 改 进。改 进:内 置 执 行 器,无 需 手 动 执 行 n e x t O方 法。更 好 的 语 义更 广 的 适 用 性:co模 块 约 定,yield命 令 后 面 只 能 是 Thunk函 数 或 Promise对 象,而 async函 数 的 await命 令 后 面,可 以 是 Promise对 象 和 原 始 类 型 的 值(数 值、字 符 串 和 布 尔 值,但 这 时 会 自 动 转 成 立 即 resolved的 Promise对 象)。返 回 值 是 Promise,比
23、 Generator函 数 返 回 的 Iterator对 象 方 便,可 以 直 接 使 用 then()方 法 进 行 调 用。async隐 式 返 回 Promise作 为 结 果 的 函 数,那 么 可 以 简 单 理 解 为,await后 面 的 函 数 执 行 完 毕 时,await会 产 生 一 个 微 任 务(Promise.then是 微 任 务)。4、prototype和 proto的 关 系 是 什 么【仅 供 参 考】prototype:所 有 函 数 都 会 有 一 个 prototype属 性,它 就 是 函 数 的 原 型 对 象 proto:所 有 实 例 对
24、象 上 都 会 有 一 个 proto属 性,它 等 同 于 函 数 的 原 型 对 象 5、请 说 一 个 pushState与 replaceState两 个 方 法 的 作 用 与 区 别【仅 供 参 考】作 用:都 是 改 变 路 由(路 径)的,路 径 改 变 时 不 会 请 求 服 务 器(除 非 你 f5刷 新)区 别:pushState:不 会 替 换 掉 之 前 的 历 史 路 径 replaceState:会 替 换 掉 之 前 的 历 史 路 径 6、什 么 是 回 调 地 狱【仅 供 参 考】一 个 异 步 请 求 套 着 一 个 异 步 请 求,一 个 异 步 请 求
25、 依 赖 于 另 一 个 的 执 行 结 果,使 用 回 调 的 方 式 相 互 嵌 套。Promise解 决 了 这 个 问 题 async/wait在 Promise的 基 础 上 优 化,同 步 写 法,异 步 执 行,使 代 码 看 起 来 更 简 洁。7、HTML5的 form如 何 关 闭 自 动 完 成 功 能?【仅 供 参 考】将 不 想 要 自 动 完 成 的 form或 input设 置 为 autocomplete=off8、this指 向 的 各 种 情 况 都 有 什 么?【仅 供 参 考】全 局 作 用 域 中 的 函 数:非 严 格 模 式 下 其 内 部 thi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2023 年前 端面 面试 必备
限制150内