前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。

而本文的主题 – 移动端开发的兼容适配与性能优化，就是希望能从一些常见的移动端开发问题出发，厘清 Web 移动端开发的前前后后，一些技术的发展过程，一些问题的优化手段以及给出一些常见的兼容性问题的解决方案。

什么是响应式设计

首先先聊聊响应式设计，这个与移动端开发有着密切的联系。

响应式设计即是 RWD，Responsive Web Design。

这里百度或者谷歌一下会有各种各样的答案。这里一段摘自知乎上我觉得很棒的一个答案：什么是响应式布局设计？

根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是 “Content is like water”，翻译成中文便是 “如果将屏幕看作容器，那么内容就像水一样”。

为什么要设计响应式界面

为什么要费神地尝试统一所有设备呢？

• 即便是 PC 或 Mac 用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
• 台式机、投影、电视、笔记本、手机、平板、手表、VR…… 智能设备正在不断增加，“主流设备” 的概念正在消失；
• 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别；
• 鼠标、触屏、笔、摄像头手势…… 不可预期的操控方式正在不断出现。

响应式界面的四个层次

• 同一页面在不同大小和比例上看起来都应该是舒适的；
• 同一页面在不同分辨率上看起来都应该是合理;
• 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
• 同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。

响应式界面的基本规则

• 可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面
  

• 可自由排布的内容区块：当页面尺寸变动较大时，能够减少 / 增加排布的列数
  

• 适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
  

• 能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
  

• 能够自动隐藏 / 部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
  

• 能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
  

• 放弃使用像素作为尺寸单位：用 dp(对于前端来说，这里可能是 rem) 尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕

上面一段我觉得已经涵盖了响应式设计的绝大部分，简单总结起来，可以概括为：

1. 媒体查询，边界断点的规则设定（Media queries && break point）
2. 内容的可伸缩性效果（Flexibel visuals）
3. 流式网格布局 (Fluid grids)
4. 主要内容呈现及图片的高质量 (Main content and high quality)

响应式 vs. 自适应

响应式设计是 Responsive Web Design（RWD），自适应设计是 Adaptive Web Design（AWD）。经常有人会将两者混为一谈，或者其实根本也区分不了所谓的响应式与自适应。

其实在我写这篇文章的时候，我也无法很好的去区分两者。

RWD 和 AWD 两者都是为了适配各种不同的移动设备，致力于提升用户体验所产生的的技术。核心思想是用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。通常认为，RWD 是 AWD 的子集。

RWD：Ethan Marcote 的文章是大家认为 RWD 的起源。他提出的 RWD 方案是通过 HTML 和 CSS 的媒体查询技术，配合流体布局实现。RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术。

AWD：Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 AWD 在包括 RWD 的 CSS 媒体查询技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。AWD 有可能会针对移动端用户减去内容，减去功能。AWD 可以在服务器端就进行优化，把优化过的内容送到终端上。

一图胜千言。

从定义上而言，RWD 是一套代码，适用于所有屏幕。而 AWD 则是多端多套代码。本文不会过多去纠结响应式与自适应区别，我觉得这两者的本质都是致力于适配不同设备，更好地提升用户体验。

Quora - Responsive Design vs. Adaptive Design?
zhihu – Responsive design 和 Adaptive design 的区别

渐进增强 vs. 优雅降级

• 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

• 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　

渐进增强 / 优雅降级通常是 AWD 会牵扯到的另一个技术术语。本质上而言即是随着屏幕的大小的改变，功能会一点一点增强。

也通常会用在一些高级 CSS3 属性上，我们对一些 CSS 属性进行特性检测，甚至不进行特性检测直接使用。后果是在支持它的网页上该属性正常展示，而不支持它的网页该属性不生效，但也不影响用户的基本使用。

典型的例子是 CSS3 逐渐被大众认可并被使用，PC 端页面开始由 IE678 向兼容性更好的 IE9+，chrome，firefox 浏览器转变的时期。我们可以对页面元素直接使用阴影，圆角等属性。对于不支持它的低版本 IE 而言，没有什么损失，而对于支持它的高级浏览器而言，带给了用户更好的交互视觉体验，这就是渐进增强。

移动端屏幕适配方案

下面会针对一些具体的案例，展开讲讲。第一个是高保真还原设计稿，也就是如何适配移动端繁杂的屏幕大小。

通常而言，设计师只会给出单一分辨率下的设计稿，而我们要做的，就是以这个设计稿为基准，去适配所有不同大小的移动端设备。

在此之前，有一些基础概念需要理解。

一些概念性的东西，大部分人很难一次性记住，或者记了又忘，我觉得记忆这个东西比较看技巧，比如关联法，想象法，把这些生硬的概念与一些符合我们常识的知识关联在一起记忆，往往能够事半功倍。

设备独立像素

以 iPhone6/7/8 为例，这里我们打开 Chrome 开发者工具：

这里的 375 * 667 表示的是什么呢，表示的是设备独立像素（DIP），也可以理解为 CSS 像素，也称为逻辑像素：

设备独立像素 = CSS 像素 = 逻辑像素

如何记忆呢？这里使用 CSS 像素来记忆，也就是说。我们设定一个宽度为 375px 的 div，刚好可以充满这个设备的一行，配合高度 667px ，则 div 的大小刚好可以充满整个屏幕。

物理像素

OK，那么，什么又是物理像素呢。我们到电商网站购买手机，都会看一看手机的参数，以 JD 上的 iPhone7 为例：

可以看到，iPhone7 的分辨率是 1334 x 750，这里描述的就是屏幕实际的物理像素。

物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为 pt。

设备像素 = 物理像素

DPR（Device Pixel Ratio） 设备像素比

OK，有了上面两个概念，就可以顺理成章引出下一个概念。DPR（Device Pixel Ratio） 设备像素比，这个与我们通常说的视网膜屏（多倍屏，Retina 屏）有关。

设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系。

简单的计算公式：

DPR = 物理像素 / 设备独立像素

我们套用一下上面 iPhone7 的数据（取设备的物理像素宽度与设备独立像素宽度进行计算）：

iPhone7’s DPR = iPhone7’s 物理像素宽度 / iPhone7’s 设备独立像素宽度 = 2

750 / 375 = 2
或者是 1334 / 667 = 2

可以得到 iPhone7 的 dpr 为 2。也就是我们常说的视网膜屏幕。

视网膜（Retina）屏幕是苹果公司 “发明” 的一个营销术语。 苹果公司将 dpr > 1 的屏幕称为视网膜屏幕。

在视网膜屏幕中，以 dpr = 2 为例，把 4(2x2) 个像素当 1 个像素使用，这样让屏幕看起来更精致，但是元素的大小本身却不会改变：

OK，我们再来看看 iPhone XS Max：

它的物理像素如上图是 2688 x 1242，

它的 CSS 像素是 896 x 414，很容易得出 iPhone XS Max 的 dpr 为 3。

上面三个概念（CSS 像素、设备独立像素、DPR）是我觉得比较重要的，还有一些其他比较重要的概念 PPI、DPI 不影响后续的内容，可以自行去加深理解。

OK，到这里我们就完成了一个小的里程碑。我们通常说的 H5 手机适配也就是指的这两个维度：

1. 适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素
2. 适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题

适配不同屏幕大小

适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素。最早移动端屏幕 CSS 像素适配方案是 CSS 媒体查询。但是无法做到高保真接近 100% 的还原。

适配不同屏幕大小其实只需要遵循一条原则，确保页面元素大小的与屏幕大小保持一定比例。也就是：按比例还原设计稿

假设我们现在拿到标注为 375*667 的大小的设计稿，其中一个元素的标注如下：

以页面宽度为基准的话，那么，

• 元素的宽度为：209/375 = 55.73%
• 元素的高度为：80/375 = 21.33%
• 元素的上左右边距依次计算…

这样，无论屏幕的 CSS 像素宽度是 320px 还是 375px 还是 414px，按照等量百分比还原出来的界面总是正确的。

然而，理想很丰满，现实很骨感。实现上述百分比方案的核心需要一个全局通用的基准单位，让所有百分比展示以它为基准，但是在 CSS 中，根据 CSS Values and Units Module Level 4 的定义：

百分比值总要相对于另一个量，比如长度。每个允许使用百分比值的属性，同时也要定义百分比值参照的那个量。这个量可以是相同元素的另一个属性的值，也可以是祖先元素的某个属性的值，甚至是格式化上下文的一个度量（比如包含块的宽度）。

具体来说：

• 宽度（width）、间距（maring/padding）支持百分比值，但默认的相对参考值是包含块的宽度；

• 高度（height）百分比的大小是相对其父级元素高的大小；

• 边框（border）不支持百分值；

• 边框圆角半径（border-radius）支持百分比值，但水平方向相对参考值是盒子的宽度，垂直方向相对参考值是盒子的高度；

• 文本大小（font-size）支持百分比值，但相对参考值是父元素的 font-size 的值；

• 盒阴影（box-shadow）和文本阴影（text-shadow）不支持百分比值；

首先，支持百分比单位的度量属性有其各自的参照基准，其次并非所有度量属性都支持百分比单位。所以我们需要另辟蹊径。

rem 适配方案

在 vw 方案出来之前，最被大众接受的就是使用 rem 进行适配的方案，因为 rem 满足上面说的，可以是一个全局性的基准单位。

rem（font size of the root element），在 CSS Values and Units Module Level 3 中的定义就是， 根据网页的根元素来设置字体大小，和 em（font size of the element）的区别是，em 是根据其父元素的字体大小来设置，而 rem 是根据网页的跟元素（html）来设置字体大小。

flexible

基于此，淘宝早年推行的一套以 rem 为基准的适配方案：lib-flexible。其核心做法在于：

• 根据设备的 dpr 动态改写 <meta> 标签，设置 viewport 的缩放
• 给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
• 根据 document.documentElement.clientWidth 动态修改 <html> 的 font-size ，页面其他元素使用 rem 作为长度单位进行布局，从而实现页面的等比缩放

关于头两点，其实现在的 lib-flexible 库已经不这样做了，不再去缩放 Viewport，字体大小的设定也直接使用了 rem

hotcss

hotcss 不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用 hotcss 可以让移动端布局开发更容易。本质的思想与 flexible 完全一致。

对于 rem 方案的一些总结

使用 flexible/hotcss 作为屏幕宽度适配解决方案，是存在一些问题的：

1. 动态修改 Viewport 存在一定的风险的，譬如通过 Viewport 改变了页面的缩放之后，获取到的 innerWidth/innerHeight 也会随之发生变化，如果业务逻辑有获取此类高宽进行其他计算的，可能会导致意想不到的错误；

到今天，其实存在很多在 flexible 基础上演化而来的各种 rem 解决方案，有的不会对 Viewport 进行缩放处理，自行处理 1px 边框问题。

2. flexible/hotcss 都并非纯 CSS 方案，需要引入一定的 Javascript 代码
3. rem 的设计初衷并非是用于解决此类问题，用 rem 进行页面的宽度适配多少有一种 hack 的感觉
4. 存在一定的兼容性问题，对于安卓 4.4 以下版本系统不支持 viewport 缩放（当然，flexible 处理 Android 系列时，始终认为其 dpr 为 1，没有进行 viewport 缩放）

vw 适配方案

严格来说，使用 rem 进行页面适配其实是一种 hack 手段，rem 单位的初衷本身并不是用来进行移动端页面宽度适配的。

到了今天，有了一种更好的替代方案，使用 vw 进行适配 。

百分比适配方案的核心需要一个全局通用的基准单位，rem 是不错，但是需要借助 Javascript 进行动态修改根元素的 font-size，而 vw/vh（vmax/vmin） 的出现则很好弥补 rem 需要 JS 辅助的缺点。

根据 CSS Values and Units Module Level 4：vw等于初始包含块（html 元素）宽度的 1%，也就是

• 1vw 等于 window.innerWidth 的数值的 1%
• 1vh 等于window.innerHeight 的数值的 1%

再以上面设计稿图的元素为例，那么，

• 元素的宽度为：209/375 = 55.73% = 55.73vw
• 元素的高度为：80/375 = 21.33% = 21.33vw
• 元素的上左右边距依次计算…

根据相关的测试，可以使用 vw 进行长度单位的有：

• 容器大小适配，可以使用 vw
• 文本大小的适配，可以使用 vw
• 大于 1px 的边框、圆角、阴影都可以使用 vw
• 内距和外距，可以使用 vw

简单的一个页面，看看效果，完全是等比例缩放的效果：

CodePen Demo（移动端打开）：使用 vw 进行页面适配

自动转换插件

当我们使用 rem 作为长度单位的时，通常会有借助 Sass/Less 实现一个转换函数，像是这样：

1
2
3
4
5
6

// 假设设计稿的宽度是 375px，假设取设计稿宽度下 1rem = 100px
$baseFontSize: 100;
 
@function px2rem($px) {
    @return $px / $baseFontSize * 1rem;
}

同理，在 vw 方案下，我们只需要去改写这个方法：

1
2
3
4

// 假设设计稿的宽度是 375px
@function px2rem($px) {
    @return $px / 375 * 100vw;
}

当然，我们还可以借助一些插件包去实现这个自动转换，提高效率，譬如 postcss-px-to-viewport

vw polyfill

vw 现在毕竟还是存在兼容问题的，看看兼容性：

其实已经覆盖了绝大部分设备，那么如果业务使用了且又真的出现了兼容问题，应该怎么处理呢？有两种方式可以进行降级处理：

• CSS Houdini：通过 CSS Houdini 针对 vw 做处理，调用 CSS Typed OM Level1 提供的 CSSUnitValue API。
• CSS Polyfill：通过相应的 Polyfill 做相应的处理，目前针对于 vw 单位的 Polyfill 主要有：vminpoly、Viewport Units Buggyfill、vunits.js 和 Modernizr

对于 vw 方案的一些总结

vw 确实看上去很不错，但是也是存在它的一些问题：

1. 也没能很好的解决 1px 边框在高清屏下的显示问题，需要自行处理
2. 由于 vw 方案是完全的等比缩放，在完全等比还原设计稿的同时带来的一个问题是无法很好的限定一个最大最小宽度值，由于 rem 方案是借助 Javascript 的，所以这一点 rem 比 vw 会更加的灵活

当然，两个方案现阶段其实都可以使用甚至一起搭配使用，更多详情可以读读：

• 再聊移动端页面的适配
• H5 必知必会之像素级还原设计稿
• Responsive And Fluid Typography With vh And vw Units
• 使用 VH 和 VW 实现真正的流体排版

1px 线

上面说到使用 vw 适配屏幕大小方案，其中有一个缺点就是在 Retina 屏下，无法很好的展示真正的 1px 物理像素线条。

设计师想要的 retina 下 border: 1px，其实是 1 物理像素宽，而不是 1 CSS 像素宽度，对于 CSS 而言：

• 在 dpr = 1 时，此时 1 物理像素等于 1 CSS 像素宽度；
• 在 dpr = 2 时，此时 1 物理像素等于 0.5 CSS 宽度像素，可以认为 border-width: 1px 这里的 1px 其实是 1 CSS 像素宽度，等于 2 像素物理宽度，设计师其实想要的是 border-width: 0.5px;
• 在 dpr = 3 时，此时 1 物理像素等于 0.33 CSS 宽度像素，设计师其实想要的是 border: 0.333px

然而，并不是所有手机浏览器都能识别 border-width: 0.5px，在 iOS7 以下，Android 等其他系统里，小于 1px 的单位会被当成为 0px 处理，那么如何实现这 0.5px、0.33px 呢？

这里介绍几种方法：

• 渐变实现
• 使用缩放实现
• 使用图片实现（base64）
• 使用 SVG 实现（嵌入 background url）

Retina 屏幕下 1px 线的实现

图片适配及优化

图像通常占据了网页上下载资源绝的大部分。优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能。

通常可以，有一些通用的优化手段：

1. 消除多余的图像资源
2. 尽可能利用 CSS3\SVG 矢量图像替代某些光栅图像
3. 谨慎使用字体图标，使用网页字体取代在图像中进行文本编码
4. 选择正确的图片格式
5. 为不同 DPR 屏幕提供最适合的图片尺寸

本文重点关注如何在不同的 dpr 屏幕下，让图片看起来都不失真。

首先就是上述的第二点，尽可能利用 CSS3\SVG 矢量图像替代某些光栅图像。某些简单的几何图标，可以用 CSS3 快速实现的图形，都应该尽量避免使用光栅图像。这样能够保证它们在任何尺寸下都不会失真。

其次，实在到了必须使用光栅图像的地步，也是有许多方式能保证图像在各种场景下都不失真。

无脑多倍图

在移动端假设我们需要一张 CSS 像素为 300 x 200 的图像，考虑到现在已经有了 dpr = 3 的设备，那么要保证图片在 dpr = 3 的设备下也正常高清展示，我们最大可能需要一张 900 x 600 的原图。

这样，不管设备的 dpr 是否为 3，我们统一都使用 3 倍图。这样即使在 dpr = 1，dpr = 2 的设备上，也能非常好的展示图片。

当然这样并不可取，会造成大量带宽的浪费。现代浏览器，提供了更好的方式，让我们能够根据设备 dpr 的不同，提供不同尺寸的图片。

srcset 配合 1x 2x 像素密度描述符

简单来说，srcset 可以根据不同的 dpr 拉取对应尺寸的图片：

1
2
3
4
5
6

<div class='illustration'>
  <img src='illustration-small.png'
       srcset='images/illustration-small.png 1x,
               images/illustration-big.png 2x'
       style='max-width: 500px'/>
</div>

上面 srcset 里的 1x，2x 表示 像素密度描述符，表示

• 当屏幕的 dpr = 1 时，使用 images/illustration-small.png 这张图
• 当屏幕的 dpr = 2 时，使用 images/illustration-big.png 这张图

srcset 属性配合 sizes 属性 w 宽度描述符

上面 1x，2x 的写法比较容易接受易于理解。

除此之外，srcset 属性还有一个 w 宽度描述符，配合 sizes 属性一起使用，可以覆盖更多的面。

以下面这段代码为例子：

1
2
3
4
5
6
7

<img
        sizes = “(min-width: 600px) 600px, 300px"
        src = "photo.png"
        srcset = “photo@1x.png 300w,
                       photo@2x.png 600w,
                       photo@3x.png 1200w,
>

解析一下：

sizes = “(min-width: 600px) 600px, 300px"的意思是，如果屏幕当前的 CSS 像素宽度大于或者等于 600px，则图片的 CSS 宽度为 600px，反之，则图片的 CSS 宽度为 300px。

也就是 sizes 属性声明了在不同宽度下图片的 CSS 宽度表现。这里可以理解为，大屏幕下图片宽度为 600px，小屏幕下图片宽度为 300px。（具体的媒体查询代码由 CSS 实现）

这里的 sizes 属性只是声明了在不同宽度下图片的 CSS 宽度表现，而具体使图片在大于 600px 的屏幕上展示为 600px 宽度的代码需要另外由 CSS 或者 JS 实现，有点绕。

srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w里面的 300w，600w，900w 叫宽度描述符。怎么确定当前场景会选取哪张图片呢？

1. 当前屏幕 dpr = 2 ，CSS 宽度为 375px。

当前屏幕 CSS 宽度为 375px，则图片 CSS 宽度为 300px。分别用上述 3 个宽度描述符的数值除以 300。

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

上面计算得到的 1、 2、 4 即是算出的有效的像素密度，换算成和 x 描述符等价的值 。这里 600w 算出的 2 即满足 dpr = 2 的情况，选择此张图。

2. 当前屏幕 dpr = 3 ，CSS 宽度为 414px。

当前屏幕 CSS 宽度为 414px，则图片 CSS 宽度仍为 300px。再计算一次：

1. 300 / 300 = 1
2. 600 / 300 = 2
3. 1200 / 300 = 4

因为 dpr = 3，2 已经不满足了，则此时会选择 1200w 这张图。

3. 当前屏幕 dpr = 1 ，CSS 宽度为 1920px。

当前屏幕 CSS 宽度为 1920px，则图片 CSS 宽度变为了 600px。再计算一次：

1. 300 / 600 = .5
2. 600 / 600 = 1
3. 1200 / 600 = 2

因为 dpr = 1，所以此时会选择 600w 对应的图片。

具体的可以试下这个 Demo：CodePen Demo – srcset 属性配合 w 宽度描述符配合 sizes 属性

此方案的意义在于考虑到了响应性布局的复杂性与屏幕的多样性，利用上述规则，可以一次适配 PC 端大屏幕和移动端高清屏，一箭多雕。

了解更多细节，推荐看看：

• Google Web Fundamentals – Web Responsive Images
• 响应式图片 srcset 全新释义 sizes 属性 w 描述符

字体适配方案

字体大小

字体是很多前端开发同学容易忽略的一个点，但是其中也是有很多小知识点。

首先要知道，浏览器有最小字体限制：

• PC 上最小 font-size=12px
• 手机上最小 font-size=8px

如果小于最小字体，那么字体默认就是最小字体。

其次，很多早期的文章规范都建议不要使用奇数级单位来定义字体大小（如 13px，15px…），容易在一些低端设备上造成字体模糊，出现锯齿。

字体的选择展示

在字体适配上面，我们需要从性能和展示效果两个维度去考虑。

完整的一个字体资源实在太大了，所以我们应该尽可能的使用用户设备上已有的字体，而不是额外去下载字体资源，从而使加载时间明显加快。

而从展示效果层面来说，使用系统字体能更好的与当前操作系统使用的相匹配，得到最佳的展示效果。所以我们在字体使用方面，有一个应该尽量去遵循的原则，也是现在大部分网站在字体适配上使用的策略：

使用各个支持平台上的默认系统字体。

兼顾各个操作系统

常见的操作系统有 Windows、Windows Phone、Mac OS X、iPhone、Android Phone、Linux。当然对于普通用户而言，无须关注 Linux 系统。

下面就以 CSS-Trick 网站最新的 font-family 为例，看看他们是如何在字体选择上做到适配各个操作系统的

1
2
3
4
5
6

{
  font-family:
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

font-family 关键字

对于 CSS 中的 font-family 而言，它有两类取值。

1. 一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial;

2. 一类是通用字体族名，它是一种备选机制，用于在指定的字体不可用时给出较好的字体，类似这样：font-family: sans-serif 。

其中，sans-serif 表无衬线字体族，例如， “Open Sans”, “Arial” “微软雅黑” 等等。

关于通用字体族名，在 CSS Fonts Module Level 3 – Basic Font Properties 中，定义了 5 个，也就是我们熟知的几个通用字体族名：

1. serif 衬线字体族
2. sans-serif 非衬线字体族
3. monospace 等宽字体，即字体中每个字宽度相同
4. cursive 草书字体
5. fantasy 主要是那些具有特殊艺术效果的字体

新增通用字体族关键字

而在 CSS Fonts Module Level 4 – Generic font families 中，新增了几个关键字：

• system-ui 系统默认字体
• emoji 用于兼容 emoji 表情符号字符
• math 适用于数学表达式
• fangsong 此字体系列用于中文的（仿宋）字体。

我们看看用的最多的 system-ui。

system-ui

简单而言，font-family: system-ui 的目的就是在不同的操作系统的 Web 页面下，自动选择本操作系统下的默认系统字体。

默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。

San Francisco Fonts

OK，简单了解了 system-ui字体族。但是像 -apple-system、BlinkMacSystemFont 没有在最新的标准里出现。它们又代表什么意思呢？

在此之前，先了解下 San Francisco Fonts 。

San Francisco Fonts 又叫旧金山字体，是一款西文字体。随着 iOS 9 更新面世，在 WatchOS 中随 Apple Watch 一起悄然发售，并且还将在 Apple TV 上的新 tvOS 中使用。

San Francisco Fonts 在 iOS 系统上用于替代升级另外一款西文字体 Helvetica Neue。Apple 做了一些重要的改变，使其成为平台上更好的， 甚至是完美的西文字体。

-apple-system/BlinkMacSystemFont

话说回来。正如每个前端开发人员都知道的那样，将一个功能纳入规范是一回事，将其纳入浏览器又是另一回事。

幸运的是，system-ui 的普及很快。 Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。

看看 system-ui 的兼容性，Can i Use – system-ui(图片截取日 2019-08-13)：

仔细看上图的最后两行：

• Supported as the -apple-system value (only on macOS and iOS)
• Supported as the BlinkMacSystemFont value (only on macOS)

考虑到不同平台及向后兼容，在 macOS 和 iOS 上，我们需要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准。

Segoe UI

Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。

它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 可以在 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。

Roboto

Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为 “现代的、但平易近人” 和“有感情”的。

这个字体家族包含 Thin、Light、Regular、Medium、Bold、Black 六种粗细及相配的斜体。

总结一下

到此，我们可以总结一下了。以 CSS-Tricks 网站的 font-family 定义为例子：

1
2
3
4
5
6

{
  font-family:
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}

1. system-ui，使用各个支持平台上的默认系统字体
2. -apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts
3. BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
4. segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
7. sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体

上述 5 个字体族定义，优先级由高到底，可以看到，它们 5 个都并非某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。

涵盖了 iOS、MAC OS X、Android、Windows、Windows Phone 基本所有用户经常使用的主流操作系统。

使用系统默认字体的主要原因是性能。字体通常是网站上加载的最大 / 最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。

并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。

当然，上述 font-family 的定义不一定是最佳的。譬如天猫移动端在 font-family 最前面添加了 "PingFang SC",miui,..必定也有他们的业务上的考虑。但是一些 fallback 方案向后兼容的思想都是一致的，值得参考学习。

更多的关于字体方面的细节知识，可以看看这几篇文章：

• 你该知道的字体 – font-family
• Web 字体 font-family 再探秘
• Using UI System Fonts In Web Design: A Quick Practical Guide
• System Fonts in CSS
• Apple’s San Francisco Font

前端布局的兼容适配

前端工程师的一大工作内容就是页面布局。无论在 PC 端还是移动端，页面布局的兼容适配都是重中之重。在整个前端发展的历程中，布局的方法也在不断的推陈出新。

布局发展历程

简单来说，前端的布局发展历程经历了下面几个过程：

表格布局 –> 定位布局 –> 浮动布局 –> flexbox 布局 –> gridbox 布局

每一种布局在特定时期都发挥了重要的作用，而每一种新的布局方式的出现，往往都是因为现有的布局方式已经在该时期已经无法很好的满足开发者的需求，无法满足越来越潮流的页面布局的方式。

以 Flexbox 的出现为例子，在 Flexbox 被大家广为接受使用之前。我们一直在使用定位 + 浮动的布局方式。像下面这个布局：

容器宽度不定，内部三个元素，均分排列且占满整个空间，并且垂直居中。如果使用定位 + 浮动的布局方式，你无法很快想到最佳的解决方式。三个元素并排那么必然需要浮动或者绝对定位，容器宽度不定且中间元素始终居中，需要顾虑的方面就很多了。也许使用 text-align: justufy 可以 hack 实现，等等等等。

然而，使用 flexbox 布局的话，只需要：

1
2
3
4
5

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

flexbox 的出现，一次性解决了流动布局，弹性布局，排列方式等多个问题。并且它是简洁的，可控的。

再来看一个例子，水平垂直居中一个元素。使用 flexbox 也许是最便捷的：

1
2
3
4
5
6
7

.container {
    display: flex;
}
 
.item {
    margin: auto;
}

最便捷的垂直居中方式

CSS Grid Layout

OK，flexbox 已经足够优秀了，为什么 gird 网格布局的出现又是为什么？它解决了什么 flex 布局无法很好解决的问题？

看看下面这张图：

flexbox 是一维布局，他只能在一条直线上放置你的内容区块；而 grid 是一个二维布局。它除了可以灵活的控制水平方向之外，还能轻易的控制垂直方向的布局模式。对于上图那样的九宫格布局，它就可以轻而易举的完成。

一图以蔽之，flexbox：

gridbox：

图片截取自陈慧晶老师在 2019 第五届 CSS 大会上的分享 – 新时代 CSS 布局

在现阶段，移动端布局应当更多使用 flexbox 去完成（相对那些还在使用 float 布局的），而考虑到未来页面布局的推陈出新。对于 Grid 布局我们应当像前几年对待 flexbox 一样，重视起来，随着兼容性的普及，Grid 布局也会慢慢成为主流。

Unsplash Source

https://unsplash.it/1600/900?random（据说国内加载略慢，我试了一下还好都差不多）

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture（必应每日图片）https://uploadbeta.com/api/pictures/random（必应图库，一些风景图人物图什么的，都是现代风格）

https://source.unsplash.com/random（风格同上，但这个的图尺寸不是大图）

下面是几个二次元的, 都差不多ヽ (´o｀（大部分都在本地测试过，可以放心食用），但是以下这些唯一的问题就是。。有些图片质量参差不齐。。所以要想完全和自己口味的话还是自己做一个吧，有开源代码

首先最牛逼的大概就是「漫月 API」了，一直被模仿从未被超越那种╮(￣▽￣””)╭

https://www.xwboke.cn/api/api.php （出处被不小心遗忘在风中了，对不住了 0.0）

https://img.xjh.me/random_img.php 出处 (・ω・) ノ

http://www.dmoe.cc/random.php（1000+）出处 (・ω・) ノ

http://acg.bakayun.cn/randbg.php（6000+ | 东方 project 可选 | 多尺寸）出处 (・ω・) ノ

https://acg.yanwz.cn/api.php (400+) 出处 (・ω・) ノ

http://moece.cc/apl/img.php（433+）出处 (・ω・) ノ

https://random.52ecy.cn/random.php (8000+) 出处 (・ω・) ノ！！这个我用不了，当前接口需要认证啥的 emmmmm

https://acg.moedragon.com/api.php (1000+) 出处 (・ω・) ノ

http://api.3ewl.cc/acg/img.php（1000+ | 尺寸可选） 出处 (・ω・) ノ 下面这篇是作者的博客随机图片 api–开源

https://acg.toubiec.cn/random.php（1000+） 出处 (・ω・) ノ 作者开源了 这篇博客里有介绍和源码 先蟹蟹大佬了[项目]随机二次元图片 API - 已经开源

mark 一下慢慢研究➡️ 一个可在 php 中直接输出随机图片的 API

转载自： 几个随机图片API接口(给hexo设置随机背景图片)

HTML Email的编写

总结回顾

• 这样回答继承，面试官可能更满意
• 箭头函数和普通函数的10个区别
• html 空白汉字占位符

• 我想了解更多判断数组的方式

  一、HTML Email的编写开发场景

• 你下单 可能 电商会给你发一份 详情邮件

• 招行可能给你发下你的账单邮件
• 生日了给你发个邮件
• 转正了给你发个邮件
• 入职周年邮件

二、遇到的问题

Email的兼容性很差

邮件内容所在上下文或者说所在外部容器（以下简称环境）都是由邮箱服务商决定的，不同的邮件服务商对前端样式布局支持都存在在一些差别。这就要求邮件内容需要在任何一种情况下都要正常兼容显示。

Email容器不同

你写的邮件前端代码可能被放在一个iframe中，那你的内容是被放在body里面的；可能放在一个div中，你的内容就被放在这个div里面。

Email自带设置

邮箱软件本身设置设置了些css，他可能对你产生未知的影响。可能根本没有申明doctype，即使申明了，也不是你想要的doctype。

避免被嵌套在不正确的容器里

因为容器可能是body或div，我们邮件内容不应该是一个完整的html。所以邮件内容应该是以div为根节点的html片段。

三、环境（外部容器）

我们写的邮件代码在不用的邮件服务商下，对应的外部容器不太一样。

QQ邮箱：自己编写的内容被嵌套在一个div中

outlook邮箱：自己编写的内容不知道被嵌套什么元素里了，它本身的元素加上我编写的元素被混在一起了

其他的邮箱你们可以自己测试一下

四、开发的Doctype

一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。使用这个Doctype，也就意味着，不能使用HTML5的语法。

五、开发的布局

• 网页的布局（layout）推荐使用表格（table）
• css内嵌，不能在head标签中写style，也不能外联。
• 不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中可以识别，但是在outlook中无法识别。

• 为了保证兼容性，需要把邮件的宽度设置为600px，最大600px；

  

网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。 在内层，放置第二个表格。用来展示内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。

六、开发的样式

• 避免css冲突或被覆盖
• 尽量使用div、span等无语义标签。
• 尽量避免CSS属性值的简写形式
• font-size:0; 很重要，否则qq邮箱 会自动填写很多空格，影响布局
• 减少不必要的间隙和空格等存在，影响页面美感

  1 2 3 4 5

  <!-- 错误的写法 --> <div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"> <!-- 推荐写法 --> <div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">

所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况 另外，不要采用CSS的简写形式，有些客户端不支持。因为环境中可能已经设置了css，比如一些reset、一些.class。 所以我们只能使用行内style来确保我们的效果，并且在内容根节点上设置基础style，并且尽量使用div、span等无语义标签。

七、开发图片

• 少用img，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片
• 需要img的话，一定要写好alt和title；
• Outlook中img最高1728px，超过1728 的部分会被截掉
• Outlook可能自动缩小img，使其最高位1728px，（上次测试没缩放，直接裁了）
• 建议剪裁img，堆叠在一起
• 有些客户端会给img链接加上边框，要去除边框。

  1 2 3 4 5

  <img border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;">

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。 有些客户端会给图片链接加上边框，要去除边框。 需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。

八、开发的background

• 少用background 推荐尽可能使用切割的img
• Gmail也不支持css里面的背景图

• 在outlook2007、Outlook2010中，背景图片将无法显示

  

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。 有些客户端会给图片链接加上边框，要去除边框。 需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。

九、email兼容总结

• 最好使用TABLE标签布局 ，通过tr td来控制距离 空白区域等
• 每个标签设置：margin:0;padding:0;font-size:0;（注意拆开写）
• 设置 width, height
• 少用img ,少用background
• 邮件不支持js，a标签慎用
• 在使用行高前建议添加mso-line-height-rule:exactly
• margin:0; padding: 0;colspan=“1” height=“375” 顺序不可换

客户端：foxmail outlook QQ邮箱 为了应付Email的怪癖，花了很多时间测试，确保搞定了所有Outlook的坑洼沟洄 但是….还是不可避免有兼容问题 如果你只要兼容 Foxmail and qq邮箱，那你几乎可以像写web一样写邮件。 由于邮件客户端对css支持各有不同，所以一定要多测试再发送，保证样式的正确。如果出现了不兼容的情况，一定要耐心的使用最简单的方式进行兼容，尽量少用特殊标签及比较复杂的属性。

• sindresorhus/alfy
• Node.js库Puppeteer常用API及骚操作总结

• Script Filter JSON Format
• 用 Node.js 把玩一番 Alfred Workflow
• Node.js 开发 Alfred workflow 初体验

原文地址：写个Alfred Workflow，方便看电视剧

Alfred鼎鼎大名，有人说，Mac自带Spotlight,不也一样吗？不一样，Alfred最厉害的是workflow，利用它你可以查询GitHub项目，查API文档，查单词，查IP等等。

当然除了网上一些的workflow之外，我们往往也都有自己的个性化需求，这时就可以自己尝试写几个。我就有这样的需求，所以花了点时间，把玩了下，这里以一个电视剧检索插件为例，记录下编写中要点。

初始化Workflow

打开Alfred设定，点击左下角的加号，选择blank Workflow

按照提示，填写名称，分类，描述等。

添加ScriptFilter

我这里因为需要利用脚本去实现，所以选择添加Script filter.右键 => inputs => Script Filter
依次填写信息

这里的language可还算丰富，我考虑使用NodeJS来实现脚本，所以选择bash,利用bash去执行Node，这里填写脚本如下

/usr/local/bin/node yy.js "{query}"

{query}指的是在alfred输入框中参数

说明

• keyword指的是唤起Alfred，输入的关键词，比如这里我写yy，即输入yy，会进入该插件，参数上，我选择可空
• placeholder指的是还没返回结果前的提示信息

具体脚本实现

上面的脚本确保了在用户唤起Alfred，输入yy及参数执行了yy脚本，那么下来就是脚本具体实现，从而返回结果给Alfred了

const cheerio = require('cheerio');const axios = require('axios');const fs = require('fs');const url = 'http://ly6080.com.cn'const keyword = process.argv[2];console.error(keyword);async function searchMovies() {    const res = await axios.get(url + '/index.php?m=vod-search&wd=' + encodeURI(keyword));    const $ = cheerio.load(res.data);    const arr = $('.index-area').find('li');    const result_array = [];    for (let i = 0; i < arr.length; i++) {        const item = arr.eq(i);        const actors = [];        item.find('.actor').each(function (i, elem) {            actors.push($(this).text());        });        const imgUrl = item.find('img').attr('data-original');        const imgName = imgUrl.slice(imgUrl.lastIndexOf('/') + 1);        if (!fs.existsSync('./thumbs/' + imgName)) {            const imgData = (await axios.get(imgUrl, { responseType:"arraybuffer" })).data;            fs.writeFileSync('./thumbs/' + imgName,imgData);        }        result_array.push({            title: item.find('.name').text(),            subtitle: actors.join('/'),            arg: url + item.find('.link-hover').attr('href'),            icon: {                path: __dirname + '/thumbs/' + imgName            }        })    }    console.log(JSON.stringify({ items: result_array }));}searchMovies();

说明

• Alfred对返回结果的结构是有要求的，所以最后console打印的对象结构是必须如此的，具体结构看官方文档
• js脚本里的结果，是以log形式传给bash命令，也就是流入alfred，假如注掉最后一句话，会失效
• 我这里因为想实现电影海报的展示，所以实现了图片的本地缓存化，当然弊端就是延迟明显，为了降低延迟，所以做了点判断，如果有就不再下载。

添加action-打开URL

当前面得到了检索的目标影片信息后，那么就应该是打开URL了，所以选中刚才的Script Filter，右键 => Insert After => Actions => Open URL,query就是上一步结果中的arg

添加通知

为了进一步提升体验，来个通知，右键 => Insert After => Outputs => Post Notification

最终效果

写在最后

以前为了看电视剧，需要打开浏览器，输入网址，搜索电视，点击观看，总共有4部，现在只需要唤起Alfred，输入yy 超人，选择要看的电视，回车即可以观看。节约点时间，这就再开心不过了。

插件托管进alfred-workflows

vim有三种模式，基本模式就是用来输入命令的，比如删除跳转等操作就是在基本模式下面；插入模式不用说；命令模式就是按Esc+:进入的模式，之间的切换很容易我就废话了。下面几乎都在基本模式操作。

基本操作

移动

h,l,j,k 左右下上
w,b 移动到下/上一个单词

快速退出

普通模式下输入Shift+zz即可保存退出vim

进入插入模式

i 在当前光标处进行编辑
I，A 在行首/末插入

a 在光标后插入编辑

o，O 在当前行后/前插入一个新行
cw 删除一个单词，同时进入插入模式

文档编辑

文档编辑的所有命令全部符合一个规律，[操作]+[行号]+定位，三个部分完成一个动作

比如：删除操作代码为d，重复操作代码代表操作当前行，则删除2行就是d2d；

操作和行号也可以互换位置 2dd，可以省略行号dd代表删除一行，多数时候可以不要操作则代表定位 5G代表移动到第五行。

删除

x 反退格键（delete键） X 退格键

dw 删除一个单词（不适用中文）类似于上一节说的cw，只是删除后还在普通模式

d$ 删除至行尾,d^ 删除至行首

dG 删除到文档结尾处 d1G 删至文档首部

小结：
前缀（操作） ：d代表删除
中缀：行号
后缀（定位）：d代表行，G代表尽头, $代表行尾，^代表行首，w代表单词

重复命令

普通模式下输入dd，删除一行，输入.(小数点)会再次删除一行，除此之外也可以重复其他任意操作

使用dw删除一个单词，然后用.命令重复删除单词操作

游标

游标跳转位置，不过是没有去掉操作后输入的命令。
nG(n Shift+g) 游标移动到第 n 行(如果默认没有显示行号，请先进入命令模式，输入:set nu以显示行号)
gg 游标移动到到第一行
G(Shift+g) 到最后一行

G代表尽头, $代表行尾，^代表行首，w代表下一个单词，b上一个单词，e当前单词末尾

f+字母 向后搜索 字母并跳转到第一个匹配的位置
F+字母 向前搜索字母并跳转到第一个匹配的位置

复制与粘贴

复制为y，后可以接定位符，
yy复制游标所在的整行（3yy表示复制3行）
y^复制至行首，或y0。不含光标所在处字符。y$ 复制至行尾。含光标所在处字符。

yw 复制一个单词。
y2w 复制两个单词。
yG 复制至文本末。
y1G 复制至文本开头

使用 p 粘贴
p(小写)代表粘贴至光标后（下）
P(大写)代表粘贴至光标前（上）

剪切

我们上面在删除那学到的d操作，其实就是剪切，我们使用ddp就可以交换上下行。

小结

到这里是不是文档操作可以直接脱离鼠标了！
移动：h,l,j,k,w,b
跳转：G nG f/F+字母
定位：G代表尽头, $代表行尾，^代表行首，w代表下一个单词，b上一个单词，e当前单词末尾
操作：y d p

进阶操作 - 替换、撤销、缩进、查找

替换和撤销(Undo)

替换和Undo命令都是针对普通模式下的操作,这次用到三个字母，r/R,c/C,u/U

r+<待替换字母> 将游标所在的一个字母替换为其他字母（如下#替换成i）

当然了，一个一个替换甚是麻烦，不妨使用R连续替换

R 连续替换，直到按下Esc

cw 删除一个单词，并进入插入模式

C 删除从游标处开始到当前行尾，并进入插入模式

u 撤销一次操作（如下，粘贴了Internet单词三次，按u三次，撤销粘贴操作）

U(大写) 无论当前行修改了多少次，撤销当前行的所有修改

Ctrl+r redo，即撤销undo的操作（如下，删除一个单词，写入123，之后交替u和Ctrl+r，可以观察到重复撤销123输入，再恢复123输入）

快速缩进在编辑代码时极其有用，快速调整代码缩进非常的爽，缩进操作均在普通模式下有效

使用命令进行快速调整缩进操作

>> 整行将向右缩进

<< 整行向左回退

设置缩进字符数

命令行模式下对shiftwidth值进行设置可以控制缩进和回退的字符数 （可以简写成sw,下面我都用简写）

获取目前的设定值

1

:set shiftwidth?

设置缩进为n个字符

1

:set shiftwidth=n

输入 ESC 回到普通模式，再次尝试 >> 看缩进量是否变化

调整文本位置

命令行模式下输入:le(left)命令使本行内容靠左

1

:le

命令行模式下输入:ce(center)命令使本行内容居中

1

:ce

命令行模式下输入:ri(right)命令使本行文本靠右

1

:ri

快速查找

普通模式下输入 / 然后键入需要查找的字符串 按回车后就会进行查找。输入n 和 N 可以继续查找。 n是查找下一个内容,N查找上一个内容。

? 与/ 功能相同，只不过?是向上而 / 是向下查找。 :noh退出查找模式

高级查找

普通模式下输入\*寻找游标所在处的单词
普通模式下输入\#同上，但 \#是向前（上）找，\*则是向后（下）找

以上查找n,N 的继续查找命令依然可以用

小结

速记如下：

替换：r+<待替换字母>,R

删除并插入：cw、C

撤销：u、U、ctrl+r

调整文本位置：:le、:ce、:ri

查找：\文本、?文本、n、N

高级操作

• 同时修改多个文件、快速在文件之间切换

• 编辑多个文档时分屏操作

• 批量注释多行代码、修改配置、区域复制删除

多文件的编辑

同时编辑两个文件1.txt,2.txt

1

vim 1.txt 2.txt

查看同时打开了哪些文件 :ls,其中%a表示正在编辑的文件。

在文件之间切换 :n , :N

直接切换到想要编辑的文件 :b 1.txt

当然了我们为什么跳来跳去，因为这可以完成多个文件之间复制粘贴等组合操作。

分屏

创建分屏

:sp 2.txt 打开新的水平分屏(上下)视窗来编辑2.txt

:vsp 2.txt打开新的垂直分屏(左右)视窗来编辑2.txt

分屏跳转与移动分屏

我先打开了三个文件，1.txt 2.txt 3.txt

现在我分别跳转到各个文件中，删除文件内容。

普通模式下Ctrl+w j移至下面视窗

普通模式下Ctrl+w k 移至上面视窗

普通模式下Ctrl+w h 移至左边视窗

普通模式下Ctrl+w l 移至右边视窗

现在我垂直打开了三个文件，使用以下命令移动视窗,先把文件3从最左边移动到最右边，再移动下最下边

普通模式下Ctrl+w J将当前视窗移至下面

普通模式下Ctrl+w K 将当前视窗移至上面

普通模式下Ctrl+w H 将当前视窗移至左边

普通模式下Ctrl+w L 将当前视窗移至右边

只要位于相应视窗，:q :wq q!退出就可以；wqa或qa!全部退出

可视模式

可视模式分为三种，也是vim的精髓。分别是行，矩形区域选择，字符段落选择。

和鼠标选择类似，进入可视模式加定位符号就可以快速跳转到想选择的范围，选中以后再进行复制，删除等操作。

行选择

行选择 Shift+v（小写） , 整行选取，可以上下移动光标选更多的行，再按一次 Shift+v 就可以取消选取。

如下，进入行选择模式，输入4G，跳转到第四行，d删除所选区域。

矩形区域选择

矩形区域选择Ctrl+v（小写），按区域选取，可以上下左右移动光标选更多的区域，再按一次 Ctrl+v就可以取消选取。

如下:选择所有的行和第一列所在在区域，shift+i进入插入模式，插入#，双击两次esc，批量注释。然后重复选择动作，输入x删除所选区域。

字符选择(段落选择)

字符选择 v（小写），可以移动光标，光标走过的地方就会选取。再次按下v后就会取消选取。

如下：v$选中192.168.1.2退一格为了不选中换行符，到第一行粘贴ip再选中不需要的ip删除掉。

可视化模式和定位符结合使用效果最佳！

小结

同时编辑多个文件： vim 1.txt 2.txt, 切换文件 :n 、:N、:b 1.txt

分屏 :sp 2.txt :vsp 2.txt，跳转Ctrl+w h|j|k|l 移动分屏位

置Ctrl+w H|J|K|L

可视模式 Shift+v、Ctrl+v、v

vim命令比较多，这里只列举最有用的，足以应对全部的场景了，记的越多速度越快！

Vim高手，从来不用鼠标

Vim高手，从来不用鼠标2——替换、撤销、缩进、查找

Vim 高级操作一看就会

webp 是目前 Web 比较流行的解决方案，相对于 Jpeg/png, 基于 VP8 的压缩，有着非常不错的压缩率。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index

比较基础的方法，还是检测 UA 白名单来说，毕竟这些版本都是很早就支持。

这个方法可控性大，而且能够支持 SSR 渲染，在服务端做 UA 判断然后输出对应的图片格式。

当然，常规的另外一种解决方式是，就是远程加载一张 webp 图片观测是否报错

1
2
3
4
5
6
7
8

function checkWebPSupport) {
  return new Promise((resolve, reject) => {
var img = new Image();
img.onload = function() { resolve(); };
    img.onerror = function() { reject(); };
    img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  })
}

网络上有一款比较创新的检测方法，利用 canvas 输出图像的方式。

1
2
3
4
5
6
7
8
9

function canUseWebP() {
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d'))) {
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    }

    return false;
}

CSS 中嵌入的 背景图

1
2
3
4
5
6
7

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

如果用到 背景图的话，我们可以通过跟元素的 class 来进行图片格式的选择

扩展阅读

• https://stackoverflow.com/questions/5573096/detecting-webp-support
• Using WebP Images

背景

现在的前端研发大都采用Mac设备，而移动端app大多沿用混合开发的方式，从而产生了很多原生页面和H5之间的交互问题。经过上次Mac调试安卓app中的H5的经历之后，今天尝试了在mac中调试ios系统的原生浏览器中的页面

环境准备

• mac一台
• iPhone手机一部

步骤

iPhone设置

打开设置–>Safari浏览器–>高级–>开启JavaScript和web检查器

iPhone端的操作全部操作完成

Chrome 浏览器

没有安装HomeBrew的小伙伴，先安装HomeBrew，不了解HomeBrew的同学可以在 这里 查看

• 安装完成后,依次执行下面代码

  1 2 3 4 5

  brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd brew install --HEAD usbmuxd brew install --HEAD libimobiledevice brew install --HEAD ios-webkit-debug-proxy

• 安装最新版本的adapter

  1	npm install remotedebug-ios-webkit-adapter -g

  到这一步，mac端的操作就已经完成了，

• 然后再看iphone的设置

  mac上打开终端，执行命令，开启adapter，设置监听端口为9000

  1	remotedebug_ios_webkit_adapter --port=9000

  Chrome中打开chrome://inspect/#devices，在configure中添加localhost:9000,可以看到设备出现在列表中。iphone的Safari中的页面，就可以在这里看到，点击inspect，就可以和PC端一样，进行调试啦

  

Safari浏览器

Safari浏览器中相对就比较简单啦，iphone端的操作完全一样，打开Safari浏览器，选中系统偏好设置–>高级,勾选在菜单中打开“开发”菜单

连接手机，打开Safari浏览器，选择开发，选中设备，可看到移动端Safari浏览器中打开的网址，点击，就能打开Safari浏览器的开发者工具了。如图所示：

本文作者：4Ark
本文链接： https://4ark.me/post/b6c7c0a2.html

这个问题已经是老生常谈了，更是经常被作为面试的压轴题出现，网上也有很多文章，但最近闲的无聊，然后就自己做了一篇笔记，感觉比之前理解更透彻了。

前言

这个问题已经是老生常谈了，更是经常被作为面试的压轴题出现，网上也有很多文章，但最近闲的无聊，然后就自己做了一篇笔记，感觉比之前理解更透彻了。

这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面一点，但由于我是做前端的，所以会比较重点分析浏览器渲染页面那一部分，至于其他部分我会罗列出关键词，感兴趣的可以自行查阅，

注意：本文的步骤是建立在，请求的是一个简单的 HTTP 请求，没有 HTTPS、HTTP2、最简单的 DNS、没有代理、并且服务器没有任何问题的基础上，尽管这是不切实际的。

大致流程

1. URL 解析
2. DNS 查询
3. TCP 连接
4. 处理请求
5. 接受响应
6. 渲染页面

一、URL 解析

地址解析：

首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动完成、字符编码等操作。

HSTS

由于安全隐患，会使用 HSTS 强制客户端使用 HTTPS 访问页面。详见：你所不知道的 HSTS。

其他操作

浏览器还会进行一些额外的操作，比如安全检查、访问限制（之前国产浏览器限制 996.icu）。

检查缓存

二、DNS 查询

基本步骤

1. 浏览器缓存

浏览器会先检查是否在缓存中，没有则调用系统库函数进行查询。

2. 操作系统缓存

操作系统也有自己的 DNS 缓存，但在这之前，会向检查域名是否存在本地的 Hosts 文件里，没有则向 DNS 服务器发送查询请求。

3. 路由器缓存

路由器也有自己的缓存。

4. ISP DNS 缓存

ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，它们在大多数情况下都会有缓存。

5.根域名服务器查询

在前面所有步骤没有缓存的情况下，本地 DNS 服务器会将请求转发到互联网上的根域，下面这个图很好的诠释了整个流程：

根域名服务器：维基百科

需要注意的点

1. 递归方式：一路查下去中间不返回，得到最终结果才返回信息（浏览器到本地 DNS 服务器的过程）
2. 迭代方式，就是本地 DNS 服务器到根域名服务器查询的方式。
3. 什么是 DNS 劫持
4. 前端 dns-prefetch 优化

三、TCP 连接

TCP/IP 分为四层，在发送数据时，每层都要对数据进行封装：

1. 应用层：发送 HTTP 请求

在前面的步骤我们已经得到服务器的 IP 地址，浏览器会开始构造一个 HTTP 报文，其中包括：

• 请求报头（Request Header）：请求方法、目标地址、遵循的协议等等
• 请求主体（其他参数）

其中需要注意的点：

• 浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法

2. 传输层：TCP 传输报文

传输层会发起一条到达服务器的 TCP 连接，为了方便传输，会对数据进行分割（以报文段为单位），并标记编号，方便服务器接受时能够准确地还原报文信息。

在建立连接前，会先进行 TCP 三次握手。

关于 TCP/IP 三次握手，网上已经有很多段子和图片生动地描述了。

相关知识点：

1. SYN 泛洪攻击

3. 网络层：IP 协议查询 Mac 地址

将数据段打包，并加入源及目标的 IP 地址，并且负责寻找传输路线。

判断目标地址是否与当前地址处于同一网络中，是的话直接根据 Mac 地址发送，否则使用路由表查找下一跳地址，以及使用 ARP 协议查询它的 Mac 地址。

注意：在 OSI 参考模型中 ARP 协议位于链路层，但在 TCP/IP 中，它位于网络层。

4. 链路层：以太网协议

以太网协议

根据以太网协议将数据分为以“帧”为单位的数据包，每一帧分为两个部分：

• 标头：数据包的发送者、接受者、数据类型
• 数据：数据包具体内容

Mac 地址

以太网规定了连入网络的所有设备都必须具备“网卡”接口，数据包都是从一块网卡传递到另一块网卡，网卡的地址就是 Mac 地址。每一个 Mac 地址都是独一无二的，具备了一对一的能力。

广播

发送数据的方法很原始，直接把数据通过 ARP 协议，向本网络的所有机器发送，接收方根据标头信息与自身 Mac 地址比较，一致就接受，否则丢弃。

注意：接收方回应是单播。

相关知识点：

1. ARP 攻击

服务器接受请求

接受过程就是把以上步骤逆转过来，参见上图。

四、服务器处理请求

大致流程

HTTPD

最常见的 HTTPD 有 Linux 上常用的 Apache 和 Nginx，以及 Windows 上的 IIS。

它会监听得到的请求，然后开启一个子进程去处理这个请求。

处理请求

接受 TCP 报文后，会对连接进行处理，对 HTTP 协议进行解析（请求方法、域名、路径等），并且进行一些验证：

• 验证是否配置虚拟主机
• 验证虚拟主机是否接受此方法
• 验证该用户可以使用该方法（根据 IP 地址、身份信息等）

重定向

假如服务器配置了 HTTP 重定向，就会返回一个 301永久重定向响应，浏览器就会根据响应，重新发送 HTTP 请求（重新执行上面的过程）。

关于更多：详见这篇文章

URL 重写

然后会查看 URL 重写规则，如果请求的文件是真实存在的，比如图片、html、css、js 文件等，则会直接把这个文件返回。

否则服务器会按照规则把请求重写到 一个 REST 风格的 URL 上。

然后根据动态语言的脚本，来决定调用什么类型的动态文件解释器来处理这个请求。

以 PHP 语言的 MVC 框架举例，它首先会初始化一些环境的参数，根据 URL 由上到下地去匹配路由，然后让路由所定义的方法去处理请求。

五、浏览器接受响应

浏览器接收到来自服务器的响应资源后，会对资源进行分析。

首先查看 Response header，根据不同状态码做不同的事（比如上面提到的重定向）。

如果响应资源进行了压缩（比如 gzip），还需要进行解压。

然后，对响应资源做缓存。

接下来，根据响应资源里的 MIME 类型去解析响应内容（比如 HTML、Image 各有不同的解析方式）。

六、渲染页面

浏览器内核

不同的浏览器内核，渲染过程也不完全相同，但大致流程都差不多。

基本流程

1.HTML 解析

首先要知道浏览器解析是从上往下一行一行地解析的。

解析的过程可以分为四个步骤：

1. 解码（encoding）

传输回来的其实都是一些二进制字节数据，浏览器需要根据文件指定编码（例如 UTF-8）转换成字符串，也就是 HTML 代码。

2. 预解析（pre-parsing）

预解析做的事情是提前加载资源，减少处理时间，它会识别一些会请求资源的属性，比如img标签的src属性，并将这个请求加到请求队列中。

3. 符号化（Tokenization）

符号化是词法分析的过程，将输入解析成符号，HTML 符号包括，开始标签、结束标签、属性名和属性值。

它通过一个状态机去识别符号的状态，比如遇到<，>状态都会产生变化。

4. 构建树（tree construction）

注意：符号化和构建树是并行操作的，也就是说只要解析到一个开始标签，就会创建一个 DOM 节点。

在上一步符号化中，解析器获得这些标记，然后以合适的方法创建DOM对象并把这些符号插入到DOM对象中。

1
2
3
4
5
6
7
8
9
10
11

<html>
  <head>
    <title>Web page parsing</title>
  </head>
  <body>
    <div>
      <h1>Web page parsing</h1>
      <p>This is an example Web page.</p>
    </div>
  </body>
</html>

浏览器容错进制

你从来没有在浏览器看过类似”语法无效”的错误，这是因为浏览器去纠正错误的语法，然后继续工作。

事件

当整个解析的过程完成以后，浏览器会通过DOMContentLoaded事件来通知DOM解析完成。

2. CSS 解析

一旦浏览器下载了 CSS，CSS 解析器就会处理它遇到的任何 CSS，根据语法规范解析出所有的 CSS 并进行标记化，然后我们得到一个规则表。

CSS 匹配规则

在匹配一个节点对应的 CSS 规则时，是按照从右到左的顺序的，例如：div p \{ font-size :14px \}会先寻找所有的p标签然后判断它的父元素是否为div。

所以我们写 CSS 时，尽量用 id 和 class，千万不要过度层叠。

3. 渲染树

其实这就是一个 DOM 树和 CSS 规则树合并的过程。

注意：渲染树会忽略那些不需要渲染的节点，比如设置了display:none的节点。

计算

通过计算让任何尺寸值都减少到三个可能之一：auto、百分比、px，比如把rem转化为px。

级联

浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素，所以它使用一个叫做specificity的公式，这个公式会通过：

1. 标签名、class、id
2. 是否内联样式
3. !important

然后得出一个权重值，取最高的那个。

渲染阻塞

当遇到一个script标签时，DOM 构建会被暂停，直至脚本完成执行，然后继续构建 DOM 树。

但如果 JS 依赖 CSS 样式，而它还没有被下载和构建时，浏览器就会延迟脚本执行，直至 CSS Rules 被构建。

所有我们知道：

• CSS 会阻塞 JS 执行
• JS 会阻塞后面的 DOM 解析

为了避免这种情况，应该以下原则：

• CSS 资源排在 JavaScript 资源前面
• JS 放在 HTML 最底部，也就是 </body>前

另外，如果要改变阻塞模式，可以使用 defer 与 async，详见：这篇文章

4. 布局与绘制

确定渲染树种所有节点的几何属性，比如：位置、大小等等，最后输入一个盒子模型，它能精准地捕获到每个元素在屏幕内的准确位置与大小。

然后遍历渲染树，调用渲染器的 paint() 方法在屏幕上显示其内容。

5. 合并渲染层

把以上绘制的所有图片合并，最终输出一张图片。

6. 回流与重绘

回流(reflow)

当浏览器发现某个部分发现变化影响了布局时，需要倒回去重新渲染，会从html标签开始递归往下，重新计算位置和大小。

reflow 基本是无法避免的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变化。

重绘(repaint)

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。

每次重绘后，浏览器还需要合并渲染层并输出到屏幕上。

回流的成本要比重绘高很多，所以我们应该尽量避免产生回流。

比如：

display:none 会触发回流，而 visibility:hidden 只会触发重绘。

7. JavaScript 编译执行

大致流程

可以分为三个阶段：

1. 词法分析

JS 脚本加载完毕后，会首先进入语法分析阶段，它首先会分析代码块的语法是否正确，不正确则抛出“语法错误”，停止执行。

几个步骤：

• 分词，例如将var a = 2，，分成var、a、=、2这样的词法单元。
• 解析，将词法单元转换成抽象语法树（AST）。
• 代码生成，将抽象语法树转换成机器指令。

2. 预编译

JS 有三种运行环境：

• 全局环境
• 函数环境
• eval

每进入一个不同的运行环境都会创建一个对应的执行上下文，根据不同的上下文环境，形成一个函数调用栈，栈底永远是全局执行上下文，栈顶则永远是当前执行上下文。

创建执行上下文

创建执行上下文的过程中，主要做了以下三件事：

• 创建变量对象
  • 参数、函数、变量
• 建立作用域链
  • 确认当前执行环境是否能访问变量
• 确定 This 指向

3. 执行

JS 线程

虽然 JS 是单线程的，但实际上参与工作的线程一共有四个：

其中三个只是协助，只有 JS 引擎线程是真正执行的

• JS 引擎线程：也叫 JS 内核，负责解析执行 JS 脚本程序的主线程，例如 V8 引擎
• 事件触发线程：属于浏览器内核线程，主要用于控制事件，例如鼠标、键盘等，当事件被触发时，就会把事件的处理函数推进事件队列，等待 JS 引擎线程执行
• 定时器触发线程：主要控制setInterval和setTimeout，用来计时，计时完毕后，则把定时器的处理函数推进事件队列中，等待 JS 引擎线程。
• HTTP 异步请求线程：通过 XMLHttpRequest 连接后，通过浏览器新开的一个线程，监控 readyState 状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进事件队列中，等待 JS 引擎线程执行。

注：浏览器对同一域名的并发连接数是有限的，通常为 6 个。

宏任务

分为：

• 同步任务：按照顺序执行，只有前一个任务完成后，才能执行后一个任务
• 异步任务：不直接执行，只有满足触发条件时，相关的线程将该异步任务推进任务队列中，等待 JS 引擎主线程上的任务执行完毕时才开始执行，例如异步 Ajax、DOM 事件，setTimeout 等。

微任务

微任务是 ES6 和 Node 环境下的，主要 API 有：Promise，process.nextTick。

微任务的执行在宏任务的同步任务之后，在异步任务之前。

代码例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14

console.log('1') // 宏任务 同步

setTimeout(function() {
  console.log('2') // 宏任务 异步
})

new Promise(function(resolve) {
  console.log('3') // 宏任务 同步
  resolve()
}).then(function() {
  console.log('4') // 微任务
})

console.log('5') // 宏任务 同步

以上代码输出顺序为：1,3,5,4,2

参考文档

• what-happens-when-zh_CN
• Tags to DOM
• 彻底理解浏览器的缓存机制
• 浏览器的工作原理：新式网络浏览器幕后揭秘
• 深入浅出浏览器渲染原理
• js 引擎的执行过程（一）
• 还有一些找不到了~

作者：小生方勤链接：https://juejin.im/post/5caa0c2d51882543fa41e478来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

position:sticky

粘性定位是什么？

粘性定位 sticky相当于相对定位 relative和固定定位 fixed的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时；元素的相对定位 relative效果变成固定定位 fixed的效果。

MDN 传送门

如何使用？

使用条件：

1. 父元素不能 overflow:hidden或者 overflow:auto属性
2. 必须指定 top、bottom、left、right4 个值之一，否则只会处于相对定位
3. 父元素的高度不能低于 sticky元素的高度
4. sticky元素仅在其父元素内生效

在需要滚动吸顶的元素加上以下样式便可以实现这个效果：

1
2
3
4
5

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

这个属性好用吗？

我们先看下在 Can I use 中看看这个属性的兼容性：

可以看出这个属性的兼容性并不是很好，因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。

所以我们在生产环境如果使用这个 API 的时候一般会和下面的几种方式结合使用。

JQuery 的 offset().top

我们知道 JQuery 中封装了操作 DOM 和读取 DOM 计算属性的 API，基于 offset().top 这个 API 和 scrollTop() 的结合，我们也可以实现滚动吸顶效果。

1
2
3
4
5
6
7
8
9
10

...
window.addEventListener('scroll', self.handleScrollOne);
...
handleScrollOne: function() {
    let self = this;
    let scrollTop = $('html').scrollTop();
    let offsetTop = $('.title_box').offset().top;
    self.titleFixed = scrollTop > offsetTop;
}
...

这样实现固然可以，不过由于 JQuery 慢慢的退出历史的舞台，我们在代码中尽量不使用 JQuery 的 API。我们可以基于 offset().top 的源码自己处理原生 offsetTop。于是乎就有了第三种方式。

scrolloTop() 有兼容性问题，在微信浏览器、IE、某些 firefox 版本中 $(‘html’).scrollTop() 的值会为 0，于是乎也就有了第三种方案的兼容性写法。

原生的 offsetTop

我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。

我们可以自己对 offsetTop 做以下处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}

使用：

1
2
3
4
5
6
7
8
9
10

...
window.addEventListener('scroll', self.handleScrollTwo);
...
handleScrollTwo: function() {
    let self = this;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let offsetTop = self.getOffset(self.$refs.pride_tab_fixed);
    self.titleFixed = scrollTop > offsetTop;
}
...

你是不是看出了以上两种方式的一些问题？

我们一定需要使用 scrollTop - offsetTop 的值来实现滚动吸顶的效果吗？答案是否定的。

obj.getBoundingClientRect().top

定义

这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。

使用

tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop - offsetTop,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<template>
<div class="pride_tab_fixed" ref="pride_tab_fixed">
  <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">
      // some code
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      titleFixed: false
    }
  },
  activated(){
    this.titleFixed = false;
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    //滚动监听，头部固定
    handleScroll: function () {
      let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
      this.titleFixed = offsetTop < 0;
      // some code
    }
  }
}
</script>

offsetTop 和 getBoundingClientRect() 区别

getBoundingClientRect()

用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。不包含文档卷起来的部分。

该函数返回一个 object对象，有8个属性：top, right, buttom, left, width, height, x, y

offsetTop

用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。

定位父级 offsetParent的定义是：与当前元素最近的 position != static 的父级元素。

offsetTop和 offsetParent方法相结合可以获得该元素到 body上边距的距离。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}

延伸知识点

offsetWidth

元素在水平方向上占用的空间大小：
offsetWidth = border-left + padding-left + width + padding-right + border-right

offsetHeight

元素在垂直方向上占用的空间大小：
offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

注：如果存在垂直滚动条，offsetWidth 也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight 也包括水平滚动条的高度；

offsetTop

元素的上外边框至 offsetParent元素的上内边框之间的像素距离；

offsetLeft

元素的左外边框至 offsetParent元素的左内边框之间的像素距离；

注意事项

1. 所有偏移量属性都是只读的；
2. 如果给元素设置了 display:none，则它的偏移量属性都为 0；
3. 每次访问偏移量属性都需要重新计算（保存变量）；
4. 在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行。

遇到的两个问题

吸顶的那一刻伴随抖动

出现抖动的原因是因为：在吸顶元素 position 变为 fixed 的时候，该元素就脱离了文档流，下一个元素就进行了补位。就是这个补位操作造成了抖动。

解决方案

为这个吸顶元素添加一个等高的父元素，我们监听这个父元素的 getBoundingClientRect().top 值来实现吸顶效果，即：

1
2
3
4
5

<div class="title_box" ref="pride_tab_fixed">
    <div class="title" :class="titleFixed == true ? 'isFixed' :''">
    使用 `obj.getBoundingClientRect().top` 实现
    </div>
</div>

这个方案就可以解决抖动的 Bug 了。

吸顶效果不能及时响应

这个问题是我比较头痛，之前我没有在意过这个问题。直到有一天我用美团点外卖的时候，我才开始注意这个问题。

描述：

1. 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果
2. 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样

原因：在 ios 系统上不能实时监听 scroll 滚动监听事件，在滚动停止时才触发其相关的事件。

解决方案：

还记得第一种方案中的 position:sticky吗？这个属性在 IOS6 以上的系统中有良好的兼容性，所以我们可以区分 IOS 和 Android 设备做两种处理。

IOS 使用 position:sticky，Android 使用滚动监听 getBoundingClientRect().top的值。

如果 IOS 版本过低呢？这里提供一种思路：window.requestAnimationFrame()。

性能优化

到此 4 中滚动吸顶的方式介绍完了，可是这样就真的结束了吗？其实还是有优化的空间的。

我们从两个方向做性能优化（其实是一个方向）：

1. 避免过度的 reflow
2. 优化滚动监听事件

问题定位过程

我们知道过度的 reflow 会使页面的性能下降。所以我们需要尽可能的降低 reflow 的次数，给用户更加流畅的感觉。

有的朋友或许会说这个我知道，可是这和滚动吸顶有什么关系呢？

不急，你是否还记得滚动吸顶使用了 offsetTop 或者 getBoundingClientRect().top 来获取响应的偏移量呢？

既然有读取元素的属性就自然会导致页面 reflow。

因此我们优化的方向就是从减少读取元素属性次数下手，查看代码发现一触发屏幕滚动事件就会调用相关方法读取元素的偏移量。

优化方案

解决这个问题有以下两个方案：

1. 牺牲平滑度满足性能，使用节流控制相关方法的调用
2. 使用 IntersectionObserver 和节流结合，也牺牲了平滑度。

第一种方案

这个方案很常见，不过其带来的副作用也很明显，就是在吸顶效果会有些延迟，如果产品可以接受那就不失为一种好方法。

这样可以控制在一定时间内只读取

这里节流函数就直接是用 lodash.js封装好的 throttle方法。

代码如下：

1

window.addEventListener('scroll', _.throttle(self.handleScrollThree, 50));

第二种方案

第二种方案相对来说容易接受一点，就是支持 IntersectionObserver 就用 IntersectionObserver，否则就用 throttle。

我们先讲讲 IntersectionObserver

IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。

通过这个属性我们就可以在元素不在可视范围内，不去读取元素的相对位置，已达到性能优化；当浏览器不支持这个属性的时候就使用 throttle 来处理。

我们看看这个属性的兼容性怎么样：

大概支持了 60% 以上，在项目中还是可以使用的（你需要做好兼容性处理）。

关于 IntersectionObserver 如何使用，请看 MDN或者 阮一峰教程。

使用 IntersectionObserver 和 throttle 优化的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

IntersectionObserverFun: function() {
    let self = this;
    let ele = self.$refs.pride_tab_fixed;
    if( !IntersectionObserver ){
        let observer = new IntersectionObserver(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, {
            threshold: [1]
        });
        observer.observe(document.getElementsByClassName('title_box')[0]);
    } else {
        window.addEventListener('scroll', _.throttle(function(){
            let offsetTop = ele.getBoundingClientRect().top;
            self.titleFixed = offsetTop < 0;
        }, 50));
    }
},

注意

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。

规格写明，IntersectionObserver的实现，应该采用 requestIdleCallback()。它不会立即执行回调，它会调用 window.requestIdleCallback()来异步的执行我们指定的回调函数，而且还规定了最大的延迟时间是 100 毫秒。

总结：

这种 IntersectionObserver 和 throttle 结合的方案不失为一种可选择的方案，这种方案的优点就在于可以有效地减少页面 reflow 的风险，不过缺点也是有的，需要牺牲页面的平滑度。具体该如何取舍，就看业务的需要啦。

1. 状态共享
2. 长列表性能优化
3. 去除多余的样式
4. 作用域插槽
5. 属性事件传递
6. 函数式组件
7. 监听组件的生命周期
8. 参考链接：

状态共享

随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使用 store.js 提供的store和mutation方法，同理其它组件也可以这样使用，从而实现多个组件共享数据状态。

首先创建一个 store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

1
2
3
4
5
6
7
8
9

import Vue from 'vue'

export const store = Vue.observable({ count: 0 })

export const mutations = {
  setCount(count) {
    store.count = count
  },
}

然后在App.vue里面引入这个 store.js，在组件里面使用引入的数据和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <p>count:{{count}}</p>
    <button @click="setCount(count+1)">+1</button>
    <button @click="setCount(count-1)">-1</button>
  </div>
</template>

<script>
import { store, mutations } from "./store";
export default {
  name: "App",
  computed: {
    count() {
      return store.count;
    }
  },
  methods: {
    setCount: mutations.setCount
  }
};
</script>

你可以点击在线 DEMO查看最终效果

长列表性能优化

我们应该都知道vue会通过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止vue劫持我们的数据呢？可以通过object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

1
2
3
4
5
6
7
8
9

export default {
  data: () => ({
    users: {},
  }),
  async created() {
    const users = await axios.get('/api/users')
    this.users = Object.freeze(users)
  },
}

另外需要说明的是，这里只是冻结了users的值，引用不会被冻结，当我们需要reactive数据的时候，我们可以重新给users赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  },
  methods:{
    // 改变值不会触发视图响应
    this.data.users[0] = newValue
    // 改变引用依然会触发视图响应
    this.data.users = newArray
  }
};

去除多余的样式

随着项目越来越大，书写的不注意，不自然的就会产生一些多余的 css，小项目还好，一旦项目大了以后，多余的 css 会越来越多，导致包越来越大，从而影响项目运行性能，所以有必要在正式环境去除掉这些多余的 css，这里推荐一个库purgecss，支持 CLI、JavascriptApi、Webpack 等多种方式使用，通过这个库，我们可以很容易的去除掉多余的 css。

我做了一个测试，在线 DEMO

1
2
3
4
5

<h1>Hello Vanilla!</h1>
<div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>

1
2
3
4
5
6
7
8
9
10
11

body {
  font-family: sans-serif;
}
a {
  color: red;
}
ul {
  li {
    list-style: none;
  }
}

1
2
3
4
5
6

import Purgecss from 'purgecss'
const purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css'],
})
const purgecssResult = purgecss.purge()

最终产生的purgecssResult结果如下，可以看到多余的a和ul标签的样式都没了

作用域插槽

利用好作用域插槽可以做一些很有意思的事情，比如定义一个基础布局组件 A，只负责布局，不管数据逻辑，然后另外定义一个组件 B 负责数据处理，布局组件 A 需要数据的时候就去 B 里面去取。假设，某一天我们的布局变了，我们只需要去修改组件 A 就行，而不用去修改组件 B，从而就能充分复用组件 B 的数据处理逻辑，关于这块我之前写过一篇实际案例，可以点击这里查看。

这里涉及到的一个最重要的点就是父组件要去获取子组件里面的数据，之前是利用slot-scope，自 vue 2.6.0 起，提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。

比如，我们定一个名为current-user的组件：

1
2
3

<span>
  <slot>{{ user.lastName }}</slot>
</span>

父组件引用current-user的组件，但想用名替代姓（老外名字第一个单词是名，后一个单词是姓）：

1
2
3

<current-user>
  {{ user.firstName }}
</current-user>

这种方式不会生效，因为user对象是子组件的数据，在父组件里面我们获取不到，这个时候我们就可以通过v-slot 来实现。

首先在子组件里面，将user作为一个<slot>元素的特性绑定上去：

1
2
3
4
5

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

之后，我们就可以在父组件引用的时候，给v-slot带一个值来定义我们提供的插槽 prop 的名字：

1
2
3
4
5

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

这种方式还有缩写语法，可以查看独占默认插槽的缩写语法，最终我们引用的方式如下：

1
2
3

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

相比之前slot-scope代码更清晰，更好理解。

属性事件传递

写过高阶组件的童鞋可能都会碰到过将加工过的属性向下传递的情况，如果碰到属性较多时，需要一个个去传递，非常不友好并且费时，有没有一次性传递的呢（比如 react 里面的{...this.props}）？答案就是v-bind和v-on。

举个例子，假如有一个基础组件BaseList，只有基础的列表展示功能，现在我们想在这基础上增加排序功能，这个时候我们就可以创建一个高阶组件SortList。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- SortList  -->
<template>
  <BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList>
</template>

<script>
import BaseList from './BaseList'
// 包含了基础的属性定义
import BaseListMixin from './BaseListMixin'
// 封装了排序的逻辑
import sort from './sort.js'

export default {
  props: BaseListMixin.props,
  components: {
    BaseList,
  },
}
</script>

可以看到传递属性和事件的方便性，而不用一个个去传递

函数式组件

函数式组件，即无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。

写法如下：

1. 在template标签里面标明functional
2. 只接受props值
3. 不需要script标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- App.vue -->
<template>
  <div id="app">
    <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)" />
    <p>Clicked hero: {{ clicked }}</p>
  </div>
</template>

<script>
import List from './List'

export default {
  name: 'App',
  data: () => ({ clicked: '' }),
  components: { List },
}
</script>

1
2
3
4
5
6
7
8

<!-- List.vue 函数式组件 -->
<template functional>
  <div>
    <p v-for="item in props.items" @click="props.itemClick(item)">
      {{ item }}
    </p>
  </div>
</template>

监听组件的生命周期

比如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规的写法可能如下：

1
2
3
4

// Parent.vue
<Child @mounted="doSomething" />

// Child.vue mounted() { this.$emit("mounted"); }

这里提供一种特别简单的方式，子组件不需要任何处理，只需要在父组件引用的时候通过@hook来监听即可，代码重写如下：

1

<Child @hook:mounted="doSomething" />

当然这里不仅仅是可以监听mounted，其它的生命周期事件，例如：created，updated等都可以，是不是特别方便~

参考链接：

• vueTips
• vuePost

1. 字符串
   1. 格式化金钱
   2. 生成随机ID
   3. 生成随机HEX色值
   4. 生成星级评分
   5. 操作URL查询参数
2. 数值
   1. 取整：代替正数的Math.floor()，代替负数的Math.ceil()
   2. 补零
   3. 转数值：只对null、""、false、数值字符串有效
   4. 时间戳
   5. 精确小数
   6. 判断奇偶
   7. 取最小最大值
3. 函数
   1. 一次性函数：适用于运行一些只需执行一次的初始化代码
   2. 惰性载入函数：函数内判断分支较多较复杂时可大大节约资源开销
   3. 优雅处理Async/Await参数
4. DOM
   1. 显示全部DOM边框：调试页面元素边界时使用
   2. 自适应页面：页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置
   3. 阻止冒泡
   4. 阻止默认行为

字符串

格式化金钱

1
2
3

const thousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = thousandNum(19941112);
// money => "19,941,112"

生成随机ID

1
2
3

const randomId = len => Math.random().toString(36).substr(3, len);
const id = randomId(10);
// id => "jg7zpgiqva"

生成随机HEX色值

1
2
3

const randomColor = () => "##" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
const color = randomColor();
// color => "##f03665"

生成星级评分

1
2
3

const startScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = startScore(3);
// start => "★★★"

操作URL查询参数

1
2
3
4
5

// https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
const params = new URLSearchParams(location.search.replace(/\?/ig, "")); 
// location.search = "?name=yajun&sex=female"
params.has("yajun"); // true
params.get("sex"); // "female"

数值

取整：代替正数的Math.floor()，代替负数的Math.ceil()

1
2
3
4

const num1 = ~~ 1.69;
const num2 = 1.69 | 0;
const num3 = 1.69 >> 0;
// num1 num2 num3 => 1 1 1

补零

1
2
3

const fillZero = (num, len) => num.toString().padStart(len, "0");
const num = fillZero(169, 5);
// num => "00169"

转数值：只对null、""、false、数值字符串有效

1
2
3
4
5

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

1
2

const timestamp = +new Date("2019-03-31");
// timestamp => 1553990400000

精确小数

1
2
3

const roundNum = (num, decimal) => Math.round(num * 10 ** decimal) / 10 ** decimal;
const num = roundNum(1.69, 1);
// num => 1.7

判断奇偶

1
2
3

const num = 0;
const odd = !!(num & 1);
// odd => false

取最小最大值

1
2
3
4

const arr = [0, 1, 2];
const min = Math.min(...arr);
const max = Math.max(...arr);
// min max => 0 2

函数

一次性函数：适用于运行一些只需执行一次的初始化代码

1
2
3
4
5
6

function Func() {
    console.log("x");
    Func = function() {
        console.log("y");
    }
}

惰性载入函数：函数内判断分支较多较复杂时可大大节约资源开销

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function Func() {
    if (a === b) {
        console.log("x");
    } else {
        console.log("y");
    }
}
// 换成
function Func() {
    if (a === b) {
        Func = function() {
            console.log("x");
        }
    } else {
        Func = function() {
            console.log("y");
        }
    }
    return Func();
}

优雅处理Async/Await参数

1
2
3
4

function AsyncTo(promise) {
    return promise.then(data => [null, data]).catch(err => [err]);
}
const [err, res] = await AsyncTo(Func());

DOM

显示全部DOM边框：调试页面元素边界时使用

1
2
3

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid ##" + (~~(Math.random() * (1 << 24))).toString(16);
});

自适应页面：页面基于一张设计图但需做多款机型自适应，元素尺寸使用rem进行设置

1
2
3
4
5
6

function AutoResponse(width = 750) {
    const target = document.documentElement;
    target.clientWidth >= 600
        ? (target.style.fontSize = "80px")
        : (target.style.fontSize = target.clientWidth / width * 100 + "px");
}

阻止冒泡

1
2
3
4
5
6
7
8
9

function stopBubble(e) { 
    //如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
}

阻止默认行为

1
2
3
4
5
6
7
8
9
10
11

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
        
    return false; 
}

ssr是什么

简单来讲，ssr是指vue中的服务端渲染

默认vue开发打包生成是普通的客户端渲染，将vue打包成js然后在html中引入进而渲染DOM和操作DOM。而服务端渲染是将vue渲染成html后再发送至客户端，中间会有一系列匹配工作

为什么用ssr

截两张图你就明白了

默认方式源代码:

ssr方式源代码:

也就是说使用默认方式，当在搜索引擎搜索你的站点关键词时可能就搜不到你的站点，这对一些需要被erveryone熟知的站点是致命的。

除此之外服务端渲染也能更好的解决浏览器兼容的问题，并且在性能上也帮客户端做了很多事情

如何开发ssr项目

两种方式，自己搭建或者使用官方框架Nuxt.js，我当时是自己搭的，参考了官方示例vue-hackernews-2.0，基本方式都是相同的，打包出对应route的bundle，与template合并，生成html string，展示

常见问题

客户端展示异常，服务端报错 window/alert/document is undefined

jsdom

服务端没有window/alert/document这种东西，需要自行定义，建议方式引入第三方包jsdom辅助定义

1
2
3
4
5
6
7
8

//https://github.com/vuejs/vue-hackernews-2.0/issues/52#issuecomment-255594303
const { JSDOM } = require('jsdom')
const dom = new JSDOM('<!doctype html><html><body></body></html>',
{ url: 'http://localhost' })

global.window = dom.window
global.document = window.document
global.navigator = window.navigator

官方解决方案

组件二次封装

创建~/plugins/index.js文件，将组件挂载到全局

1
2
3
4

import Vue from 'vue'
import MyComponent from '~/components/MyComponent'

Vue.component('MyComponent', MyComponent)

然后根据运行环境加载组件

1
2
3

if(typeof window !== 'undefined'){
require('~/plugins/index.js')
}

参考

• https://juejin.im/post/5b7e26fee51d4538d12c8836
• https://miyalee.github.io/2018/01/03/blog2018-01-03/

转载自: https://segmentfault.com/a/1190000018619576

这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。

项目github地址 :

• 前端 https://github.com/huangyangt…
• 后端: https://github.com/huangyangt…

1. 一、环境依赖安装
   1. node环境
      1. node和npm环境的安装
      2. 为npm更改源
         1. 使用cnpm代替npm
         2. 为npm更换源
      3. 管理(更新)nodejs的版本
         1. 使用n管理nodejs版本
      4. package.json文件详解
   2. vue脚手架
      1. vue-cli2.x安装
      2. vue-cli3.x安装及配置(仅供参考)
2. 二、开发
   1. 前后端交互报文定义以及数据api接口
      1. 前后端交互报文定义
      2. 项目中使用的后台api定义如下
         1. 测试api是否可用
         2. 注册
         3. 登录
         4. 获取当前用户信息
   2. 项目文件介绍
      1. 整个文件介绍：
      2. src目录介绍
   3. 跨域、axios配置与api管理
      1. 配置跨域
      2. 生产环境去除/apis前缀
      3. api统一管理
   4. 路由配置
      1. 最简配置
      2. 配置路由懒加载
      3. 配置history模式
   5. 权限管理
      1. token验证
      2. 对页面的访问权限
   6. 将界面交给第三方UI库
      1. iview的安装与引入
         1. 安装
         2. 按需引入组件
         3. 自定义主题
   7. 兼容性处理
      1. 对ie8及以下浏览器的跳转处理
      2. 兼容ie9
         1. ES6兼容
3. 三、优化
   1. webpack3.x优化打包速度
      1. 替换代码压缩工具
      2. happypack开启多核构建项目
      3. hardSourceWebpackPlugin节省70%的时间
   2. webpack3.x优化首屏加载速度
      1. mac/linux安装
         1. nginx常用命令
         2. nginx配置静态文件服务器
         3. 优化首屏加载速度
      2. 预渲染
         1. 预渲染注意事项
      3. 配置gzip压缩
4. 四、部署
   1. nginx配置反向代理
   2. 持续部署
      1. jenkins安装与启动
      2. jenkins初始化
      3. 创建任务
      4. 安装插件
      5. 实现git钩子功能
      6. 实现自动化构建

一、环境依赖安装

node环境

node和npm环境的安装

根据以下教程安装，然后设置好环境变量

http://www.runoob.com/nodejs/…

视频教程 http://github.liaoxuefeng.com….

centos如果装不上看这里：https://www.rosehosting.com/b…

为npm更改源

npm默认使用的源的服务器在国外下载速度慢，所以需要更换源

以下两种方法任选一种

使用cnpm代替npm

参考链接：https://npm.taobao.org/

1
2
3
4
5

# 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

#安装完cnpm，之后再按照依赖就要使用cnpm
cnpm install [包名]

为npm更换源

参考链接 https://segmentfault.com/a/11…

修改源为淘宝的源

1

npm config set registry http://registry.npm.taobao.org/

我们在发布自己包的时候需要将官方的源改回来

1

npm config set registry https://registry.npmjs.org/

管理(更新)nodejs的版本

切换nodejs版本有两种方式，分别是nvm和n,n更简单推荐使用

使用n管理nodejs版本

参考链接 https://www.jianshu.com/p/c64...

官网 https://github.com/tj/n

1
2
3
4
5
6
7
8
9
10
11
12

#安装
npm install -g n

#使用n下载所需node版本
n 版本号
#下载最新版本
n latest
# 切换版本
输入 n，
然后选中所需版本
#以指定的版本来执行版本
n use 7.4.0 index.js

linux使用n安装新版本nodejs之后，如果node -v还是原来的版本，那么就需要改变一下环境变量

1
2
3
4

vim .bash_profile
export NODE_HOME=/usr/local     #NODE_HOME改成新版本nodejs安装的目录，如果找不到，find / -name node
export PATH=$NODE_HOME/bin:$PATH
export NODE_PATH=$NODE_HOME/lib/node_modules:$PATH

修改环境变量参考：https://blog.csdn.net/yi412/a…

package.json文件详解

参考文档 http://javascript.ruanyifeng….

vue脚手架

vue-cli目前已经更新到3版本，vue-cli3把webpack相关的配置隐藏起来了，所有的配置都在vue.config.js文件夹中，所以使用vue-cli3需要的webpack水平较高，建议使用vue-cli2

vue-cli2.x安装

参考链接：https://github.com/vuejs/vue-…

安装：

1

npm install -g vue-cli

用法：

1

$ vue init < template-name > < project-name >

例：

1

$ vue init webpack my-project

目前可用的模块包括：

• webpack - 一个功能齐全的Webpack + vue-loader设置，具有热重载，linting，测试和css提取功能。
• webpack-simple - 一个简单的Webpack + vue-loader设置，用于快速原型设计。
• browserify -全功能Browserify + vueify设置用热重装载，linting＆单元测试。
• browserify -simple - 一个简单的Browserify + vueify设置，用于快速原型设计。
• pwa - 基于webpack模板的vue-cli的PWA模板
• simple - 单个HTML文件中最简单的Vue设置

vue-cli3.x安装及配置(仅供参考)

vue-cli3x的官方文档：https://cli.vuejs.org/

Vue-cli3 中vue.config.js文件配置参考文档：https://cli.vuejs.org/zh/conf…

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装

1

npm install -g @vue/cli

安装了vue-cli3如果还想使用vue-cli2的init功能,需要安装一个桥接功能

1

npm install -g @vue/cli-init

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  //例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
  baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
 
  // outputDir: 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）
  outputDir: "dist",
  //用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: "assets",
  //指定生成的 index.html 的输出路径  (打包之后，改变系统默认的index.html的文件名)
  // indexPath: "myIndex.html",
  //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
  filenameHashing: false,
 
  //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  `lintOnSave`: true,
  //如果你想要在生产构建时禁用 eslint-loader，你可以用如下配置
  // lintOnSave: process.env.NODE_ENV !== 'production',
 
  //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。(默认false)
  // runtimeCompiler: false,
 
  /**
   * 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   *  打包之后发现map文件过大，项目文件体积很大，设置为false就可以不输出map文件
   *  map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
   *  有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
   * */
  productionSourceMap: false,
 
  // 它支持webPack-dev-server的所有选项
  devServer: {
    host: "localhost",
    port: 1111, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
 
    // 配置多个代理
    proxy: {
      "/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true
      },
      "/foo": {
        target: "<other_url>"
      }
    }
  }
};

二、开发

以下内容依赖环境为 ： vue-cli 版本2.9.x

项目github地址 :

• 前端 https://github.com/huangyangt…
• 后端: https://github.com/huangyangt…

安装完以上依赖后，就可以开始一个项目了,我们先看下后端api的定义

前后端交互报文定义以及数据api接口

前后端交互报文定义

请求

1
2
3
4
5
6

http request header{ //除登录注册以外的请求，发起请求时要在请求头中加入token
    authorization:jwt
}
http request body{
    
}

返回

1
2
3
4
5
6
7
8
9

http response header{
    
}
http response body{
    code:业务处理状态码
    msg:业务处理描述
    token:jwt token
    data:业务数据
}

项目中使用的后台api定义如下

1

注：服务器端的host为118.24.85.97，端口为22222

测试api是否可用

1. uri: http://118.24.85.97:22222/api
2. 描述：测试接口是否能用，能用的话返回 ‘API WORDS’字符串
3. 请求类型 GET
4. 请求参数 无
5. 返回值 {‘Api Works’}

注册

1. uri: http://118.24.85.97:22222/api/users/reg
2. 描述:注册
3. 请求类型 POST
4. 请求参数

1. 返回参数 不重要

登录

1. uri: http://118.24.85.97:22222/api/users/login
2. 描述:登录
3. 请求类型 POST
4. 请求参数

1. 返回参数

获取当前用户信息

1. uri: http://118.24.85.97:22222/api/users/current
2. 描述:获取用户信息
3. 请求类型 GET
4. 请求参数 无
5. 返回参数

##初始化项目

在终端中输入

1

vue init webpack vue2_template

然后会有一些选项让你选,按照项目需求选择，例如我不需要eslint,unit test，就可以选No，现在选no将来如果需要的话也可以自己安装

安装完成之后，按照提示切换到相应目录，执行相应指令，然后在浏览器打开网址，这样一个简单的vue项目就启动起来了

项目文件介绍

整个文件介绍：

注意：

1. 开发主要使用src文件夹
2. webpack的配置文件配置文件详解看这里：https://segmentfault.com/a/11…
3. package.json配置详解 http://javascript.ruanyifeng….

src目录介绍

首先在src目录下新建一个文件夹views,用来放我们的主要页面，然后在assets文件夹中建立fonts styles imgs，用来存放相应的资源，建完之后，文件夹如下

跨域、axios配置与api管理

在这个项目中，我们使用axios进行数据请求

axios中文文档： https://www.kancloud.cn/yunye…

1
2

# 安装axios
npm/cnpm i axios -S      # -S 指安装到package.json中的dependencies中

安装完成后，我们要在main.js中引入,然后测试一下是否成功引入

1
2
3
4
5
6

//main.js文件
import axios from 'axios'

axios.get('https://api.github.com/users?since=10')   //使用github接口做一下测试
  .then(res=>console.log(res))
  .catch(err=>console.log(err))

浏览器显示以下信息，说明引入成功

github提供的接口配置了cors，所以我们能够能够在浏览器正常访问到，但cors兼容性最低到ie10，而且后台不一定会配置cors，所以在开发时我们需要配置一下跨域

参考链接：

1. cors详解 http://www.ruanyifeng.com/blo…

配置跨域

参考文档：https://segmentfault.com/a/11…

先找个没有设置cors的api使用axios访问一下

1
2
3

axios.get('http://118.24.85.97:22222/api')
.then(res=>console.log(res))
.catch(err=>console.log(err))

浏览器会因为同源策略报错

下面进行跨域的配置

配置目录 config/index.js 13行

1
2
3
4
5
6
7
8
9

proxyTable: {
  '/apis':{
    target:'http://118.24.85.97:22222',//后台地址 proxyTable  把/apis映射成target 即 /apis=http://118.24.85.97:22222
    changeOrigin:true,//是否跨域
    pathRewrite:{
      '^/apis':''
    }
  }
}

再进行访问数据时就要在接口前面加上/apis(/apis就相当于http://118.24.85.97:22222)

1
2
3

axios.get('/apis/api')
.then(res=>console.log(res))
.catch(err=>console.log(err))

然后就发现浏览器访问成功了

proxyTable原理：跨域是浏览器禁止的，服务端并不禁止跨域 ，所以浏览器可以发给自己的服务端然后，由自己的服务端再转发给要跨域的服务端，做一层代理。proxyTable使用的是http-proxy-middleware中间件，内部用的是http-proxy

以上配置的跨域是开发环境下的，在生产环境就自动失效了，而且这样配置我们开发时访问接口时，都要写成/apis/xxx/xxx格式，在部署到服务器中时，我们要把/apis拿掉，才能访问到正确的url。有两种方法，一种是在开发环境中设置(通过axios的baseURL)，另一种是在服务器上修改nginx的配置设置。

生产环境去除/apis前缀

在这里详细说下第一种方式，原理是这样的：

通过检测是开发环境和生产环境，设置不同的baseURL,使生产环境和开发环境都能正确访问url

在src目录下新建一个apis目录,然后在apis目录下新建一个api.config.js文件

1
2
3
4
5
6
7

//判断是否是生产环境
//webpack在开发环境和生产环境分别执行不同的js文件，process.env.NODE_ENV设置了不同的值，process.env.NODE_ENV在生产环境中值为'production'(这个值是在build/build.js中第4行设置的)
var isPro = process.env.NODE_ENV=== 'production'
// 如果是生产环境 我们就使用服务器的uri，如果是开发环境，我们就添加/apis前缀
module.exports = {
    baseUrl: isPro ? 'http://118.24.85.97:22222' : '/apis'
}

在main.js中引入这个文件，然后设置axios的baseURL

1
2
3

//引入api.config.js文件，然后设置axios的baseURL
import apiConfig from './apis/api.config'
axios.defaults.baseURL=apiConfig.baseUrl

再来测试一下不加/apis的接口

1
2
3

axios.get('/api')
.then(res=>console.log(res))
.catch(err=>console.log(err))

浏览器显示是ok的。这样我们以后使用axios访问接口就可以不加/apis了，打包后访问也不用手动去除/apis

api统一管理

在vue项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。

具体方法应该挺多的，这里只介绍一种：使用axios+async/await进行接口的统一管理

一般来说，后台的接口是分模块的，例如我们后台的测试接口

• 身份认证 /api/login /api/reg
• 用户信息 /v1/api/user

我们首先在src目录下新建一个apis文件夹，后台提供的所有接口都在这里定义

第二步，按照后台提供的模块新建js文件，我们新建user.js auth.js

第三步，引入axios，做相应的配置

在apis目录下新建一个http.js，在里面做axios相应的配置

1. 我们上文中是在main.js文件引入的axios,设置的baseURL，以上代码可以去除，改为在http.js中引入
2. 我们做的主要是：引入axios,创建一个axios的实例(实例的功能和axios一样)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import axios from 'axios'
import apiConfig from './api.config'
//创建axios的一个实例
var instance = axios.create({
    baseURL:apiConfig.baseUrl,
    timeout: 6000
})


//------------------- 一、请求拦截器 后面介绍
instance.interceptors.request.use(function (config) {

    return config;
}, function (error) {
    // 对请求错误做些什么
    
    return Promise.reject(error);
});

//----------------- 二、响应拦截器 后面介绍
instance.interceptors.response.use(function (response) {
    
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

/**
 * 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
 * 函数的参数及返回值如下：
 * @param {String} method  请求的方法：get、post、delete、put
 * @param {String} url     请求的url:
 * @param {Object} data    请求的参数
 * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
 */
export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data)
    } else if (method == 'get') {
        return instance.get(url, { params: data })
    } else if (method == 'delete') {
        return instance.delete(url, { params: data })
    }else if(method == 'put'){
        return instance.put(url,data)
    }else{
        console.error('未知的method'+method)
        return false
    }
}

第四步，在apis/xxx.js文件中引入http.js导出的函数，拿其中一个文件auth.js说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//auth.js 用于定义用户的登录、注册、注销等

import req from './http.js'

//定义接口

//在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
export const LOGIN =params=>req('post','/api/users/login',params)
//这里使用了箭头函数，转换一下写法：
// export const LOGIN=function(params){
//   return req('post','/api/login',params)
// }

//定义注册接口
export const REG =params=>req('post','/api/users/reg',params)

最后一步，在需要用的该api的组件中引入并调用,我们在App.vue文件中测试下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<template>
  <div>
    <h2>登录</h2>
    用户名<input type="text" v-model="user">
    密码<input type="password" v-model="pass">
    <input type="button" @click="reg" value="注册">
    <input type="button" @click="login" value="登录">
  </div>
</template>
<script>
import {LOGIN,REG} from '../../apis/auth.js'
export default {
  data() {
    return {
      user:'',
      pass:'',
      err:[]
    }
  },
  methods: {
    async reg(){
      try {
        const data = await REG({ name: this.user,pass: this.pass })
        console.log(data)
        alert(JSON.stringify(data))
        this.cleanForm()


      } catch (error) {
        console.log(error)
      }

    },
    async login(){
      try {
        const data = await LOGIN({ name: this.user,pass: this.pass })
        alert(JSON.stringify(data))
        this.cleanForm()
      } catch (error) {
        console.log(error)
      }
    },
    cleanForm(){
      this.user=''
      this.pass=''
    }
  },

}
</script>

注：如果要打开Login.vue,需要配置对应的路由

上面的代码引入了auth.js定义的api，并在对应的方法中使用。代码中用到了async/await,其实很简单，可以假设async是个标识，说明这个函数中有异步请求，await翻译为’等’,后面接一个异步请求，等后面的异步请求执行完成之后，会把结果赋给=左边的值

参考链接 http://www.runoob.com/w3cnote…

总结一下，像上面那样定义接口虽然麻烦点，但有两个好处：

1. 代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便
2. 可以做到接口一次定义，到处使用

路由配置

Vue Router官方文档 https://router.vuejs.org/zh/

前端路由原理：https://segmentfault.com/a/11…

最简配置

路由的配置文件在router/index.js文件中

先引入文件，再进行配置

首先在views目录中新建以下页面，主页(Home/Home.vue),登录页(Login/Login.vue),测试页(Test/Test.vue)

然后配置下路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import Vue from 'vue'
import Router from 'vue-router'
//@表示 src目录 webpack的配置在webpack.base.conf.js第29行 alias{'@':resolve('src')}
import Home from '@/views/Home/Home.vue'
import Login from '@/views/Login/Login.vue'
import Test from '@/views/Test/Test.vue'

Vue.use(Router)

export default new Router({
  routes: [//路由规则
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path:'/login',
      name:'Login',
      component:Login
    },
    {
      path:'/test',
      name:'Test',
      component:Test
    }
  ]
})

路由规则在routes中进行配置,routes是一个数组，接受一系列路由规则，每个路由规则是一个对象，包括路径、路由名字，和路径匹配的组件，建议给每个路由加个名字，在后面可能会用到。

打开浏览器，输入相应的url查看配置的路由是否正确,不正确的话检查下自己的配置

配置路由懒加载

参考文档：

路由懒加载官方文档：https://router.vuejs.org/zh/g…

webpack之mainfest解读：https://github.com/younth/blo…

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。所以，懒加载的含义是当路由被访问时再去加载对应的js代码。

首先，不做路由懒加载的情况下，我们打包一下（切换到项目目录，执行npm run build）,然后会发现项目下生产了3个js文件

简单介绍一下作用：

1. vendor.js 第三方库，一般是 node_modules里面的依赖进行打包 体积最大
2. app.js 入口js打包的结果，即我们编写的所有代码都会打包进去
3. manifest.js 主要是一些异步加载的实现方法（通过建立script方式动态引入js），内容上包含异步js的文件名和路径。

然后我们实现一下路由懒加载 @/router/router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import Vue from 'vue'
import Router from 'vue-router'
// import Home from '@/views/Home/Home.vue'
// import Login from '@/views/Login/Login.vue'
// import Test from '@/views/Test/Test.vue'
// 懒加载方式
const Home=()=>import('@/views/Home/Home.vue')
const Login=()=>import('@/views/Login/Login.vue')
const Test=()=>import('@/views/Test/Test.vue')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path:'/login',
      name:'Login',
      component:Login
    },
    {
      path:'/test',
      name:'Test',
      component:Test
    }
  ]
})

懒加载只是改变了一下组件的引用方式，由原来的直接引入变成异步引入，当我们访问对应的路由path时，才会加载相应的路由组件。

配置完成后再执行一次打包，结果如下：

我们会发现目录中多出来3个js文件,并且app.js文件变小了。这说明配置了懒加载之后，app.js中其他组件的内容被抽离出来，分配到各自的js文件中。配置懒加载之后，刚开始打开页面只会加载app.js文件，只有在用户点击相应路由时，才会加载对应的js代码。当我们的业务代码非常多时，懒加载是个很好的选择。

配置history模式

官方文档：https://router.vuejs.org/zh/g…

配置history模式有两个原因，一是因为hash模式看很丑，二是因为预加载要用到History模式，配置非常简单,只需要配置属性mode的值为’history’

1
2
3
4

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

不过这种方式需要后台的支持，当匹配不到url时，返回url/index.html页面

nginx配置如下

1
2
3

location / {
  try_files $uri /index.html;
}