webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 目录结构调整

Browse Source
This commit is contained in:
qianguyihao
2020-04-19 18:24:43 +08:00
parent 8e979bff7d
commit 6fbb5659e4
106 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
13-前端面试/01-面试必看/00-准备.md Normal file
View File

@@ -0,0 +1,404 @@
## 前言
### 面试分为三部分
- 技术面试：问技术问题。
- 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
- hr 面试：侧重于性格、沟通、潜力等。
每轮面试在一小时左右。
### 每轮面试的知识点
一面：
> 主要考察基础知识。
- 页面布局
- CSS盒模型、DOM事件
- HTTP 协议、原型链
- 面向对象、通信
- 前端安全、算法
二面：
- 渲染机制
- JS 运行机制
- 页面性能
- 错误监控
三面：
> 不再关注技术层面。
- 业务能力
- 团队协作能力
- 带人能力
终面：
- 职业竞争力
- 职业规划
面试成功需要：技术过关、面试技巧等。
### 校招和社招各自看中的层面
校招：
- 知识：40%
- 能力：59%
- 经验：1%
社招：
- 知识：30%。比如协议、业务的认知程度。
- 能力：50%。比如架构、业务的抽象能力、项目的把控能力。
- 经验：20%。项目的体现。
以上仅供参考。
### 面试准备
面试准备包括以下四个部分：
- 职位描述（JD）的分析
- 业务分析
- 技术栈准备
- 自我介绍
每个公司又有一套成熟的技术栈。比如在构建工具上，百度用 fis3、美团用 Gulp。
你要面哪个公司，要先看看对方要求的技术栈。
上面四个部分，我们接下来详细介绍。
## 职位描述（JD）的分析
### 介绍
概念：
- 职位描述：注重的是工作职责。
- 任职要求：要求的是工作能力。通常描述得很细致。
PS：前端的知识庞大，不可能所有的内容都准备好，但是要向“任职要求”靠拢。
分析职位描述（JD）的目的是：
- 快速识别出这个岗位是否是自己喜欢的、想要的。
- 目前的技能是否能胜任岗位的要求。短期内的准备能否胜任。
### 举例1：京东 web 前端的职位描述
如下：
![](http://img.smyhvae.com/20180304_2132.png)
**职位描述：**
（1）面试时，会同时考虑到 `PC 端和移动端`两个部分。
（2）`App H5开发`指的是两层意思：
- Hybrid 技术栈。
- 纯 H5 开发。和 native 开发没有关系，比如活动、专题。
（3）`调试数据接口`：要学习一下怎么模拟数据。
（4）`前端组件库的建立`：要求较高但非常重要。体现在：
- 基本功要扎实，原生 js、css的理解要到位。
- 之前有没有前端组件库相关的项目经验
- 是否通读过其他的 UI 组件库。
（5）`优化与重构`：难度比第四条更大。
PS：前三条是基本知识，第四条、第五条属于进阶。
**任职要求：**
（1）`3年以上工作经验`：不要太较真工作年限。`精通 H5 特性`：说明公司很看重移动端。了解H5`最新规范`：贵公司希望我对新技术是有追求的，比如`ES6`等。
（2）要求我们对`面向对象`部分有足够的了解。组件化的编程也离不开面向对象。
（3）体现了几点：
- `熟悉 Web 标准`：熟悉最新的标准即可。
- `表现与数据分离`：MVC框架。
- `语义化`：这个词千万不要忽视。不是什么都用 div。
- `实际经验`：利用框架开发的过程中，遇到过哪些问题？没有实际经验的话，也要提前准备几个问题。
（4）以下几点：
- `前端架构分析与设计...`：说明此岗位并不面对初级岗位。因为工作一至两年的人，大部分都是**做业务开发**，缺少**系统的架构能力**。
我们要准备一个项目的架构（比如公司现有的项目）重新梳理，包含：目录结构的设计、复用性设计、模块化设计、自动化测试、上线流是什么。
- `易读、易维护的代码`：面试过程中一定会让你写代码，来体现。要求；每个函数的功能要单一、能抽象尽量抽象。符合这两个原则，基本就满足了“易读、易维护”。
- `高质量、高效率的代码`，短时间内不好准备。
（5）`用户可用性、用户体验、用户研究`：考察的不是技术，而是候选人对于产品体验的理解。不仅仅只是完成功能而已。
（6）`强烈兴趣`等，是公司企业文化的一种要求。多去GitHub上看看别人的项目里用的什么新技术、多看博客。短时间内无法准备。
（7）了解`Sass`和`Less`：这是基本技能。
（8）**熟悉**`web构建工具`：新手推荐学习 Glup，而不是 grunt。当然，你要知道 **Glup 和 grunt 的区别**。
PS：了解、熟悉、精通，是有区别的。
（9）暂时可以忽略。如果 职位描述里没有要求`Node.js`，而你只会一点点 `Node.js`，那不建议你面试的时候把`Node.js`体现出来。否则是给自己挖坑。
### 举例2：艺龙的 web 前端的职位描述
如下：
![](http://img.smyhvae.com/20180304_2226.png)
此方位
**职位描述：**
（1）`系统化设计`：说的比较笼统。其实指的就是模块化设计、前后端分离（**数据渲染**交给前端）。
（2）几点：
- 前半句：并没有说 H5 是放在移动端做，可能同时包含 PC 和移动端。
- 后半句：可以看出公司对 H5 动画的要求很高。动画有三种方式：用DOM写、SVG 的path做动画、canvas。canvas 又分 2D 和 3D。我们要看岗位描述里怎么要求的。既然提到CSS3，那么CSS3里面的animation、tansition也要了解。
（3）微信项目，要准备：
- 小程序：比如看贵公司有小程序吗？我们自己要准备简单的开发和文档、组件化的内容。
- 微信支付。
- 对微信开发中的哪些坑，要了解
（4）和京东的第四条很像，既要会框架，也要会组件化设计。但京东的侧重从零开始，而艺龙侧重于：有的就维护，没有的就开发。
**岗位要求：**
（1）`各种`web前端技术：用词不严谨。
（2）几点：
- `Web`标准：JS的最新标准是ES6。
- `可用性、可访问性`：侧重于网站的性能。 前端要做性能监控、错误监控。JS异常分为两种：**运行异常**、**资源加载错误**。一般人只能说出第一种异常。
（3）`工程化`：**工程化**已经是前端的必备技能。`webpack`是必须的工具，`grunt`已经过时了，如果公司提到，还是要了解。`Gulp`用的很多。
（4）写得比较虚，面试时基本很难考察。面试时，如果写代码，要注意代码风格，该用 class、id、标签时，要注意区分。
（5）要准备一下 Node.js。`至少熟悉一门`：可能要求全栈开发。
（6）`逻辑性强`：能说出123。
## 业务分析
> 业务分析
CSS3 动画是重点准备的内容。
jQuery 要准备事件委托、选择器等。
ES6语法：import、export等。
比如<http://jr.jx.com/>这个网站：
![](http://img.smyhvae.com/20180304_2302.png)
通过简单分析源码，我们初步得知网站的以下几点：
- jQuery
- vue 框架
- ES6
- webpack 打包工具
## 技术栈准备
![](http://img.smyhvae.com/20180310_1040.png)
上图中，左侧是前端技术核心，右侧是前端工程化。
左侧：
- jQuery：要注意看源码。看源码时，要看这几个：核心架构、事件委托是什么、插件机制、兼容性。
- 三大框架：都是mvvm框架，准备一至两个即可，或者精心准备一个。面试时会问得很细。比如阿里会经常问Vue的源码。建议找网上的源码分析的文章。
- Node.js：如果没有相关项目经历，就尽量不要提。
右侧：
- npm：npm的常见命令、npm scripts 怎么用的。
- webpack：有个中文网站，讲的内容比较全。
## 自我介绍
面试问的问题，很大层次上，取决你的简历和自我介绍。
### 简历
简历中最重要的四个信息：
- 基本信息：姓名、年龄、手机、邮箱、籍贯。
- 学历：从大到小写。硕士 -> 本科。
- 工作经历：时间、公司、岗位、职责、技术栈、**业绩**。业绩是大多数人所忽略的。
- 开源项目、Github、说明。
自我评价可以不写。
项目的业绩上，要包括：**技术收益**和**业绩收益**。
### 自我陈述
1、**把握面试的沟通方向。**
如果陈述中谈到项目，面试官可能会问：
- 负责了什么项目，项目是做什么的
- 和前端的结合点是？你的角色是？项目中承担了什么责任？
- 你在项目中的成绩？
如果你说自己是项目`负责人`，会被问到：
- 该项目怎么分配？有几个人参与？
- 作为负责人，你的角色是什么？是项目管理还是技术管理？
- 遇到技术难点，如何解决？
### 提问题
如果在深入问题时，碰到不会的，不要说“我不知道”。建议回答：
- **我要回去思考一下**。
- 这方面我没有经验，能不能**指点一下**？
- 有什么建议或者参考资料吗？我想把这个东西弄懂。
2、阔达、自信的适度发挥。

502
13-前端面试/01-面试必看/01-页面布局.md Normal file
View File

@@ -0,0 +1,502 @@
## 前端面试（前言）
### 面试基础
- 页面布局
- CSS盒模型：是CSS的基石。
- DOM事件
- HTTP协议
- 面向对象
- 原型链：能说出原型链的始末
### 面试进阶
- 通信：普通的通信、跨域通信
- 安全：CSRF、XSS。
- 算法
### 回答问题时要注意的
（1）题干的要求真的是字面要求的这么简单吗？
（2）答案怎么写，技巧在哪里
（3）如果想证明我的实力，应该有几种答案？
本文来讲一下页面布局。
## 题目：页面布局
问题：假设容器的高度默认100px，请写出**三栏布局**，其中左栏、右栏的宽度各为300px，中间的宽度自适应。
![](http://img.smyhvae.com/20180305_1520.png)
分析：
初学者想到的答案有两种：
- 方法1：浮动
- 方法2：绝对定位。
但要求你能至少写出三四种方法，才算及格。剩下的方法如下：
- 方法3：flexbox。移动开发里经常用到。
- 方法4：表格布局 table。虽然已经淘汰了，但也应该了解。
- 方法5：网格布局 grid。
下面分别讲解。
### 方法1 和方法2
**方法1、浮动：**
左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。
**方法2、绝对定位：**
左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和right 都为300px，即可。中间的宽度会自适应。
使用`article`标签作为容器，包裹左、中、右三个部分。
方法1 和方法2 的代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0px;
margin: 0px;
}
.layout {
margin-bottom: 150px;
}
.layout article div { /*注意，这里是设置每个小块儿的高度为100px，而不是设置大容器的高度。大容器的高度要符合响应式*/
height: 100px;
}
/* 方法一 start */
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
.layout.float .center {
background: green;
}
/* 方法一 end */
/* 方法二 start */
.layout.absolute .left-center-right {
position: relative;
}
.layout.absolute .left {
position: absolute;
left: 0;
width: 300px;
background: red;
}
/* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */
.layout.absolute .center {
position: absolute;
left: 300px;
right: 300px;
background: green;
}
.layout.absolute .right {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
/* 方法二 end */
</style>
</head>
<body>
<!-- 方法一：浮动 start -->
<!-- 输入 section.layout.float，即可生成 -->
<section class="layout float">
<!-- 用 article 标签包裹左、中、右三个部分 -->
<article class="left-right-center">
<!-- 输入 div.left+div.right+div.center，即可生成 -->
<div class="left">
我是 left
</div>
<div class="right">
我是 right
</div>
<div class="center">
浮动解决方案
我是 center
</div>
</article>
</section>
<!-- 方法一：浮动 end -->
<section class="layout absolute">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="right">
我是 right
</div>
<div class="center">
<h1>绝对定位解决方案</h1>
我是 center
</div>
</article>
</section>
</body>
</html>
```
注意上方代码中， className 定义和使用，非常规范。
效果如下：
![](http://img.smyhvae.com/20180305_1640.gif)
### 方法3、flexbox布局
将左中右所在的容器设置为`display: flex`，设置两侧的宽度后，然后让中间的`flex = 1`，即可。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout article div {
height: 100px;
}
.left-center-right {
display: flex;
}
.layout.flex .left {
width: 300px;
background: red;
}
.layout.flex .center {
flex: 1;
background: green;
}
.layout.flex .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout flex">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>flex布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180305_1700.gif)
### 方法4、表格布局 table
设置整个容器的宽度为100%，设置三个部分均为表格，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout.table div {
height: 100px;
}
/* 重要：设置容器为表格布局，宽度为100% */
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right div {
display: table-cell; /* 重要：设置三个模块为表格里的单元*/
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: green;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout table">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>表格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
![](http://img.smyhvae.com/20180305_1855.gif)
### 方法5、网格布局 grid
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
/* 重要：设置容器为网格布局，宽度为100% */
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px; /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: green;
}
.layout.grid .right {
background: blue;
}
</style>
</head>
<body>
<section class="layout grid">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>网格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
```
效果：
![](http://img.smyhvae.com/20180305_1920.gif)
### 延伸：五种方法的对比
- 五种方法的优缺点
- 考虑中间模块的高度问题
- 兼容性问题：实际开发中，哪个最实用？
方法1：浮动：
- 优点：兼容性好。
- 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
方法:2：绝对定位
- 优点：快捷。
- 缺点：导致子元素也脱离了标准文档流，可实用性差。
方法3：flex 布局（CSS3中出现的）
- 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。
方法4：表格布局
- 优点：表格布局在很多场景中很实用，兼容性非常好。因为IE8不支持 flex，此时可以尝试表格布局
- 缺点：因为三个部分都当成了**单元格**来对待，此时，如果中间的部分变高了，其会部分也会被迫调整高度。但是，在很多场景下，我们并不需要两侧的高度增高。
什么时候用 flex 布局 or 表格布局，看具体的场景。二者没有绝对的优势，也没有绝对的不足。
方法5：网格布局
- CSS3中引入的布局，很好用。代码量简化了很多。
PS：面试提到网格布局，说明我们对新技术是有追求的。
### 延伸：如果题目中去掉高度已知
问题：题目中，如果去掉高度已知，我们往中间的模块里塞很多内容，让中间的模块撑开。会发生什么变化？哪个布局就不能用了？
分析：其实可以这样理解，我们回去看上面的动画效果，当中间的模块变得很挤时，会发生什么效果？就是我们想要的答案。
答案是：**flex 布局和表格布局可以通用**，其他三个布局都不能用了。
### 页面布局的变通
![](http://img.smyhvae.com/20180305_1931.png)
`上下高度固定，中间自适应`，这个在移动端的页面中很常见。
### 总结
涉及到的知识点：
（1）语义化掌握到位：每个区域用`section`、`article`代表容器、`div`代表块儿。如果通篇都用 div，那就是语义化没掌握好。
（2）页面布局理解深刻。
（3）CSS基础知识扎实。
（4）思维灵活且积极上进。题目中可以通过`网格布局`来体现。
（5）代码书写规范。注意命名。上面的代码中，没有一行代码是多的。

438
13-前端面试/01-面试必看/02-CSS盒模型及BFC.md Normal file
View File

@@ -0,0 +1,438 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8512617.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 题目：谈一谈你对CSS盒模型的认识
专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：
（1）基本概念：content、padding、margin。
（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
（4）JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
（5）实例题：根据盒模型解释**边距重叠**。
前四个方面是逐渐递增，第五个方面，却鲜有人知。
（6）BFC（边距重叠解决方案）或IFC。
如果能回答第五条，就会引出第六条。BFC是面试频率较高的。
**总结**：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。
接下来，我们把上面的六条，依次讲解。
## 标准盒模型和IE盒子模型
标准盒子模型：
![](http://img.smyhvae.com/2015-10-03-css-27.jpg)
IE盒子模型：
![](http://img.smyhvae.com/2015-10-03-css-30.jpg)
上图显示：
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
CSS盒模型和IE盒模型的区别：
- 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
## CSS如何设置这两种模型
代码如下：
```javascript
/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
```
备注：盒子默认为标准盒模型。
## JS如何设置、获取盒模型对应的宽和高
### 方式一：通过DOM节点的 style 样式获取
```javascript
element.style.width/height;
```
缺点：通过这种方式，只能获取**行内样式**，不能获取`内嵌`的样式和`外链`的样式。
这种方式有局限性，但应该了解。
### 方式二（通用型）
```javascript
window.getComputedStyle(element).width/height;
```
方式二能兼容 Chrome、火狐。是通用型方式。
### 方式三（IE独有的）
```javascript
element.currentStyle.width/height;
```
和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。
### 方式四
```javascript
element.getBoundingClientRect().width/height;
```
此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
此 api 可以拿到四个属性：left、top、width、height。
**总结：**
上面的四种方式，要求能说出来区别，以及哪个的通用型更强。
## margin塌陷/margin重叠
**标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
我们来看几个例子。
### 兄弟元素之间
如下图所示：
![](http://img.smyhvae.com/20170805_0904.png)
### 子元素和父元素之间
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
background: green;
}
/* 给儿子设置margin-top为10像素 */
.son {
height: 100px;
margin-top: 10px;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
```
上面的代码中，儿子的height是 100px，magin-top 是10px。注意，此时父亲的 height 是100，而不是110。因为儿子和父亲在竖直方向上，共一个margin。
儿子这个盒子：
![](http://img.smyhvae.com/20180305_2216.png)
父亲这个盒子：
![](http://img.smyhvae.com/20180305_2217.png)
上方代码中，如果我们给父亲设置一个属性：`overflow: hidden`，就可以避免这个问题，此时父亲的高度是110px，这个用到的就是BFC（下一段讲解）。
### 善于使用父亲的padding，而不是儿子的margin
> 其实，这一小段讲的内容与上一小段相同，都是讲父子之间的margin重叠。
我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
```
<div>
<p></p>
</div>
```
上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
![](http://img.smyhvae.com/20170806_1537.png)
此时我们给父亲div加一个border属性，就正常了：
![](http://img.smyhvae.com/20170806_1544.png)
如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
## BFC（边距重叠解决方案）
### BFC的概念
BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。
另外还有个概念叫IFC。不过，BFC问得更多。
### BFC 的原理/BFC的布局规则【非常重要】
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
- （1）BFC **内部的**子元素，在垂直方向，**边距会发生重叠**。
- （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
- （3）**BFC区域不与旁边的`float box`区域重叠**。（可以用来清除浮动带来的影响）。（稍后看`举例2`）
- （4）计算BFC的高度时，浮动的子元素也参与计算。（稍后看`举例3`）
### 如何生成BFC
有以下几种方法：
- 方法1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
- 方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
- 方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是`absolute`或`fixed`，也就生成了一个BFC。
- 方法4：display为inline-block, table-cell, table-caption, flex, inline-flex
参考链接：
- [BFC原理详解](https://segmentfault.com/a/1190000006740129)
- [BFC详解](https://www.jianshu.com/p/bf927bc1bed4)
- [前端精选文摘：BFC 神奇背后的原理](https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html)
下面来看几个例子，看看如何生成BFC。
### BFC 的应用
**举例1：**解决 margin 重叠
当父元素和子元素发生 margin 重叠时，解决办法：**给子元素或父元素创建BFC**。
比如说，针对下面这样一个 div 结构：
```html
<div class="father">
<p class="son">
</p>
</div>
```
上面的div结构中，如果父元素和子元素发生margin重叠，我们可以给子元素创建一个 BFC，就解决了：
```html
<div class="father">
<p class="son" style="overflow: hidden">
</p>
</div>
```
因为**第二条：BFC区域是一个独立的区域，不会影响外面的元素**。
**举例2**：BFC区域不与float区域重叠：
针对下面这样一个div结构；
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father-layout {
background: pink;
}
.father-layout .left {
float: left;
width: 100px;
height: 100px;
background: green;
}
.father-layout .right {
height: 150px; /*右侧标准流里的元素，比左侧浮动的元素要高*/
background: red;
}
</style>
</head>
<body>
<section class="father-layout">
<div class="left">
左侧，生命壹号
</div>
<div class="right">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
</section>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180306_0825.png)
上图中，由于右侧标准流里的元素，比左侧浮动的元素要高，导致右侧有一部分会跑到左边的下面去。
**如果要解决这个问题，可以将右侧的元素创建BFC**，因为**第三条：BFC区域不与`float box`区域重叠**。解决办法如下：（将right区域添加overflow属性）
```html
<div class="right" style="overflow: hidden">
右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>
```
![](http://img.smyhvae.com/20180306_0827.png)
上图表明，解决之后，`father-layout`的背景色显现出来了，说明问题解决了。
**举例3：**清除浮动
现在有下面这样的结构：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
background: pink;
}
.son {
float: left;
background: green;
}
</style>
</head>
<body>
<section class="father">
<div class="son">
生命壹号
</div>
</section>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180306_0840.png)
上面的代码中，儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓**有高度的盒子，才能关住浮动**。
如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 `overflow=hidden`属性即可， 增加之后，效果如下：
![](http://img.smyhvae.com/20180306_0845.png)
为什么父元素成为BFC之后，就有了高度呢？这就回到了**第四条：计算BFC的高度时，浮动元素也参与计算**。意思是，**在计算BFC的高度时，子元素的float box也会参与计算**。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

311
13-前端面试/01-面试必看/03-DOM事件的总结.md Normal file
View File

@@ -0,0 +1,311 @@
## 前言
要学习事件的基础内容，请看先本人之前的基础文章：
- 《04-JavaScript基础/27-事件对象Event》
- 《04-JavaScript基础/28-事件捕获和事件冒泡》
- 《04-JavaScript基础/29-事件委托》
知识难度不大，只是大家需要系统地学习。
**知识点主要包括以下几个方面：**
- 基本概念：DOM事件的级别
面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ....”。
- DOM事件模型、DOM事件流
面试官如果问你“**DOM事件模型**”，你不一定知道怎么回事。其实说的就是**捕获和冒泡**。
**DOM事件流**，指的是事件传递的**三个阶段**。
- 描述DOM事件捕获的具体流程
讲的是事件的传递顺序。参数为false（默认）、参数为true，各自代表事件在什么阶段触发。
能回答出来的人，寥寥无几。也许有些人可以说出一大半，但是一字不落的人，极少。
- Event对象的常见应用（Event的常用api方法）
DOM事件的知识点，一方面包括事件的流程；另一方面就是：怎么去注册事件，也就是监听用户的交互行为。第三点：在响应时，Event对象是非常重要的。
- 自定义事件（非常重要）
一般人可以讲出事件和注册事件，但是如果让你讲**自定义事件**，能知道的人，就更少了。
- 事件委托
业务中经常用到。
下面分别讲解。
## DOM事件的级别
DOM事件的级别，准确来说，是**DOM标准**定义的级别。包括：
**DOM0的写法：**
```javascript
element.onclick = function () {
}
```
上面的代码是在 js 中的写法；如果要在html中写，写法是：在onclick属性中，加 js 语句。
**DOM2的写法：**
```javascript
element.addEventListener('click', function () {
}, false);
```
【重要】上面的第三参数中，**true**表示事件在**捕获阶段**触发，**false**表示事件在**冒泡阶段**触发（默认）。如果不写，则默认为false。
**DOM3的写法：**
```javascript
element.addEventListener('keyup', function () {
}, false);
```
DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。
PS：为何事件没有DOM1的写法呢？因为，DOM1标准制定的时候，没有涉及与事件相关的内容。
**总结**：关于“DOM事件的级别”，能回答出以上内容即可，不会出题目让你做。
## DOM事件模型、DOM事件流
### DOM事件模型
DOM事件模型讲的就是**捕获和冒泡**，一般人都能回答出来。
- 捕获：从上往下。
- 冒泡：从下（目标元素）往上。
### DOM事件流
DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。
类似于Android里面的事件传递。
完整的事件流，分三个阶段：
- （1）捕获：从 window 对象传到 目标元素。
- （2）目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
- （3）冒泡：从**目标元素**传到 Window 对象。
![](http://img.smyhvae.com/20180306_1058.png)
![](http://img.smyhvae.com/20180204_1218.jpg)
## 描述DOM事件捕获的具体流程
> 很少有人能说完整。
### 捕获的流程
![](http://img.smyhvae.com/20180306_1103.png)
**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。
PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。
代码如下：
```javascript
window.addEventListener("click", function () {
alert("捕获 window");
}, true);
document.addEventListener("click", function () {
alert("捕获 document");
}, true);
document.documentElement.addEventListener("click", function () {
alert("捕获 html");
}, true);
document.body.addEventListener("click", function () {
alert("捕获 body");
}, true);
fatherBox.addEventListener("click", function () {
alert("捕获 father");
}, true);
childBox.addEventListener("click", function () {
alert("捕获 child");
}, true);
```
**补充一个知识点：**
在 js中：
- 如果想获取 `body` 节点，方法是：`document.body`；
- 但是，如果想获取 `html`节点，方法是`document.documentElement`。
### 冒泡的流程
与捕获的流程相反
## Event对象的常见 api 方法
用户做的是什么操作（比如，是敲键盘了，还是点击鼠标了），这些事件基本都是通过Event对象拿到的。这些都比较简单，我们就不讲了。我们来看看下面这几个方法：
### 方法一
```javascript
event.preventDefault();
```
解释：阻止默认事件。
比如，已知`<a>`标签绑定了click事件，此时，如果给`<a>`设置了这个方法，就阻止了链接的默认跳转。
### 方法二：阻止冒泡
这个在业务中很常见。
有的时候，业务中不需要事件进行冒泡。比如说，业务这样要求：单击子元素做事件A，单击父元素做事件B，如果不阻止冒泡的话，出现的问题是：单击子元素时，子元素和父元素都会做事件A。这个时候，就要用到阻止冒泡了。
w3c的方法：（火狐、谷歌、IE11）
```javascript
event.stopPropagation();
```
IE10以下则是：
```javascript
event.cancelBubble = true;
```
兼容代码如下：
```javascript
box3.onclick = function (event) {
alert("child");
//阻止冒泡
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
```
上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。
### 方法三：设置事件优先级
```javascript
event.stopImmediatePropagation();
```
这个方法比较长，一般人没听说过。解释如下：
比如说，我用addEventListener给某按钮同时注册了事件A、事件B。此时，如果我单击按钮，就会依次执行事件A和事件B。现在要求：单击按钮时，只执行事件A，不执行事件B。该怎么做呢？这是时候，就可以用到`stopImmediatePropagation`方法了。做法是：在事件A的响应函数中加入这句话。
大家要记住 event 有这个方法。
### 属性4、属性5（事件委托中用到）
```javascript
event.currentTarget //当前所绑定的事件对象。在事件委托中，指的是【父元素】。
event.target //当前被点击的元素。在事件委托中，指的是【子元素】。
```
上面这两个属性，在事件委托中经常用到。
**总结**：上面这几项，非常重要，但是容易弄混淆。
## 自定义事件
自定义事件的代码如下：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
```
上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合用的。比如延时器设置按钮的动作：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
setTimeout(function () {
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
}, 1000);
```
## 事件委托
参考本人这篇文章的最后一段：
- 《04-JavaScript基础/29-事件委托》

216
13-前端面试/01-面试必看/04-HTTP协议.md Normal file
View File

@@ -0,0 +1,216 @@
一面中，如果有笔试，考HTTP协议的可能性较大。
## 前言
一面要讲的内容：
- HTTP协议的主要特点
- HTTP报文的组成部分
- HTTP方法
- get 和 post的区别
- HTTP状态码
- 什么是持久连接
- 什么是管线化
二面要讲的内容；
- 缓存
- CSRF攻击
## HTTP协议的主要特点
- 简单快速
- 灵活
- **无连接**
- **无状态**
通常我们要答出以上四个内容。如果实在记不住，一定要记得后面的两个：**无连接、无状态**。
我们分别来解释一下。
### 简单快速
**简单**：每个资源（比如图片、页面）都通过 url 来定位。这都是固定的，在http协议中，处理起来也比较简单，想访问什么资源，直接输入url即可。
### 灵活
http协议的头部有一个`数据类型`，通过http协议，就可以完成不同数据类型的传输。
### 无连接
连接一次，就会断开，不会继续保持连接。
### 无状态
客户端和服务器端是两种身份。第一次请求结束后，就断开了，第二次请求时，**服务器端并没有记住之前的状态**，也就是说，服务器端无法区分客户端是否为同一个人、同一个身份。
有的时候，我们访问网站时，网站能记住我们的账号，这个是通过其他的手段（比如 session）做到的，并不是http协议能做到的。
## HTTP报文的组成部分
![](http://img.smyhvae.com/20180306_1400.png)
在回答此问题时，我们要按照顺序回答：
- 先回答的是，http报文包括：**请求报文**和**响应报文**。
- 再回答的是，每个报文包含什么部分。
- 最后回答，每个部分的内容是什么
### 请求报文包括：
![](http://img.smyhvae.com/20180228_1505.jpg)
- 请求行：包括请求方法、请求的url、http协议及版本。
- 请求头：一大堆的键值对。
- **空行**指的是：当服务器在解析请求头的时候，如果遇到了空行，则表明，后面的内容是请求体。
- 请求体：数据部分。
### 响应报文包括：
![](http://img.smyhvae.com/20180228_1510.jpg)
- 状态行：http协议及版本、状态码及状态描述。
- 响应头
- 空行
- 响应体
## HTTP方法
包括：
- GET：获取资源
- POST：传输资源
- put：更新资源
- DELETE：删除资源
- HEAD：获得报文首部
HTTP方法有很多，但是上面这五个方法，要求在面试时全部说出来，不要漏掉。
get 和 post 比较常见。
put 和 delete 在实际应用中用的很少。况且，业务中，一般不删除服务器端的资源。
head 可能偶尔用的到。
## get 和 post的区别
![](http://img.smyhvae.com/20180306_1415.png)
区别有很多，如果记不住，面试时，至少要任意答出其中的三四条。
有一点要强调，**get是相对不隐私的，而post是相对隐私的**。
我们大概要记住以下几点：
1、浏览器在回退时，get**不会重新请求**，但是post会重新请求。【重要】
2、get请求会被浏览器**主动缓存**，而post不会。【重要】
3、get请求的参数，会报**保留**在浏览器的**历史记录**里，而post不会。做业务时要注意。为了防止CSRF攻击，很多公司把get统一改成了post。
4、get请求在url中传递的参数有大小限制，基本是2kb，不同的浏览器略有不同。而post没有注意。
5、get的参数是直接暴露在url上的，相对不安全。而post是放在请求体中的。
## http状态码
http状态码分类：
![](http://img.smyhvae.com/20180306_1430.png)
常见的http状态码：
![](http://img.smyhvae.com/20180306_1431.png)
部分解释：
- 206的应用：`range`指的是请求的范围，客户端只请求某个大文件里的一部分内容。比如说，如果播放视频地址或音频地址的前面一部分，可以用到206。
- 301：重定向（永久）。
- 302：重定向（临时）。
- 304：我这个服务器告诉客户端，你已经有缓存了，不需要从我这里取了。
![](http://img.smyhvae.com/20180306_1440.png)
400和401用的不多。403指的是请求被拒绝。404指的是资源不存在。
## 持久链接/http长连接
> 如果你能答出持久链接，这是面试官很想知道的一个点。
- **轮询**：http1.0中，客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。
- **长连接**：HTTP1.1中，通过使用Connection:keep-alive进行长连接，。客户端只请求一次，但是服务器会将继续保持连接，当再次请求时，避免了重新建立连接。
注意，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对**每个请求仍然要单独发 header**，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。
## 长连接中的管线化
> 如果能答出**管线化**，则属于加分项。
### 管线化的原理
长连接时，**默认**的请求这样的：
```
请求1 --> 响应1 -->请求2 --> 响应2 --> 请求3 --> 响应3
```
长连接中的管线化，请求是这样的：
```
请求1 --> 请求2 --> 请求3 --> 响应1 --> 响应2 --> 响应3
```
管线化就是，我把现在的请求打包，一次性发过去，你也给我一次响应回来。
### 管线化的注意事项
面试时，不会深究管线化。如果真要问你，就回答：“我没怎么研究过，准备回去看看~”

190
13-前端面试/01-面试必看/05-01.创建对象和原型链.md Normal file
View File

@@ -0,0 +1,190 @@
## 前言
### 面向对象的三大特性
- 封装
- 继承
- 多态
### 原型链的知识
原型链是面向对象的基础，是非常重要的部分。有以下几种知识：
- 创建对象有几种方法
- 原型、构造函数、实例、原型链
- `instanceof`的原理
- new 运算符
## 创建对象有几种方法
### 方式一：字面量
```javascript
var obj11 = {name: 'qianguyihao'};
var obj12 = new Object(name: 'qianguyihao'); //内置对象（内置的构造函数）
```
上面的两种写法，效果是一样的。因为，第一种写法，`obj11`会指向`Object`。
- 第一种写法是：字面量的方式。
- 第二种写法是：内置的构造函数
### 方式二：通过构造函数
```javascript
var M = function (name) {
this.name = name;
}
var obj3 = new M('smyhvae');
```
### 方法三：Object.create
```javascript
var p = {name:'smyhvae'};
var obj3 = Object.create(p); //此方法创建的对象，是用原型链连接的
```
第三种方法，很少有人能说出来。这种方式里，obj3是实例，p是obj3的原型（name是p原型里的属性），构造函数是`Objecet` 。
![](http://img.smyhvae.com/20180306_1633.png)
## 原型、构造函数、实例，以及原型链
![](http://img.smyhvae.com/20180306_1540.png)
PS：任何一个函数，如果在前面加了new，那就是构造函数。
### 原型、构造函数、实例三者之间的关系
![](http://img.smyhvae.com/20180306_2107.png)
- 1、构造函数通过 new 生成实例
- 2、构造函数也是函数，构造函数的`prototype`指向原型。（所有的函数有`prototype`属性，但实例没有 `prototype`属性）
- 3、原型对象中有 constructor，指向该原型的构造函数。
上面的三行，代码演示：
```
var Foo = function (name) {
this.name = name;
}
var foo = new Foo('smyhvae');
```
上面的代码中，`Foo.prototype.constructor === Foo`的结果是`true`：
![](http://img.smyhvae.com/20180306_2120.png)
- 4、实例的`__proto__`指向原型。也就是说，`foo.__proto__ === Foo.prototype`。
声明：所有的**引用类型**（数组、对象、函数）都有`__proto__`这个属性。
`Foo.__proto__ === Function.prototype`的结果为true，说明Foo这个普通的函数，是Function构造函数的一个实例。
### 原型链
**原型链的基本原理**：任何一个**实例**，通过原型链，找到它上面的**原型**，该原型对象中的方法和属性，可以被所有的原型实例共享。
Object是原型链的顶端。
原型可以起到继承的作用。原型里的方法都可以被不同的实例共享：
```
//给Foo的原型添加 say 函数
Foo.prototype.say = function () {
console.log('');
}
```
**原型链的关键**：在访问一个实例的时候，如果实例本身没找到此方法或属性，就往原型上找。如果还是找不到，继续往上一级的原型上找。
### `instanceof`的原理
![](http://img.smyhvae.com/20180306_2209.png)
`instanceof`的**作用**：用于判断**实例**属于哪个**构造函数**。
`instanceof`的**原理**：判断实例对象的`__proto__`属性，和构造函数的`prototype`属性，是否为同一个引用（是否指向同一个地址）。
**注意1**：虽然说，实例是由构造函数 new 出来的，但是实例的`__proto__`属性引用的是构造函数的`prototype`。也就是说，实例的`__proto__`属性与构造函数本身无关。
**注意2**：在原型链上，原型的上面可能还会有原型，以此类推往上走，继续找`__proto__`属性。这条链上如果能找到， instanceof 的返回结果也是 true。
比如说：
- `foo instance of Foo`的结果为true，因为`foo.__proto__ === Foo.prototype`为true。
- **`foo instance of Objecet`的结果也为true**，因为`Foo.prototype.__proto__ === Object.prototype`为true。
但我们不能轻易的说：`foo 一定是 由Object创建的实例`。这句话是错误的。我们来看下一个问题就明白了。
### 分析一个问题
**问题：**已知A继承了B，B继承了C。怎么判断 a 是由A**直接生成**的实例，还是B直接生成的实例呢？还是C直接生成的实例呢？
分析：这就要用到原型的`constructor`属性了。
- `foo.__proto__.constructor === Foo`的结果为true，但是 `foo.__proto__.constructor === Object`的结果为false。
所以，用 consturctor判断就比用 instanceof判断，更为严谨。
## new 运算符
当new Foo()时发生了什么：
（1）创建一个**新的空对象实例**。
（2）将此空对象的隐式原型指向其构造函数的显示原型。
（3）执行构造函数（传入相应的参数，如果没有参数就不用传），同时 this 指向这个新实例。
（4）如果返回值是一个新对象，那么直接返回该对象；如果无返回值或者返回一个非对象值，那么就将步骤（1）创建的对象返回。
参考《JS高程》6.2.2
## 类继承和原型继承的区别
```javascript
```

177
13-前端面试/01-面试必看/05-02.面向对象：类的定义和继承的几种方式.md Normal file
View File

@@ -0,0 +1,177 @@
## 前言
类与实例：
- 类的声明
- 生成实例
类与继承：
- 如何实现继承：继承的本质就是原型链
- 继承的几种方式
## 类的定义、实例化
### 类的定义/类的声明
**方式一**：用构造函数模拟类（传统写法）
```javascript
function Animal1() {
this.name = 'smyhvae'; //通过this，表明这是一个构造函数
}
```
**方式二**：用 class 声明（ES6的写法）
```javascript
class Animal2 {
constructor() { //可以在构造函数里写属性
this.name = name;
}
}
```
控制台的效果：
![](http://img.smyhvae.com/20180307_0957.png)
### 实例化
类的实例化很简单，直接 new 出来即可。
```javascript
console.log(new Animal1(),new Animal2()); //实例化。如果括号里没有参数，则括号可以省略
```
![](http://img.smyhvae.com/20180307_1000.png)
## 继承的几种方式
继承的本质就是原型链。
**继承的方式有几种？每种形式的优缺点是**？这些问题必问的。其实就是考察你对原型链的掌握程度。
### 方式一：借助构造函数
```javascript
function Parent1() {
this.name = 'parent1 的属性';
}
function Child1() {
Parent1.call(this); //【重要】此处用 call 或 apply 都行：改变 this 的指向
this.type = 'child1 的属性';
}
console.log(new Child1);
```
【重要】上方代码中，最重要的那行代码：在子类的构造函数里写了`Parent1.call(this);`，意思是：**让Parent的构造函数在child的构造函数中执行**。发生的变化是：**改变this的指向**，parent的实例 --> 改为指向child的实例。导致 parent的实例的属性挂在到了child的实例上，这就实现了继承。
打印结果：
![](http://img.smyhvae.com/20180307_1015.png)
上方结果表明：child先有了 parent 实例的属性（继承得以实现），再有了child 实例的属性。
**分析**：
这种方式，虽然改变了 this 的指向，但是，**Child1 无法继承 Parent1 的原型**。也就是说，如果我给 Parent1 的原型增加一个方法：
```javascript
Parent1.prototype.say = function () {
};
```
上面这个方法是无法被 Child1 继承的。如下：
![](http://img.smyhvae.com/20180307_1030.png)
### 方法二：通过原型链实现继承
```javascript
/*
通过原型链实现继承
*/
function Parent() {
this.name = 'Parent 的属性';
}
function Child() {
this.type = 'Child 的属性';
}
Child.prototype = new Parent(); //【重要】
console.log(new Child());
```
打印结果：
![](http://img.smyhvae.com/20180307_1109.png)
【重要】上方代码中，最重要的那行：每个函数都有`prototype`属性，于是，构造函数也有这个属性，这个属性是一个对象。现在，**我们把`Parent`的实例赋值给了`Child`的`prototye`**，从而实现**继承**。此时，`Child`构造函数、`Parent`的实例、`Child`的实例构成一个三角关系。于是：
- `new Child.__proto__ === new Parent()`的结果为true
**分析：**
这种继承方式，**Child 可以继承 Parent 的原型**，但有个缺点：
缺点是：**如果修改 child1实例的name属性，child2实例中的name属性也会跟着改变**。
如下：
![](http://img.smyhvae.com/20180307_1123.png)
上面的代码中， child1修改了arr属性，却发现，child2的arr属性也跟着改变了。这显然不太好，在业务中，两个子模块应该隔离才对。如果改了一个对象，另一个对象却发生了改变，就不太好。
造成这种缺点的原因是：child1和child2共用原型。即：`chi1d1.__proto__ === child2__proto__`是严格相同。而 arr方法是在 Parent 的实例上（即 Child实例的原型）的。
## 方式三：组合的方式：构造函数 + 原型链
就是把上面的两种方式组合起来：
```javascript
/*
组合方式实现继承：构造函数、原型链
*/
function Parent3() {
this.name = 'Parent 的属性';
this.arr = [1, 2, 3];
}
function Child3() {
Parent3.call(this); //【重要1】执行 parent方法
this.type = 'Child 的属性';
}
Child3.prototype = new Parent3(); //【重要2】第二次执行parent方法
var child = new Child3();
```
这种方式，能解决之前两种方式的问题：既可以继承父类原型的内容，也不会造成原型里属性的修改。
这种方式的缺点是：让父亲Parent的构造方法执行了两次。
```javascript
```
ES6中的继承方式，一带而过即可，重点是要掌握ES5中的继承。

508
13-前端面试/01-面试必看/06-跨域通信类.md Normal file
View File

@@ -0,0 +1,508 @@
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8523576.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 前言
从本章起，对代码的要求没之前那么高了，但是，要求你对知识面的掌握要足够宽。
前端通信类的问题，主要包括以下内容：
- 1、什么是**同源策略**及限制
同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。
- 2、**前后端如何通信**
如果你不准备，估计也就只能说出ajax。这个可以考察出知识面。
- 3、如何创建**Ajax**
Ajax在前后端通信中经常用到。做业务时，可以借助第三方的库，比如vue框架里的库、jQuery也有封装好的方法。但如果让你用原生的js去实现，该怎么做？
这就是考察你的动手能力，以及框架原理的掌握。如果能写出来，可以体现出你的基本功。是加分项。
- 4、**跨域通信**的几种方式
这部分非常重要。无非就是问你：什么是跨域、跨域有什么限制、**跨域有几种方式**。
下面分别讲解。
## 同源策略的概念和具体限制
**同源策略**：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）
具体解释：
（1）`源`包括三个部分：协议、域名、端口（http协议的默认端口是80）。如果有任何一个部分不同，则`源`不同，那就是跨域了。
（2）`限制`：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：（要记住）
- Cookie、LocalStorage和IndexDB无法获取。
- 无法获取和操作DOM。
- 不能发送Ajax请求。我们要注意，Ajax只适合**同源**的通信。
## 前后端如何通信
主要有以下几种方式：
- Ajax：不支持跨域。
- WebSocket：不受同源策略的限制，支持跨域。
- CORS：不受同源策略的限制，支持跨域。一种新的通信协议标准。可以理解成是：**同时支持同源和跨域的Ajax**。
## 如何创建Ajax
> 关于Ajax请求，可以看本人的基础文章：[Ajax入门和发送http请求](https://github.com/smyhvae/Web/blob/master/08-Ajax/02-Ajax%E5%85%A5%E9%97%A8%E5%92%8C%E5%8F%91%E9%80%81http%E8%AF%B7%E6%B1%82.md)
在回答 Ajax 的问题时，要回答以下几个方面：
- 1、XMLHttpRequest 的工作原理
- 2、兼容性处理
XMLHttpRequest只有在高级浏览器中才支持。在回答问题时，这个兼容性问题不要忽略。
- 3、事件的触发条件
- 4、事件的触发顺序
XMLHttpRequest有很多触发事件，每个事件是怎么触发的。
### 发送 Ajax 请求的五个步骤（XMLHttpRequest的工作原理）
（1）创建XMLHttpRequest 对象。
（2）使用open方法设置请求的参数。open(method, url, 是否异步)。
（3）发送请求。
（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）获取返回的数据，更新UI。
### 发送 get 请求和 post 请求
get请求举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();
// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', '02-ajax.php');
// （3）发送请求
ajaxObj.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
```
post 请求举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
```
### onreadystatechange 事件
注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
### 事件的触发条件
![](http://img.smyhvae.com/20180307_1443.png)
### 事件的触发顺序
![](http://img.smyhvae.com/20180307_1445.png)
上图的参考链接：
- [你真的会使用XMLHttpRequest吗？](https://segmentfault.com/a/1190000004322487)
### 实际开发中用的 原生Ajax请求
```javascript
var util = {};
//获取 ajax 请求之后的json
util.json = function (options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function () {
},
error: function () {
},
};
util.extend(opt, options);
if (opt.url) {
//IE兼容性处理：浏览器特征检查。检查该浏览器是否存在XMLHttpRequest这个api，没有的话，就用IE的api
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase();
dataArr = [];
}
for (var key in data) {
dataArr.push(key + '=' + data[key]);
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataArr.join('&'));
}
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 304) { //304表示：用缓存即可。206表示获取媒体资源的前面一部分
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
res = JSON.parse(res); //将字符串转成json
opt.success.call(xhr, res);
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res);
}
}
};
}
```
Ajax 的推荐链接：<https://segmentfault.com/a/1190000006669043>
## 跨域通信的几种方式
方式如下：
- 1、JSONP
- 2、WebSocket
- 3、CORS
- 4、Hash
- 5、postMessage
上面这五种方式，在面试时，都要说出来。
### 1、JSONP
面试会问：JSONP的原理是什么？怎么实现的？
在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。
**JSONP的原理**：通过`<script>`标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过`<script>`标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP。
**JSONP的实现：**
比如说，客户端这样写：
```html
<script src="http://www.smyhvae.com/?data=name&callback=myjsonp"></script>
```
上面的src中，`data=name`是get请求的参数，`myjsonp`是和后台约定好的函数名。
服务器端这样写：
```bash
myjsonp({
data: {}
})
```
于是，本地要求创建一个myjsonp 的**全局函数**，才能将返回的数据执行出来。
**实际开发中，前端的JSONP是这样实现的：**
```html
<script>
var util = {};
//定义方法：动态创建 script 标签
/**
* [function 在页面中注入js脚本]
* @param {[type]} url [description]
* @param {[type]} charset [description]
* @return {[type]} [description]
*/
util.createScript = function (url, charset) {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
charset && script.setAttribute('charset', charset);
script.setAttribute('src', url);
script.async = true;
return script;
};
/**
* [function 处理jsonp]
* @param {[type]} url [description]
* @param {[type]} onsucess [description]
* @param {[type]} onerror [description]
* @param {[type]} charset [description]
* @return {[type]} [description]
*/
util.jsonp = function (url, onsuccess, onerror, charset) {
var callbackName = util.getName('tt_player'); //事先约定好的 函数名
window[callbackName] = function () { //根据回调名称注册一个全局的函数
if (onsuccess && util.isFunction(onsuccess)) {
onsuccess(arguments[0]);
}
};
var script = util.createScript(url + '&callback=' + callbackName, charset); //动态创建一个script标签
script.onload = script.onreadystatechange = function () { //监听加载成功的事件，获取数据
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
script.onload = script.onreadystatechange = null;
// 移除该script的 DOM 对象
if (script.parentNode) {
script.parentNode.removeChild(script);
}
// 删除函数或变量
window[callbackName] = null; //最后不要忘了删除
}
};
script.onerror = function () {
if (onerror && util.isFunction(onerror)) {
onerror();
}
};
document.getElementsByTagName('head')[0].appendChild(script); //往html中增加这个标签，目的是把请求发送出去
};
</script>
```
### 2、WebSocket
WebSocket的用法如下：
```javascript
//
var ws = new WebSocket('wss://echo.websocket.org'); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。
//把请求发出去
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
//对方发消息过来时，我接收
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
//关闭连接
ws.onclose = function (evt) {
console.log('Connection closed.');
};
```
Websocket的推荐链接：<http://www.ruanyifeng.com/blog/2017/05/websocket.html>
面试一般不会让你写这个代码，一般是考察你是否了解 WebSocket概念，知道有这么回事即可。
### 3、CORS
CORS 可以理解成是**既可以同步、也可以异步**的Ajax。
fetch 是一个比较新的API，用来实现CORS通信。用法如下：
```javascript
// url（必选），options（可选）
fetch('/some/url/', {
method: 'get',
}).then(function (response) { //类似于 ES6中的promise
}).catch(function (err) {
// 出错了，等价于 then 的第二个参数，但这样更好用更直观
});
```
- CORS的推荐链接：<http://www.ruanyifeng.com/blog/2016/04/cors.html>
推荐链接里有详细的配置。
另外，如果面试官问：“CORS为什么支持跨域的通信？”
答案：跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。
### 4、Hash
url的`#`后面的内容就叫Hash。**Hash的改变，页面不会刷新**。这就是用 Hash 做跨域通信的基本原理。
补充：url的`?`后面的内容叫Search。Search的改变，会导致页面刷新，因此不能做跨域通信。
**使用举例：**
**场景**：我的页面 A 通过iframe或frame嵌入了跨域的页面 B。
现在，我这个A页面想给B页面发消息，怎么操作呢？
（1）首先，在我的A页面中：
```javascript
//伪代码
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'jsonString'; //我们可以把JS 对象，通过 JSON.stringify()方法转成 json字符串，发给 B
```
（2）然后，在B页面中：
```javascript
// B中的伪代码
window.onhashchange = function () { //通过onhashchange方法监听，url中的 hash 是否发生变化
var data = window.location.hash;
};
```
### 5、postMessage()方法
> H5中新增的postMessage()方法，可以用来做跨域通信。既然是H5中新增的，那就一定要提到。
**场景**：窗口 A (`http:A.com`)向跨域的窗口 B (`http:B.com`)发送信息。步骤如下。
（1）在A窗口中操作如下：向B窗口发送数据：
```javascript
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象
```
（2）在B窗口中操作如下：
```javascript
// 在窗口B中监听 message 事件
Awindow.addEventListener('message', function (event) { //这里强调的是A窗口里的window对象
console.log(event.origin); //获取 ：url。这里指：http://A.com
console.log(event.source); //获取：A window对象
console.log(event.data); //获取传过来的数据
}, false);
```
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

203
13-前端面试/01-面试必看/07-安全问题：CSRF和XSS.md Normal file
View File

@@ -0,0 +1,203 @@
## 前言
面试中的安全问题，明确来说，就两个方面：
- CSRF：基本概念、攻击方式、防御措施
- XSS：基本概念、攻击方式、防御措施
这两个问题，一般不会问太难。
有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。
## CSRF
问的不难，一般问：
- CSRF的基本概念、缩写、全称
- 攻击原理
- 防御措施
如果把**攻击原理**和**防御措施**掌握好，基本没什么问题。
### 1、CSRF的基本概念、缩写、全称
CSRF（Cross-site request forgery）：**跨站请求伪造**。
PS：中文名一定要记住。英文全称，如果记不住也拉倒。
### 2、CSRF的攻击原理
![](http://img.smyhvae.com/20180307_1735.png)
用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。
从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：
（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
（2）在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。
我们在讲CSRF时，一定要把上面的两点说清楚。
温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。
举个例子，前段时间里，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。
### 3、CSRF如何防御
**方法一、Token 验证：**（用的最多）
（1）服务器发送给客户端一个token；
（2）客户端提交的表单中带着这个token。
（3）如果这个 token 不合法，那么服务器拒绝这个请求。
**方法二：隐藏令牌：**
把 token 隐藏在 http 的 head头中。
方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。
**方法三、Referer 验证：**
Referer 指的是页面请求来源。意思是，**只接受本站的请求，服务器才做响应**；如果不是，就拦截。
## XSS
### 1、XSS的基本概念
XSS（Cross Site Scripting）：**跨域脚本攻击**。
接下来，我们详细讲一下 XSS 的内容。
> 预备知识：HTTP、Cookie、Ajax。
### XSS的攻击原理
XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。
最后导致的结果可能是：
- 盗用Cookie
- 破坏页面的正常结构，插入广告等恶意内容
- D-doss攻击
### XSS的攻击方式
- 1、反射型
发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
- 2、存储型
存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。
### XSS的防范措施（encode + 过滤）
XSS的防范措施主要有三个：
**1、编码**：
对用户输入的数据进行`HTML Entity`编码。
如上图所示，把字符转换成 转义字符。
Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最终输出结果上是一样的。
比如说这段代码：
```
<script>alert(1)</script>
```
若不进行任何处理，则浏览器会执行alert的js操作，实现XSS注入。
进行编码处理之后，L在浏览器中的显示结果就是`<script>alert(1)</script>`，实现了将$var作为纯文本进行输出，且不引起JavaScript的执行。
参考链接：[4类防御XSS的有效方法](https://www.jianshu.com/p/599fcd03fd3b)
**2、过滤：**
- 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言之，过滤掉一些不安全的内容）
- 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。
**3、校正**
- 避免直接对`HTML Entity`进行解码。
- 使用`DOM Parse`转换，校正不配对的DOM标签。
备注：我们应该去了解一下`DOM Parse`这个概念，它的作用是把文本解析成DOM结构。
比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。
**还有一种简洁的答案：**
首先是encode，如果是富文本，就白名单。
## CSRF 和 XSS 的区别
面试官还可能喜欢问二者的区别。
区别一：
- CSRF：需要用户先登录网站A，获取 cookie。
- XSS：不需要登录。
区别二：（原理的区别）
- CSRF：是利用网站A本身的漏洞，去请求网站A的api。
- XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。
## 其他
### XSS
关于XSS，推荐几个网站：
- <http://html5sec.org/>
里面列出了很多XSS的例子，可以长见识。如果你专门研究XSS，可以看看。
- [FreeBuf网站上的专栏作者：Black-Hole](http://www.freebuf.com/author/black-hole)
比如，他的第一篇文章就讲到了[XSS的原理分析与解剖](http://www.freebuf.com/articles/web/40520.html)。有句话摘抄如下：弹窗只是测试xss的存在性和使用性。
比如，这个人还有篇文章写[自动化检测CSRF（第一章）](http://www.freebuf.com/articles/web/107207.html)。大公司做网站，一般会做嗅探服务（比如自动化工具做CSRF的检测、自动化的方式控制安全风险）。
另外，可能还有些工具，可以扫描代码本身有没有一些安全问题。
- [GitHub | Cure53](https://github.com/cure53)
这是GitHub上的一个德国组织。
上面的项目都跟安全相关，有些仓库是可以直接运行的。如果你不需要定制，就可以直接用别人的，没必要自己写XSS库、XSS的过滤之类的，避免麻烦。

104
13-前端面试/01-面试必看/08-算法问题.md Normal file
View File

@@ -0,0 +1,104 @@
## 前言
算法主要包括：
- 1、排序
排序一定要准备。
- 2、堆栈、队列、链表
队列和链表可以不准备，但是堆栈一定要准备。
一个小技巧：JS的数组本身就具备堆栈和队列的特性。比如：top、push、shift、unshift这四个api，本身就帮我们实现了堆栈和队列。
堆栈：先进后出。
- 3、递归
递归是一定不能偷懒的。算法比较难的时候，一般要用到递归。
- 4、波兰式和逆波兰式
**总结：**
比如阿里，如果基础题答的很好，但是算法不会，那可能通不过。
还有金融类的，必考算法。比如阿里云，里面的业务就是算法的，所以肯定考算法。
## 排序
上面的排序这么多，我们要记住下面这三个：
- 快速排序：<https://segmentfault.com/a/1190000009426421>
- 选择排序：<https://segmentfault.com/a/1190000009366805>
- 希尔排序：<https://segmentfault.com/a/1190000009461832>
如果你还要学一个，那就是**冒泡排序**。
题目中，会给你一个算法题， 排序只是其中一个步骤。而且，并不会指定你要求用哪种排序。
## 堆栈、队列、链表
参考链接：
- <https://juejin.im/entry/58759e79128fe1006b48cdfd>
上面这个链接是转载的。原创博主的系列文章是：
- [数组、队列、链表](http://huang303513.github.io/2016/12/08/Javascript%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95(%E4%B8%80).html)
- [排序](http://huang303513.github.io/2016/12/19/Javascript%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95(%E5%9B%9B).html)
## 递归
参考链接：
- [JavaScript中的递归](https://segmentfault.com/a/1190000009857470)
递归理解起来不难，但是用的时候很难，因为你没抓住他的本质。递归的终止条件是什么？参数是怎么传递的？一定要搞清楚。
很多人说：“我知道这道题是考递归，但是我就是不知道该怎么写”。这个面试官很无奈。
## 波兰式和逆波兰式
> 如果复习时间很紧张，这部分也不用准备了。也不是所有的公司都会问。
推荐链接：
- 理论：<http://www.cnblogs.com/chenying99/p/3675876.html>
- 源码：<https://github.com/Tairraos/rpn.js/blob/master/rpn.js>
## 总结
如果实在答不来，就说，这个算法我不是很会，只知道一些基本概念。
如果第一面就碰到算法题，这个公司不用去了。说明这个公司是招算法的，不是招前端的。

196
13-前端面试/01-面试必看/09-01.浏览器渲染机制.md Normal file
View File

@@ -0,0 +1,196 @@
## 前言
> 接下来的几篇文章，讲一下二面的内容。
**二面的内容：**
- 渲染机制
- JS 运行机制
- 页面性能
- 错误监控
本文接下来讲渲染机制。
**渲染机制**包括的内容：
- 什么是DOCTYPE及作用
- 浏览器渲染过程
面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
- Reflow：重排
面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
- Repaint：重绘
- Layout：布局
这里的Layout指的是浏览器的Layout。
## 什么是DOCTYPE及作用
### 定义
**DTD**（Document Type Definition）：文档类型定义。
是一系列的语法规则，用来定义XML或者(X)HTML文件类型。**浏览器会使用DTD来判断文本类型**，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我）
**DOCTYPE**：用来声明DTD规范。
一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（说白了，DOCTYPE就是用来声明DTD的）
### 常见的DOCTYPE声明有几种
> 面试官紧接着会问，常见的 DOCTYPE 有哪些，以及 HTML5 的 DOCTYPE 怎么写。
1、**HTML 4.01 Strict**：（严格的）
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
PS：该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。
2、**HTML 4.01 Transitional**：（传统的）
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。
3、HTML 5：
```html
<!DOCTYPE html>
```
**总结：**
面试时，不会让你写出 HTML 4.01的写法，因为大家都记不住。但是要记住 HTML 5 的写法，别看它简单，知道的人还真不多。
面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是`<!DOCTYPE html>`。
## 浏览器的渲染过程
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
![](http://img.smyhvae.com/20180310_1257.png)
这里先解释一下几个概念，方便大家理解：
- DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。
- CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
- Render Tree: DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout）
- layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去**计算出每个节点在屏幕中的位置**(宽高、颜色等)。
- painting：按照算出来的规则，通过显卡，把内容画到屏幕上。
- display：打击看到的最终效果。
参考链接：
- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html)
## Reflow：重排
### 定义
**重排 Reflow**：DOM结果中的各个元素都有自己的盒子（模型），这些都需要浏览器**根据各种样式来计算，并根据计算结果将元素放在它该出现的位置**，这个过程称之为Reflow。
### 什么时候触发 Reflow
- 增加、删除、修改DOM节点时，会导致 Reflow 或 Repaint。
- 移动DOM的位置，或是加个动画的时候
- 修改CSS样式时（宽高、display 为none等，都是通过css样式来修改的）
- 当用户Resize窗口时（移动端没有这个问题），或是滚动的时候，**有可能**会触发（具体要看浏览器的规则）。
- 修改网页的默认字体时（这个影响非常严重）。
**面试总结：**
首先要答出 Reflow 定义；其次，什么时候触发，至少要答出两条。更进一步，面试官可能还会问你**怎么避免reflow**，这个自己去查查吧。
## Repaint：重绘
### 定义
**Repaint重绘制：**当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为 Repaint。
说白了，页面要呈现的内容，统统画在屏幕上，这就叫 Repaint。
### 什么时候触发 Repaint
- DOM改动
- CSS改动
其实，就是判断当前呈现的内容是否发生变化（无论这个变化是通过DOM改动还是CSS改动）。只要页面显示的内容不一样了，肯定要 Repaint。
**面试总结：**
面试官经常会问：“如何**尽量减少**Repaint的频率？”
注意， reflow是问“怎么避免”，repaint是问“怎么减少”。Repaint是无法避免的，否则就成了静态页面了。
**答案**：
（1）如果需要创建多个DOM节点，可以使用**DocumentFragment**创建完，然后一次性地加入document。（加一个节点，就repaint一次，不太好）
（2）将元素的display设置为”none”，完成修改后再把display修改为原来的值。
参考链接：[如何减少浏览器repaint和reflow ?](http://blog.csdn.net/liaozhongping/article/details/47057889)

242
13-前端面试/01-面试必看/09-02.js运行机制：异步和单线程.md Normal file
View File

@@ -0,0 +1,242 @@
## 前言
面试时，关于`同步和异步`，可能会问以下问题：
- 同步和异步的区别是什么？分别举一个同步和异步的例子
- 一个关于 setTimeout 的笔试题
- 前端使用异步的场景哪些？
面试时，关于`js运行机制`，需要注意以下几个问题：
- 如何理解JS的**单线程**
- 什么是**任务队列**
- 什么是 EventLoop
- 理解哪些语句会放入异步任务队列
- 理解语句放入异步任务队列的**时机**
## JS的异步和单线程
> 因为是单线程，所以必须异步。
我们通过题目来解释以下。
### 题目一：异步
现有如下代码：
```javascript
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);
console.log(4);
```
上面的代码中，我们很容易知道，打印的顺序是`1，3，4，2`。因为你会想到，要等一秒之后再打印`2`。
可如果我把延时的时间从`1000`改成`0`：
```javascript
console.log(1);
setTimeout(function () {
console.log(2);
}, 0);
console.log(3);
console.log(4);
```
上方代码中，打印的顺序仍然是`1，3，4，2`。这是为什么呢？我们来分析一下。
**总结：**
js 是单线程（同一时间只能做一件事），而且有一个**任务队列**：全部的同步任务执行完毕后，再来执行异步任务。第一行代码和最后一行代码是同步任务；但是，**`setTimeout`是异步任务**。
于是，执行的顺序是：
- 先执行同步任务`console.log(1)`
- 遇到异步任务`setTimeout`，要**挂起**
- 执行同步任务`console.log(3)`
- **全部的同步任务执行完毕后，再来执行异步任务**`console.log(2)`。
很多人会把这个题目答错，这是因为他们不懂 js 的运行机制。
注意上面那句话：同步任务执行完毕后，再来执行异步任务。也就是说，**如果同步任务没有执行完，异步任务是不会执行的**。为了解释这句话，我们来看下面这个例子。
### 题目二：异步
现有如下代码：
```javascript
console.log('A');
while (1) {
}
console.log('B');
```
我们很容易想到，上方代码的打印结果是`A`，因为while是同步任务，代码会陷入死循环里出不来，自然也就无法打印`B`。可如果我把代码改成下面的样子：
```javascript
console.log('A');
setTimeout(function () {
console.log('B');
})
while (1) {
}
```
上方代码的打印结果仍然是`A`。因为while是同步任务，setTimeout是异步任务，所以还是那句话：**如果同步任务没有执行完，队列里的异步任务是不会执行的**。
### 题目三：同步
```javascript
console.log('A');
alert('haha'); //1秒之后点击确认
console.log('B');
```
`alert`函数是同步任务，我只有点击了确认，才会继续打印`B`。
### 同步和异步的对比
我们在上面列举了异步和同步的例子。现在来描述一下区别：【重要】
因为`setTimeout`是**异步任务**，所以程序并不会卡在那里，而是继续向下执行（即使settimeout设置了倒计时一万秒）；但是`alert`函数是**同步**任务，程序会**卡在那里**，如果它没有执行，后面的也不会执行（卡在那里，自然也就造成了**阻塞**）。
### 前端使用异步的场景
什么时候需要**等待**，就什么时候用异步。
- 定时任务：setTimeout（定时炸弹）、setInterval（循环执行）
- 网络请求：ajax请求、动态`<img>`加载
- 事件绑定（比如说，按钮绑定点击事件之后，用户爱点不点。我们不可能卡在按钮那里，什么都不做。所以，应该用异步）
- ES6中的Promise
代码举例：
```javascript
console.log('start');
var img = document.createElement('img');
img.onload = function () {
console.log('loaded');
}
img.src = '/xxx.png';
console.log('end');
```
上图中，先打印`start`，然后执行`img.src = '/xxx.png'`，然后打印`end`，最后打印`loaded`。
## 任务队列和Event Loop（事件循环）
### 任务队列
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
总结：**只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制**。【重要】
### Event Loop
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
![](http://img.smyhvae.com/20180310_1840.png)
在理解Event Loop时，要理解两句话：
- 理解哪些语句会放入异步任务队列
- 理解语句放入异步任务队列的**时机**
### 容易答错的题目
```javascript
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
```
很多人以为上面的题目，答案是`0,1,2,3`。其实，正确的答案是：`3,3,3,3`。
分析：for 循环是同步任务，setTimeout是异步任务。for循环每次遍历的时候，遇到settimeout，就先暂留着，等同步任务全部执行完毕（此时，i已经等于3了），再执行异步任务。
我们把上面的题目再加一行代码。最终代码如下：
```javascript
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
console.log(i);
```
如果我们约定，用箭头表示其前后的两次输出之间有 1 秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略，代码实际运行的结果该如何描述？可能会有两种答案：
- A. 60% 的人会描述为：`3 -> 3 -> 3 -> 3`，即每个 3 之间都有 1 秒的时间间隔；
- B. 40% 的人会描述为：`3 -> 3,3,3`，即第 1 个 3 直接输出，1 秒之后，连续输出 3 个 3。
循环执行过程中，几乎同时设置了 3 个定时器，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。
上面这个题目的参考链接：
- [80% 应聘者都不及格的 JS 面试题](https://juejin.im/post/58cf180b0ce4630057d6727c)
- [深入浅出Javascript事件循环机制(上)](https://zhuanlan.zhihu.com/p/26229293)

277
13-前端面试/01-面试必看/10-01.页面性能优化.md Normal file
View File

@@ -0,0 +1,277 @@
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8550195.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 前言
提升页面性能优化的方法有哪些：
- 1、资源压缩合并，减少http请求
- 2、**非核心代码异步加载** --> 异步加载的方式 --> 异步加载的区别
如果回答出`非核心代码异步加载`，就会层层深入。
- 3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理
**缓存**是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】
有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。
- 4、使用CDN
浏览器第一次打开页面时，缓存是起不了作用的。CDN这一条，一定要说出来。
- 5、DNS预解析
## 一、资源压缩合并，减少http请求
- 合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
- 图片较多的页面也可以使用 lazyLoad 等技术进行优化。
- 精灵图等
## 二、非核心代码异步加载
异步加载的方式：（这里不说框架，只说原理）
- 动态脚本加载
- defer
- async
### 动态脚本加载
使用document.createElement创建一个script标签，即`document.createElement('script')`，然后把这个标签加载到body上面去。
参考链接：
- [javascript 异步加载](https://www.jianshu.com/p/13cf23a90328) 动态脚本加载的那部分代码，看不太懂。
### defer
通过异步的方式加载defer1.js文件：
```html
<script src="./defer1.js" defer></script>
```
### async
> HTmL5新增特性。
通过异步的方式加载async1.js文件：
```html
<script src="./async1.js" async></script>
```
### defer和async的区别
- defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。
- async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。
代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--通过异步的方式引入两个外部的js文件-->
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
</head>
<body>
<script>
console.log('同步任务');
</script>
</body>
</html>
```
上方打印的结果是：
```
同步任务
defer1
defer2
```
因为defer的加载是有顺序的，所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载，打印的结果可能是：
```
同步任务
async2
async1
```
参考链接：
- [浅谈script标签的defer和async](https://segmentfault.com/a/1190000006778717)
## 三、利用浏览器缓存
**缓存**：资源文件（比如图片）在**本地的硬盘**里存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。
缓存分为：
- 强缓存
- 协商缓存
### 强缓存
**强缓存**：不用请求服务器，直接使用本地的缓存。
强缓存是利用 http 响应头中的**`Expires`**或**`Cache-Control`**实现的。【重要】
浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：
![](http://img.smyhvae.com/20180310_2310.png)
**注意**：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires和Cache-Control同时存在时，**Cache-Control的优先级高于Expires**。
下面讲一下二者的区别。
**1、`Expires`**：服务器返回的**绝对时间**。
是较老的强缓存管理 response header。浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires的时间之前，就能命中缓存，否则就不行。
如果缓存没有命中，浏览器直接从服务器请求资源时，Expires Header在重新请求的时候会被更新。
**缺点：**
由于`Expires`是服务器返回的一个绝对时间，存在的问题是：服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改客户端时间，就能影响缓存命中的结果。所以，在http1.1中，提出了一个新的response header，就是Cache-Control。
**2、`Cache-Control`**：服务器返回的**相对时间**。
http1.1中新增的 response header。浏览器第一次请求资源之后，在接下来的相对时间之内，都可以利用本地缓存。超出这个时间之后，则不能命中缓存。重新请求时，`Cache-Control`会被更新。
### 协商缓存
**协商缓存**：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。
当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。
协商缓存是利用的是两对Header：
- 第一对：`Last-Modified`、`If-Modified-Since`
- 第二对：`ETag`、`If-None-Match`
ETag（Entity Tag）：被请求变量的实体值”。
**1、`Last-Modified`、`If-Modified-Since`**。过程如下：
（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上`Last-Modified`这个 response header，这个header表示这该资源在服务器上的最后修改时间：
![](http://img.smyhvae.com/20180311_1715.png)
（2）浏览器再次请求这个资源时，会加上`If-Modified-Since`这个 request header，这个header的值就是上一次返回的`Last-Modified`的值：
![](http://img.smyhvae.com/20180311_1716.png)
（3）服务器收到第二次请求时，会比对浏览器传过来的`If-Modified-Since`和资源在服务器上的最后修改时间`Last-Modified`，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，服务器不会返回 Last-Modified 这个 response header）；如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
![](http://img.smyhvae.com/20180311_1720.png)
（4）浏览器如果收到304的响应，就会从缓存中加载资源。
**缺点：**
`Last-Modified`、`If-Modified-Since`一般来说都是非常可靠的，但面临的问题是：
- **服务器上的资源变化了，但是最后的修改时间却没有变化**。
- 如果服务器端在一秒内修改文件两次，但产生的`Last-Modified`却只有一个值。
这一对header就无法解决这种情况。于是，下面这一对header出场了。
**2、`ETag`、`If-None-Match`**。过程如下：
（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上`ETag`这个 response header，这个header是服务器根据当前请求的资源生成的**唯一标识**。这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间无关，所以也就很好地补充了`Last-Modified`的不足。如下：
![](http://img.smyhvae.com/20180311_1735.png)
（2）浏览器再次请求这个资源时，会加上`If-None-Match`这个 request header，这个header的值就是上一次返回的`ETag`的值：
![](http://img.smyhvae.com/20180311_1737.png)
3）服务器第二次请求时，会对比浏览器传过来的`If-None-Match`和服务器重新生成的一个新的`ETag`，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag并无变化）。如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
![](http://img.smyhvae.com/20180311_1740.png)
（4）浏览器如果收到304的响应，就会从缓存中加载资源。
提示：如果面试官问你：与浏览器缓存相关的http header有哪些？你能写出来吗？这是一个亮点。
参考链接：
- [浏览器缓存知识小结及应用](https://www.cnblogs.com/lyzg/p/5125934.html)[荐]
## 四、使用CDN
怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，另外就是CDN。
要注意，浏览器第一次打开页面的时候，浏览器缓存是起不了作任何用的，使用CDN，效果就很明显。
## 五、DNS预解析（dns-prefetch）
通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
**第一步**：打开或关闭DNS预解析
你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：
```html
<meta http-equiv="x-dns-prefetch-control" content="on">
```
需要说明的是，在一些高级浏览器中，页面中所有的超链接（`<a>`标签），默认打开了DNS预解析。但是，如果页面中采用的https协议，很多浏览器是默认关闭了超链接的DNS预解析。如果加了上面这行代码，则表明强制打开浏览器的预解析。（如果你能在面试中把这句话说出来，则一定是你出彩的地方）
**第二步**：对指定的域名进行DNS预解析
如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 <head> 标签中加入以下内容：
```html
<link rel="dns-prefetch" href="http://www.smyhvae.com/">
```
当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。
参考链接：
- [前端性能优化 - 资源预加载](http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/)[荐]
- [DNS预解析详解](https://www.xuanfengge.com/dns-prefetching-analysis.html)
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

185
13-前端面试/01-面试必看/10-02.前端错误监控.md Normal file
View File

@@ -0,0 +1,185 @@
## 前言
错误监控包含的内容是：
- 前端错误的分类
- 每种错误的捕获方式
- 上报错误的基本原理
面试时，可能有两种问法：
- 如何监测 js 错误？（开门见山的方式）
- 如何保证**产品质量**？（其实问的也是错误监控）
## 前端错误的分类
包括两种：
- 即时运行错误（代码错误）
- 资源加载错误
## 每种错误的捕获方式
### 即时运行错误的捕获方式
**方式1**：try ... catch。
这种方式要部署在代码中。
**方式2：**`window.onerror`函数。这个函数是全局的。
```
window.onerror = function(msg, url, row, col, error) { ... }
```
参数解释：
- msg为异常基本信息
- source为发生异常Javascript文件的url
- row为发生错误的行号
方式二中的`window.onerror`是属于DOM0的写法，我们也可以用DOM2的写法：`window.addEventListener("error", fn);`也可以。
**问题延伸1：**
`window.onerror`默认无法捕获**跨域**的js运行错误。捕获出来的信息如下：（基本属于无效信息）
比如说，我们的代码想引入B网站的`b.js`文件，怎么捕获它的异常呢？
**解决办法**：在方法二的基础之上，做如下操作：
（1）在`b.js`文件里，加入如下 response header，表示允许跨域：（或者世界给静态资源`b.js`加这个 response header）
```
Access-Control-Allow-Origin: *
```
（2）引入第三方的文件`b.js`时，在`<script>`标签中增加`crossorigin`属性；
参考链接：
- [window.onerror的总结](https://www.jianshu.com/p/315ffe6797b8)
- [前端代码异常日志收集与监控](http://www.cnblogs.com/hustskyking/archive/2015/08/20/fe-monitor.html)
- [捕获页面中全局Javascript异常](https://foio.github.io/javascript-global-exceptions/)
**问题延伸2：**
只靠方式二中的`window.onerror`是不够的，因为我们无法获取文件名是什么，不知道哪里出了错误。解决办法：把**堆栈**信息作为msg打印出来，堆栈里很详细。
### 资源加载错误的捕获方式
上面的window.onerror只能捕获即时运行错误，无法捕获资源加载错误。原理是：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止（不会冒泡给window），所以window.onerror并不能捕获资源加载错误。
**方式1**：object.onerror。img标签、script标签等节点都可以添加onerror事件，用来捕获资源加载的错误。
**方式2**：performance.getEntries。可以获取所有已加载资源的加载时长，通过这种方式，可以间接的拿到没有加载的资源错误。
举例：
浏览器打开一个网站，在Console控制台下，输入：
```
performance.getEntries().forEach(function(item){console.log(item.name)})
```
或者输入：
```
performance.getEntries().forEach(item=>{console.log(item.name)})
```
上面这个api，返回的是数组，既然是数组，就可以用forEach遍历。打印出来的资源就是**已经成功加载**的资源。；
![](http://img.smyhvae.com/20180311_2030.png)
再输入`document.getElementsByTagName('img')`，就会显示出所有**需要加载**的的img集合。
于是，`document.getElementsByTagName('img')`获取的资源数组减去通过`performance.getEntries()`获取的资源数组，剩下的就是没有成功加载的，这种方式可以间接捕获到资源加载错误。
这种方式非常有用，一定要记住。
**方式3；**Error事件捕获。
源加载错误，虽然会阻止冒泡，但是不会阻止捕获。我们可以在捕获阶段绑定error事件。例如：
![](http://img.smyhvae.com/20180311_2040.png)
**总结：**如果我们能回答出后面的两种方式，面试官对我们的印象会大大增加。既可以体现出我们对错误监控的了解，还可以体现出我们对事件模型的掌握。
参考链接：
- [前端错误监控原理与实战](http://www.cnblogs.com/gaoning/p/7928497.html) （作者的这篇文章参考了面试内容）
## 错误上报的两种方式
**方式一**：采用Ajax通信的方式上报（此方式虽然可以上报错误，但是我们并不采用这种方式）
**方式二：**利用Image对象上报（推荐。网站的监控体系都是采用的这种方式）
方式二的实现方式如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//通过Image对象进行错误上报
(new Image()).src = 'http://smyhvae.com/myPath?badjs=msg'; // myPath表示上报的路径（我要上报到哪里去）。后面的内容是自己加的参数。
</script>
</body>
</html>
```
打开浏览器，效果如下：
![](http://img.smyhvae.com/20180311_2055.png)
上图中，红色那一栏表明，我的请求已经发出去了。点进去看看：
![](http://img.smyhvae.com/20180311_2057.png)
这种方式，不需要借助第三方的库，一行代码即可搞定。