关于javascript:滴滴前端常见面试题

浏览器是如何对 HTML5 的离线贮存资源进行治理和加载？

• 在线的状况下，浏览器发现 html 头部有 manifest 属性，它会申请 manifest 文件，如果是第一次拜访页面，那么浏览器就会依据 manifest 文件的内容下载相应的资源并且进行离线存储。如果曾经拜访过页面并且资源曾经进行离线存储了，那么浏览器就会应用离线的资源加载页面，而后浏览器会比照新的 manifest 文件与旧的 manifest 文件，如果文件没有产生扭转，就不做任何操作，如果文件扭转了，就会从新下载文件中的资源并进行离线存储。
• 离线的状况下，浏览器会间接应用离线存储的资源。

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

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

• 应用办法 1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• 应用办法 2：

<label>Date:<input type="text"/></label>

CSS3 的新个性

• transition：过渡
• transform: 旋转、缩放、挪动或歪斜
• animation: 动画
• gradient: 突变
• box-shadow: 暗影
• border-radius: 圆角
• word-break: normal|break-all|keep-all; 文字换行(默认规定 | 单词也能够换行 | 只在半角空格或连字符换行)
• text-overflow: 文字超出局部解决
• text-shadow: 程度暗影，垂直暗影，含糊的间隔，以及暗影的色彩。
• box-sizing: content-box|border-box 盒模型
• 媒体查问 @media screen and (max-width: 960px) {}还有打印print

CSS 中可继承与不可继承属性有哪些

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性：
3. vertical-align：垂直文本对齐
4. text-decoration：规定增加到文本的装璜
5. text-shadow：文本暗影成果
6. white-space：空白符的解决
7. unicode-bidi：设置文本的方向
8. 盒子模型的属性：width、height、margin、border、padding
9. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
10. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
11. 生成内容属性：content、counter-reset、counter-increment
12. 轮廓款式属性：outline-style、outline-width、outline-color、outline
13. 页面款式属性：size、page-break-before、page-break-after
14. 声音款式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1. 字体系列属性
2. font-family：字体系列

• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的格调
• 文本系列属性
• text-indent：文本缩进
• text-align：文本程度对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：管制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
• color：文本色彩
• 元素可见性
• visibility：管制元素显示暗藏
• 列表布局属性
• list-style：列表格调，包含 list-style-type、list-style-image 等
• 光标属性
• cursor：光标显示为何种状态

单行、多行文本溢出暗藏

• 单行文本溢出

overflow: hidden;            // 溢出暗藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

• 多行文本溢出

overflow: hidden;            // 溢出暗藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列形式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

留神：因为下面的三个属性都是 CSS3 的属性，没有浏览器能够兼容，所以要在后面加一个-webkit- 来兼容一部分浏览器。

transition 和 animation 的区别

• transition 是适度属性，强调适度，它的实现须要触发一个事件（比方鼠标挪动下来，焦点，点击等）才执行动画。它相似于 flash 的补间动画，设置一个开始关键帧，一个完结关键帧。
• animation 是动画属性，它的实现不须要触发事件，设定好工夫之后能够本人执行，且能够循环一个动画。它也相似于 flash 的补间动画，然而它能够设置多个关键帧（用 @keyframe 定义）实现动画。

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

head 标签有什么作用，其中什么标签必不可少？

标签用于定义文档的头部，它是所有头部元素的容器。中的元素能够援用脚本、批示浏览器在哪里找到样式表、提供元信息等。

文档的头部形容了文档的各种属性和信息，包含文档的题目、在 Web 中的地位以及和其余文档的关系等。绝大多数文档头部蕴含的数据都不会真正作为内容显示给读者。

上面这些标签可用在 head 局部：<base>, <link>, <meta>, <script>, <style>, <title>。

其中 <title> 定义文档的题目，它是 head 局部中惟一必须的元素。

为什么有时候⽤ translate 来扭转地位⽽不是定位？

translate 是 transform 属性的⼀个值。扭转 transform 或 opacity 不会触发浏览器从新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽扭转相对定位会触发从新布局，进⽽触发重绘和复合。transform 使浏览器为元素创立⼀个 GPU 图层，但扭转相对定位会使⽤到 CPU。因而 translate()更⾼效，能够缩短平滑动画的绘制工夫。⽽ translate 扭转地位时，元素仍然会占据其原始空间，相对定位就不会发⽣这种状况。

程度垂直居中的实现

• 利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 translate 来调整元素的中心点到页面的核心。该办法须要 思考浏览器兼容问题。

.parent {position: relative;} .child {position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);}

• 利用相对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，因而对应方向实现平分，能够实现程度和垂直方向上的居中。该办法实用于 盒子有宽高 的状况：

.parent {position: relative;}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• 利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 margin 负值来调整元素的中心点到页面的核心。该办法实用于 盒子宽高已知 的状况

.parent {position: relative;}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 本身 height 的一半 */
    margin-left: -50px;    /* 本身 width 的一半 */
}

• 应用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和程度方向上为居中对齐，而后它的子元素也能够实现垂直和程度的居中。该办法要 思考兼容的问题，该办法在挪动端用的较多：

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

|| 和 && 操作符的返回值？

|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先强制转换为布尔类型，而后再执行条件判断。

• 对于 || 来说，如果条件判断后果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。
• && 则相同，如果条件判断后果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。

|| 和 && 返回它们其中一个操作数的值，而非条件判断的后果

判断数组的形式有哪些

• 通过 Object.prototype.toString.call()做判断

Object.prototype.toString.call(obj).slice(8,-1) === 'Array';

• 通过原型链做判断

obj.__proto__ === Array.prototype;

• 通过 ES6 的 Array.isArray()做判断

Array.isArrray(obj);

• 通过 instanceof 做判断

obj instanceof Array

• 通过 Array.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(obj)

use strict 是什么意思 ? 应用它区别是什么？

use strict 是一种 ECMAscript5 增加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目标如下：

• 打消 Javascript 语法的不合理、不谨严之处，缩小怪异行为;
• 打消代码运行的不平安之处，保障代码运行的平安；
• 进步编译器效率，减少运行速度；
• 为将来新版本的 Javascript 做好铺垫。

区别：

• 禁止应用 with 语句。
• 禁止 this 关键字指向全局对象。
• 对象不能有重名的属性。

async/await 比照 Promise 的劣势

• 代码读起来更加同步，Promise 尽管解脱了回调天堂，然而 then 的链式调⽤也会带来额定的浏览累赘
• Promise 传递两头值⾮常麻烦，⽽ async/await ⼏乎是同步的写法，⾮常优雅
• 错误处理敌对，async/await 能够⽤成熟的 try/catch，Promise 的谬误捕捉⾮常冗余
• 调试敌对，Promise 的调试很差，因为没有代码块，你不能在⼀个返回表达式的箭头函数中设置断点，如果你在⼀个.then 代码块中使⽤调试器的步进 (step-over) 性能，调试器并不会进⼊后续的.then 代码块，因为调试器只能跟踪同步代码的每⼀步。

对盒模型的了解

CSS3 中的盒模型有以下两种：规范盒子模型、IE 盒子模型 盒模型都是由四个局部组成的，别离是 margin、border、padding 和 content。

规范盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范畴不同：

• 规范盒模型的 width 和 height 属性的范畴只蕴含了 content，
• IE 盒模型的 width 和 height 属性的范畴蕴含了 border、padding 和 content。

能够通过批改元素的 box-sizing 属性来扭转元素的盒模型：

• box-sizeing: content-box示意规范盒模型（默认值）
• box-sizeing: border-box示意 IE 盒模型（怪异盒模型）

常见的图片格式及应用场景

（1）BMP，是无损的、既反对索引色也反对间接色的点阵图。这种图片格式简直没有对数据进行压缩，所以 BMP 格局的图片通常是较大的文件。

（2）GIF是无损的、采纳索引色的点阵图。采纳 LZW 压缩算法进行编码。文件小，是 GIF 格局的长处，同时，GIF 格局还具备反对动画以及通明的长处。然而 GIF 格局仅反对 8bit 的索引色，所以 GIF 格局实用于对色调要求不高同时须要文件体积较小的场景。

（3）JPEG是有损的、采纳间接色的点阵图。JPEG 的图片的长处是采纳了间接色，得益于更丰盛的色调，JPEG 非常适合用来存储照片，与 GIF 相比，JPEG 不适宜用来存储企业 Logo、线框类的图。因为有损压缩会导致图片含糊，而间接色的选用，又会导致图片文件较 GIF 更大。

（4）PNG-8是无损的、应用索引色的点阵图。PNG 是一种比拟新的图片格式，PNG- 8 是十分好的 GIF 格局替代者，在可能的状况下，应该尽可能的应用 PNG- 8 而不是 GIF，因为在雷同的图片成果下，PNG- 8 具备更小的文件体积。除此之外，PNG- 8 还反对透明度的调节，而 GIF 并不反对。除非须要动画的反对，否则没有理由应用 GIF 而不是 PNG-8。

（5）PNG-24是无损的、应用间接色的点阵图。PNG-24 的长处在于它压缩了图片的数据，使得同样成果的图片，PNG-24 格局的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG- 8 大得多。

（6）SVG是无损的矢量图。SVG 是矢量图意味着 SVG 图片由直线和曲线以及绘制它们的办法组成。当放大 SVG 图片时，看到的还是线和曲线，而不会呈现像素点。SVG 图片在放大时，不会失真，所以它适宜用来绘制 Logo、Icon 等。

（7）WebP是谷歌开发的一种新图片格式，WebP 是同时反对有损和无损压缩的、应用间接色的点阵图。从名字就可以看进去它是为 Web 而生的，什么叫为 Web 而生呢？就是说雷同品质的图片，WebP 具备更小的文件体积。当初网站上充斥了大量的图片，如果可能升高每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而升高拜访提早，晋升拜访体验。目前只有 Chrome 浏览器和 Opera 浏览器反对 WebP 格局，兼容性不太好。

• 在无损压缩的状况下，雷同品质的 WebP 图片，文件大小要比 PNG 小 26%；
• 在有损压缩的状况下，具备雷同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；
• WebP 图片格式反对图片透明度，一个无损压缩的 WebP 图片，如果要反对透明度只须要 22% 的分外文件大小。

object.assign 和扩大运算法是深拷贝还是浅拷贝，两者区别

扩大运算符：

let outObj = {inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

Object.assign():

let outObj = {inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj)
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

能够看到，两者都是浅拷贝。

• Object.assign()办法接管的第一个参数作为指标对象，前面的所有参数作为源对象。而后把所有的源对象合并到指标对象中。它会批改了一个对象，因而会触发 ES6 setter。
• 扩大操作符（…）应用它时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中。它不复制继承的属性或类的属性，然而它会复制 ES6 的 symbols 属性。

JavaScript 中如何进行隐式类型转换？

首先要介绍 ToPrimitive 办法，这是 JavaScript 中每个值隐含的自带的办法，用来将值（无论是根本类型值还是对象）转换为根本类型值。如果值为根本类型，则间接返回值自身；如果值为对象，其看起来大略是这样：

/*** @obj 须要转换的对象 * @type 冀望的后果类型 */
ToPrimitive(obj,type)

type的值为 number 或者string。

（1）当 type 为number时规定如下：

• 调用 obj 的valueOf办法，如果为原始值，则返回，否则下一步；
• 调用 obj 的toString办法，后续同上；
• 抛出TypeError 异样。

（2）当 type 为string时规定如下：

• 调用 obj 的toString办法，如果为原始值，则返回，否则下一步；
• 调用 obj 的valueOf办法，后续同上；
• 抛出TypeError 异样。

能够看出两者的次要区别在于调用 toString 和valueOf的先后顺序。默认状况下：

• 如果对象为 Date 对象，则 type 默认为string；
• 其余状况下，type默认为number。

总结下面的规定，对于 Date 以外的对象，转换为根本类型的大略规定能够概括为一个函数：

var objToNumber = value => Number(value.valueOf().toString())
objToNumber([]) === 0
objToNumber({}) === NaN

而 JavaScript 中的隐式类型转换次要产生在 +、-、*、/ 以及 ==、>、< 这些运算符之间。而这些运算符只能操作根本类型值，所以在进行这些运算前的第一步就是将两边的值用 ToPrimitive 转换成根本类型，再进行操作。

以下是根本类型的值在不同操作符的状况下隐式转换的规定（对于对象，其会被 ToPrimitive 转换成根本类型，所以最终还是要利用根本类型转换规定）：

1. +操作符 + 操作符的两边有至多一个 string 类型变量时，两边的变量都会被隐式转换为字符串；其余状况下两边的变量都会被转换为数字。

1 + '23' // '123'
 1 + false // 1 
 1 + Symbol() // Uncaught TypeError: Cannot convert a Symbol value to a number
 '1' + false // '1false'
 false + true // 1

2. -、*、\操作符

NaN也是一个数字

1 * '23' // 23
 1 * false // 0
 1 / 'aa' // NaN

3. 对于 == 操作符

操作符两边的值都尽量转成number：

3 == true // false, 3 转为 number 为 3，true 转为 number 为 1
'0' == false //true, '0' 转为 number 为 0，false 转为 number 为 0
'0' == 0 // '0' 转为 number 为 0

4. 对于 < 和>比拟符

如果两边都是字符串，则比拟字母表程序：

'ca' < 'bd' // false
'a' < 'b' // true

其余状况下，转换为数字再比拟：

'12' < 13 // true
false > -1 // true

以上说的是根本类型的隐式转换，而对象会被 ToPrimitive 转换为根本类型再进行转换：

var a = {}
a > 2 // false

其比照过程如下：

a.valueOf() // {}, 下面提到过，ToPrimitive 默认 type 为 number，所以先 valueOf，后果还是个对象，下一步
a.toString() // "[object Object]"，当初是一个字符串了
Number(a.toString()) // NaN，依据下面 < 和 > 操作符的规定，要转换成数字
NaN > 2 //false，得出比拟后果

又比方：

var a = {name:'Jack'}
var b = {age: 18}
a + b // "[object Object][object Object]"

运算过程如下：

a.valueOf() // {}，下面提到过，ToPrimitive 默认 type 为 number，所以先 valueOf，后果还是个对象，下一步
a.toString() // "[object Object]"
b.valueOf() // 同理
b.toString() // "[object Object]"
a + b // "[object Object][object Object]"

const 对象的属性能够批改吗

const 保障的并不是变量的值不能改变，而是变量指向的那个内存地址不能改变。对于根本类型的数据（数值、字符串、布尔值），其值就保留在变量指向的那个内存地址，因而等同于常量。

但对于援用类型的数据（次要是对象和数组）来说，变量指向数据的内存地址，保留的只是一个指针，const 只能保障这个指针是固定不变的，至于它指向的数据结构是不是可变的，就齐全不能管制了。

li 与 li 之间有看不见的空白距离是什么起因引起的？如何解决？

浏览器会把 inline 内联元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。为了好看，通常是一个 <li> 放在一行，这导致 <li> 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

（1）为 <li> 设置 float:left。有余：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有 <li> 写在同一行。有余：代码不美观。

（3）将 <ul> 内的字符尺寸间接设为 0，即 font-size:0。有余：<ul>中的其余字符尺寸也被设为 0，须要额定从新设定其余字符尺寸，且在 Safari 浏览器仍然会呈现空白距离。

（4）打消 <ul> 的字符距离 letter-spacing:-8px，有余：这也设置了 <li> 内的字符距离，因而须要将 <li> 内的字符距离设为默认 letter-spacing:normal。

let、const、var 的区别

（1）块级作用域： 块作用域由 {}包含，let 和 const 具备块级作用域，var 不存在块级作用域。块级作用域解决了 ES5 中的两个问题：

• 内层变量可能笼罩外层变量
• 用来计数的循环变量泄露为全局变量

（2）变量晋升： var 存在变量晋升，let 和 const 不存在变量晋升，即在变量只能在申明之后应用，否在会报错。

（3）给全局增加属性： 浏览器的全局对象是 window，Node 的全局对象是 global。var 申明的变量为全局变量，并且会将该变量增加为全局对象的属性，然而 let 和 const 不会。

（4）反复申明： var 申明变量时，能够反复申明变量，后申明的同名变量会笼罩之前申明的遍历。const 和 let 不容许反复申明变量。

（5）暂时性死区： 在应用 let、const 命令申明变量之前，该变量都是不可用的。这在语法上，称为 暂时性死区。应用 var 申明的变量不存在暂时性死区。

（6）初始值设置： 在变量申明时，var 和 let 能够不必设置初始值。而 const 申明变量必须设置初始值。

（7）指针指向： let 和 const 都是 ES6 新增的用于创立变量的语法。let 创立的变量是能够更改指针指向（能够从新赋值）。但 const 申明的变量是不容许扭转指针的指向。