过程概述
从输入域名到网页打开的简单过程如下：
1. DNS域名解析
客户端输入域名后，由DNS服务器来将域名解析成对应服务器的IP地址
若未在缓存中找到，则不停的向上一级级请求DNS服务器
2. 建立TCP连接
客户端得到IP地址以后,会根据所获得的IP地址以及要访问的端口号发起网络连接， 即tcp三次握手连接， 建立起TCP/IP网络连接， 具体过程如下：
MVVM
MVVM（模型视图ViewModel 是一种基于MVC和MVP的架构模式，它试图更清楚地将用户界面（UI）的开发与应用程序中的业务逻辑和行为的开发分开。为此，此模式的许多实现都使用声明性数据绑定，以允许将视图上的工作与其他层分离。
阅读全文使用koa-generator生成koa2项目
全局安装koa-generator: npm install -g koa-generator
使用koa-generator生成koa2项目: koa2 -e koa2-learn
-e 添加ejs模板引擎支持(默认是jade)
koa2-learn 项目名
目录
- v-if 和 v-show 区别
- $route和$router的区别
- NextTick 是做什么的
- Vue 组件 data 为什么必须是函数
- 计算属性computed 和事件 methods 有什么区别
- Vue 中怎么自定义过滤器
- 对 keep-alive 的了解
- Vue 中 key 的作用
- vue 等单页面应用的优缺点
- Doctype作用，HTML5 为什么只需要写 <!DOCTYPE HTML>
Vue.js基础，模块化，单文件组件，路由，与服务器通信，状态管理，单元测试与生产发布，服务端渲染SSR与Nuxt.js，基于Vue.js企业级项目开发(Mint UI, Element UI)等
v-if 和 v-show 区别
使用了 v-if 的时候，如果值为 false ，那么页面将不会有这个 html 标签生成。
v-show 则是不管值为 true 还是 false ，html 元素都会存在，只是 CSS 中的 display 显示或隐藏
$route和$router的区别
$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法
$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等
NextTick 是做什么的
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
Vue 组件 data 为什么必须是函数
因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了
计算属性computed 和事件 methods 有什么区别
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的
不同点：
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值
对于 method ，只要发生重新渲染，method 调用总会执行该函数
Vue 中怎么自定义过滤器
可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值
Vue.filter(‘reverse’, function (value) {
return value.split(‘’).reverse().join(‘’)
})
过滤器也同样接受全局注册和局部注册
对 keep-alive 的了解
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
可以使用API提供的props，实现组件的动态缓存
Vue 中 key 的作用
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误
vue 等单页面应用的优缺点
优点：
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力
缺点：
SEO难度较高
前进、后退管理
初次加载耗时多
Doctype作用，HTML5 为什么只需要写 <!DOCTYPE HTML>
doctype是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前
HTML5不基于SGML，所以不需要引用DTD。在HTML5中<!DOCTYPE>只有一种
SGML: 标准通用标记语言,是现时常用的超文本格式的最高层次标准
###
转载：
知乎专栏：CSS布局十八般武艺都在这里了
参考：
CSS 常见布局方式
CSS水平居中+垂直居中+水平/垂直居中的方法总结
目录
常用居中方法
居中在布局中很常见，我们假设DOM文档结构如下，子元素要在父元素中居中：1
2
3<div class="parent">
<div class="child"></div>
</div>
水平居中
子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。
子元素为:
行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;
例子：
固定宽度
这种方式是绝对定位居中，除了使用 margin，我们还可以使用 transform（注意浏览器兼容性，只适用于 ie9+，移动开发请忽略）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.container{
width: 300px;
height: 200px;
background: pink;
position: relative;
}
.inner{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
background: #fff;
text-align: center;
}
1 | .container{ |
宽度未知
将子元素设置为行内元素，然后父元素设置 text-align: center。1
2
3
4
5
6
7
8
9
10.container{
width: 300px;
height: 200px;
background: pink;
position: relative;
text-align: center;
}
.inner{
display: inline-block;
}
多个块状元素
上面的方式即使子元素不止一个也想实现水平居中也是有效的，（宽度固定不固定都可，不固定的话就不需要设置宽度，会被自动撑开，但是要考虑到撑爆的情况）例如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.container{
width: 250px;
height: 200px;
background: pink;
position: relative;
text-align: center;
padding: 20px;
}
.inner{
display: inline-block;
width: 50px;
height: 150px;
margin: 0 auto;
background: #fff;
text-align: center;
}
当然也可以使用我们刚刚介绍的 flex，我们只需要让子元素在主轴上的对齐方式设置为居中就可以1
2
3
4
5
6
7
8
9
10
11
12
13
14.container{
width: 250px;
height: 200px;
background: pink;
display: flex;
justify-content: center;
padding: 20px;
}
.inner{
background: #fff;
width: 50px;
height: 150px;
margin-left: 10px;
}
垂直居中
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
父元素一定，子元素为单行内联文本:设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本:设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;
通用方案:flex布局，给父元素设置{display:flex; align-items:center;}。
单列布局
特征：定宽、水平居中
常见的单列布局有两种：
一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。
一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。
对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。
DOM文档:1
2
3
4
5<div class="layout">
<div id="header">头部</div>
<div id="content">内容</div>
<div id="footer">尾部</div>
</div>
CSS清单:1
2
3
4
5.layout{
/* width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
max-width: 960px;
margin: 0 auto;
}
对于第二种，header、footer的内容宽度为100%，但header、footer的内容区以及content统一设置width 或 max-width，并通过margin:auto实现居中。
DOM文档:1
2
3
4
5
6
7<div id="header">
<div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
CSS清单:1
2
3
4
5.layout{
/* width: 960px; *//*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
max-width: 960px;
margin: 0 auto;
}
二列&三列布局
二列布局的特征是侧栏固定宽度，主栏自适应宽度。
三列布局的特征是两侧两列固定宽度，中间列自适应宽度。
之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局，对于flex布局，实现了上图的五种布局。
float + margin
原理说明：设置两个侧栏分别向左向右浮动，中间列通过外边距给两个侧栏腾出空间，中间列的宽度根据浏览器窗口自适应。
DOM文档:1
2
3
4
5<div id="content">
<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>
</div>
布局步骤:
对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。
对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。
CSS清单:1
2
3
4
5
6
7
8
9
10
11
12.sub{
width: 100px;
float: left;
}
.extra{
width: 200px;
float: right;
}
.main{
margin-left: 100px;
margin-right: 200px;
}
一些说明:
注意DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列（圣杯布局和双飞翼布局都会用到）。
这种布局方式比较简单明了，但缺点是渲染时先渲染了侧边栏，而不是比较重要的主面板。
二列的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
position + margin
原理说明：通过绝对定位将两个侧栏固定，同样通过外边距给两个侧栏腾出空间，中间列自适应。
DOM文档:1
2
3<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>
布局步骤:
对两边侧栏分别设置宽度，设置定位方式为绝对定位。
设置两侧栏的top值都为0，设置左侧栏的left值为0， 右侧栏的right值为0。
对主面板设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。
CSS清单:1
2
3
4
5
6
7
8
9
10
11
12
13
14.sub, .extra {
position: absolute;
top: 0;
width: 200px;
}
.sub {
left: 0;
}
.extra {
right: 0;
}
.main {
margin: 0 200px;
}
一些说明:
本方法不限制DOM书写顺序，先写主面板会使主面板部分优先渲染（一般主面板会比侧栏内容重要）。
与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。
如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。
二列的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的margin-right值，其他操作相同。反之亦然。
圣杯布局 (float + 负margin)
原理说明：
主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边。为了避免侧栏遮挡主面板内容，在外层设置左右padding值为左右侧栏的宽度，给侧栏腾出空间，此时主面板的宽度减小。由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。
DOM文档:1
2
3
4
5 <div id="bd">
<div class="main">center</div>
<div class="sub">left</div>
<div class="extra">right</div>
</div>
布局步骤:
三者都设置向左浮动。
设置main宽度为100%，设置两侧栏的宽度。
设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。
CSS清单:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21.main {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -190px;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
position: relative;
right: -230px;
}
#bd {
padding: 0 230px 0 190px;
}
一些说明
DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。
二列的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置主面板的padding-right值，其他操作相同。反之亦然。
双飞翼布局 (float + 负margin)
原理说明：
双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤。
DOM文档:1
2
3
4
5<div class="main-wrap">
<div class="main">#main</div>
</div>
<div class="sub">left</div>
<div class="extra">right</div>
布局步骤:
三者都设置向左浮动。设置main-wrap宽度为100%，设置两个侧栏的宽度。设置负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
设置main的margin值给左右两个子面板留出空间。
CSS清单:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.main-wrap {
float: left;
width: 100%;
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
}
.extra {
float: left;
width: 230px;
margin-left: -230px;
}
.main {
margin: 0 230px 0 190px;
}
一些说明
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px;,可以实现sub+extra+main的布局。
二列的实现方法
如果是左边带有侧栏的二栏布局，则去掉右侧栏，不要设置main-wrap的margin-right值，其他操作相同。反之亦然。
flex布局
以下是五种布局的flex布局代码：
DOM文档：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<div class="layout">
<aside class="aside">侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="aside">左侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
<aside class="aside">第1个侧边栏宽度固定</aside>
<aside class="aside">第2个侧边栏宽度固定</aside>
<div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
<div class="main">主内容栏宽度自适应</div>
<aside class="aside">第1个侧边栏宽度固定</aside>
<aside class="aside">第2个侧边栏宽度固定</aside>
</div>
CSS清单1
2
3
4
5
6
7
8
9.layout {
display: flex;
}
.main {
flex: 1;
}
.aside {
width: 200px;
}
与之前所讲的几种传统布局方案相比，flex布局的代码可谓异常简洁，而且非常通用，利用简单的三行CSS即实现了常见的五种布局。
总结
传统的布局方法基于盒状模型，依赖 display属性 + position属性 + float属性，逻辑相对复杂，对于实现一些特殊效果，例如垂直居中，尤其复杂繁琐。而flex布局中的flex容器可以根据实际可用空间动态调整子元素的宽高比和顺序，使元素能够尽可能地利用可用空间，同时也能通过缩小来避免超出。flex布局提供了一套简便、完整、响应式的布局方案。
参考资料：
px、em、rem区别介绍
字体大小之px、em、rem、pt,字号详解
px:
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点:
1、 IE无法调整那些使用px作为单位的字体大小；
2、 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3、 Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
pt:
pt(point，磅)：是一个物理长度单位，指的是72分之一英寸。表示绝对长度。
em:
em是相对长度单位，相对于父元素的font-size。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
em特点：
1、 em的值并不是固定的；
2、 em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1、 body选择器中声明Font-size=62.5%；
2、 将你的原来的px数值除以10，然后换上em作为单位；
3、 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
rem:
rem（root em，根em）：是CSS3新增的一个相对单位，相对的是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。
rpx:
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
vw vh:
vw,vh是css3的新单位，是相对于viewport视窗的宽高进行计算的单位。1
2
3
41vw=1/100浏览器宽度
1vh=1/100浏览器高度
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
vmin、vmax用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
文章转载：
浏览器重绘和重排
文章参考：
重构与回流
浏览器的重绘与重排
探讨css中repaint和reflow
前言：
页面设计中，不可避免的需要浏览器进行repaint和reflow。那到底什么是repaint和reflow呢。下面谈谈自己对repaint和reflow的理解，以及结合其他技术牛的讲解，谈谈如何优化repaint和reflow。
概述：
重排(回流), 顾名思义就是重新排版的意思; 重绘, 就是浏览器重新绘制。理解重排和重绘的含义十分重要, 因为在评审页面交互效果的时候, 重绘和重排是必须考虑的因素。并不是说交互效果实现了就可以了, 必须同时考虑到这样做会引发什么性能问题。也就是说, 浏览器在进行重绘和重排的时候是要付出高昂的性能代价的。
只有静态页面才会不存在repaint和reflow。repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排。字面意思来说：repaint就是重绘，reflow就是回流。回流必将引起重绘，而重绘不一定会引起回流，repaint和reflow的目的是：展示一个新的页面样貌。
转载：
前端性能优化–yahoo前端性能团队总结的35条黄金定律
参考文章：
Web前端应该从哪些方面来优化网站? - 斯迪的回答 - 知乎
WEB前端性能优化常见方法
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，为什么要进行前端性能优化？ 怎么进行优化？ 优化到达的效果是什么？
