强者没有winter

目录
一：目录
二：前言
2-1： 关于dog蛋
2-2 ：写给大家
三 HTML
3.1 HTML 语义化
3.2 HTML5 新标签
3.3 常见浏览器及其内核
四 CSS
4.1 CSS 盒模型
4.2 CSS 单位
4.3 CSS 选择器及优先级
4.4 CSS 常见布局
4.5 CSS3 新特性
4.6 BFC
五 JavaScript
5.1 原型与原型链
5.2 闭包
5.3 浅拷贝与深拷贝
5.4 防抖与节流
5.5 ES6
5.6 promise
5.7 Generator，async/await相关
5.8 数组操做
六 Vue
6.1 MVVM
6.2 生命周期
6.3 双向数据绑定
6.4 Virtual DOM
6.5 template 编译
6.6 key
6.7 nextTick
6.8 父子组件通信
6.9 父子组件生命周期
6.10 keep-alive
6.11 vuex用法
七 浏览器
7.1 一个url从输入到显示的过程
7.2 重绘与回流
7.3 内存泄漏
7.4 浏览器兼容性
八 网络协议
8.1 HTTP/HTTPS
8.2 HTTP 状态码
8.3 跨域问题

二：前言

首先对于你们所说的互联网寒冬本蛋不发表任何意见，此图为证

2.1:关于dog蛋

你们好，我是前端经验长达三年多的前端dog蛋，会唱跳，敲代码，喜欢ctrl-c,ctrl-v，hah～

2.2:写给大家

虽然已通过了金三银四但身边找工做的小伙伴仍是不少的，不少小伙伴担忧如今是招聘淡季怕很差找工做，其实换个思惟方式，既然如今是招聘淡季那确定也是求职淡季，因此相对来讲仍是好找的，但愿找工做的小伙伴们放平心态，对每次的面试都要进行记录和总结，相信很快就能够收到满意的offer的。

三：Html

3.1 HTML 语义化

语义化的含义就是用正确的标签作正确的事情，HTML 语义化就是让页面的内容结构化，它有以下优势：

1. 便于对浏览器、搜索引擎解析；
2. 便于盲人浏览网页；
3. 便于阅读源代码的人对网站进行分开，维护和理解

3.2 HTML5 新标签

若是想把切换出去的组件保留在内存中，并保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令

<header>，<footer>，<<aside>，<nav>，<canvas>，<video>等

3.3 常见浏览器及其内核

	Chrome	Firefox	Safari	IE	Opera
内核	Blink	Gecko	Webkit	Trident	Blink

四：CSS

4.1： CSS 盒模型

盒模型主要分为两种，一种是标准模型，一种是IE模型。

能够经过css3新增的的box-sizing属性进行设置：

/* 标准模型 */

box-sizing:content-box;

/IE模型/

box-sizing:border-box;

border-box 中，整个 div 的宽、高，包括 margin、padding、border。

content-box 中，整个 div 的宽、高，则不包括上面元素。

4.2： CSS 单位

单位	描述
px	像素。计算机屏幕上的一个点为 1px。
em	相对单位。相对于父元素计算，假如某个 p 元素为 font-size: 12px，在它内部有个 span 标签，设置 font-size: 2em，那么，这时候的 span 字体大小为：12 * 2 = 24px
rem	相对单位。相对于根元素 html 的 font-size，假如 html 为 font-size: 12px，那么，在其当中的 div 设置为 font-size: 2rem，就是当中的 div 为 24px。
rpx	微信小程序相对单位。1rpx = 屏幕宽度 / 750 px。在 750px 的设计稿上，1rpx = 1px。

4.3： CSS 选择器及优先级

CSS 经常使用选择器

1:通配符：*

2:ID 选择器：#ID

3:类选择器：.class

4:元素选择器：p、a 等……

5:后代选择器：p span、div a 等……

6:伪类选择器：a:hover 等……

7:属性选择器：input[type="text"] 等……

8:子元素选择器：li:firth-child、p:nth-child(1) 等……

CSS 选择器权重

!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

4.4： CSS 常见布局

干货!各类常见布局实现+知名网站实例分析

4.5： CSS3 新特性

transition：过渡

transform：旋转、缩放、移动或者倾斜

animation：动画

gradient：渐变

shadow：阴影

border-radius：圆角

4.6： BFC

《我对BFC的理解》

五 JavaScript

5.1 原型与原型链

深度解析原型中的各个难点

5.2 闭包

破解前端面试（80% 应聘者不及格系列）：从闭包提及

5.3 浅拷贝与深拷贝

js浅拷贝和深拷贝

5.4 防抖与节流

防抖: 任务频繁触发的状况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（有个输入框，输入以后会调用接口，获取联想词。可是，由于频繁调用接口不太好，因此咱们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现联想词。）

节流：指定时间间隔内只会执行一次任务。 使用场景：

1. 懒加载要监听计算滚动条的位置，使用节流按必定时间的频率获取。
2. 用户点击提交按钮，假设咱们知道接口大体的返回时间的状况下，咱们使用节流，只容许必定时间内点击一次。

不防抖和节流会损害页面性能

面试知识点 - JS 防抖与节流

5.5 ES6

ECMAScript 6 入门

5.6 promise

promise实现原理：手把手教你实现一个完整的 Promise

5.7 Generator，async/await相关

阮一峰：Generator，async，Thunk，co 系列

5.8 数组操做

【干货】js 数组详细操做方法及解析合集

六：Vue

6.1: MVVM

看完这篇关于MVVM的文章，面试经过率提高了80%

6.2: 生命周期

面试中如何简短精干的描述vue生命周期

6.3: 双向数据绑定原理

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变更时发布消息 给订阅者，触发相应的监听回调。

具体步骤: 第一步:须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步:compile解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每一个指令对应的节点绑定 更新函数，添加监听数据的订阅者，一旦数据有变更，收到通知，更新视图

第三步:Watcher订阅者是Observer和Compile之间通讯的桥梁，主要作的事情是:

一、在自身实例化时往属性订阅器(dep)里面添加本身

二、自身必须有一个update()方法

三、待属性变更dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步:MVVM做为数据绑定的入口， 整合Observer、 Compile和Watcher三者， 经过Observer来监听本身的model 数据变化，经过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通讯桥梁，达到 数据变化->视图更新;视图交互变化(input)->数据model变动的双向绑定效果。

6.4: Virtual DOM

虚拟 DOM 究竟是什么？

6.5: template 编译

简而言之，就是先转化成AST树，再获得的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤： 首先，经过compile编译器把template编译成AST语法树（abstractsyntaxtree即源代码的抽象语法结构的树状表现形 式），compile是createCompiler的返回值，createCompiler是用以建立编译器的。另外compile还负责合并option。

而后，AST会通过generate（将AST语法树转化成renderfuntion字符串的过程）获得render函数，render的返回值是 VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

6.6: key

key 的做用就是在更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的建立新的。

6.7: nextTick

简单理解Vue中的nextTick

6.8: 父子组件通信

1. 父-> 子: props

2. 子-> 父: on+emit

3. 父<>子: on.sync(语法糖)来的

4. 兄弟 : event bus | vuex

6.9: 父子组件生命周期

vue 父子组件的生命周期顺序

6.10: keep-alive

若是想把切换出去的组件保留在内存中，并保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令

<component:is='curremtView' keep-alive></component>

6.11: vuex用法

vuex是一个状态管理容器(你也能够理解为相似于全局变量),数据的流向是是单向数据流

vuex	vue
state	data
getters	computed
mutations	methods（同步操做）
actions	methods（异步操做

七 浏览器

7.1 一个url从输入到显示的过程

1-1：DNS解析

1-2:TCP三次握手

1-3:发送请求，分析url，设置请求报文（头，主题）

1-4:把请求回来的html代码 通过解析生成DOM树

1-5:解析css代码生成，生成样式树

1-6:结合DOM和style树生成渲染树

7.2 重绘与回流

面试知识点 - JS 防抖与节流

7.3 内存泄漏

1. 意外的全局变量：没法被回收。

2.定时器：未被正确关闭，致使所引用的外部变量没法被释放。

3.事件监听：没有正确销毁（低版本浏览器可能出现）。

4.闭包：会致使父级中的变量没法被释放。

5.DOM 引用：DOM 被删除时，内存中的引用未被正确清空。

如何查看内存变化状况？

使用 Chrome 的 Timeline（新版本 Performance）进行内存标记，可视化查看内存的变化状况，找出异常点。

7.4 浏览器兼容性

PC端兼容性

浏览器兼容性问题解决方案 · 总结

移动端兼容性

移动 Web 开发问题和优化小结

八 网络协议

8.1 HTTP/HTTPS

HTTP：超文本传输协议（HTTP）是用于分布式，协做式和超媒体信息系统的应用协议。它是Web上数据交换的基础，是一种 client-server 协议，也就是说请求一般是由像浏览器这样的接受方发起的。

HTTPS：HTTPS（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版。即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，所以加密的详细内容就须要 SSL。 它是一个 URI scheme（抽象标识符体系），句法类同 http: 体系。用于安全的HTTP数据传输。https:URL 代表它使用了 HTTP，但 HTTPS 存在不一样于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP 与 TCP 之间）。这个系统的最初研发由网景公司进行，提供了身份验证与加密通信方法，如今它被普遍用于万维网上安全敏感的通信，例如交易支付方面。

8.2 HTTP 状态码

首先，咱们大体区分下状态码：

1. 1**开头 - 信息提示
2. 2**开头 - 请求成功
3. 3**开头 - 请求被重定向
4. 4**开头 - 请求错误
5. 5**开头 - 服务器错误

而后，常见的状态码：

1. 200 - 请求成功，Ajax 接受到信息了。
2. 400 - 服务器不理解请求。
3. 403 - 服务器拒绝请求。
4. 404 - 请求页面错误。
5. 500 - 服务器内部错误，没法完成请求。

8.3 跨域问题

前端常见跨域解决方案（全）