面试题系列|前端面试题前端高频面试题总结（2021年最新版）

Posted 孙叫兽

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试题系列|前端面试题前端高频面试题总结（2021年最新版）相关的知识，希望对你有一定的参考价值。

面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有真实上线的项目，这种简历一般都会拒绝掉）。

当我们去一家公司面试，面试官有很大的主动权，面试官属于攻击方，求职者属于防守方，我们不可能什么方向都研究的非常深，所以扬长避短是最好的方式，推荐大家要做帐篷型的人，而不是水桶型的人；市场上岗位非常多，我们需要做的就是找到适合自己长处发展的那个职业！

面试的时候一定不要和面试官硬刚，可以适度的夸大自己，但是一定不要以为自己技术牛，就疯狂装B；面试官非常希望找到和自己脾气相投的人一起共事，哪怕你真的是万里挑一的大牛，面试官感觉和你一起共事非常不舒服，那么拒绝你也不是什么太难的决定。

如果遇到自己期望薪资内的offer，一定不要犹豫，直接答应下来，但是入职的时间，可以稍微向后推一下，可以一个礼拜后，十天后等，这段时间再继续面试，这时候薪资就一定要找高于自己答应offer的薪资，如果期间遇到自己更加满意的offer，就在自己答应的offer里找一家自己最感兴趣的入职。

目录

HTML 面试题

CSS 面试题

JavaScript 面试题

网络通信面试题

jQuery 面试题

Vue.js 面试题

React.js 面试题

工具面试题

算法面试题

综合面试题

我比较喜欢的面试者

 

html 面试题

HTML5 有哪些新特性？

答：1.HTML4 规定了三种声明方式，分别是：严格模式、过渡模式 和 框架集模式；

而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了：

2.语义化更好的内容标签。header/footer/article等

3.音频、视频 API(audio,video)

4.表单控件：

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

5.5个API-本地存储，长期存储数据的 localStorage，比较常用，临时存储的 sessionStorage，浏览器关闭后自动删除，实际工作中使用的场景不多。

画布/Canvas，canvas，figure,figcaption.

地理/Geolocation.地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。

拖拽释放.HTML拖拽释放 (Drag and drop) 接口使应用程序能够在浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。

Web Workers.webworker, websocket, Geolocation,当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 javascript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

答：

  • ⻚⾯被加载的时， link 会同时被加载，⽽ @imort ⻚⾯被加载的时， link 会同时被加
  • 载，⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载 import 只在 IE5 以上才能识
  • 别，⽽ link 是 XHTML 标签，⽆兼容问题 link ⽅式的样式的权重 ⾼于 @import 的权
  • 重
  • <!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档
  • 严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
  • 在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

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

调用 localstorge、cookies 等本地存储方式；

  • 1、在 B 页面中可以使用 window.opener 获得 A 页面的 window 句柄，使用该句柄即可调用 A 页面中的对象，函数等。
    • 例如 A 页面定义 js 函数 onClosePageB，在 B 页面可以用 window.opener.onClosePageB 来进行回调。
  • 2、使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打开新窗口。 其中 vArguments 参数可以用来向对话框传递参数。传递的参数类型不限，包括数组、函数等。对话框通过window.dialogArguments来取得传递进来的参数。
  • 3、如果是支持 HTML5 的话，建议用本地存储 (local storage)，它支持一个事件方法 window.onstorage，只要其中一个窗口修改了本地存储，其他同源窗口会触发这个事件。

总结：

  • WebSocket、SharedWorker；
  • 也可以调用 localstorge、cookies 等本地存储方式；
  • localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
  • 我们通过监听事件，控制它的值来进行页面信息通信；
  • 注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

方法一：调用 localstorge

标签1：

<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
    $(function()
        $("#btn").click(function()
           var name=$("#name").val();
            localStorage.setItem("name", name); //存储需要的信息
        );
   );
</script>

标签2：

$(function()
    window.addEventListener("storage", function(event)
	   console.log(event.key + "=" + event.newValue);
    );     //使用storage事件监听添加、修改、删除的动作
);

将要传递的信息存储在 cookie 中，每隔一定时间读取 cookie 信息，即可随时获取要传递的信息。

标签1：

$(function()
    $("#btn").click(function()
        var name=$("#name").val();
        document.cookie="name="+name;
    );
);

标签2：

$(function()
	function getCookie(key) 
	   return JSON.parse("\\"" + document.cookie.replace(/;\\s+/gim,"\\",\\"").replace(/=/gim, "\\":\\"") + "\\"")[key];
	
	setInterval(function()
	   console.log("name=" + getCookie("name"));
	, 10000);
);

⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

答：

  • ⾏内元素有： a b span img input select strong
  • 块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
  • 空元素： br,hr img input link meta
  • ⾏内元素不可以设置宽⾼，不独占⼀⾏
  • 块级元素可以设置宽⾼，独占⼀⾏

简述⼀下src与href的区别？

答：

  • src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。
  • src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素
    • <script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他
    • 资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素
    • 也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底
    • 部⽽不是头部
  • href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加
  • <link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式

cookies,sessionStorage,localStorage 的区别？

答：

  • cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
  • cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
  • sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小

  • cookie 数据大小不能超过 4k。
  • sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间

  • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

HTML5 的离线储存的使用和原理？

答：

相似存储

localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。

离线的存储

两种方式

  • HTML5 的离线存储.appcache文件【废弃】
  • service-worker 的标准

HTML5 的离线存储.appcache文件【废弃】

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

原理：HTML5 的离线存储是基于一个新建的。appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。

之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用

  • 1、页面头部像下面一样加入一个 manifest 的属性

  • 2、在 cache.manifest 文件的编写离线存储的资源

    CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

     

  • 3、在离线状态时，操作 window.applicationCache 进行需求实现。

service-worker

可以参考

怎样处理 移动端 1px 被 渲染成 2px 问题？

答：

meta 标签中的 viewport 属性 ，initial-scale 设置为 1

rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可； 2 全局处理

meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5

rem 按照设计稿标准走即可

解释

UI 设计师设计的时候，画的 1px（真实像素）实际上是 0.5px(css) 的线或者边框。但是他不这么认为，他认为他画的就是 1px 的线，因为他画的稿的尺寸本身就是屏幕尺寸的 2 倍。假设手机视网膜屏的宽度是 320x480 宽，但实际尺寸是 640x960 宽，设计师设计图的时候一定是按照 640x960 设计的。但是前端工程师写代码的时候，所有 css 都是按照 320x480 写的，写 1px(css)，浏览器自动变成 2px（真实像素）。

那么前端工程师为什么不能直接写 0.5px(css) 呢？因为在老版本的系统里写 0.5px(css) 的话，会被浏览器解读为 0px(css)，就没有边框了。所以只能写成 1px(css)，实际在屏幕上显示出来就是设计师画的 1px（真实像素）的 2 倍那么宽，所以设计师会觉得这个线太粗了，和他的设计稿不一样。在新版的系统里，已经开始逐渐支持 0.5px(css) 这种写法。所以如果设计师在大图上设计了一个 1px（真实像素）的线的话，前端工程师直接除以 2，写 0.5px(css) 就好了。

另外一种解释

事实就是它并没有变粗，就是 css 单位中的 1px，对于 dpr 为 2 的设备，它实际能显示的最小值是 0.5px。

设计师口中说的 1px 是针对设备物理像素的，换算成 css 像素就是 0.5px。

一句话总结，background:1px solid black 在任何屏幕上都是一样粗的，但是 retina 屏可以显示比这更细的边框，然后设计师就不乐意了，让你改。..

浏览器是如何渲染页面的？

答：

解析 HTML 文件，创建 DOM 树

自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

解析 CSS

优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

构建渲染树

将 CSS 与 DOM 合并，构建渲染树（Render Tree）

布局和绘制

布局和绘制，重绘（repaint）和重排（reflow）

如何写出高性能的 HTML？

答：

避免使用 Iframe

Iframe 也叫内联 frame，可以把一个 HTML 文档嵌入到另一个文档中。使用 iframe 的好处是被嵌入的文档可以完全独立于其父文档，凭借此特点我们通常可以使浏览器模拟多线程，需要注意的是使用 iframe 并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，即使是跨窗口或跨标签页，这在所有主流浏览器都是如此。也因为这样这让 iframe 带来的好处大打折扣。

在页面加载过程中 iframe 元素会阻塞父文档 onload 事件的触发，而开发者程序通常会在 onload 事件触发时初始化 UI 操作。例如，设置登录区域的焦点。因为用户习惯等待这一操作，所以尽可能的让 onload 事件触发从而使用户的等待时间变短是非常重要的。另外开发者会把一些重要的行为绑定在 unload 事件上，而不幸的是在一些浏览器中，只有当 onload 事件触发后 unload 事件才能触发，如果 onload 事件长时间未触发，而用户已经离开当前页面，那么 unload 事件也将永远得不到触发。 那是否有方案可以让 onload 事件不被 iframe 阻塞吗？有个简单的解决方案来避免 onload 事件被阻塞，使用 JavaScript 动态的加载 iframe 元素或动态设置 iframe 的 src 属性：

<iframe id=iframe1 ></iframe>
document.getElementById(‘iframe1’).setAttribute(‘src’， ‘url’);

但其仅在高级浏览器 中有效，对于 Internet Explorer 8 及以下的浏览器无效。除此之外我们必须知道 iframe 是文档内最消耗资源的元素之一，在 Steve Souders 的测试中 ，在测试页面中分别加载 100 个 A、DIV、SCRIPT、STYLE 和 IFRAME 元素，并且分别在 Chrome、Firefox、Internet Explorer、Opera、Safari 中运行了 10 次。结果显示创建 iframe 元素的开销比创建其他类型的 DOM 元素要高 1~2 个数量级。在测试中所有的 DOM 元素都是空的，如加载大的脚本或样式块可能比加载某些 iframe 元素耗时更长，但从基准测试结果来看，即使是空的 iframe，其开销也是非常昂贵的，鉴于 iframe 的高开销，我们应尽量避免使用。尤其是对于移动设备，对于目前大部分还是只有有限的 CPU 与内存的情况下，更应避免使用 iframe。

避免空链接属性

空的链接属性是指 img、link、script、ifrrame 元素的 src 或 href 属性被设置了，但是属性却为空。如<img src=''>，我们创建了一个图片，并且暂时设置图片的地址为空，希望在未来动态的去修改它。但是即使图片的地址为空，浏览器依旧会以默认的规则去请求空地址：

  • Internet Explorer 8 及以下版本浏览器只在 img 类型元素上出现问题，IE 会把 img 的空地址解析为当前页面地址的目录地址。例如：如果当前页面地址为 http://example.com/dir/page.html，IE 会把空地址解析为 http://example.com/dir/ 地址并请求。
  • 早些版本的 Webkit 内核浏览器 与 Firefox 会把空地址解析为当前页面的地址。如果页面内有多个空链接属性元素，当前页面的服务器则会被请求多次，增加服务器的负载。相较桌面浏览器对内核的更新升级较积极，这个问题在 ios 与 android 系统的移动浏览器上问题可能较严重。
  • 幸运的是所有主流浏览器面对 iframe 的 src 属性为空时，会把空地址解析为 about:blank 地址，而不会向服务器发出额外的请求。

避免节点深层级嵌套

深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建 DOM 文档的机制有关。例如下面 HTML 代码：

<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>

通过浏览器 HTML 解析器的解析，浏览器会把整个 HTML 文档的结构存储为 DOM 树结构。当文档节点的嵌套层次越深，构建的 DOM 树层次也会越深。

缩减 HTML 文档大小

提高下载速度最显而易见的方式就是减少文件的大小，特别是压缩内嵌在 HTML 文档中的 JavaScript 和 CSS 代码，这能使得页面体积大幅精简。除此之外减少 HTML 文档大小还可以采取下面几种方法：

  • 删掉 HTM 文档对执行结果无影响的空格空行和注释
  • 避免 Table 布局
  • 使用 HTML5

显式指定文档字符集

HTML 页面开始时指定字符集，有助于浏览器可以立即开始解析 HTML 代码。HTML 文档通常被解析为一序列的带字符集编码信息的字符串通过 internet 传送。字符集编码在 HTTP 响应头中，或者 HTML 标记中指定。浏览器根据获得的字符集，把编码解析为可以显示在屏幕上的字符。如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。为了避免浏览器把时间花费在搜寻合适的字符集来进行解码，所以最好在文档中总是显式的指定页面字符集。

显式设置图片的宽高

当浏览器加载页面的 HTML 代码时，有时候需要在图片下载完成前就对页面布局进行定位。

如果 HTML 里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再 “回溯” 该图片并重新显示，这会消耗额外时间。

所以，最好为页面里的每一张图片都指定尺寸，不管是在页面 HTML 里的<img> 标签，还是在 CSS 里。

<img src="hello.png" width="400" height="300">

避免脚本阻塞加载

当浏览器在解析常规的 script 标签时，它需要等待 script 下载完毕，再解析执行，而后续的 HTML 代码只能等待。为了避免阻塞加载，应把脚步放到文档的末尾，如把 script 标签插入在 body 结束标签之前：

<script src="example.js" ></script>
</body>

iframe 的优缺点？

答：

  • iframe 会阻塞主页面的 Onload 事件；
  • iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
  • 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

Canvas 和 SVG 图形的区别是什么？

答：Canvas 和 SVG 都可以在浏览器上绘制图形。

SVG Canvas 绘制后记忆，换句话说任何使用 SVG 绘制的形状都能被记忆和操作，浏览器可以再次显示 Canvas 则是绘制后忘记，一旦绘制完成你就不能访问像素和操作它 SVG 对于创建图形例如 CAD 软件是良好的，一旦东西绘制，用户就想去操作它 Canvas 则用于绘制和遗忘类似动漫和游戏的场画。

为了之后的操作，SVG 需要记录坐标，所以比较缓慢。

因为没有记住以后事情的任务，所以 Canvas 更快。

我们可以用绘制对象的相关事件处理我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考分辨率独立分辨率依赖

  • SVG 并不属于 html5 专有内容，在 html5 之前就有 SVG。
  • SVG 文件的扩展名是”.svg”。
  • SVG 绘制的图像在图片质量不下降的情况下被放大。
  • SVG 图像经常在网页中制作小图标和一些动态效果图。

聊聊 meta 标签？

答：核心

提供给页面的一些元信息（名称 / 值对），有助于 SEO。

属性值

name

名称 / 值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到一个名称。

http-equiv

没有 name 时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把 content 属性关联到 http 头部

content

名称 / 值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性一起使用

scheme

用于指定要用来翻译属性值的方案。

 

CSS 面试题

CSS3有哪些新特性？

答：

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadow\\Reflect）
  • 文字特效 （text-shadow、）
  • 文字渲染 （Text-decoration）
  • 线性渐变 （gradient）
  • 旋转 （transform）
  • 增加了旋转,缩放,定位,倾斜,动画，多背景
  • transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg) Animation:

清除浮动的⼏种⽅式，各⾃的优缺点？

答：

  • ⽗级 div 定义 height
  • 结尾处加空 div 标签 clear:both
  • ⽗级 div 定义伪类 :after 和 zoom
  • ⽗级 div 定义 overflow:hidden
  • ⽗级 div 也浮动，需要定义宽度
  • 结尾处加 br 标签 clear:both
  • ⽐较好的是第3种⽅式，好多⽹站都这么⽤

请解释一下CSS3的Flexbox（弹性盒布局模型）？

答：设为Flex布局以后（ display: flex;），子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

以下6个属性设置在容器上（justify-content和align-items、flex-wrap:wrap最常用的）。

  • justify-content：定义了项目在主轴上的对齐方式。它可能取5个值
    • center： 居中
    • flex-start（默认值）：左对齐
    • flex-end：右对齐
    • space-between：两端对齐，项目之间的间隔都相等。
    • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • align-items：属性定义项目在交叉轴上如何对齐。它可能取5个值。
    • center：交叉轴的中点对齐。
    • flex-start：交叉轴的起点对齐。
    • flex-end：交叉轴的终点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  • flex-direction：属性决定主轴的方向（即项目的排列方向）；
    • row（默认值）：主轴为水平方向，起点在左端。
    • row-reverse：主轴为水平方向，起点在右端。
    • column：主轴为垂直方向，起点在上沿。
    • column-reverse：主轴为垂直方向，起点在下沿。
  • flex-wrap：默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
    • 它可能取三个值。
    • （1）nowrap（默认）：不换行。
    • （2）wrap：换行，第一行在上方。【这个属性经常用】
    • （3）wrap-reverse：换行，第一行在下方。
  • align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
    • flex-start：与交叉轴的起点对齐。
    • flex-end：与交叉轴的终点对齐。
    • center：与交叉轴的中点对齐。
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch（默认值）：轴线占满整个交叉轴。

项目的属性总结

以下6个属性设置在项目上。（align-self、flex、order）

  • align-self：
    • 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
    • auto / flex-start / flex-end / center / baseline / stretch;
  • flex：
    • 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
  • order：
    • 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow：
    • 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
  • flex-shrink：
    • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
  • flex-basis：
    • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

解释下浮动和它的工作原理？清除浮动的技巧？

答：浮动元素脱离文档流，不占据空间。

浮动元素碰到包含它的边框或者浮动元素的边框停留

使用空标签清除浮动

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

使用overflow

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

引入样式表CSS的方式有几种？分别是什么？优先级是什么？

答：在HTML中常用以下四种方式定义CSS：

  • inline（内联式，也称行内样式）、
  • embedding（嵌入式）、
  • linking（外部引用式）
  • 导入样式表（@import ）。

详细

  • 一：内联式/行内样式：使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。
  • 二：嵌入式（style）：用户可在HTML文档头部定义多个style元素，实现多个样式表。

  • 三：外部引用式（link）

    • ①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。
    • ②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。
    • ③可以根据介质有选择的加载样式表。

  • 四：导入样式表：@import url(“css/base.css”);

优先级:就近原则

内联式>内嵌式>外部引用式>导入样式表

什么是响应式设计？响应式设计的基本原理是什么？

答：响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

【通过这三个步骤，你一定可以了解响应式设计的基本原理和media query】

第一步. Meta 标签

为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 <head>里面

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及以下的浏览器不支持media query。你可以使用 media-queries.js 或 respond.js 。这样IE就能支持media query了。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

第二步. HTML 结构

这个例子里面，有header、content、sidebar和footer等基本的网页布局。

header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。

第三步. Media Queries

CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px，规则就生效。设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) 
    body 
        background-color:lightblue;
    

用纯CSS创建一个三角形的原理是什么？

答：均分原理

在矩形的直角，两条边的样式要均分

比如左上角 border-top 和 border-left 的样式要均分

如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角

说说盒子模型？

答：很简单，但是能说好比较难度的，可以扩展，回答越深，越广，加分越多

内容+padding+border+margin这个说一遍，然后话风一转，说如果在移动端，这个盒子模型就不是很适合做开发了，最好用box-sizing: border-box;属性改变一下盒子模型；

写了这个属性之后宽度会包括border，因为移动端主要是用百分比，不可能通过像素精确控制，如果让两个屏幕50%的div并排，而且这两个div还有border和padding，原来的盒子模型就做不到，必用用这个css属性改变一下才可以的，但是还有一个问题；

用inline-block让两个div并排后，中间会一个空白字符，还要把换行代码写在一行，或者用font-size:0;来解决

两种盒子模型

css3中定义了box-sizing属性；在移动端的应用；

  • padding和margin的简写写法
  • margin的两种居中DIV方法；（margin:0 auto；和负margin的写法）
  • margin的兼容性问题，IE6img下面有空白；
  • border的CSS3新增属性；
  • border写三角形的用法；

对BFC的规范的理解？

答：（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素

。在同一个 BFC 中的两个毗邻的块 级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

为什么说position absolute 跟float 影响性能？

答：position: absolute会完全脱离文档流

不再在z-index:0层保留占位符，其left、top、right、bottom 值是相对于自己最近的一个位置设置了position: relative 或 position: absolute的祖先元素的；

如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。

float也能改变文档流

不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0层排列，float不像position: relative 和 position: absolute那样，它不能通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float:left 和 float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列，影响到周围元素。

另一个有趣的现象是position: absolute 和 float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position: absolute 或 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。

就算我们显示地设置display:inline或者display:block，也仍然无效（float在IE6 下的双倍边距bug就是利用添加display:inline来解决的）。

值得注意的是，position: relative却不改变display的类型。

position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响

这一条规则可以解释：为什么在移动开发时尽量使用Position：absolute；而不是float来浮动元素

JS为什么会放在下面，CSS为什么放在上面？

答：浏览器从上到下依次解析html文档。

将 css 文件放到头部， css 文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。

将 javascript 文件放到底部是因为：若

将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成 之后才开始呈现页面内容。

这样就会造成呈现页面时出现明显的延迟，窗口一片空白。

为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。

 

浮动元素引起的问题和解决办法？

答：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

额外标签法

<div style="clear:both;"></div>

缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

使用after伪元素

#parent:after
    content : ".";
    height : 0;
    visibility : hidden;
    display : block;
    clear : both;

父元素也设置浮动

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 

设置 overflow 为 hidden 或者 auto

CSS的浏览器兼容性问题总结：

答：所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

除了IE6和7的自身bug，其他浏览器BUG很少的。如果你理解了每一句CSS的意思，规范编写代码，一般很少会出bug。

举个很简单的例子，很多人float:left后，担心IE6的双margin bug，不管三七二十一，加display:inline。其实这是错的。你要搞清楚IE6的双margin bug是如何产生的：

浮动方向有同方向的margin值，才会出现这个bug。所以如果只是单纯浮动，是不会产生这个bug的。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：CSS里  *margin:0;padding:0;

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。

即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。

在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。

不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。

去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：min-height:200px; height:auto !important; height:200px; overflow:visible;

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。

容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。

建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。

如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/ 我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。

不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

IE6认识的hacker 是下划线_ 和星号 *

IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px; IE6浏览器在读到height:300px的时候会认为高时300px；

继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。

继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。

当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。

因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

怎么让Chrome支持小于12px 的文字？

答：

html, body -webkit-text-size-adjust: none;

新版的chrome已经取消了；

CSS3有个新的属性transform，而我们用到的就是transform:scale()

pfont-size:10px;-webkit-transform:scale(0.8);

但是，如果，这个属性会把整个p的属性都缩放。如果我有背景呢？我有边框呢？都会被缩小！

所以我们修改结构为

<p><span>我是一个小于12PX的字体</span></p>

代码如下

body,p margin:0; padding:0
pfont-size:10px;
span-webkit-transform:scale(0.8); display:inline-block

定义 display:inline-block而不是 display:block；会发现。

会存在一定的边距。貌似margin或者padding的间距。

这就是缩放存在问题。原来的位置还占有12px字体的大小。

所以，要对应修改margin了。定义为负的。

还有一个网上别人分享的方法；


html font-size: 625%;
body font-size: 0.16rem;

 

JavaScript 面试题

JavaScript 中有几种数据类型？

答：数据类型可以分为基本数据类型和引用数据类型

基本数据类型 ：String、Number、Boolean 、Null、Undefined、Symbol、BigInt ;

引用数据类型：Object;

有些小伙伴喜欢把引用数据类型这块分为 Object 和 Funtion，这也是可以的，(主要是 typeof可以检测function,还有就是Function这个类比较特殊)

其中 Symbol、BigInt 是新增的数据类型

JavaScript []和表示什么?

答：[]表示数组,

表示对象,

这2种声明方式都为字面量方式。

除了字面量方式外还可以用new Array及new Object来实例化。

JavaScript 什么叫全局变量?什么叫局部变量了?是如何定义出来的?

答：全局变量是在函数外部定义的变量,在JS中全局变量属于window对象,其作用域是整个源程序,全局变量全部存放在静态存储区,在程序开始执行时给全局变量分配存储区,程序运行完毕就释放。

局部变量是相对与全局变量而言的,在特定过程或函数中可以访问的变量,作用域较小,当函数运行结束释放局部变量。

在JavaScript中并没有明确局部变量的概念,是相对于其他编程语言来描述。

参考《JavaScript高级程序设计》中,变量分全局变量和函数变量。

什么叫保留字?在定义变量时我们应该注意哪些?

保留字是JavaScript中已经定义过的字,由于考虑扩展性,一些保留字可能并没有应用于当前的语法中,这是保留字与关键字的区别。

如class、abstract是保留字。在定义变量时应避免与保留字取名相同;

说一说html代码,css代码和js代码的注释方法？

答：HTML注释语法

<!--注释的内容-->

css注释语法

/* 注释内容 */

javaScript注释

//注释内容
/*注释内容*/

写一个从0到59依次循环的计时器？

答：

var flag = 0;
function timer () 
  flag++;
  if (flag > 59) 
    flag = 0;
    return;
  
  console.log(flag);

setInterval(timer, 1000);

JavaScript 事件冒泡机制？

答：事件传播机制（不管是DOM0还是DOM2，这个机制是天生就带的）；

当触发底层元素的某一个事件行为，那么它的上级元素的对应事件行为也会一级级的触发，一直出发到我们的document；（只有相同的事件类型才会触发）

从底层一级级往上传播的机制叫做冒泡；

DOM2级绑定事件，第三个参数写false代表的是冒泡阶段执行，如果写的是true，代表的是在捕获阶段执行；

同一个元素既可以在捕获阶段处理也可以在冒泡阶段处理；

DOM0级基本上只能控制冒泡阶段，而DOM2级是可以控制捕获阶段的；

事件委托

利用DOM的传播机制（点击任意元素，document的click都要出发），我们给document绑定一个点击事件，在事件中我们只需要获取事件源；根据不同的事件源做不同的事件就可以的了（这样就可以不用给元素一个个的绑定事件的了）；

当事件发生在子元素中的时候，旺旺会引起连锁反应，就是在它的祖先元素上也会发生这个事件，比如说你点击了div一个，也相当于点击了一个body，同样相当于点击了html，同样相当于点击了document；

理解事件传播的时候要注意两点；

一是事件本身在传播，而不是绑定在事件上的方法会传播；

二是并非所有的事件都会传播，像onfocus，onblur事件就不传播，onmouseenter和onmouseleave事件也不会传播；

我们要知道常见的事件默认行为有哪些，并且要知道组织默认行为，只要绑定到这个行为事件的方法最后加一句，return false就可以了；

但是需要强调的是，如果你的事件绑定是用addEventListener来实现的，那么组织默认行为必须用e.preventDefault=true;

阻止事件冒泡

function (e) 
e.preventDefault();

事件委托：事件委托就是用事件的传播机制，无论哪一个网页元素，它的click事件都会最终传到document上，这样，则只需在document上处理click事件即可；

document.onclick=function(e)
e=e||window.event;
var target=e.targrt||e.srcElement;//获取事件源是关键；
alert(target.nodeName);
return fals
以上是关于面试题系列|前端面试题前端高频面试题总结（2021年最新版）的主要内容，如果未能解决你的问题，请参考以下文章
 

 2021年中级前端笔试面试题总结（含答案解析）


 React高频面试题梳理，看看面试怎么答？（上）


 前端高频面试题 CSS篇


 超经典，阿里巴巴历年高频面试题汇总：前端岗


 超经典，阿里巴巴历年高频面试题汇总：前端岗


 2022前端最新高频面试题总结（附答案）