update
This commit is contained in:
qianguyihao
parent
8ff04cdbd2
commit
1bf1ddb0b1
@ -9,7 +9,7 @@
|
|||||||
### 面试分为三部分
|
### 面试分为三部分
|
||||||
|
|
||||||
|
|
||||||
- 技术面试：问技术问题
|
- 技术面试：问技术问题。
|
||||||
|
|
||||||
- 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
|
- 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
|
||||||
|
|
||||||
@ -73,7 +73,7 @@
|
|||||||
|
|
||||||
### 校招和社招各自看中的层面
|
### 校招和社招各自看中的层面
|
||||||
|
|
||||||
校招；
|
校招：
|
||||||
|
|
||||||
- 知识：40%
|
- 知识：40%
|
||||||
|
|
||||||
@ -135,7 +135,7 @@ PS：前端的知识庞大，不可能所有的内容都准备好，但是要向
|
|||||||
|
|
||||||
如下：
|
如下：
|
||||||
|
|
||||||
20180304_2132.png
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -219,7 +219,7 @@ PS：了解、熟悉、精通，是有区别的。
|
|||||||
|
|
||||||
如下：
|
如下：
|
||||||
|
|
||||||
20180304_2225.png
|
|
||||||
|
|
||||||
此方位
|
此方位
|
||||||
|
|
||||||
@ -281,7 +281,7 @@ ES6语法：import、export等。
|
|||||||
比如<http://jr.jd.com/>这个网站：
|
比如<http://jr.jd.com/>这个网站：
|
||||||
|
|
||||||
|
|
||||||
20180304_2302.png
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -298,7 +298,7 @@ ES6语法：import、export等。
|
|||||||
|
|
||||||
## 技术栈准备
|
## 技术栈准备
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图中，左侧是前端技术核心，右侧是前端工程化。
|
上图中，左侧是前端技术核心，右侧是前端工程化。
|
||||||
|
|
||||||
@ -310,7 +310,7 @@ ES6语法：import、export等。
|
|||||||
|
|
||||||
- Node.js：如果没有相关项目经历，就尽量不要提。
|
- Node.js：如果没有相关项目经历，就尽量不要提。
|
||||||
|
|
||||||
- 右侧：
|
右侧：
|
||||||
|
|
||||||
- npm：npm的常见命令、npm scripts 怎么用的。
|
- npm：npm的常见命令、npm scripts 怎么用的。
|
||||||
|
|
||||||
@ -320,6 +320,8 @@ ES6语法：import、export等。
|
|||||||
|
|
||||||
## 自我介绍
|
## 自我介绍
|
||||||
|
|
||||||
|
面试问的问题，很大层次上，取决你的简历和自我介绍。
|
||||||
|
|
||||||
|
|
||||||
### 简历
|
### 简历
|
||||||
|
|
||||||
@ -406,65 +408,6 @@ ES6语法：import、export等。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
（2）
|
|
||||||
|
|
||||||
## 自我介绍
|
|
||||||
|
|
||||||
面试问的问题，很大层次上，取决你的简历和自我介绍。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -375,12 +375,12 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 重要：设置容器为表格布局，宽度为100% */
|
/* 重要：设置容器为网格布局，宽度为100% */
|
||||||
.layout.grid .left-center-right {
|
.layout.grid .left-center-right {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-template-rows: 100px;
|
grid-template-rows: 100px;
|
||||||
grid-template-columns: 300px auto 300px; /* 重要：设置表格为三列，并设置每列的宽度。即可。*/
|
grid-template-columns: 300px auto 300px; /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -94,27 +94,30 @@ CSS盒模型和IE盒模型的区别：
|
|||||||
|
|
||||||
这种方式有局限性，但应该了解。
|
这种方式有局限性，但应该了解。
|
||||||
|
|
||||||
### 方式二（IE独有的）
|
|
||||||
|
|
||||||
|
### 方式二（通用型）
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
window.getComputedStyle(element).width/height;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
方式二能兼容 Chrome、火狐。是通用型方式。
|
||||||
|
|
||||||
|
|
||||||
|
### 方式三（IE独有的）
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
element.currentStyle.width/height;
|
element.currentStyle.width/height;
|
||||||
```
|
```
|
||||||
|
|
||||||
获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。
|
和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。
|
||||||
|
|
||||||
|
|
||||||
### 方式三（通用型）
|
### 方式四
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
window.getComputedStyle(element).width/height;
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式。
|
|
||||||
|
|
||||||
### 方式4
|
|
||||||
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -242,7 +245,7 @@ BFC（Block Formatting Context）：块级格式化上下文。你可以把它
|
|||||||
|
|
||||||
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
|
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
|
||||||
|
|
||||||
- （1）BFC **里面的**元素，在垂直方向，**边距会发生重叠**。
|
- （1）BFC **内部的**子元素，在垂直方向，**边距会发生重叠**。
|
||||||
|
|
||||||
- （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
|
- （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
|
||||||
|
|
||||||
|
|||||||
119
06-前端基础/12-渲染机制.md
Normal file
119
06-前端基础/12-渲染机制.md
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 前言
|
||||||
|
|
||||||
|
> 接下来的几篇文章，讲一下二面的内容。
|
||||||
|
|
||||||
|
**二面的内容：**
|
||||||
|
|
||||||
|
|
||||||
|
- 渲染机制
|
||||||
|
|
||||||
|
- JS 运行机制
|
||||||
|
|
||||||
|
- 页面性能
|
||||||
|
|
||||||
|
- 错误监控
|
||||||
|
|
||||||
|
本文接下来讲渲染机制。
|
||||||
|
|
||||||
|
|
||||||
|
**渲染机制：**
|
||||||
|
|
||||||
|
- 什么是DOCTYPE及作用
|
||||||
|
|
||||||
|
- 浏览器渲染过程
|
||||||
|
|
||||||
|
面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。
|
||||||
|
|
||||||
|
- 重排Reflow
|
||||||
|
|
||||||
|
面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。
|
||||||
|
|
||||||
|
- 重绘Repaint
|
||||||
|
|
||||||
|
- 布局Layout
|
||||||
|
|
||||||
|
|
||||||
|
这里的Layout指的是浏览器的Layout。
|
||||||
|
|
||||||
|
## 什么是DOCTYPE及作用
|
||||||
|
|
||||||
|
### 定义
|
||||||
|
|
||||||
|
**DTD**：是一系列的语法规则，用来定义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>`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 浏览器的渲染过程
|
||||||
|
|
||||||
|
|
||||||
|
浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。
|
||||||
|
|
||||||
|
|
||||||
|
img
|
||||||
|
|
||||||
|
面试时，我们要把上面的流程说清楚。
|
||||||
|
|
||||||
|
为了理解这个过程，来看几张图：（这几张图是帮助我们私下理解的，不是给面试官的）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
参考链接：
|
||||||
|
|
||||||
|
- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -8,4 +8,9 @@
|
|||||||
|
|
||||||
此博主的博客签名：
|
此博主的博客签名：
|
||||||
|
|
||||||
20180308_1703.png
|
20180308_1703.png
|
||||||
|
|
||||||
|
|
||||||
|
- [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/)
|
||||||
|
|
||||||
|
作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。
|
||||||
3
06-前端基础/作用域和闭包.md
Normal file
3
06-前端基础/作用域和闭包.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
27
06-前端基础/面试题整理.md
Normal file
27
06-前端基础/面试题整理.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## GitHub
|
||||||
|
|
||||||
|
- 面试题和答案：<https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers>
|
||||||
|
|
||||||
|
|
||||||
|
- 面试题和答案：<https://github.com/qiu-deqing/FE-interview>
|
||||||
|
|
||||||
|
有个题是，浏览器输入url，有哪些过程
|
||||||
|
|
||||||
|
- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5)
|
||||||
|
|
||||||
|
- 这个也很全：<https://github.com/gnipbao/Front-end-Interview-questions>
|
||||||
|
|
||||||
|
- <https://github.com/giscafer/front-end-manual/issues/3>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 浏览器输入hrl，有哪些过程
|
||||||
|
|
||||||
|
- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
|
||||||
|
|
||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
## 前言
|
## 前言
|
||||||
|
|
||||||
面试提问包括：
|
**面试提问**包括：
|
||||||
|
|
||||||
- 同学做过哪些项目
|
- 同学做过哪些项目
|
||||||
|
|
||||||
@ -18,7 +18,7 @@
|
|||||||
这个问题不好回答。要独具一格，不要芸芸众生。
|
这个问题不好回答。要独具一格，不要芸芸众生。
|
||||||
|
|
||||||
|
|
||||||
面试分析：
|
**面试分析**：
|
||||||
|
|
||||||
- 二面考什么
|
- 二面考什么
|
||||||
|
|
||||||
@ -29,7 +29,12 @@
|
|||||||
- 沟通有哪些技巧
|
- 沟通有哪些技巧
|
||||||
|
|
||||||
|
|
||||||
## 面试分析
|
|
||||||
|
## 面试演练
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
参考链接：<https://github.com/cucygh/JDFinance/blob/master/QAforLesson12-3.md>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user