引入

在所有现代浏览器中，其默认的字体大小就是“16px”，所有未经调整的浏览器都符合: 1em=16px

em

是相对长度单位。相对于当前对象内文本的字体尺寸。如果当先元素设置 字体的font-size，则会继承父元素的大小。

<style>
.div1 {
   background:red;
   font-size:100px;
   width:1em;
   height:1em;
   margin-bottom:0.5em;
}
.div2 {
   background:blue;
   font-size:200px;
   width:1em;
   height:1em;
}
</style>
<div class="div1"></div>
<div class="div2"></div>

可以看出宽、高同样设置成1em* 1em 的两个元素，它们表现出来的大小却不一样，原因是em的大小由元素内部的font-size决定。

div1：1em = 100px ；div：1em = 200px。

rem

rem是CSS3新增的一个相对单位（root em，根em）,与em相比，相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

html {
   font-size:16px;
 }
//1rem相当于16px

设置rem的方法：

• js代码实现：

//640px宽度屏幕1rem = 20px，其他任意屏幕等比例放大缩小 1rem=  (screen_w/ 640) * 20;
    (function(){
      var screen_w = document.documentElement.clientWidth;
      var screen_h = document.documentElement.clientHeight;
      var fontSize = (screen_w / 640) * 20;
      var style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = 'html{font-size:' + fontSize + 'px}';
      document.getElementsByTagName('head').item(0).appendChild(style);
    })();

• 使用媒体查询：

@media screen  and (max-width: 750px){
    html {
        font-size:30px;
    }
}
@media screen and (min-width:640px) and (max-width:749px){
    html {
        font-size:25px;
    }
}
@media screen and (min-width:480px) and (max-width:639px){
    html { 
        font-size:20px; 
    }
}
@media screen and (min-width:320px) and (max-width:479px){
    html {
        font-size:15px;
    }
}

手机浏览器渲染网页的过程

• 渲染：将整个页面渲染在一个layout viewport蓝色区域，以保证页面排版正确。
• 缩放：将整个layout viewport缩放到visual viewport黄色区域大小，以保证页面在手机屏幕上被完整显示出来。

meta标签控制viewport

移动设备默认的viewport是layout viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• width：这里的width设置的是layout viewport，device-width为设备的宽度，也就是我们心中的ideal viewport大小，所以width=device-width的意思是将layout viewpport设置为ideal viewport的宽度。
• initial-scale：指定页面的初始缩放比例。比例为ideal viewport/layout viewport，当比例为1时，两者相等。
• maxinum-scale：允许用户对页面的最大缩放比例。
• mininum-scale：允许用户对页面的最小缩放比例。
• user-scalable：是否允许用户对页面进行手动缩放。

width和initial-scale效果一样，为什么要用2个相同功能的规则？

width=device-width在IPhone和IPad上存在兼容问题；
initial-scale=1.0在IE上存在兼容问题

设备像素（device pixel, dp）

计算机屏幕上的线都是不连续的，实际上它是由一个个点组成的，这些点就是屏幕上所能显示的最小单位——设备像素。

而实际上，一个设备像素点又可以细分为红、绿、蓝三种子像素（RGB色域）

如果直接让CSS像素等于设备像素，会存在两个问题

先介绍几个概念：屏幕分辨率、屏幕尺寸、屏幕像素、屏幕密度

• 屏幕尺寸：物理设备屏幕对角线的长度；
• 屏幕分辨率：物理设备屏幕上，竖向的高度上和横向的宽度上的像素块个数；
• 屏幕像素密度（PPI：Pixels Per Inch）：每英寸所拥有的像素数量；
• 屏幕像素：像素是没有实际的物理尺寸的，在同一个设备上，它的像素个数是固定的，是出厂时就设置好了的。只有不同的设备之间，才有像素大小的区别。

在同一个设备调整分辨率
例：屏幕推荐的分辨率1366px768px是在出厂时就已经设置好的，再怎么拉扯，这个数字是不会变了。然而调整屏幕分辨率到800px600px时，系统就会分配给你要设置的有效像素个数，其他的个数由系统通过一系列运算产生一个模拟色彩块，填充成正好1366*768个色彩块。这些拿来充数的像素块，和真实的像素块放到一起，组成新的分辨率。

1. 同样尺寸的屏幕，存在不同屏幕密度，以致于显示效果差异巨大：
   例如：同样是4寸的屏幕，大的屏幕密度为640x1136，小的屏幕密度为320x568。那么在这个情况下，如果让CSS像素直接等于设备像素设置，把CSS像素设置为为500x300，那么肉眼看下来尺寸相差有1倍多。
   

2. 不同尺寸，相同屏幕密度，会导致页面布局混乱：
   例如：两个不同分辨率的设备，在设置两个相同大小的元素时，由于分辨率小的设备宽度不够，会发生折行。
   

参考像素（reference pixel）

由来
不同的设备的物理像素的大小是不一样的（出厂时的屏幕尺寸和分辨率决定PPI），所以览器应该对CSS中的像素进行调节，使得浏览器中 1CSS像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致（否则会导致出现上面的两个问题）。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用**"参考像素"**来进行换算。

一个参考像素即为从一臂之遥(通常认为常人臂长为28英寸)看解析度为 96DPI 的设备输出(即1英寸96个设备像素点)时，1点(即一个设备像素点的物理大小：1/96英寸)的视角。所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

如图所示，当设备的典型观看距离越远时，参考像素就越大（注意这里的大，不是指视角变大，而是角度对应在屏幕上的尺寸变大）。对于两个不同DPI的设备（一个像素点的物理大小不一样），就需要不同个数的设备像素点来表示一个CSS像素，96DPI的设备需要1个物理像素，52.45DPI的设备需要大概2-3个物理像素点来表示。这就解释了对于不同尺寸的设备，1个CSS像素的显示都是差不多的。

定义

按照vue官方文档的说明，mixin是一个混入对象，k-v为任意组件选项，比如data、watch、computed、hook、assets、methods、props、injectd、provide，是一个公共对象，用来封装提取公共组件选项，再把它混合进入组件实例本身的选项，这就扩展了组件实例本身的选型，对同名选项又涉及到选项合并策略。

原理

  Vue.options = Object.create(null);
  ASSET_TYPES.forEach(function (type) {
    Vue.options[type + 's'] = Object.create(null);
  });

仅仅打开了1个页面，为什么有4个进程？

Webpack：JavaScript的模块打包工具

基本概念

在浏览器布局的时候，会把每一个HTML元素渲染成一个矩形的区域，盒模型就是对这个形状的一个抽象描述。

根据具体盒子的形状和组成，又可以对它由外到内进行细分：

标签内部的文本会在content内显示，可设置margin、padding的大小自由控制伸缩盒子。

就像我们买东西，收到的快递之后发现，本来就只有一部小小的手机（content），收到的却是那么大一个盒子。手机的包装盒和手机之间有间隔层（padding），手机盒子有厚度（border），手机盒子和快递箱之间还有一层泡沫板（margin）。这就是一个典型的盒子。

• 当margin、padding设置四个值的时候，依次分别为top、right、bottom、left，当哪条边缺失，就设置为对应边的值；
• margin设置为auto就由浏览器自适应计算外边距，可以用来自动居中；
• 在不考虑到BFC特性，margin 还有一个特点——纵向重叠：纵向两个元素的margin会发生叠加，取两者的最大值。

两种盒模型

根据设置box-sizing定义匹配某个区域的特定元素，分为标准W3C盒模型和IE盒模型，区别在于width 属性所包含的大小。

标准W3C盒模型 —— box-sizing：content-box

width = content

IE盒模型 —— box-sizing：border-box

width = 2 * border + 2 * padding + contentt

两者进行比较，把盒子设置为IE盒模型，不论内边距距，边框如何改变盒子的真实宽高都不会发生改变。

在自适应的网页中，容器里并排显示两个同样的盒子，宽度设置成50%，如何调整padding都会在两个盒子内部调整，不会影响页面布局。

“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。
那什么影响FP指标呢？其中一个重要的因素是网络加载速度。
不管你是使用HTTP，还是使用WebSocket，它们都是基于TCP/IP的，如果你对这些原理有足够了解，也就清楚如何去优化Web性能，或者能更轻松地定位Web问题了

互联网中的数据是通过数据包来传输的。如果发送的数据很大，那么该数据就会被拆分为很多小数据包来传输。

背景

初识项目时，发现在 packages.jon 中执行 npm run dev 其实就是 vue-cli-service serve，这与 vue-cli2 有所区别。找来找去没发现 webpack 的配置，那么为什么可以零配置的情况下跑起webpack？带着疑惑探索，发现 vue-cli3将webpack的基础配置全部内嵌了，并且预留了一个 vue.config.js 的js文件供我们对webpack进行自定义配置。

vue-cli3拥有良好的插件系统，通过vue-cli内置插件以及外部插件作用，动态修改webpack配置，使得在零配置webpack的基础上，也有高扩展性。 整个插件系统当中包含2个重要的组成部分：@vue/cli以及@vue/cli-service。@vue/cli提供cli服务，比如vue create。@vue/cli-service提供本地开发构建服务，比如vue-cli-service serve。这里我们分析下@vue/cli-service本地构建服务。

前言

鉴于JavaScript是一门单线程的语言，浏览器在同一时间内只能做一件事。正是由于这个特性，如果在执行代码的过程中需要等待某些数据或者行为准备完成后才能继续进行，而这个等待过程又会持续好几秒，这就会造成代码的阻塞。这就是同步带来的问题。

异步和等待队列

为了解决这个问题，就有了异步的概念。当同步代码顺序执行时，遇到了异步操作，此时会把该异步行为从CPU中释放出去，然后继续执行同步代码。而当异步完成后会把完成后的回调函数放入到等待队列，等主程序的同步代码执行完毕后，就去监测等待队列是否为空，不为空则按照“先进先出”的规则按序取出来执行。

宏任务和微任务

当执行栈为空时，从任务队列中取出异步回调放入CPU中执行。而又根据异步操作的类型，分为了宏任务队列和微任务队列，就两者执行的优先级而言，同一层级下微任务要高于宏任务。理解需要，把代码开始执行同步任务看成一个根宏任务，每当一个宏任务执行完后，都会优先检查微任务队列是否为空，为空则执行下一个宏任务，否则按序把微任务队列中的每个任务都执行完毕后再去执行下一个宏任务。也即：

执行下一个宏任务之前，微任务队列必须为空。
宏任务结束后开始检查渲染，然后GUI线程接管渲染。渲染完毕后，JS线程继续接管，开始下一个宏任务

常见微任务任务包括：

Promise的then的回调函数、async函数await下面的代码等一些ES6语法规定

常见宏任务包括：

定时器（setInterval和setTimeout）等一些由浏览器规定的

事件轮询

当执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件轮询（Event Loop）”的原因。

HTTP协议，正是建立在TCP连接基础之上的。HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如HTML文件、CSS文件、JavaScript文件、图片、视频等。此外，HTTP也是浏览器使用最广的协议。

在浏览器地址栏里键入地址：http://baidu.com， 那么接下来，浏览器会完成哪些动作呢？

主要原因是第一次加载页面过程中，缓存了一些耗时的数据。
DNS缓存 和 页面资源缓存这两块数据是会被浏览器缓存的

• 用户打开登录页面，在登录框里填入用户名和密码，点击确定按钮。点击按钮会触发页面脚本生成用户登录信息，然后调用POST方法提交用户登录信息给服务器。

• 服务器接收到浏览器提交的信息之后，查询后台，验证用户登录信息是否正确，如果正确的话，会生成一段表示用户身份的字符串，并把该字符串写到响应头的Set-Cookie字段里，如下所示，然后把响应头发送给浏览器

Set-Cookie:UID=3431uad;

• 浏览器在接收到服务器的响应头后，开始解析响应头，如果遇到响应头里含有Set-Cookie字段的情况，浏览器就会把这个字段信息保存到本地。比如把UID=3431uad保持到本地。

• 当用户再次访问时，浏览器会发起HTTP请求，但在发起请求之前，浏览器会读取之前保存的Cookie数据，并把数据写进请求头里的Cookie字段里（如下所示），然后浏览器再将请求头发送给服务器。

Cookie: UID=3431uad;

• 服务器在收到HTTP请求头数据之后，就会查找请求头里面的“Cookie”字段信息，当查找到包含UID=3431uad的信息时，服务器查询后台，并判断该用户是已登录状态，然后生成含有该用户信息的页面数据，并把生成的数据发送给浏览器。

• 浏览器在接收到该含有当前用户的页面数据后，就可以正确展示用户登录的状态信息了