如何判断一个对象是否属于某个类？

  • 第一种形式，应用 instanceof 运算符来判断构造函数的 prototype 属性是否呈现在对象的原型链中的任何地位。
  • 第二种形式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，然而这种形式不是很平安，因为 constructor 属性能够被改写。
  • 第三种形式，如果须要判断的是某个内置的援用类型的话，能够应用 Object.prototype.toString() 办法来打印对象的[[Class]] 属性来进行判断。

display的block、inline和inline-block的区别

（1）block： 会独占一行，多个元素会另起一行，能够设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性有效。但能够设置程度方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象出现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

（1）行内元素

  • 设置宽高有效；
  • 能够设置程度方向的margin和padding属性，不能设置垂直方向的padding和margin；
  • 不会主动换行；

（2）块级元素

  • 能够设置宽高；
  • 设置margin和padding都无效；
  • 能够主动换行；
  • 多个块状，默认排列从上到下。

JavaScript 类数组对象的定义？

一个领有 length 属性和若干索引属性的对象就能够被称为类数组对象，类数组对象和数组相似，然而不能调用数组的办法。常见的类数组对象有 arguments 和 DOM 办法的返回后果，还有一个函数也能够被看作是类数组对象，因为它含有 length 属性值，代表可接管的参数个数。

常见的类数组转换为数组的办法有这样几种：

（1）通过 call 调用数组的 slice 办法来实现转换

Array.prototype.slice.call(arrayLike);

（2）通过 call 调用数组的 splice 办法来实现转换

Array.prototype.splice.call(arrayLike, 0);

（3）通过 apply 调用数组的 concat 办法来实现转换

Array.prototype.concat.apply([], arrayLike);

（4）通过 Array.from 办法来实现转换

Array.from(arrayLike);

为什么须要革除浮动？革除浮动的形式

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器里面而影响布局。这种景象被称为浮动（溢出）。

浮动的工作原理：

  • 浮动元素脱离文档流，不占据空间（引起“高度塌陷”景象）
  • 浮动元素碰到蕴含它的边框或者其余浮动元素的边框停留

浮动元素能够左右挪动，直到遇到另一个浮动元素或者遇到它外边缘的蕴含框。浮动框不属于文档流中的一般流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的一般流就会体现得该浮动框不存在一样的布局模式。当蕴含框的高度小于浮动框的时候，此时就会呈现“高度塌陷”。

浮动元素引起的问题？

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

革除浮动的形式如下：

  • 给父级div定义height属性
  • 最初一个浮动元素之后增加一个空的div标签，并增加clear:both款式
  • 蕴含浮动元素的父级标签增加overflow:hidden或者overflow:auto
  • 应用 :after 伪元素。因为IE6-7不反对 :after，应用 zoom:1 触发 hasLayout**
.clearfix:after{    content: "\200B";    display: table;     height: 0;    clear: both;  }  .clearfix{    *zoom: 1;  }

对this对象的了解

this 是执行上下文中的一个属性，它指向最初一次调用这个办法的对象。在理论开发中，this 的指向能够通过四种调用模式来判断。

  • 第一种是函数调用模式，当一个函数不是一个对象的属性时，间接作为函数来调用时，this 指向全局对象。
  • 第二种是办法调用模式，如果一个函数作为一个对象的办法来调用时，this 指向这个对象。
  • 第三种是结构器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
  • 第四种是 apply 、 call 和 bind 调用模式，这三个办法都能够显示的指定调用函数的 this 指向。其中 apply 办法接管两个参数：一个是 this 绑定的对象，一个是参数数组。call 办法接管的参数，第一个是 this 绑定的对象，前面的其余参数是传入函数执行的参数。也就是说，在应用 call() 办法时，传递给函数的参数必须一一列举进去。bind 办法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了应用 new 时会被扭转，其余状况下都不会扭转。

这四种形式，应用结构器调用模式的优先级最高，而后是 apply、call 和 bind 调用模式，而后是办法调用模式，而后是函数调用模式。

label 的作用是什么？如何应用？

label标签来定义表单控件的关系：当用户抉择label标签时，浏览器会主动将焦点转到和label标签相干的表单控件上。

  • 应用办法1：
<label for="mobile">Number:</label><input type="text" id="mobile"/>
  • 应用办法2：
<label>Date:<input type="text"/></label>

参考 前端进阶面试题具体解答

CSS3中有哪些新个性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 暗影和反射 （Shadoweflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 线性突变 （gradient）
  • 旋转 （transform）
  • 减少了旋转,缩放,定位,歪斜,动画,多背景

浏览器乱码的起因是什么？如何解决？

产生乱码的起因：

  • 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器关上即会呈现html乱码，反之也会呈现乱码；
  • html网页编码是gbk，而程序从数据库中调出出现是utf-8编码的内容也会造成编码乱码；
  • 浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

  • 应用软件编辑HTML网页内容；
  • 如果网页设置编码是gbk，而数据库贮存数据编码格局是UTF-8，此时须要程序查询数据库数据显示数据后退程序转码；
  • 如果浏览器浏览时候呈现网页乱码，在浏览器中找到转换编码的菜单进行转换。

call() 和 apply() 的区别？

它们的作用截然不同，区别仅在于传入参数的模式的不同。

  • apply 承受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下标的汇合，这个汇合能够为数组，也能够为类数组，apply 办法把这个汇合中的元素作为参数传递给被调用的函数。
  • call 传入的参数数量不固定，跟 apply 雷同的是，第一个参数也是代表函数体内的 this 指向，从第二个参数开始往后，每个参数被顺次传入函数。

三栏布局的实现

三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，三栏布局的具体实现：

  • 利用相对定位，左右两栏设置为相对定位，两头设置对应方向大小的margin的值。
.outer {  position: relative;  height: 100px;}.left {  position: absolute;  width: 100px;  height: 100px;  background: tomato;}.right {  position: absolute;  top: 0;  right: 0;  width: 200px;  height: 100px;  background: gold;}.center {  margin-left: 100px;  margin-right: 200px;  height: 100px;  background: lightgreen;}
  • 利用flex布局，左右两栏设置固定大小，两头一栏设置为flex:1。
.outer {  display: flex;  height: 100px;}.left {  width: 100px;  background: tomato;}.right {  width: 100px;  background: gold;}.center {  flex: 1;  background: lightgreen;}
  • 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的margin值，留神这种形式，两头一栏必须放到最初：
.outer {  height: 100px;}.left {  float: left;  width: 100px;  height: 100px;  background: tomato;}.right {  float: right;  width: 200px;  height: 100px;  background: gold;}.center {  height: 100px;  margin-left: 100px;  margin-right: 200px;  background: lightgreen;}
  • 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。
.outer {  height: 100px;  padding-left: 100px;  padding-right: 200px;}.left {  position: relative;  left: -100px;  float: left;  margin-left: -100%;  width: 100px;  height: 100px;  background: tomato;}.right {  position: relative;  left: 200px;  float: right;  margin-left: -200px;  width: 200px;  height: 100px;  background: gold;}.center {  float: left;  width: 100%;  height: 100px;  background: lightgreen;}
  • 双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。
.outer {  height: 100px;}.left {  float: left;  margin-left: -100%;  width: 100px;  height: 100px;  background: tomato;}.right {  float: left;  margin-left: -200px;  width: 200px;  height: 100px;  background: gold;}.wrapper {  float: left;  width: 100%;  height: 100px;  background: lightgreen;}.center {  margin-left: 100px;  margin-right: 200px;  height: 100px;}

什么是 DOM 和 BOM？

  • DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象次要定义了解决网页内容的办法和接口。
  • BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来看待，这个对象次要定义了与浏览器进行交互的法和接口。BOM的外围是 window，而 window 对象具备双重角色，它既是通过 js 拜访浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者办法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最基本的对象 document 对象也是 BOM 的 window 对象的子对象。

Canvas和SVG的区别

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩大标记语言XML形容的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，能够为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器可能主动重现图形。

其特点如下：

  • 不依赖分辨率
  • 反对事件处理器
  • 最适宜带有大型渲染区域的应用程序（比方谷歌地图）
  • 复杂度高会减慢渲染速度（任何适度应用 DOM 的利用都不快）
  • 不适宜游戏利用

（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其地位产生扭转，就会从新进行绘制。

其特点如下：

  • 依赖分辨率
  • 不反对事件处理器
  • 弱的文本渲染能力
  • 可能以 .png 或 .jpg 格局保留后果图像
  • 最适宜图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连贯的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具备色彩、形态、轮廓、大小和屏幕地位等属性。

什么是物理像素，逻辑像素和像素密度，为什么在挪动端开发时须要用到@3x, @2x这种图片？

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；

而如果有一把尺子来理论测量这部手机的物理像素，理论为 1242*2688 物理像素；通过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保障其不失真，1 个图片像素至多要对应一个物理像素，如果原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片能力保障 1 个物理像素至多对应一个图片像素，能力不失真。 当然，也能够针对所有屏幕，都只提供最高清图片。尽管低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽节约和下载提早，但从后果上说能保障图片在所有屏幕上都不会失真。

还能够应用 CSS 媒体查问来判断不同的像素密度，从而抉择不同的图片:

my-image { background: (low.png); }@media only screen and (min-device-pixel-ratio: 1.5) {  #my-image { background: (high.png); }}

对JSON的了解

JSON 是一种基于文本的轻量级的数据交换格局。它能够被任何的编程语言读取和作为数据格式来传递。

在我的项目开发中，应用 JSON 作为前后端数据交换的形式。在前端通过将一个合乎 JSON 格局的数据结构序列化为
JSON 字符串，而后将它传递到后端，后端通过 JSON 格局的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。

因为 JSON 的语法是基于 js 的，因而很容易将 JSON 和 js 中的对象弄混，然而应该留神的是 JSON 和 js 中的对象不是一回事，JSON 中对象格局更加严格，比如说在 JSON 中属性值不能为函数，不能呈现 NaN 这样的属性值等，因而大多数的 js 对象是不合乎 JSON 对象的格局的。

在 js 中提供了两个函数来实现 js 数据结构和 JSON 格局的转换解决，

  • JSON.stringify 函数，通过传入一个合乎 JSON 格局的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不合乎 JSON 格局，那么在序列化的时候会对这些值进行对应的非凡解决，使其符合规范。在前端向后端发送数据时，能够调用这个函数将数据对象转化为 JSON 格局的字符串。
  • JSON.parse() 函数，这个函数用来将 JSON 格局的字符串转换为一个 js 数据结构，如果传入的字符串不是规范的 JSON 格局的字符串的话，将会抛出谬误。当从后端接管到 JSON 格局的字符串时，能够通过这个办法来将其解析为一个 js 数据结构，以此来进行数据的拜访。

iframe 有那些长处和毛病？

iframe 元素会创立蕴含另外一个文档的内联框架（即行内框架）。

长处：

  • 用来加载速度较慢的内容（如广告）
  • 能够使脚本能够并行下载
  • 能够实现跨子域通信

毛病：

  • iframe 会阻塞主页面的 onload 事件
  • 无奈被一些搜索引擎索辨认
  • 会产生很多页面，不容易治理

对 CSS 工程化的了解

CSS 工程化是为了解决以下问题：

  1. 宏观设计：CSS 代码如何组织、如何拆分、模块构造怎么设计？
  2. 编码优化：怎么写出更好的 CSS？
  3. 构建：如何解决我的 CSS，能力让它的打包后果最优？
  4. 可维护性：代码写完了，如何最小化它后续的变更老本？如何确保任何一个共事都能轻松接手？

以下三个方向都是时下比拟风行的、普适性十分好的 CSS 工程化实际：

  • 预处理器：Less、 Sass 等；
  • 重要的工程化插件： PostCss；
  • Webpack loader 等 。

基于这三个方向，能够衍生出一些具备典型意义的子问题，这里咱们一一来看：

（1）预处理器：为什么要用预处理器？它的呈现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器反对咱们写一种相似 CSS、但理论并不是 CSS 的语言，而后把它编译成 CSS 代码： 那为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？这就和原本用 JS 也能够实现所有性能，但最初却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽！要想晓得有了预处理器有多爽，首先要晓得的是传统 CSS 有多不爽。随着前端业务复杂度的进步，前端工程中对 CSS 提出了以下的诉求：

  1. 宏观设计上：咱们心愿能优化 CSS 文件的目录构造，对现有的 CSS 文件实现复用；
  2. 编码优化上：咱们心愿能写出构造清晰、扼要易懂的 CSS，须要它具备高深莫测的嵌套层级关系，而不是无差别的一铺到底写法；咱们心愿它具备变量特色、计算能力、循环能力等等更强的可编程性，这样咱们能够少写一些无用的代码；
  3. 可维护性上：更强的可编程性意味着更优质的代码构造，实现复用意味着更简略的目录构造和更强的拓展能力，这两点如果能做到，天然会带来更强的可维护性。

这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器广泛会具备这样的个性：

  • 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
  • 反对定义 css 变量；
  • 提供计算函数；
  • 容许对代码片段进行 extend 和 mixin；
  • 反对循环语句的应用；
  • 反对将 CSS 文件模块化，实现复用。

（2）PostCss：PostCss 是如何工作的？咱们在什么场景下会应用 PostCss？

它和预处理器的不同就在于，预处理器解决的是 类CSS，而 PostCss 解决的就是 CSS 自身。Babel 能够将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是相似的事件：它能够编译尚未被浏览器广泛支持的先进的 CSS 语法，还能够主动为一些须要额定兼容的语法减少前缀。更强的是，因为 PostCss 有着弱小的插件机制，反对各种各样的扩大，极大地强化了 CSS 的能力。

PostCss 在业务中的应用场景十分多：

  • 进步 CSS 代码的可读性：PostCss 其实能够做相似预处理器能做的工作；
  • 当咱们的 CSS 代码须要适配低版本浏览器时，PostCss 的 Autoprefixer 插件能够帮忙咱们主动减少浏览器前缀；
  • 容许咱们编写面向未来的 CSS：PostCss 可能帮忙咱们编译 CSS next 代码；

（3）Webpack 能解决 CSS 吗？如何实现？ Webpack 能解决 CSS 吗：

  • Webpack 在裸奔的状态下，是不能解决 CSS 的，Webpack 自身是一个面向 JavaScript 且只能解决 JavaScript 代码的模块化打包工具；
  • Webpack 在 loader 的辅助下，是能够解决 CSS 的。

如何用 Webpack 实现对 CSS 的解决：

  • Webpack 中操作 CSS 须要应用的两个要害的 loader：css-loader 和 style-loader

  • 留神，答出“用什么”有时候可能还不够，面试官会狐疑你是不是在背答案，所以你还须要理解每个 loader 都做了什么事件：

    • css-loader：导入 CSS 模块，对 CSS 代码进行编译解决；
    • style-loader：创立style标签，把 CSS 内容写入标签。

在理论应用中，css-loader 的执行程序肯定要安顿在 style-loader 的后面。因为只有实现了编译过程，才能够对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无奈了解这坨货色的，它会无情报错。

伪元素和伪类的区别和作用？

  • 伪元素：在内容元素的前后插入额定的元素或款式，然而这些元素实际上并不在文档中生成。它们只在内部显示可见，但不会在文档的源代码中找到它们，因而，称为“伪”元素。例如：
p::before {content:"第一章：";}p::after {content:"Hot!";}p::first-line {background:red;}p::first-letter {font-size:30px;}
  • 伪类：将非凡的成果增加到特定选择器上。它是已有元素上增加类别的，不会产生新的元素。例如：
a:hover {color: #FF00FF}p:first-child {color: red}

总结： 伪类是通过在元素选择器上加⼊伪类扭转元素状态，⽽伪元素通过对元素的操作进⾏对元素的扭转。

HTTP2的头部压缩算法是怎么的？

HTTP2的头部压缩是HPACK算法。在客户端和服务器两端建设“字典”，用索引号示意反复的字符串，采纳哈夫曼编码来压缩整数和字符串，能够达到50%~90%的高压缩率。

具体来说:

  • 在客户端和服务器端应用“首部表”来跟踪和存储之前发送的键值对，对于雷同的数据，不再通过每次申请和响应发送；
  • 首部表在HTTP/2的连贯存续期内始终存在，由客户端和服务器独特渐进地更新；
  • 每个新的首部键值对要么被追加到以后表的开端，要么替换表中之前的值。

例如下图中的两个申请， 申请一发送了所有的头部字段，第二个申请则只须要发送差别数据，这样能够缩小冗余数据，升高开销。

对BFC的了解，如何创立BFC

先来看两个相干的概念：

  • Box: Box 是 CSS 布局的对象和根本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是咱们所说的盒模型。
  • Formatting context：块级高低⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规定，它决定了其⼦元素将如何定位，以及和其余元素的关系和互相作⽤。

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其余元素的交互限定区域。

艰深来讲：BFC是一个独立的布局环境，能够了解为一个容器，在这个容器中依照肯定规定进行物品摆放，并且不会影响其它环境中的物品。如果一个元素合乎触发BFC的条件，则BFC中的元素布局不受内部影响。

创立BFC的条件：

  • 根元素：body；
  • 元素设置浮动：float 除 none 以外的值；
  • 元素设置相对定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；
  • overflow 值为：hidden、auto、scroll；

BFC的特点：

  • 垂直方向上，自上而下排列，和文档流的排列形式统一。
  • 在BFC中高低相邻的两个容器的margin会重叠
  • 计算BFC的高度时，须要计算浮动元素的高度
  • BFC区域不会与浮动的容器产生重叠
  • BFC是独立的容器，容器外部元素不会影响内部元素
  • 每个元素的左margin值和容器的左border相接触

BFC的作用：

  • 解决margin的重叠问题：因为BFC是一个独立的区域，外部的元素和内部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
  • 解决高度塌陷的问题：在对子元素设置浮动后，父元素会产生高度塌陷，也就是父元素的高度变为0。解决这个问题，只须要把父元素变成一个BFC。罕用的方法是给父元素设置overflow:hidden。
  • 创立自适应两栏布局：能够用来创立自适应两栏布局：右边的宽度固定，左边的宽度自适应。
.left{     width: 100px;     height: 200px;     background: red;     float: left; } .right{     height: 300px;     background: blue;     overflow: hidden; }<div class="left"></div><div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样左边就触发了BFC，BFC的区域不会与浮动元素产生重叠，所以两侧就不会产生重叠，实现了自适应两栏布局。

display、float、position的关系

（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最初的体现。

（2）而后判断position的值是否为absolute或者fixed，如果是，则float属性生效，并且display的值应该被设置为table或者block，具体转换须要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按下面的规定转换。留神，如果position的值为relative并且float属性的值存在，则relative绝对于浮动后的最终地位定位。

（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性依照下面的规定转换，如果不是，则放弃指定的display属性值不变。

总的来说，能够把它看作是一个相似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也须要调整；其次，元素的'float'个性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；最初，非根元素，并且非浮动元素，并且非相对定位的元素，'display'个性值同设置值。