揣包自用的前端小册

慢慢整理、修改、丰富。更多内容请关注 GitHub

HTML相关

1.HTML5的优缺点

优势：

• 网络标准统1、HTML5自己是由W3C推荐出来的。
• 多设备、跨平台
• 即时更新。
• 提升可用性和改进用户的友好体验；
• 有几个新的标签，这将有助于开发人员定义重要的内容；
• 能够给站点带来更多的多媒体元素(视频和音频)；
• 能够很好的替代Flash和Silverlight；
• 涉及到网站的抓取和索引的时候，对于SEO很友好；
• 被大量应用于移动应用程序和游戏。

缺点：

• 安全：像以前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
• 完善性：许多特性各浏览器的支持程度也不同。
• 技术门槛：HTML5简化开发者工做的同时表明了有许多新的属性和API须要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
• 性能：某些平台上的引擎问题致使HTML5性能低下。
• 浏览器兼容性：最大缺点，IE9如下浏览器几乎全军覆没

2.HTML5的新特性

HTML5新增了 27 个元素，废弃了 16 个元素

新特性：

• 语义：可以让你更恰当地描述你的内容是什么
• 连通性：可以让你和服务器之间经过创新的新技术方法进行通讯
• 离线 & 存储：可以让网页在客户端本地存储数据以及更高效地离线运行
• 多媒体：使 video 和 audio 成为了在全部 Web 中的一等公民
• 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择
• 性能 & 集成：提供了很是显著的性能优化和更有效的计算机硬件使用
• 设备访问 Device Access：可以处理各类输入和输出设备
• 样式设计: 让做者们来创做更加复杂的主题

3.HTML5元素

根据现有的标准规范，把 HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

结构性元素主要负责web上下文结构的定义

结构性元素	用途
section	在 web 页面应用中，该元素也能够用于区域的章节描述。
header	页面主体上的头部， header 元素每每在一对 body 元素中。
footer	页面的底部（页脚），一般会标出网站的相关信息。
nav	专门用于菜单导航、连接导航的元素，是 navigator 的缩写。
article	用于表现一篇文章的主体内容，通常为文字集中显示的区域。

块性元素主要完成web页面区域的划分，确保内容的有效分割

块级元素	用途
aside	用于表达注记、贴士、侧栏、摘要、插入的引用等做为补充主体的内容。
figure	是对多个元素进行组合并展现的元素，一般与 ficaption 联合使用。
code	表示一段代码块。
dialog	用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展现的基础

行内语义元素	用途
meter	表示特定范围内的数值，可用于工资、数量、百分比等。
time	表示时间值。
progress	用来表示进度条，可经过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video	视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio	音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达，会有必定的内容和数据的关联，是各类事件的基础。

交互性元素	用途
details	用来表示一段具体的内容，可是内容默承认能不显示，经过某种手段（如单击）与 legend 交互才会显示出来。
datagrid	用来控制客户端数据与显示，能够由动态脚本及时更新。
menu	主要用于交互菜单（曾被废弃又被从新启用的元素）。
command	用来处理命令按钮。

4.Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、Doctype声明位于文档中的最前面，处于标签以前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

（2）严格模式的排版和JS 运做模式是以该浏览器支持的最高标准运行。

（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

（4）DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

5.对WEB标准以及W3C的理解与认识?

• web标准

  • 什么是web标准：一系列标准的集合，包括结构化标准语言（html等）、表现标准语言（css）、行为标准语言（EMCAScript等）。这些标准大部分由万维网联盟起草和发布
  • 为何使用web标准：为了解决因浏览器版本不一样、软硬件设备不一样致使的需多版本开发的问题
• W3C：万维网联盟，是一个web开发的国际性联盟

标准认识：

• 标签闭合、标签小写、不乱嵌套
• 结构行为表现分离：提升搜索机器人搜索概率、使用外链css和 js 脚本
• 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更普遍的设备所访问
• 容易维护、改版方便
• 提升网站易用性。

6.src和href的区别

• src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，用于替换当前元素,当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕
• href 指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接,用于在当前文档和引用资源之间确立联系。

CSS相关

1.link和@import的区别

• link 是 XHTML 标签，除了加载 CSS 外，还能够定义 RSS 等其余事务； @import 属于 CSS 范畴，只能加载 CSS 。
• link 引用 CSS 时，在页面载入时同时加载； @import 须要页面网页彻底载入之后加载。
• link 是 XHTML 标签，无兼容问题； @import低版本的浏览器不支持。
• link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

2.CSS盒模型

盒子模型有两种，分别是IE盒子和标准W3C盒子模型。

W3C盒子模型包括margin、border、padding、content，而且content部分不包含其余部分。

IE盒子模型包括margin、border、padding、content，和标准W3C盒子模型不一样的是，IE盒子模型的content部分包含了borde和padding
标准的css盒子模型：宽度=内容的宽度+边框的宽度+加上内边框的宽度
IE盒模型：width = content+padding-Left+padding-right+border-left + border-right

3.CSS选择器类型有哪些以及优先级

• 通配符：*
• ID选择器：#id
• 类选择器：.class
• 元素选择器：div p等
• 后代选择器：a img div p 等
• 伪类选择器：a:hover等
• 属性选择器：input[type="text"]等
• 子元素选择器：li:firth-child等
• 相邻兄弟选择器：p + span
• 群组选择器：h1, h2, h3,...,h6

选择器优先级顺序：!important> 内联样式 > ID选择器 > 类选择器 > 元素和伪元素 > 通配符 > 继承 > 默认

4.列出display的值并说明他们的做用

• block：指定对象为块级元素/显示
• inline：指定对象为行内元素
• inline-block：指定对象为行内块级元素
• none：取消样式
• normal：指定对象为默认样式
• flex：指定对象为弹性盒模型
• table：指定对象为块元素级的表格

5.如何居中元素

水平居中

(1)行内元素水平居中

• 利用 text-align: center 能够实如今块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

（2）块级元素的水平居中

• 将该块级元素左右外边距margin-left和margin-right设置为auto
• 使用table + margin：先将子元素设置为块级表格来显示（相似），再将其设置水平居中，display:table在表现上相似block元素，可是宽度为内容宽。
• 使用absolute + transform:先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后经过向左移动子元素的一半宽度以达到水平居中.不过transform属于css3内容，兼容性存在必定问题，高版本浏览器须要添加一些前缀。
• 使用flex+justify-content
• 使用flex+margin：经过flex将父容器设置为为Flex布局，再设置子元素居中

(3)多块级元素水平居中

• 利用flex布局:其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式
• 利用inline-block:将要水平排列的块状元素设为display:inline-block，而后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中同样的效果。

(4)浮动元素水平居中

• 对于定宽的浮动元素，经过子元素设置relative + 负margin
• 对于不定宽的浮动元素，父子容器都用相对定位
• 通用方法(无论是定宽仍是不定宽)：利用弹性布局(flex)的justify-content属性，实现水平居中,子元素有无定宽不影响

(5)绝对定位元素水平居中

• 经过子元素绝对定位，外加margin: 0 auto来实现

垂直居中

(1)单行内联元素垂直居中

• 利用行高line-height设置为height的高度

(2)多行内联元素垂直居中

• 利用flex布局（flex）：利用flex布局实现垂直居中，其中flex-direction: column`定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题
• 利用表布局（table）:利用表布局的vertical-align: middle能够实现子元素的垂直居中

(3)块级元素垂直居中

• 使用absolute+负margin(已知高度宽度);经过绝对定位元素距离顶部50%，并设margin-top向上偏移元素高度的一半，就能够实现了
• 使用absolute+transform:当垂直居中的元素的高度和宽度未知时，能够借助CSS3中transform属性向Y轴反向偏移50%的方法实现垂直居中。可是部分浏览器存在兼容性的问题。
• 使用flex+align-items:经过设置flex布局中的属性align-items，使子元素垂直居中
• 使用table-cell+vertical-align:经过将父元素转化为一个表格单元格显示（相似 <td> 和 <th>），再经过设置 vertical-align属性，使表格单元格内容垂直居中。

水平垂直居中

(1)绝对定位与负边距（已知高度宽度）

• 须要知道被垂直居中元素的高和宽，才能计算出margin值，兼容全部浏览器

(2)绝对定位与margin:auto（已知高度宽度）

• 这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器

(3)绝对定位+CSS3(未知元素的高宽)

• 利用Css3的transform，能够轻松的在未知元素的高宽的状况下实现元素的垂直居中。CSS3的transform当然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会致使得不偿失。

(4)flex布局

• 利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。

(5)flex/grig和margin:0 auto

• 容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 便可,不能兼容低版本的IE浏览器

详见元素水平居中+垂直居中+水平垂直居中

6.优雅降级和渐进加强

优雅降级： Web站点在全部新式浏览器中都能正常工做，若是用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工做。因为IE独特的盒模型布局问题，针对不一样版本的IE的hack实践过优雅降级了,为那些没法支持功能的浏览器增长候选方案，使之在旧式浏览器上以某种形式降级体验却不至于彻底失效.

渐进加强： 从被全部浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增长无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥做用。

7.CSS单位对比

单位	描述
%	百分比
px	像素
em	相对单位。相对于父元素计算，该元素的1em = 父元素px * 2
rem	相对单位。相对于根元素html，该元素的1rem = html的px * 2
rpx	微信小程序的相对单位，1rpx = 屏幕宽度/750px

8.对边距折叠的理解

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

相邻： 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

b、参与折叠的 margin 都是负值：取的是其中绝对值较大的，而后，从 0 位置，负向位移。

c、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，而后，和正 margin 值中最大的 margin 相加。

9.CSS布局中position的理解

position：static | relative | absolute | fixed | center | page | sticky

默认值：static，center、page、sticky是CSS3中新增长的值。

(1)、static

能够认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。

(2)、relative

相对定位，对象遵循常规流，而且参照自身在常规流中的位置经过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

(3)、absolute

a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，若是没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其余任何margin折叠。

b、元素定位参考的是离自身最近的定位祖先元素，要知足两个条件，第一个是本身的祖先元素，能够是父元素也能够是父元素的父元素，一直找，若是没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。

(4)、fixed

固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

(5)、center

与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）

(6)、page

与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，不然取决于每一个absolute模式。（CSS3）

(7)、sticky

对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

10.为何要初始化CSS样式

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

• 最简单的初始化方法就是（不建议）：{padding: 0; margin: 0;}
• 样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

11.SVG理解

SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。

SVG 严格听从 XML 语法，并用文本格式的描述性语言来描述图像内容，所以是一种和图像分辨率无关的矢量图形格式。

特色：

• 任意放缩，破坏图像的清晰度、细节等。
• 文本独立，保留可编辑和可搜寻的状态，无字体限制
• 体积小
• 超强显示效果，适合任何屏幕分辨率和打印分辨率。
• 超级颜色控制
• 交互 X 和智能化

浏览器支持：

• Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。
• IE8和早期版本都须要一个插件 - 如 Adobe SVG 浏览器，这是免费提供的。

JavaScript相关

1.经常使用DOM操做

• 1.建立节点

createDocumentFragment() // 建立一个DOM片断
createElement() // 建立一个具体的元素
createTextNode() // 建立一个文本节点

• 2.添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点

• 3.查找

getElementsByTagName() // 经过标签名称
getElementsByName() // 经过元素的Name属性的值(IE容错能力较强，会获得一个数组，其中包括id等于name值的)
getElementById() // 经过元素Id，惟一性

2.iframe的优缺点

优势：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件
2. 即时内容为空，加载也须要时间
3. 没有语意

3.null和undefined的区别

null是一个表示"无"的对象，转为数值时为0

undefined是一个表示"无"的原始值，转为数值时为NaN

当声明的变量还未被初始化时，变量的默认值为undefined

null用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象

undefined表示 “缺乏值”，就是此处应该有一个值，可是尚未定义。典型用法是：

1. 变量被声明了，但没有赋值时，就等于 undefined
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性，该属性的值为 `undefined
4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不该该有值。典型用法是：

1. 做为函数的参数，表示该函数的参数不是对象
2. 做为对象原型链的终点

4.new操做符具体干了什么

1. 建立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型
2. 属性和方法被加入到 this 引用的对象中
3. 新建立的对象由 this 所引用，而且最后隐式的返回 this

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

5.对JSON 的了解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

6.js延迟加载的方式有哪些

1. defer和async
2. 动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）
3. 按需异步载入js

7..call() 和 .apply() 的做用

动态改变某个类的某个方法的运行环境

8.javascript对象的几种建立方式

1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式

9.javascript继承的 6 种方法

1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

10.ajax 的过程是怎样的

1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象
2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新

Vue相关

vue

1.MVVM(Model-View-ViewModel)模型

MVVM分为Model、View、ViewModel三部分。

• Model表明数据模型，定义数据和业务逻辑，访问数据层
• View表明视图，展现页面结构、布局和外观（UI）
• ViewModel表明视图模型，负责监听Model数据变化并更新视图，处理用户交互

Model和View是经过ViewModel，Model的数据变化会触发View的更新，View的交互操做也会使Model的数据发生改变。只须要针对数据进行维护操做，数据的自动同部不须要经过操做dom实现。

2.Vue指令

内置指令
指令的本质就是语法糖或者标志位。

指令	做用	指望数值类型
v-text	更新元素文本内容	string
v-html	更新元素的innerHTML，不推荐使用	string
v-show	条件渲染。根据表达式的真假值，控制元素的显示或隐藏	any
v-if	条件渲染。根据表达式的值的真假条件选择是否渲染元素这个节点	any
v-else	条件渲染。根据v-if的相反条件进行元素渲染	any
v-else-if	条件渲染。作v-if的链式调用	any
v-for	列表渲染。对数据进行遍历渲染，最好提供key值	Array / Object / number / string
v-on	事件处理。绑定事件监听器，事件类型由参数指定，表达式能够是方法名或内联语句。	Function / Inline Statement / Object
v-bind	动态绑定。动态绑定一个或多个特性，或一个组件prop到表达式	any (with argument) / Object (without argument)
v-model	表单绑定。在表单或组件是上建立双向绑定	随表单控件类型变化
v-pre	跳过该元素和它的子元素的编译过程，直接输出模板字符串
v-slot	做用域插槽
v-cloak	设置 [v-cloak] { display: none }能够在渲染时延后加载Vue实例，避免闪现
v-once	元素和组件只渲染一次，从新渲染,元素/组件及其全部的子节点将被视为静态内容并跳过

自定义指令
不是刚需，和生命周期有很大关系，可见五个生命周期钩子。

• bind
• inserted
• update
• componentUpdated
• unbind

3.Vue响应式原理

Vue实例化时，遍历访问data里的全部属性，使用 Object.defineProperty 将其属性所有转换为getter/setter进行依赖追踪以便修改属性时进行变动通知，就是一个代理层，无论是获取数据仍是什么，都是在代理层里进行，当组件渲染时，会从代理层进行代理映射，组件渲染须要什么就会放在watcher中，由于每一个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程当中把属性记录为依赖，以后当依赖项的 setter 被调用时，会通知 watcher 从新计算，从而导致它关联的组件得以更新，没有与之关联的组件就不会更新。

4.Vue双向数据绑定和单项数据流

（1）什么是双向数据绑定

model的更新会触发view的更新，view的更新也会触发model的更新

（2）什么是单向数据流

model的更新会触发view的更新，可是view的更新不会触发model的更新

（3）双向绑定 or 单向数据流

• Vue是单向数据流，不是双向绑定
• Vue的双向绑定不过是语法糖
• Object.defineProperty是用来作响应式更新的，和双向绑定不要紧

（4）简单实现一个响应式双向数据绑定

简单实现，有一个子组件输入框，一个按钮，父组件经过props传值给子组件，当按钮增长时，子组件经过$emit通知父组件修改相应的props值。

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子组件数据</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父组件数据:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })

5.合理应用计算属性和侦听器

（1）计算属性（computed）的应用

• 处理数据计算，减小模板中计算逻辑
• 数据缓存。当计算的数据比较多的时候，放在计算属性中，不会在每次渲染界面的从新计算，提升页面性能
• 它必须依赖固定的数据类型（响应式数据），而不是全局数据

（2）侦听器watch

• 更加灵活、通用,能够触发一系列的操做
• watch提供一个底层API,能够执行任何逻辑，如函数节流、Ajax异步获取数据，操做DOM，可是不推荐

（3）计算属性和侦听器的应用场景

• 计算属性computed能作的,侦听器watch都能作，反之不行
• 能用计算属性computed的尽可能不用侦听器watch

6.Vue的生命周期钩子

生命周期一共分为三个阶段，建立阶段（执行一次）、更新阶段（执行屡次）、销毁阶段

返回顶部
### （1）生命周期的应用场景

钩子	调用	类型	是否在服务端渲染期间调用
beforeCreate	Vue实例初始化以后，数据观察和事件配置以前	Function	Yes
create	实例建立完成（数据观察/属性和方法运算/侦听器配置/事件回调）以后，挂载以前	Function	Yes
beforeMount	挂载开始以前，模板render函数首次调用	Function	Yes
mounted	实例挂载完成以后，异步请求/操做DOM/定时器	Function	No
beforeUpdate	DOM被patch以前调用进行数据修改，能够移除已添加的事件监听器等，不可更改依赖数据	Function	No
updated	组件 DOM 更新完成，避免在此期间更改状态（依赖数据）	Function	No
actived	keep-alive 组件激活时	Function	No
deactived	keep-alive 组件停用时	Function	No
beforeDestroy	实例销毁以前，能够移除已添加的事件监听器等	Function	No
destroyed	实例销毁	Function	No
errorCaptured	当任何一个来自后代组件的错误时被捕获时 收到三个参数：错误对象、发生错误的组件实例，和一个包含错误在何处被捕获信息的字符串 返回 false，以阻止该错误继续向上冒泡	Function	No

（2）函数式挂件

通常用于作展现用。

• functional:true

• 无状态、无实例、没有this上下文、无生命周期

  7.Vue组件

Vue组件 = Vue实例 = new Vue(options)，每一个组件就是一个Vue实例
组件能够是页面中每个区域板块，也能够是某一个复用业务逻辑，也能够是每个单页面。
### （1）组件的构成
就以上面的双向数据绑定实现为例：

• 属性：

  • 自定义属性props：组件props中声明的属性，父组件使用props定义数据属性，向子组件传递数据
  • 原生属性attrs：没有声明的属性，默认自动挂载到组件根元素上，设置inheritAttrs为false能够关闭自动挂载
  • 特殊属性class、style：挂载在组件根元素上，支持字符串、对象、数组等多种语法

• 事件event：

  • 普通事件：@click 、@input、@change、@xxx等事件，经过this.$emit('xxx',...)触发自定义事件event向父组件发送消息
  • 修饰符事件：@input.trim、@click.stop、@submit.prevent等，通常用于原生HTML元素，自定义组件须要自行开发支持

• 插槽slot：

  • 普通插槽：slot进行组件内容分发，插入子组件内容，简单点就是传递内容的 <template slot="xxx">...</template>、<template v-slot="xxx">...</template>
  • 做用域插槽：须要根据子组件的某些值来作动态处理，能够简单理解为返回组件的函数 <template slot="xxx" slot-scope="props">...</template>、<template v-slot:xxx="props">...</template>

### （2）组件通讯

• 父子组件通讯：父组件使用props向子组件通讯，子组件使用$emit向父组件传递消息
• 非父子组件通讯：父组件可使用v-on监听子组件的任何事件，子组件使用$emit传入事件，这样父组件就会收到事件并更新
• 跨级组件通讯：使用Vuex比较好管理

1）如何优雅地获取跨层级组件实例（拒绝递归）

<p ref="p">hello</p>
<child-component ref="child></child-component>

callback ref

• 主动通知（setXxxRef）
• 主动获取（getXxxRef）

（3）组件更新

组件的更新都是由数据驱动的，没有特殊状况，任何更改DOM的行为都是在做死。

1）数据来源（单向）

包含三个部分：

• 来自父组件的属性props
• 来自组件自身的状态data
• 来自状态管理器，如vuex vue.observable

注意：状态和属性的改变未必会触发组件更新

8.高级特性provide/inject

通常用于底层组件通讯。底层组件通讯，不只属性要层层传递，事件也要层次冒泡，这是很耗性能的。

9.Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 导航控制
• 带有自动激活的 CSS class 的连接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

下面是一个简单路由的实现：

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 经过router-link导航 -->
          <!-- 经过传入'to '属性指定连接-->
          <!--  <router-link> 默认会被渲染成一个 `<a>` 标签-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
   </div>
   <!-- 
       0. 若是使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
       1. 定义 (路由) 组件。
       2.定义路由
    -->
   <script>
       //1. 定义 (路由) 组件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定义路由
       //每一个路由应该映射一个组件。其中component能够是经过Vue.extend()建立的组件构造器
       //或者只是一个组件配置对象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.建立router实例，而后传‘routes’配置
       const router = new VueRouter({
           routes//（缩写）至关于routes:routes
       })

       //4.建立和挂载根实例
       //要记得经过router配置参数注入路由，从而让整个应用都有路由功能
       
       const app = new Vue({
           router
       }).$mount('#app');

浏览器相关

1.经常使用浏览器内核以及理解

浏览器	Chrome	Firefox	Safari	IE	Opera
渲染引擎	Blink	Gecko	Webkit	Trident	Blink
JS引擎	V8	SpiderMonkey	Nitro	Chakra	V8
前缀	-webkit	-moz	-webkit	-ms	-o

浏览器内核主要分为两部分：渲染引擎 和 JS 引擎:

• 渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。
• JS引擎：解析和执行 javascript 来实现网页的动态效果。

2.cookies、sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，能够方便的在 web 请求之间保存数据。有了本地数据，就能够避免数据在浏览器和服务器间没必要要地来回传递。

sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据

区别	存储时间	单个域名存储量	全部域名存储量	个数限制	是否发送到服务器
Cookie	浏览器关闭以前有效	4k	4k	yes	yes
LocalStorage	永久存储	5MB	无限制
SessionStorage	只在 Session 内有效	存储量更大（推荐没有限制，可是实际上各浏览器也不一样）

更多详见浏览器数据存储

3.表单提交中Get和Post方式的区别

Get	Post
从服务器上获取数据	向服务器传送数据
提交过程在url中可见	传送过程用户不可见
服务器端用 Request.QueryString 获取变量的值	服务器端用 Request.Form 获取提交的数据
传送的数据量较小，不能大于 2KB	传送的数据量较大，通常被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB
安全性低	安全性较高

4.浏览器标准模式和怪异模式之间的区别是什么

严格模式又称标准模式，有doctype声明，则是标准模式，浏览器按W3C标准解析执行代码。

反之没有就是怪异模式，混杂模式又称怪异模式，浏览器使用本身的方式解析执行代码。

5.常见浏览器兼容性问题与解决方案

（1）经常使用浏览器兼容

1)前缀兼容

Chrome	Firefox	Safari	IE	Opera
渲染引擎	Blink	Gecko	Webkit	Trident	Blink
JS引擎	V8	SpiderMonkey	Nitro	Chakra	V8
前缀	-webkit	-moz	-webkit	-ms	-o

2)透明属性opacity

透明属性opacity,解决IE9如下浏览器不能使用opacity问题：

opacity:0.5;
filter:alpha(opacity = 50);//IE6-IE9习惯使用filter属性来 进行实习
filter:progrid:DXImageTransform.Microsoft.Alpha(style = 0,opacity = 50);//IE4-IE9都支持

3)浏览器 hack

1.判断IE浏览器

<!--[if IE ]> ie8 <![endif]-->

2.判断Safari浏览器

let isSafari = /a/.__proto__=='//';

3.判断Chrome浏览器

let isChrome = Boolean(window.chrome);

（2）样式兼容性(css)

1) 使用Normalize.css

不一样浏览器样式存在差别，可使用这个去除差别

2)使用通配符选择器，全局重置样式

不加样式控制，不一样浏览器外补丁和内补丁不一样，用如下方法：

* {
 margin:0;
 padding:0;
}

3) display:inline转为行内属性

块属性标签设置浮动float后，又有横行的margin状况下，在IE6显示margin比设置的大。

解决方案：在float的标签样式控制中加入 display:inline,将其转化为行内属性

4) 图片间距设置font-size:0

图片默认有间距，设置font-size

### （3）交互兼容性（JavaScript）
(1)封装适配器进行事件兼容，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

var  helper = {}

//绑定事件
helper.on = function(target, type, handler) {
    if(target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else {
        target.attachEvent("on" + type,
            function(event) {
                return handler.call(target, event);
            }, false);
    }
};

//取消事件监听
helper.remove = function(target, type, handler) {
    if(target.removeEventListener) {
        target.removeEventListener(type, handler);
    } else {
        target.detachEvent("on" + type,
        function(event) {
            return handler.call(target, event);
        }, true);
    }
};

(2)使用new Date(str)来正确生成日期对象->'2018/07/05'。
(3)获取scrollTop经过document.documentElement.scrollTop兼容非Chrome浏览器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

详见浏览器兼容性问题与处理

6.如何实现浏览器内多个标签页之间的通讯

调用 localstorge、cookies 等本地存储方式

7.如何对网站的文件和资源进行优化(性能优化)

1.尽量减小http请求次数，将css, js, 图片各自合并

2.使用CDN，下降通讯距离

3.添加Expire/Cache-Control头

4.启用Gzip压缩文件

5.将css放在页面最上面

6.将script放在页面最下面

7.避免在css中使用表达式

8.将css, js都放在外部文件中

9.减小DNS查询

10.最小化css, js，减少文件体积

11.避免重定向

12.移除重复脚本

13.配置实体标签ETag

14.使用AJAX缓存，让网站内容分批加载，局部更新

8.如何解决跨域问题

1. jsonp（jsonp 的原理是动态插入 script 标签）
2. document.domain + iframe
3. window.name、window.postMessage
4. 服务器上设置代理页面

9.documen.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 能够重绘页面的一部分

10.哪些操做会形成内存泄漏

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。

垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

11.如何判断当前脚本运行在浏览器仍是node环境中

经过判断 Global 对象是否为window，若是不为window，当前脚本没有运行在浏览器中。即在node中的全局变量是global ,浏览器的全局变量是window。 能够经过该全局变量是否认义来判断宿主环境

12.Node的优势和缺点

优势：

1. 由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求，所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，所以客户端和服务器端都用同一种语言编写，这是很是美妙的事情。

缺点：

1. Node是一个相对新的开源项目，因此不太稳定，它老是一直在变。
2. 缺乏足够多的第三方库支持。

HTTP相关

1.http状态码有那些？分别表明是什么意思？

1xx: 信息性状态码，表示服务器接收到请求正在处理。

2xx: 成功状态码，表示服务器正确处理完请求。

3xx: 重定向状态码，表示请求的资源位置发生改变，须要从新请求。301永久重定向，302临时重定向。

4xx: 客户端错误状态码，服务器没法处理该请求。 404 not found

5xx: 服务器错误状态码，服务器处理请求出错。

2.一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么

分为4个步骤：

1. 当发送一个 URL 请求时，无论这个 URL 是 Web 页面的 URL 仍是 Web 页面上每一个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器得到请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器经过 TCP 三次握手协商来创建一个 TCP/IP 链接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试创建起通讯，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 链接创建，浏览器会经过该链接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了咱们关注的前端模块

简单来讲，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又能够根据 DOM API 操做 DOM