diff --git a/06-前端基础/00-准备.md b/06-前端基础/00-准备.md index 176052f..bdf4233 100644 --- a/06-前端基础/00-准备.md +++ b/06-前端基础/00-准备.md @@ -9,7 +9,7 @@ ### 面试分为三部分 -- 技术面试：问技术问题 +- 技术面试：问技术问题。 - 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。 @@ -73,7 +73,7 @@ ### 校招和社招各自看中的层面 -校招； +校招： - 知识：40% @@ -135,7 +135,7 @@ PS：前端的知识庞大，不可能所有的内容都准备好，但是要向 如下： -20180304_2132.png +![](http://img.smyhvae.com/20180304_2132.png) @@ -219,7 +219,7 @@ PS：了解、熟悉、精通，是有区别的。 如下： -20180304_2225.png +![](http://img.smyhvae.com/20180304_2226.png) 此方位 @@ -281,7 +281,7 @@ ES6语法：import、export等。 比如这个网站： -20180304_2302.png +![](http://img.smyhvae.com/20180304_2302.png) @@ -298,7 +298,7 @@ ES6语法：import、export等。 ## 技术栈准备 - +![](http://img.smyhvae.com/20180310_1040.png) 上图中，左侧是前端技术核心，右侧是前端工程化。 @@ -310,7 +310,7 @@ ES6语法：import、export等。 - Node.js：如果没有相关项目经历，就尽量不要提。 -- 右侧： +右侧： - npm：npm的常见命令、npm scripts 怎么用的。 @@ -320,6 +320,8 @@ ES6语法：import、export等。 ## 自我介绍 +面试问的问题，很大层次上，取决你的简历和自我介绍。 + ### 简历 @@ -406,65 +408,6 @@ ES6语法：import、export等。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -（2） - -## 自我介绍 - -面试问的问题，很大层次上，取决你的简历和自我介绍。 - - - - - - - - - - - - - - - - - - - - diff --git a/06-前端基础/01-页面布局.md b/06-前端基础/01-页面布局.md index e8f3c2d..a31e4d8 100644 --- a/06-前端基础/01-页面布局.md +++ b/06-前端基础/01-页面布局.md @@ -375,12 +375,12 @@ margin: 0; } - /* 重要：设置容器为表格布局，宽度为100% */ + /* 重要：设置容器为网格布局，宽度为100% */ .layout.grid .left-center-right { display: grid; width: 100%; grid-template-rows: 100px; - grid-template-columns: 300px auto 300px; /* 重要：设置表格为三列，并设置每列的宽度。即可。*/ + grid-template-columns: 300px auto 300px; /* 重要：设置网格为三列，并设置每列的宽度。即可。*/ } diff --git a/06-前端基础/02-CSS盒模型的深度思考及BFC.md b/06-前端基础/02-CSS盒模型的深度思考及BFC.md index 476627d..55471e2 100644 --- a/06-前端基础/02-CSS盒模型的深度思考及BFC.md +++ b/06-前端基础/02-CSS盒模型的深度思考及BFC.md @@ -94,27 +94,30 @@ CSS盒模型和IE盒模型的区别： 这种方式有局限性，但应该了解。 -### 方式二（IE独有的） + + +### 方式二（通用型） + + +```javascript + window.getComputedStyle(element).width/height; +``` + + +方式二能兼容 Chrome、火狐。是通用型方式。 + + +### 方式三（IE独有的） ```javascript element.currentStyle.width/height; ``` -获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。 +和方式二相同，但这种方式只有IE独有。获取到的即时运行完之后的宽高（三种css样式都可以获取）。 -### 方式三（通用型） - - -```javascript - window.getComputedStyle(element).width/height; -``` - - -方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式。 - -### 方式4 +### 方式四 ```javascript @@ -242,7 +245,7 @@ BFC（Block Formatting Context）：块级格式化上下文。你可以把它 BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括： -- （1）BFC **里面的**元素，在垂直方向，**边距会发生重叠**。 +- （1）BFC **内部的**子元素，在垂直方向，**边距会发生重叠**。 - （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`） diff --git a/06-前端基础/12-渲染机制.md b/06-前端基础/12-渲染机制.md new file mode 100644 index 0000000..80f1c8e --- /dev/null +++ b/06-前端基础/12-渲染机制.md @@ -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 + +``` + +PS：该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。 + +2、**HTML 4.01 Transitional**：（传统的） + +```html + + +``` + +PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。 + + +3、HTML 5： + +```html + +``` + + +**总结：** + +面试时，不会让你写出 HTML 4.01的写法，因为大家都记不住。但是要记住 HTML 5 的写法，别看它简单，知道的人还真不多。 + +面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是``。 + + + +## 浏览器的渲染过程 + + +浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。 + + +img + +面试时，我们要把上面的流程说清楚。 + +为了理解这个过程，来看几张图：（这几张图是帮助我们私下理解的，不是给面试官的） + + + + +参考链接： + +- [浏览器渲染原理及流程[荐]](http://www.cnblogs.com/slly/p/6640761.html) + + + + + + + + + + + + diff --git a/06-前端基础/21-面经推荐.md b/06-前端基础/21-面经推荐.md index 6ebbb9b..c94aead 100644 --- a/06-前端基础/21-面经推荐.md +++ b/06-前端基础/21-面经推荐.md @@ -8,4 +8,9 @@ 此博主的博客签名： -20180308_1703.png \ No newline at end of file +20180308_1703.png + + +- [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/) + +作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。 \ No newline at end of file diff --git a/06-前端基础/作用域和闭包.md b/06-前端基础/作用域和闭包.md new file mode 100644 index 0000000..b28b04f --- /dev/null +++ b/06-前端基础/作用域和闭包.md @@ -0,0 +1,3 @@ + + + diff --git a/06-前端基础/11-其他.md b/06-前端基础/其他.md similarity index 100% rename from 06-前端基础/11-其他.md rename to 06-前端基础/其他.md diff --git a/06-前端基础/11-计算机网络.md b/06-前端基础/计算机网络.md similarity index 100% rename from 06-前端基础/11-计算机网络.md rename to 06-前端基础/计算机网络.md diff --git a/06-前端基础/面试题整理.md b/06-前端基础/面试题整理.md new file mode 100644 index 0000000..fd20d62 --- /dev/null +++ b/06-前端基础/面试题整理.md @@ -0,0 +1,27 @@ + + + + +## GitHub + +- 面试题和答案： + + +- 面试题和答案： + +有个题是，浏览器输入url，有哪些过程 + +- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5) + +- 这个也很全： + +- + + + + + +## 浏览器输入hrl，有哪些过程 + +- 从输入URL到页面加载发生了什么： + diff --git a/11-Vue框架-商城系统/00-Vue的介绍和环境配置.md b/12-Vue框架-商城系统/00-Vue的介绍和环境配置.md similarity index 100% rename from 11-Vue框架-商城系统/00-Vue的介绍和环境配置.md rename to 12-Vue框架-商城系统/00-Vue的介绍和环境配置.md diff --git a/12-Vue框架-组件化思维/01-项目介绍.md b/13-Vue框架-组件化思维/01-项目介绍.md similarity index 100% rename from 12-Vue框架-组件化思维/01-项目介绍.md rename to 13-Vue框架-组件化思维/01-项目介绍.md diff --git a/12-Vue框架-组件化思维/02-项目设计与原理分析.md b/13-Vue框架-组件化思维/02-项目设计与原理分析.md similarity index 100% rename from 12-Vue框架-组件化思维/02-项目设计与原理分析.md rename to 13-Vue框架-组件化思维/02-项目设计与原理分析.md diff --git a/12-Vue框架-组件化思维/03-京东金融的首页.md b/13-Vue框架-组件化思维/03-京东金融的首页.md similarity index 100% rename from 12-Vue框架-组件化思维/03-京东金融的首页.md rename to 13-Vue框架-组件化思维/03-京东金融的首页.md diff --git a/12-Vue框架-组件化思维/08-上线指导.md b/13-Vue框架-组件化思维/08-上线指导.md similarity index 100% rename from 12-Vue框架-组件化思维/08-上线指导.md rename to 13-Vue框架-组件化思维/08-上线指导.md diff --git a/12-Vue框架-组件化思维/09-构建工具.md b/13-Vue框架-组件化思维/09-构建工具.md similarity index 100% rename from 12-Vue框架-组件化思维/09-构建工具.md rename to 13-Vue框架-组件化思维/09-构建工具.md diff --git a/12-Vue框架-组件化思维/11-面试技巧.md b/13-Vue框架-组件化思维/11-面试技巧.md similarity index 72% rename from 12-Vue框架-组件化思维/11-面试技巧.md rename to 13-Vue框架-组件化思维/11-面试技巧.md index f32e917..8490772 100644 --- a/12-Vue框架-组件化思维/11-面试技巧.md +++ b/13-Vue框架-组件化思维/11-面试技巧.md @@ -3,7 +3,7 @@ ## 前言 -面试提问包括： +**面试提问**包括： - 同学做过哪些项目 @@ -18,7 +18,7 @@ 这个问题不好回答。要独具一格，不要芸芸众生。 -面试分析： +**面试分析**： - 二面考什么 @@ -29,7 +29,12 @@ - 沟通有哪些技巧 -## 面试分析 + +## 面试演练 + + + +参考链接： diff --git a/12-Vue框架-组件化思维/Vue-router.md b/13-Vue框架-组件化思维/Vue-router.md similarity index 100% rename from 12-Vue框架-组件化思维/Vue-router.md rename to 13-Vue框架-组件化思维/Vue-router.md diff --git a/12-Vue框架-组件化思维/Vue基础知识.md b/13-Vue框架-组件化思维/Vue基础知识.md similarity index 100% rename from 12-Vue框架-组件化思维/Vue基础知识.md rename to 13-Vue框架-组件化思维/Vue基础知识.md diff --git a/12-Vue框架-组件化思维/z商城系统.md b/13-Vue框架-组件化思维/z商城系统.md similarity index 100% rename from 12-Vue框架-组件化思维/z商城系统.md rename to 13-Vue框架-组件化思维/z商城系统.md