揣包自用的前端小册

图片来自wallhaven

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

HTML相关

1.HTML5的优缺点

优点：

网络标准统一、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的理解

默认值：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的优缺点

优点：

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

缺点：

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

3.null和undefined的区别

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

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

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

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

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

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

作为函数的参数，表示该函数的参数不是对象
作为对象原型链的终点

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

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

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

5.对JSON 的了解

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

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

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

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

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

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

工厂模式
构造函数模式
原型模式
混合构造函数和原型模式
动态原型模式
寄生构造函数模式
稳妥构造函数模式

9.javascript继承的 6 种方法

原型链继承
借用构造函数继承
组合继承(原型+借用构造)
原型式继承
寄生式继承
寄生组合式继承

10.ajax 的过程是怎样的

创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用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.如何解决跨域问题

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

9.documen.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

10.哪些操作会造成内存泄漏

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

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

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

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

通过判断 Global 对象是否为window，如果不为window，当前脚本没有运行在浏览器中。即在node中的全局变量是global ,浏览器的全局变量是window。可以通过该全局变量是否定义来判断宿主环境

12.Node的优点和缺点

优点：

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

缺点：

Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。
缺少足够多的第三方库支持。

HTTP相关

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

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

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

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

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

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

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

分为4个步骤：

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

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

简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM