palmerye

palmerye 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织 palmer.arkstack.cn 编辑
编辑

焊得一手好PCB板的前端er

个人动态

palmerye 赞了文章 · 1月1日

聊聊 ESM、Bundle 、Bundleless 、Vite 、Snowpack

前言

一切要都要从打包构建说起。

当下我们很多项目都是基于 webpack 构建的, 主要用于:

  • 本地开发
  • 打包上线

首先,webpack 是一个伟大的工具。

经过不断的完善,webpack 以及周边的各种轮子已经能很好的满足我们的日常开发需求。

我们都知道,webpack 具备将各类资源打包整合在一起,形成 bundle 的能力。

可是,当资源越来越多时,打包的时间也将越来越长。

一个中大型的项目, 启动构建的时间能达到数分钟之久。

拿我的项目为例, 初次构建大概需要三分钟, 而且这个时间会随着系统的迭代越来越长。

相信不少同学也都遇到过类似的问题。 打包时间太久,这是一个让人很难受的事情。

那有没有什么办法来解决呢?

当然是有的。

这就是今天的主角 ESM, 以及以它为基础的各类构建工具, 比如:

  1. Snowpack
  2. Vite
  3. Parcel

等等。

今天,我们就这个话题展开讨论, 希望能给大家一些其发和帮助。

文章较长,提供一个传送门:

  1. 什么是 ESM
  2. ESM 是如何工作的
  3. Bundle & Bundleless
  4. 实现一个乞丐版 Vite
  5. Snowpack & 实践
  6. bundleless 模式在实际开发中存在的一些问题
  7. 结论

正文

什么是 ESM

ESM 是理论基础, 我们都需要了解。

「 ESM 」 全称 ECMAScript modules,基本主流的浏览器版本都以已经支持。

image.png

ESM 是如何工作的

image.png

当使用ESM 模式时, 浏览器会构建一个依赖关系图。不同依赖项之间的连接来自你使用的导入语句。

通过这些导入语句, 浏览器 或 Node 就能确定加载代码的方式。

通过指定一个入口文件,然后从这个文件开始,通过其中的import语句,查找其他代码。

image.png

通过指定的文件路径, 浏览器就找到了目标代码文件。 但是浏览器并不能直接使用这些文件,它需要解析所有这些文件,以将它们转换为称为模块记录的数据结构。

image.png

然后,需要将 模块记录 转换为 模块实例

image.png

模块实例, 实际上是 「 代码 」(指令列表)与「 状态」(所有变量的值)的组合。

对于整个系统而言, 我们需要的是每个模块的模块实例。

模块加载的过程将从入口文件变为具有完整的模块实例图。

对于ES模块,这分为 三个步骤

  1. 构造—查找,下载所有文件并将其解析为模块记录。
  2. 实例化—查找内存中的框以放置所有导出的值(但尚未用值填充它们)。然后使导出和导入都指向内存中的那些框,这称为链接。
  3. 运行—运行代码以将变量的实际值填充到框中。

image.png

在构建阶段时, 发生三件事情:

  1. 找出从何处下载包含模块的文件
  2. 提取文件(通过从URL下载文件或从文件系统加载文件)
  3. 将文件解析为模块记录

1. 查找

首先,需要找到入口点文件。

在HTML中,可以通过脚本标记告诉加载程序在哪里找到它。

image.png

但是,如何找到下一组模块, 也就是 main.js 直接依赖的模块呢?

这就是导入语句的来源。

导入语句的一部分称为模块说明符, 它告诉加载程序可以在哪里找到每个下一个模块。

image.png

在解析文件之前,我们不知道模块需要获取哪些依赖项,并且在提取文件之前,也无法解析文件。

这意味着我们必须逐层遍历树,解析一个文件,然后找出其依赖项,然后查找并加载这些依赖项。

image.png

如果主线程要等待这些文件中的每个文件下载,则许多其他任务将堆积在其队列中。

那是因为当浏览器中工作时,下载部分会花费很长时间。

image.png

这样阻塞主线程会使使用模块的应用程序使用起来太慢。

这是ES模块规范将算法分为多个阶段的原因之一。

将构造分为自己的阶段,使浏览器可以在开始实例化的同步工作之前获取文件并建立对模块图的理解。

这种方法(算法分为多个阶段)是 ESMCommonJS模块 之间的主要区别之一。

CommonJS可以做不同的事情,因为从文件系统加载文件比通过Internet下载花费的时间少得多。

这意味着Node可以在加载文件时阻止主线程。

并且由于文件已经加载,因此仅实例化和求值(在CommonJS中不是单独的阶段)是有意义的。

这也意味着在返回模块实例之前,需要遍历整棵树,加载,实例化和评估任何依赖项。

该图显示了一个Node模块评估一个require语句,然后Node将同步加载和评估该模块及其任何依赖项

在具有CommonJS模块的Node中,可以在模块说明符中使用变量。

require在寻找下一个模块之前,正在执行该模块中的所有代码。这意味着当进行模块解析时,变量将具有一个值。

但是,使用ES模块时,需要在进行任何评估之前预先建立整个模块图。

这意味着不能在模块说明符中包含变量,因为这些变量还没有值。

使用变量的require语句很好。 使用变量的导入语句不是。

但是,有时将变量用于模块路径确实很有用。

例如,你可能要根据代码在做什么,或者在不同环境中运行来记载不同的模块。

为了使ES模块成为可能,有一个建议叫做动态导入。有了它,您可以使用类似的导入语句:

import(`${path}/foo.js`)

这种工作方式是将使用加载的任何文件import()作为单独图的入口点进行处理。

动态导入的模块将启动一个新图,该图将被单独处理。

两个模块图之间具有依赖性,并用动态导入语句标记

但是要注意一件事–这两个图中的任何模块都将共享一个模块实例。

这是因为加载程序会缓存模块实例。对于特定全局范围内的每个模块,将只有一个模块实例。

这意味着发动机的工作量更少。

例如,这意味着即使多个模块依赖该模块文件,它也只会被提取一次。(这是缓存模块的一个原因。我们将在评估部分中看到另一个原因。)

加载程序使用称为模块映射的内容来管理此缓存。每个全局变量在单独的模块图中跟踪其模块。

当加载程序获取一个URL时,它将把该URL放入模块映射中,并记下它当前正在获取文件。然后它将发出请求并继续以开始获取下一个文件。

加载程序图填充在“模块映射表”中,主模块的URL在左侧,而“获取”一词在右侧

如果另一个模块依赖于同一文件会怎样?加载程序将在模块映射中查找每个URL。如果在其中看到fetching,它将继续前进到下一个URL。

但是模块图不仅跟踪正在获取的文件。模块映射还充当模块的缓存,如下所示。

2. 解析

现在我们已经获取了该文件,我们需要将其解析为模块记录。这有助于浏览器了解模块的不同部分。

该图显示了被解析成模块记录的main.js文件

创建模块记录后,它将被放置在模块图中。这意味着无论何时从此处请求,加载程序都可以将其从该映射中拉出。

模块映射图中的“获取”占位符被模块记录填充

解析中有一个细节看似微不足道,但实际上有很大的含义。

解析所有模块,就像它们"use strict"位于顶部一样。还存在其他细微差异。

例如,关键字await是在模块的顶级代码保留,的值this就是undefined

这种不同的解析方式称为“解析目标”。如果解析相同的文件但使用不同的目标,那么最终将得到不同的结果。
因此,需要在开始解析之前就知道要解析的文件类型是否是模块。

在浏览器中,这非常简单。只需放入type="module"的script标签。
这告诉浏览器应将此文件解析为模块。并且由于只能导入模块,因此浏览器知道任何导入也是模块。

加载程序确定main.js是一个模块,因为script标签上的type属性表明是这样,而counter.js必须是一个模块,因为它已导入

但是在Node中,您不使用HTML标记,因此无法选择使用type属性。社区尝试解决此问题的一种方法是使用 .mjs扩展。使用该扩展名告诉Node,“此文件是一个模块”。您会看到人们在谈论这是解析目标的信号。目前讨论仍在进行中,因此尚不清楚Node社区最终决定使用什么信号。

无论哪种方式,加载程序都将确定是否将文件解析为模块。如果它是一个模块并且有导入,则它将重新开始该过程,直到提取并解析了所有文件。

我们完成了!在加载过程结束时,您已经从只有入口点文件变为拥有大量模块记录。

建设阶段的结果,左侧为JS文件,右侧为3个已解析的模块记录

下一步是实例化此模块并将所有实例链接在一起。

3. 实例化

就像我之前提到的,实例将代码与状态结合在一起。

该状态存在于内存中,因此实例化步骤就是将所有事物连接到内存。

首先,JS引擎创建一个模块环境记录。这将管理模块记录的变量。然后,它将在内存中找到所有导出的框。模块环境记录将跟踪与每个导出关联的内存中的哪个框。

内存中的这些框尚无法获取其值。只有在评估之后,它们的实际值才会被填写。该规则有一个警告:在此阶段中初始化所有导出的函数声明。这使评估工作变得更加容易。

为了实例化模块图,引擎将进行深度优先的后顺序遍历。这意味着它将下降到图表的底部-底部的不依赖其他任何内容的依赖项-并设置其导出。

中间的一列空内存。 计数和显示模块的模块环境记录已连接到内存中的框。

引擎完成了模块下面所有出口的接线-模块所依赖的所有出口。然后,它返回一个级别,以连接来自该模块的导入。

请注意,导出和导入均指向内存中的同一位置。首先连接出口,可以确保所有进口都可以连接到匹配的出口。

与上图相同,但具有main.js的模块环境记录,现在其导入链接到其他两个模块的导出。

这不同于CommonJS模块。在CommonJS中,整个导出对象在导出时被复制。这意味着导出的任何值(例如数字)都是副本。

这意味着,如果导出模块以后更改了该值,则导入模块将看不到该更改。

中间的内存中,有一个导出的通用JS模块指向一个内存位置,然后将值复制到另一个内存位置,而导入的JS模块则指向新位置

相反,ES模块使用称为实时绑定的东西。两个模块都指向内存中的相同位置。这意味着,当导出模块更改值时,该更改将显示在导入模块中。

导出值的模块可以随时更改这些值,但是导入模块不能更改其导入的值。话虽如此,如果模块导入了一个对象,则它可以更改该对象上的属性值。

导出模块更改内存中的值。 导入模块也尝试但失败。

之所以拥有这样的实时绑定,是因为您可以在不运行任何代码的情况下连接所有模块。当您具有循环依赖性时,这将有助于评估,如下所述。

因此,在此步骤结束时,我们已连接了所有实例以及导出/导入变量的存储位置。

现在我们可以开始评估代码,并用它们的值填充这些内存位置。

4. 执行

最后一步是将这些框填充到内存中。JS引擎通过执行顶级代码(函数外部的代码)来实现此目的。

除了仅在内存中填充这些框外,评估代码还可能触发副作用。例如,模块可能会调用服务器。

模块将在功能之外进行编码,标记为顶级代码

由于存在潜在的副作用,您只需要评估模块一次。与实例化中发生的链接可以完全相同的结果执行多次相反,评估可以根据您执行多少次而得出不同的结果。

这是拥有模块映射的原因之一。模块映射通过规范的URL缓存模块,因此每个模块只有一个模块记录。这样可以确保每个模块仅执行一次。与实例化一样,这是深度优先的后遍历。

那我们之前谈到的那些周期呢?

在循环依赖关系中,您最终在图中有一个循环。通常,这是一个漫长的循环。但是为了解释这个问题,我将使用一个简短的循环的人为例子。

左侧为4个模块循环的复杂模块图。 右侧有一个简单的2个模块循环。

让我们看一下如何将其与CommonJS模块一起使用。首先,主模块将执行直到require语句。然后它将去加载计数器模块。

一个commonJS模块,其变量是在require语句之后从main.js导出到counter.js的,具体取决于该导入

然后,计数器模块将尝试message从导出对象进行访问。但是由于尚未在主模块中对此进行评估,因此它将返回undefined。JS引擎将在内存中为局部变量分配空间,并将其值设置为undefined。

中间的内存,main.js和内存之间没有连接,但是从counter.js到未定义的内存位置的导入链接

评估一直持续到计数器模块顶级代码的末尾。我们想看看我们是否最终将获得正确的消息值(在评估main.js之后),因此我们设置了超时时间。然后评估在上恢复main.js

counter.js将控制权返回给main.js,从而完成评估

消息变量将被初始化并添加到内存中。但是由于两者之间没有连接,因此在所需模块中它将保持未定义状态。

main.js获取到内存的导出连接并填写正确的值,但是counter.js仍指向其中未定义的其他内存位置

如果使用实时绑定处理导出,则计数器模块最终将看到正确的值。到超时运行时,main.js的评估将完成并填写值。

支持这些循环是ES模块设计背后的重要理由。正是这种设计使它们成为可能。


(以上是关于 ESM 的理论介绍, 原文链接在文末)。

Bundle & Bundleless

谈及 Bundleless 的优势,首先是启动快

因为不需要过多的打包,只需要处理修改后的单个文件,所以响应速度是 O(1) 级别,刷新即可即时生效,速度很快。

image.png

所以, 在开发模式下,相比于Bundle,Bundleless 有着巨大的优势。

基于 Webpack 的 bundle 开发模式

image.png
上面的图具体的模块加载机制可以简化为下图:
image.png
在项目启动和有文件变化时重新进行打包,这使得项目的启动和二次构建都需要做较多的事情,相应的耗时也会增长。

基于 ESModule 的 Bundleless 模式

image.png
从上图可以看到,已经不再有一个构建好的 bundle、chunk 之类的文件,而是直接加载本地对应的文件。
image.png
从上图可以看到,在 Bundleless 的机制下,项目的启动只需要启动一个服务器承接浏览器的请求即可,同时在文件变更时,也只需要额外处理变更的文件即可,其他文件可直接在缓存中读取。

对比总结

image.png

Bundleless 模式可以充分利用浏览器自主加载的特性,跳过打包的过程,使得我们能在项目启动时获取到极快的启动速度,在本地更新时只需要重新编译单个文件。

实现一个乞丐版 Vite

Vite 也是基于 ESM 的, 文件处理速度 O(1)级别, 非常快。

作为探索, 我就简单实现了一个乞丐版Vite:

GitHub 地址: Vite-mini

image.png

简要分析一下。

<body>
  <div id="app"></div>
  <script type="module" data-original="/src/main.js"></script>
</body>

html 文件中直接使用了浏览器原生的 ESM(type="module") 能力。

所有的 js 文件经过 vite 处理后,其 import 的模块路径都会被修改,在前面加上 /@modules/。当浏览器请求 import 模块的时候,vite 会在 node_modules 中找到对应的文件进行返回。

image.png

其中最关键的步骤就是模块的记载和解析, 这里我简单用koa简单实现了一下, 整体结构:

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const compilerSfc = require('@vue/compiler-sfc');
const compileDom = require('@vue/compiler-dom');
const app = new Koa();

// 处理引入路径
function rewriteImport(content) {
  // ...
}

// 处理文件类型等, 比如支持ts, less 等类似webpack的loader的功能
app.use(async (ctx) => {
  // ...
}

app.listen(3001, () => {
  console.log('3001');
});

我们先看路径相关的处理:

function rewriteImport(content) {
    return content.replace(/from ['"]([^'"]+)['"]/g, function (s0, s1) {
        // import a from './c.js' 这种格式的不需要改写
        // 只改写需要去node_module找的
        if (s1[0] !== '.' && s1[0] !== '/') {
          return `from '/@modules/${s1}'`;
        }
        return s0;
    });
}

处理文件内容: 源码地址

image.png

后续的都是类似的:

image.png

这个代码只是解释实现原理, 不同的文件类型处理逻辑其实可以抽离出去, 以中间件的形式去处理。

代码实现的比较简单, 就不额解释了。

Snowpack

image.png

和 webpack 的对比:

image.png

我使用 Snowpack 做了个 demo , 支持打包, 输出 bundle。

github: Snowpack-React-Demo

image.png

能够清晰的看到, 控制台产生了大量的文件请求(也叫瀑布网络请求),

不过因为都是加载的本地文件, 所以速度很快。

配合HMR, 实现编辑完成立刻生效, 几乎不用等待:

image.png

但是如果是在生产中,这些请求对于生产中的页面加载时间而言, 就不太好了。

尤其是HTTP1.1,浏览器都会有并行下载的上限,大部分是5个左右,所以如果你有60个依赖性要下载,就需要等好长一点。

虽然说HTTP2多少可以改善这问题,但若是东西太多,依然没办法。

关于这个项目的打包, 直接执行build:

image.png

打包完成后的文件目录,和传统的 webpack 基本一致:

image.png

在 build 目录下启动一个静态文件服务:

image.png

build 模式下,还是借助了 webpack 的打包能力:

image.png

做了资源合并:

image.png

就这点而言, 我认为未来一段时间内, 生产环境还是不可避免的要走bundle模式。

bundleless 模式在实际开发中的一些问题

开门见山吧, 开发体验不是很友好,几点比较突出的问题:

  • 部分模块没有提供 ESModule 的包。(这一点尤为致命)
  • 生态不够健全,工具链不够完善;

当然还有其他方方面面的问题, 就不一一列举。

我简单改造了一个页面, 就遇到很多奇奇怪怪的问题, 开发起来十分难受, 尽管代码的修改能立刻生效。

结论

bundleless 能在开发模式下带了很大的便利。 但就目前来说,要运用到生产的话, 还是有一段路要走的。

就目当下而言, 如果真的要用的话,可能还是 bundleless(dev) + bundle(production) 的组合。

至于未来能不能全面铺开 bundleless,我认为还是有可能的, 交给时间吧。

结尾

本文主要介绍了 esm 的原理, 以及介绍了以此为基础的Vite, Snowpack 等工具, 提供了两个可运行的 demo:

  1. Vite-mini
  2. Snowpack-React-Demo

并探索了 bundleless 在生产中的可行性。

Bundleless, 本质上是将原先 Webpack 中模块依赖解析的工作交给浏览器去执行,使得在开发过程中代码的转换变少,极大地提升了开发过程中的构建速度,同时也可以更好地利用浏览器的相关开发工具。

最后,也非常感谢 ESModule、Vite、Snowpack 等标准和工具的出现,为前端开发提效。

才疏学浅, 文中若有错误,还能各位大佬指正, 谢谢。

参考资料

  1. https://hacks.mozilla.org/201...
  2. https://developer.aliyun.com/...

如果你觉得这篇内容对你挺有启发,可以:

  1. 点个「在看」,让更多的人也能看到这篇内容。
  2. 关注公众号「前端e进阶」,掌握前端面试重难点,公众号后台回复「加群」和小伙伴们畅聊技术。

图片

查看原文

赞 53 收藏 24 评论 7

palmerye 赞了文章 · 2020-07-09

写给前端的算法进阶指南,我是如何两个月零基础刷200题

前言

最近国内大厂面试中,出现 LeetCode 真题考察的频率越来越高了。我也观察到有越来越多的前端同学开始关注算法这个话题。

但是算法是一个门槛很高的东西,在一个算法新手的眼里,它的智商门槛要求很高。事实上是这个样子的吗?如果你怀疑自己的智商不够去学习算法,那么你一定要先看完这篇文章:《天生不聪明》,也正是这篇文章激励了我开始了算法之路。

这篇文章,我会先总结几个必学的题目分类,给出这个分类下必做例题的详细题解,并且在文章的末尾给出每个分类下必刷的题目的获取方式。

一定要耐心看到底,会有重磅干货。

心路

我从 5 月份准备离职的时候开始学习算法,在此之前对于算法我是零基础,在最开始我对于算法的感受也和大家一样,觉得自己智商可能不够,望而却步。但是看了一些大佬对于算法和智商之间的关系,我发现算法好像也是一个通过练习可以慢慢成长的学科,而不是只有智商达到了某个点才能有入场券,所以我开始了我的算法之路。通过视频课程 + 分类刷题 + 总结题解 + 回头复习的方式,我在两个月的时间里把力扣的解题数量刷到了200题。对于一个算法新人来说,这应该算是一个还可以的成绩,这篇文章,我把我总结的一些学习心得,和一些经典例题分享给大家。

学习方式

  1. 分类刷题:很多第一次接触力扣的同学对于刷题的方法不太了解,有的人跟着题号刷,有的人跟着每日一题刷,但是这种漫无目的的刷题方式一般都会在中途某一天放弃,或者刷了很久但是却发现没什么沉淀。这里不啰嗦,直接点明一个所有大佬都推荐的刷题方法:把自己的学习阶段分散成几个时间段去刷不同分类的题型,比如第一周专门解链表相关题型,第二周专门解二叉树相关题型。这样你的知识会形成一个体系,通过一段时间的刻意练习把这个题型相关的知识点强化到你的脑海中,不容易遗忘。
  2. 适当放弃:很多同学遇到一个难题,非得埋头钻研,干他 2 个小时。最后挫败感十足,久而久之可能就放弃了算法之路。要知道算法是个沉淀了几十年的领域,题解里的某个算法可能是某些教授研究很多年的心血,你想靠自己一个新手去想出来同等优秀的解法,岂不是想太多了。所以要学会适当放弃,一般来说,比较有目的性(面试)刷题的同学,他面对一道新的题目毫无头绪的话,会在 10 分钟之内直接放弃去看题解,然后记录下来,反复复习,直到这个解法成为自己的知识为止。这是效率最高的学习办法。
  3. 接受自己是新手:没错,说的难听一点,接受自己不是天才这个现实。你在刷题的过程中会遇到很多困扰你的时候,比如相同的题型已经看过例题,稍微变了条件就解不出来。或者对于一个 easy 难度的题毫无头绪。或者甚至看不懂别人的题解(没错我经常)相信我,这很正常,不能说明你不适合学习算法,只能说明算法确实是一个博大精深的领域,把自己在其他领域的沉淀抛开来,接受自己是新手这个事实,多看题解,多请教别人。

分类大纲

  1. 算法的复杂度分析。
  2. 排序算法,以及他们的区别和优化。
  3. 数组中的双指针、滑动窗口思想。
  4. 利用 Map 和 Set 处理查找表问题。
  5. 链表的各种问题。
  6. 利用递归和迭代法解决二叉树问题。
  7. 栈、队列、DFS、BFS。
  8. 回溯法、贪心算法、动态规划。

题解

接下来我会放出几个分类的经典题型,以及我对应的讲解,当做开胃菜,并且在文章的末尾我会给出获取每个分类推荐你去刷的题目的合集,记得看到底哦。

查找表问题

两个数组的交集 II-350

给定两个数组,编写一个函数来计算它们的交集。

示例 1:

输入: nums1 = [1,2,2,1], nums2 = [2,2]
输出: [2,2]
示例 2:

输入: nums1 = [4,9,5], nums2 = [9,4,9,8,4]
输出: [4,9]

来源:力扣(LeetCode)
链接:https://leetcode-cn.com/probl...
著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


为两个数组分别建立 map,用来存储 num -> count 的键值对,统计每个数字出现的数量。

然后对其中一个 map 进行遍历,查看这个数字在两个数组中分别出现的数量,取出现的最小的那个数量(比如数组 1 中出现了 1 次,数组 2 中出现了 2 次,那么交集应该取 1 次),push 到结果数组中即可。

/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number[]}
 */
let intersect = function (nums1, nums2) {
  let map1 = makeCountMap(nums1)
  let map2 = makeCountMap(nums2)
  let res = []
  for (let num of map1.keys()) {
    const count1 = map1.get(num)
    const count2 = map2.get(num)

    if (count2) {
      const pushCount = Math.min(count1, count2)
      for (let i = 0; i < pushCount; i++) {
        res.push(num)
      }
    }
  }
  return res
}

function makeCountMap(nums) {
  let map = new Map()
  for (let i = 0; i < nums.length; i++) {
    let num = nums[i]
    let count = map.get(num)
    if (count) {
      map.set(num, count + 1)
    } else {
      map.set(num, 1)
    }
  }
  return map
}

双指针问题

最接近的三数之和-16

给定一个包括  n 个整数的数组  nums  和 一个目标值  target。找出  nums  中的三个整数,使得它们的和与  target  最接近。返回这三个数的和。假定每组输入只存在唯一答案。

示例:

输入:nums = [-1,2,1,-4], target = 1
输出:2
解释:与 target 最接近的和是 2 (-1 + 2 + 1 = 2) 。

提示:

3 <= nums.length <= 10^3
-10^3 <= nums[i] <= 10^3
-10^4 <= target <= 10^4

来源:力扣(LeetCode)

链接:https://leetcode-cn.com/probl...

著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


先按照升序排序,然后分别从左往右依次选择一个基础点 i0 <= i <= nums.length - 3),在基础点的右侧用双指针去不断的找最小的差值。

假设基础点是 i,初始化的时候,双指针分别是:

  • lefti + 1,基础点右边一位。
  • right: nums.length - 1 数组最后一位。

然后求此时的和,如果和大于 target,那么可以把右指针左移一位,去试试更小一点的值,反之则把左指针右移。

在这个过程中,不断更新全局的最小差值 min,和此时记录下来的和 res

最后返回 res 即可。

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number}
 */
let threeSumClosest = function (nums, target) {
  let n = nums.length
  if (n === 3) {
    return getSum(nums)
  }
  // 先升序排序 此为解题的前置条件
  nums.sort((a, b) => a - b)

  let min = Infinity // 和 target 的最小差
  let res

  // 从左往右依次尝试定一个基础指针 右边至少再保留两位 否则无法凑成3个
  for (let i = 0; i <= nums.length - 3; i++) {
    let basic = nums[i]
    let left = i + 1 // 左指针先从 i 右侧的第一位开始尝试
    let right = n - 1 // 右指针先从数组最后一项开始尝试

    while (left < right) {
      let sum = basic + nums[left] + nums[right] // 三数求和
      // 更新最小差
      let diff = Math.abs(sum - target)
      if (diff < min) {
        min = diff
        res = sum
      }
      if (sum < target) {
        // 求出的和如果小于目标值的话 可以尝试把左指针右移 扩大值
        left++
      } else if (sum > target) {
        // 反之则右指针左移
        right--
      } else {
        // 相等的话 差就为0 一定是答案
        return sum
      }
    }
  }

  return res
}

function getSum(nums) {
  return nums.reduce((total, cur) => total + cur, 0)
}

滑动窗口问题

无重复字符的最长子串-3

给定一个字符串,请你找出其中不含有重复字符的   最长子串   的长度。

示例  1:

输入: "abcabcbb"
输出: 3
解释: 因为无重复字符的最长子串是 "abc",所以其长度为 3。

示例 2:

输入: "bbbbb"
输出: 1
解释: 因为无重复字符的最长子串是 "b",所以其长度为 1。

示例 3:

输入: "pwwkew"
输出: 3
解释: 因为无重复字符的最长子串是 "wke",所以其长度为 3。
     请注意,你的答案必须是 子串 的长度,"pwke" 是一个子序列,不是子串。

来源:力扣(LeetCode)
链接:https://leetcode-cn.com/probl...
著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


这题是比较典型的滑动窗口问题,定义一个左边界 left 和一个右边界 right,形成一个窗口,并且在这个窗口中保证不出现重复的字符串。

这需要用到一个新的变量 freqMap,用来记录窗口中的字母出现的频率数。在此基础上,先尝试取窗口的右边界再右边一个位置的值,也就是 str[right + 1],然后拿这个值去 freqMap 中查找:

  1. 这个值没有出现过,那就直接把 right ++,扩大窗口右边界。
  2. 如果这个值出现过,那么把 left ++,缩进左边界,并且记得把 str[left] 位置的值在 freqMap 中减掉。

循环条件是 left < str.length,允许左边界一直滑动到字符串的右界。

/**
 * @param {string} s
 * @return {number}
 */
let lengthOfLongestSubstring = function (str) {
  let n = str.length
  // 滑动窗口为s[left...right]
  let left = 0
  let right = -1
  let freqMap = {} // 记录当前子串中下标对应的出现频率
  let max = 0 // 找到的满足条件子串的最长长度

  while (left < n) {
    let nextLetter = str[right + 1]
    if (!freqMap[nextLetter] && nextLetter !== undefined) {
      freqMap[nextLetter] = 1
      right++
    } else {
      freqMap[str[left]] = 0
      left++
    }
    max = Math.max(max, right - left + 1)
  }

  return max
}

链表问题

两两交换链表中的节点-24

给定一个链表,两两交换其中相邻的节点,并返回交换后的链表。

你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换。

示例:

给定 1->2->3->4, 你应该返回 2->1->4->3.

来源:力扣(LeetCode)

链接:https://leetcode-cn.com/probl...

著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


这题本意比较简单,1 -> 2 -> 3 -> 4 的情况下可以定义一个递归的辅助函数 helper,这个辅助函数对于节点和它的下一个节点进行交换,比如 helper(1) 处理 1 -> 2,并且把交换变成 2 -> 1 的尾节点 1next继续指向 helper(3)也就是交换后的 4 -> 3

边界情况在于,如果顺利的作了两两交换,那么交换后我们的函数返回出去的是 交换后的头部节点,但是如果是奇数剩余项的情况下,没办法做交换,那就需要直接返回 原本的头部节点。这个在 helper函数和主函数中都有体现。

let swapPairs = function (head) {
  if (!head) return null
  let helper = function (node) {
    let tempNext = node.next
    if (tempNext) {
      let tempNextNext = node.next.next
      node.next.next = node
      if (tempNextNext) {
        node.next = helper(tempNextNext)
      } else {
        node.next = null
      }
    }
    return tempNext || node
  }

  let res = helper(head)

  return res || head
}

深度优先遍历问题

二叉树的所有路径-257

给定一个二叉树,返回所有从根节点到叶子节点的路径。

说明:  叶子节点是指没有子节点的节点。

示例:

输入:

   1
 /   \
2     3
 \
  5

输出: ["1->2->5", "1->3"]

解释: 所有根节点到叶子节点的路径为: 1->2->5, 1->3

来源:力扣(LeetCode)

链接:https://leetcode-cn.com/probl...

著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


用当前节点的值去拼接左右子树递归调用当前函数获得的所有路径。

也就是根节点拼上以左子树为根节点得到的路径,加上根节点拼上以右子树为根节点得到的所有路径。

直到叶子节点,仅仅返回包含当前节点的值的数组。

let binaryTreePaths = function (root) {
  let res = []
  if (!root) {
    return res
  }

  if (!root.left && !root.right) {
    return [`${root.val}`]
  }

  let leftPaths = binaryTreePaths(root.left)
  let rightPaths = binaryTreePaths(root.right)

  leftPaths.forEach((leftPath) => {
    res.push(`${root.val}->${leftPath}`)
  })
  rightPaths.forEach((rightPath) => {
    res.push(`${root.val}->${rightPath}`)
  })

  return res
}

广度优先遍历(BFS)问题

在每个树行中找最大值-515

https://leetcode-cn.com/probl...

您需要在二叉树的每一行中找到最大的值。

输入:

          1
         / \
        3   2
       / \   \
      5   3   9

输出: [1, 3, 9]

这是一道典型的 BFS 题目,BFS 的套路其实就是维护一个 queue 队列,在读取子节点的时候同时把发现的孙子节点 push 到队列中,但是先不处理,等到这一轮队列中的子节点处理完成以后,下一轮再继续处理的就是孙子节点了,这就实现了层序遍历,也就是一层层的去处理。

但是这里有一个问题卡住我了一会,就是如何知道当前处理的节点是哪个层级的,在最开始的时候我尝试写了一下二叉树求某个 index 所在层级的公式,但是发现这种公式只能处理「平衡二叉树」。

后面看题解发现他们都没有专门维护层级,再仔细一看才明白层级的思路:

其实就是在每一轮 while 循环里,再开一个 for 循环,这个 for 循环的终点是「提前缓存好的 length 快照」,也就是进入这轮 while 循环时,queue 的长度。其实这个长度就恰好代表了「一个层级的长度」。

缓存后,for 循环里可以安全的把子节点 push 到数组里而不影响缓存的当前层级长度。

另外有一个小 tips,在 for 循环处理完成后,应该要把 queue 的长度截取掉上述的缓存长度。一开始我使用的是 queue.splice(0, len),结果速度只击败了 33%的人。后面换成 for 循环中去一个一个shift来截取,速度就击败了 77%的人。

/**
 * @param {TreeNode} root
 * @return {number[]}
 */
let largestValues = function (root) {
  if (!root) return []
  let queue = [root]
  let maximums = []

  while (queue.length) {
    let max = Number.MIN_SAFE_INTEGER
    // 这里需要先缓存length 这个length代表当前层级的所有节点
    // 在循环开始后 会push新的节点 length就不稳定了
    let len = queue.length
    for (let i = 0; i < len; i++) {
      let node = queue[i]
      max = Math.max(node.val, max)

      if (node.left) {
        queue.push(node.left)
      }
      if (node.right) {
        queue.push(node.right)
      }
    }

    // 本「层级」处理完毕,截取掉。
    for (let i = 0; i < len; i++) {
      queue.shift()
    }

    // 这个for循环结束后 代表当前层级的节点全部处理完毕
    // 直接把计算出来的最大值push到数组里即可。
    maximums.push(max)
  }

  return maximums
}

栈问题

有效的括号-20

给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。

有效字符串需满足:

  • 左括号必须用相同类型的右括号闭合。
  • 左括号必须以正确的顺序闭合。
  • 注意空字符串可被认为是有效字符串。

示例 1:

输入: "()"
输出: true

示例 2:

输入: "()[]{}"
输出: true

示例 3:

输入: "(]"
输出: false

示例 4:

输入: "([)]"
输出: false

示例 5:

输入: "{[]}"
输出: true

https://leetcode-cn.com/probl...


提前记录好左括号类型 (, {, [和右括号类型), }, ]的映射表,当遍历中遇到左括号的时候,就放入栈 stack 中(其实就是数组),当遇到右括号时,就把 stack 顶的元素 pop 出来,看一下是否是这个右括号所匹配的左括号(比如 () 是一对匹配的括号)。

当遍历结束后,栈中不应该剩下任何元素,返回成功,否则就是失败。

/**
 * @param {string} s
 * @return {boolean}
 */
let isValid = function (s) {
  let sl = s.length
  if (sl % 2 !== 0) return false
  let leftToRight = {
    "{": "}",
    "[": "]",
    "(": ")",
  }
  // 建立一个反向的 value -> key 映射表
  let rightToLeft = createReversedMap(leftToRight)
  // 用来匹配左右括号的栈
  let stack = []

  for (let i = 0; i < s.length; i++) {
    let bracket = s[i]
    // 左括号 放进栈中
    if (leftToRight[bracket]) {
      stack.push(bracket)
    } else {
      let needLeftBracket = rightToLeft[bracket]
      // 左右括号都不是 直接失败
      if (!needLeftBracket) {
        return false
      }

      // 栈中取出最后一个括号 如果不是需要的那个左括号 就失败
      let lastBracket = stack.pop()
      if (needLeftBracket !== lastBracket) {
        return false
      }
    }
  }

  if (stack.length) {
    return false
  }
  return true
}

function createReversedMap(map) {
  return Object.keys(map).reduce((prev, key) => {
    const value = map[key]
    prev[value] = key
    return prev
  }, {})
}

递归与回溯

直接看我写的这两篇文章即可,递归与回溯甚至是平常业务开发中最常见的算法场景之一了,所以我重点总结了两篇文章。

《前端电商 sku 的全排列算法很难吗?学会这个套路,彻底掌握排列组合。》

前端「N 皇后」递归回溯经典问题图解

动态规划

打家劫舍 - 198

你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。

给定一个代表每个房屋存放金额的非负整数数组,计算你在不触动警报装置的情况下,能够偷窃到的最高金额。

示例 1:

输入: [1,2,3,1]
输出: 4
解释: 偷窃 1 号房屋 (金额 = 1) ,然后偷窃 3 号房屋 (金额 = 3)。
  偷窃到的最高金额 = 1 + 3 = 4 。
示例 2:

输入: [2,7,9,3,1]
输出: 12
解释: 偷窃 1 号房屋 (金额 = 2), 偷窃 3 号房屋 (金额 = 9),接着偷窃 5 号房屋 (金额 = 1)。
  偷窃到的最高金额 = 2 + 9 + 1 = 12 。

来源:力扣(LeetCode)
链接:https://leetcode-cn.com/probl...
著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


动态规划的一个很重要的过程就是找到「状态」和「状态转移方程」,在这个问题里,设 i 是当前屋子的下标,状态就是 以 i 为起点偷窃的最大价值

在某一个房子面前,盗贼只有两种选择:偷或者不偷

  1. 偷的话,价值就是「当前房子的价值」+「下两个房子开始盗窃的最大价值」
  2. 不偷的话,价值就是「下一个房子开始盗窃的最大价值」

在这两个值中,选择最大值记录在 dp[i]中,就得到了i 为起点所能偷窃的最大价值。

动态规划的起手式,找基础状态,在这题中,以终点为起点的最大价值一定是最好找的,因为终点不可能再继续往后偷窃了,所以设 n 为房子的总数量, dp[n - 1] 就是 nums[n - 1],小偷只能选择偷窃这个房子,而不能跳过去选择下一个不存在的房子。

那么就找到了动态规划的状态转移方程:

// 抢劫当前房子
robNow = nums[i] + dp[i + 2] // 「当前房子的价值」 + 「i + 2 下标房子为起点的最大价值」

// 不抢当前房子,抢下一个房子
robNext = dp[i + 1] //「i + 1 下标房子为起点的最大价值」

// 两者选择最大值
dp[i] = Math.max(robNow, robNext)

,并且从后往前求解。

function (nums) {
  if (!nums.length) {
    return 0;
  }
  let dp = [];

  for (let i = nums.length - 1; i >= 0; i--) {
    let robNow = nums[i] + (dp[i + 2] || 0)
    let robNext = dp[i + 1] || 0

    dp[i] = Math.max(robNow, robNext)
  }

  return dp[0];
};

最后返回 以 0 为起点开始打劫的最大价值 即可。

贪心算法问题

分发饼干-455

假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。对每个孩子 i ,都有一个胃口值  gi ,这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j ,都有一个尺寸 sj 。如果 sj >= gi ,我们可以将这个饼干 j 分配给孩子 i ,这个孩子会得到满足。你的目标是尽可能满足越多数量的孩子,并输出这个最大数值。

注意:

你可以假设胃口值为正。
一个小朋友最多只能拥有一块饼干。

示例 1:

输入: [1,2,3], [1,1]

输出: 1

解释:
你有三个孩子和两块小饼干,3个孩子的胃口值分别是:1,2,3。
虽然你有两块小饼干,由于他们的尺寸都是1,你只能让胃口值是1的孩子满足。
所以你应该输出1。
示例 2:

输入: [1,2], [1,2,3]

输出: 2

解释:
你有两个孩子和三块小饼干,2个孩子的胃口值分别是1,2。
你拥有的饼干数量和尺寸都足以让所有孩子满足。
所以你应该输出2.

来源:力扣(LeetCode)
链接:https://leetcode-cn.com/probl...
著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。


把饼干和孩子的需求都排序好,然后从最小的饼干分配给需求最小的孩子开始,不断的尝试新的饼干和新的孩子,这样能保证每个分给孩子的饼干都恰到好处的不浪费,又满足需求。

利用双指针不断的更新 i 孩子的需求下标和 j饼干的值,直到两者有其一达到了终点位置:

  1. 如果当前的饼干不满足孩子的胃口,那么把 j++ 寻找下一个饼干,不用担心这个饼干被浪费,因为这个饼干更不可能满足下一个孩子(胃口更大)。
  2. 如果满足,那么 i++; j++; count++ 记录当前的成功数量,继续寻找下一个孩子和下一个饼干。
/**
 * @param {number[]} g
 * @param {number[]} s
 * @return {number}
 */
let findContentChildren = function (g, s) {
  g.sort((a, b) => a - b)
  s.sort((a, b) => a - b)

  let i = 0
  let j = 0

  let count = 0
  while (j < s.length && i < g.length) {
    let need = g[i]
    let cookie = s[j]

    if (cookie >= need) {
      count++
      i++
      j++
    } else {
      j++
    }
  }

  return count
}

必做题目

其实写了这么多,以上分类所提到的题目,只是当前分类下比较适合作为例题来讲解的题目而已,在整个 LeetCode 学习过程中只是冰山一角。这些题可以作为你深入这个分类的一个入门例题,但是不可避免的是,你必须去下苦功夫刷每个分类下的其他经典题目

如果你信任我,你也可以点击这里 获取各个分类下必做题目的详细题解,我跟着一个ACM 亚洲区奖牌获得者给出的提纲,整理了100+道必做题目的详细题解

那么什么叫必做题目呢?

  1. 它核心考察算法思想,而不是奇巧淫技。
  2. 它考察的知识点,可以举一反三的应用到很多相似题目上。
  3. 面试热门题,大厂喜欢考这个题目,说明这个知识点很重要。

当然你也可以去知乎等平台搜索相关的问题,也会有很多人总结,但是比我总结的全的不多见。100 多题说多也不多,说少也不少。认真学习、解答、吸收这些题目大概要花费1 个月左右的时间。但是相信我,1 个月以后你在算法方面会脱胎换骨,应对国内大厂的算法面试也会变得游刃有余。

总结

关于算法在工程方面有用与否的争论,已经是一个经久不衰的话题了。这里不讨论这个,我个人的观念是绝对有用的,只要你不是一个甘于只做简单需求的人,你一定会在后续开发架构、遇到难题的过程中或多或少的从你的算法学习中受益。

再说的功利点,就算是为了面试,刷算法能够进入大厂也是你职业生涯的一个起飞点,大厂给你带来的的环境、严格的 Code Review、完善的导师机制和协作流程也是你作为工程师所梦寐以求的。

希望这篇文章能让你不再继续害怕算法面试,跟着我一起攻下这座城堡吧,大家加油!

❤️ 感谢大家

1.如果本文对你有帮助,就点个赞支持下吧,你的「赞」是我创作的动力。

2.关注公众号「前端从进阶到入院」即可加我好友,我拉你进「前端进阶交流群」,大家一起共同交流和进步。

查看原文

赞 26 收藏 19 评论 1

palmerye 回答了问题 · 2020-04-08

pm2 start npm -- start报错!

pm2 start "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" --name "xxx" -- run start

官方issue提到过

https://github.com/Unitech/pm2/issues/3657

关注 10 回答 9

palmerye 关注了用户 · 2020-02-20

这波能反杀 @meetbo

我的公众号:不知非攻

关注 1969

palmerye 赞了文章 · 2019-12-27

前端性能优化(CSS动画篇)

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~

小广告:更多内容可以看我的博客

最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance AnimationsAccelerated Rendering in Chrome

原理

现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是:
* 改变位置
* 改变大小
* 旋转
* 改变透明度

层?重绘?回流和重布局?图层重组?

首先要了解CSS的图层的概念(Chrome浏览器)

浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。在渲染DOM的时候,浏览器所做的工作实际上是:
1. 获取DOM后分割为多个图层
2. 对每个图层的节点计算样式结果(Recalculate style--样式重计算)
3. 为每个节点生成图形和位置(Layout--回流和重布局)
4. 将每个节点绘制填充到图层位图中(Paint Setup和Paint--重绘)
5. 图层作为纹理上传至GPU
6. 符合多个图层到页面上生成最终屏幕图像(Composite Layers--图层重组)

Chrome中满足以下任意情况就会创建图层:
* 3D或透视变换(perspective transform)CSS属性
* 使用加速视频解码的<video>节点
* 拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点
* 混合插件(如Flash)
* 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
* 拥有加速CSS过滤器的元素
* 元素有一个包含复合层的后代节点(一个元素拥有一个子元素,该子元素在自己的层里)
* 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

需要注意的是,如果图层中某个元素需要重绘,那么整个图层都需要重绘。比如一个图层包含很多节点,其中有个gif图,gif图的每一帧,都会重回整个图层的其他节点,然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层(translateZ(0)或者translate3d(0,0,0)),CSS3的动画也是一样(好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层)

层和CSS动画

简化一下上述过程,每一帧动画浏览器可能需要做如下工作:
1. 计算需要被加载到节点上的样式结果(Recalculate style--样式重计算)
2. 为每个节点生成图形和位置(Layout--回流和重布局)
3. 将每个节点填充到图层中(Paint Setup和Paint--重绘)
4. 组合图层到页面上(Composite Layers--图层重组)

如果我们需要使得动画的性能提高,需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是,改变的属性仅仅印象图层的组合,变换(transform)和透明度(opacity)就属于这种情况

现代浏览器如Chrome,Firefox,Safari和Opera都对变换和透明度采用硬件加速,但IE10+不是很确定是否硬件加速

触发重布局的属性

有些节点,当你改变他时,会需要重新布局(这也意味着需要重新计算其他被影响的节点的位置和大小)。这种情况下,被影响的DOM树越大(可见节点),重绘所需要的时间就会越长,而渲染一帧动画的时间也相应变长。所以需要尽力避免这些属性

一些常用的改变时会触发重布局的属性:
盒子模型相关属性会触发重布局:
* width
* height
* padding
* margin
* display
* border-width
* border
* min-height

定位属性及浮动也会触发重布局:
* top
* bottom
* left
* right
* position
* float
* clear

改变节点内部文字结构也会触发重布局:
* text-align
* overflow-y
* font-weight
* overflow
* font-family
* line-height
* vertival-align
* white-space
* font-size

这么多常用属性都会触发重布局,可以看到,他们的特点就是可能修改整个节点的大小或位置,所以会触发重布局

别使用CSS类名做状态标记

如果在网页中使用CSS的类来对节点做状态标记,当这些节点的状态标记类修改时,将会触发节点的重绘和重布局。所以在节点上使用CSS类来做状态比较是代价很昂贵的

触发重绘的属性

修改时只触发重绘的属性有:
* color
* border-style
* border-radius
* visibility
* text-decoration
* background
* background-image
* background-position
* background-repeat
* background-size
* outline-color
* outline
* outline-style
* outline-width
* box-shadow

这样可以看到,这些属性都不会修改节点的大小和位置,自然不会触发重布局,但是节点内部的渲染效果进行了改变,所以只需要重绘就可以了

手机就算重绘也很慢

在重绘时,这些节点会被加载到GPU中进行重绘,这对移动设备如手机的影响还是很大的。因为CPU不如台式机或笔记本电脑,所以绘画巫妖的时间更长。而且CPU与GPU之间的有较大的带宽限制,所以纹理的上传需要一定时间

触发图层重组的属性

透明度竟然不会触发重绘?

需要注意的是,上面那些触发重绘的属性里面没有opacity(透明度),很奇怪不是吗?实际上透明度的改变后,GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。不过这个前提是这个被修改opacity本身必须是一个图层,如果图层下还有其他节点,GPU也会将他们透明化

强迫浏览器创建图层

在Blink和WebKit的浏览器中,一当一个节点被设定了透明度的相关过渡效果或动画时,浏览器会将其作为一个单独的图层,但很多开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器创建图层。这种方式可以消除在动画开始之前的图层创建时间,使得动画尽快开始(创建图层和绘制图层还是比较慢的),而且不会随着抗锯齿而导出突变。不过这种方法需要节制,否则会因为创建过多的图层导致崩溃

Chrome中的抗锯齿

Chrome中,非根图层以及透明图层使用grayscale antialiasing而不是subpixel antialiasing,如果抗锯齿方法变化,这个效果将会非常显著。如果你打算预处理一个节点而不打算等到动画开始,可以通过这种强迫浏览器创建图层的方式进行

transform变换是你的选择

我们通过节点的transform可以修改节点的位置、旋转、大小等。我们平常会使用lefttop属性来修改节点的位置,但正如上面所述,lefttop会触发重布局,修改时的代价相当大。取而代之的更好方法是使用translate,这个不会触发重布局

JS动画和CSS3动画的比较

我们经常面临一个抉择:是使用JavaScript的动画还是使用CSS的动画,下面将对比一下这两种方式

JS动画

缺点:JavaScript在浏览器的主线程中运行,而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞,从而造成丢帧的情况。

优点:JavaScript的动画与CSS预先定义好的动画不同,可以在其动画过程中对其进行控制:开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果,比如视差滚动效果,只有JavaScript能够完成

CSS动画

缺点:缺乏强大的控制能力。而且很难以有意义的方式结合到一起,使得动画变得复杂且易于出问题。
优点:浏览器可以对动画进行优化。它必要时可以创建图层,然后在主线程之外运行。

前瞻

Google目前正在探究通过JS的多线程(Web Workers)来提供更好的动画效果,而不会触发重布局及样式重计算

结论

动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性,以免失帧。最好提前申明动画,这样能让浏览器提前对动画进行优化。由于GPU的参与,现在用来做动画的最好属性是如下几个:
* opacity
* translate
* rotate
* scale

也许会有一些新的方式使得可以使用JavaScript做出更好的没有限制的动画,而且不用担心主线程的阻塞问题。但在那之前,还是好好考虑下如何做出流畅的动画吧

查看原文

赞 96 收藏 247 评论 3

palmerye 发布了文章 · 2019-11-29

懒加载在前端性能优化的应用及原理

背景是在某项目中的其中一个页面,接入现场真实数据后,加载时间很长,长达10几秒,严重影响用户体验。

排查原因

chromeDevTools中,清缓存硬加载,可模拟用户第一次访问页面的场景。根据Network中的若干指标,对性能瓶颈初步判断:

  • requests:在HTTP / 1.0HTTP / 1.1连接上,Chrome每个主机最多允许六个同时TCP连接,所以请求数过多会导致TTFB等待时间过长。
  • xhrajax接口时间过长,瓶颈在于后端接口。
  • FinishFinish时间远远大于DOMContentLoadedLoad时间,说明页面中的请求资源很大

优化方向

  1. 对于请求数过多的瓶颈,简单来说就是要减少请求数量。自上而下讨论,客户端(浏览器)页面要减少请求数量,将首屏不可见的资源放在首屏之后请求,将一些阻塞页面渲染的请求预加载或者懒加载;利用HTTP 2的多路复用特性,合并请求;服务端渲染。
  2. ajax接口时间过长,主要在后端接口的优化,Nodejs(BFF层)基于微服务的能力,所以要加快服务调用速度,减少服务调用数量,在业务上进行优化(缓存、批量接口、非必要数据异步请求...),当然自身代码层的运行效率也要考虑。
  3. 请求资源过大过多的问题,可优化img这类图片为懒加载(下文会提到),当大数据塞到数组对象里遍历渲染的时候,对不可见的组件进行懒加载,节省性能及页面渲染时间的开支;压缩图片格式,例如WebP格式

对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果图
  1. 从用户体验角度出发,loading动画、图片的渐进式渲染(浏览器对一张图片的加载顺序基本上是下载了多少展示多少,让用户感觉很刻板生硬,渐进式渲染就是图片的内容从模糊到清晰的过程)、预加载(预见性的加载一些不可见区域的资源,提高用户在快速滚动浏览器时候的体验)。

懒加载的实践应用

上述优化方向中,作者优化了Nodejs层的api接口时间,缓存了部分业务逻辑,剥离了部分底层接口使其异步获取;同时选择懒加载优化方向,对前端组件及图片资源的加载进行优化。优化结果,肉眼可见。

懒加载并不是一个新鲜的名词,顾名思义,就是懒,现在不加载,稍后再加载,换个词说就是,按需加载。因为很多场景下,暂时看不见用不到的资源是不需要同时加载的,浪费时间开支同时,也消耗了不必要的CPUIO等资源。例如图片懒加载在jQuery时代就已经十分普及,在reactvue等前端MV*框架的出现后,组件懒加载,SPA单页应用中的路由懒加载,webpack中对初始化不需要加载的代码块进行懒加载,从而优化性能...以下作者重点介绍下图片懒加载及vue组件懒加载。

图片懒加载

对于一些视频图片web应用,图片懒加载几乎是必须要做的,可以大大提升用户体验。

原理解析

  1. 将需要懒加载的img标签的src设置缩略图或者不设置src,这里的占位图可以是缺省图,loading图;
  2. 判断该img标签是否在浏览器可视区域,如果在可视区域,则将真实的图片url设置到img标签的src属性;
  3. 用户滚动浏览器,遍历需要懒加载的标签,根据步骤2判断并执行;

判断元素是否在浏览器可视区域

作者认为这是懒加载最重要的环节
getBoundingClientRect
MDN中的定义:Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

// 获取元素的getBoundingClientRect属性
const rect = Element.getBoundingClientRect();

if(rect.top < document.documentElement.clientHeight) {
    // 将top值与页面的clientHeight进行对比,若小于则为可视区域
    ...
}

PS:该方案需要监听scroll事件,注意节流处理。

Intersection Observer
MDN中的定义:IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。Intersection Observer API 允许你配置一个回调函数,每当目标(target)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(root)。

var options = {
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0 // 目标(target)元素与根(root)元素之间的交叉度是交叉比(intersection ratio), 取值在0.0和1.0之间
}

var observer = new IntersectionObserver(() => {
    // 回调函数,当目标元素和根元素交叉时触发
    ...
}, options);

var target = document.querySelector('#listItem');
// 添加目标元素,与根元素进行交叉状态比对
observer.observe(target);

PS:该方案较前者的优点就是不需要监听,其实兼容性在chrome中还不错。

vue 组件懒加载

这里的懒加载判断依据和图片类似,同样是要判断可视或者即将可视的时机,来控制组件的加载与否。当加载条件为false时,不做渲染,为true时则渲染,这里用v-if指令就可以实现。

在条件切换的同时,最好加入类似骨架屏的页面,来过渡用户体验。

项目实践

社区里这样的方案有很多,评估后决定采用 vue-lazyload,star 5.7k,recent updates is 2 months ago,很稳。

引入

npm i vue-lazyload -S

// 在入口js中引入依赖,注册在vue实例上
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  lazyComponent: true
});

这里简单提一下该方案的组件懒加载方案,在源码L11-L16,利用render来生成组件的内容this.$slots.default,十分巧妙。

render (h) {
   if (this.show === false) {
        return h(this.tag)
   }
   return h(this.tag, null, this.$slots.default)
}

组件应用

// 原代码
<div class="camera-card-img" :style="{'backgroundImage': 'url(' + data._thumbnails + ')'}">

// 加入图片懒加载逻辑
<div class="camera-card-img" v-lazy:background-image="data._thumbnails">

<lazy-component>
    // 需要懒加载的组件
    ...
</lazy-component>

优化结果

调用真实数据,控制变量,优化前:

52 requests, 19 img

加入图片懒加载:

38 requests, 12 img

当浏览器继续滚动的时候,图片依次加载,可以看到network中的request逐步增加至52,说明加载了剩余图片。

组件懒加载也是同样的效果,数据量小可能页面finish时间差感知不明显,可以加大模拟量至上千:

Finish时间10s,

Finish时间4s,速度提升显著。

PS:这里前后请求数不变的原因,是作者在模拟数据的时候重复了若干次真实数据,导致资源地址都是重复的,浏览器会缓存请求,所以导致请求数不变。

后续计划

其实可以看到,数据量大的时候,加载速度依旧很慢,还需要继续优化,可以从以下几个方向:

  • 缩略图格式(压缩资源大小)
  • 优化webpack打包,从代码块层面按需加载组件
  • 懒加载依然"不够懒"
  • 解决火焰图中看到的占据很长时间,阻塞页面渲染的请求

总结

优化无止境,常常是花了大力气,收效甚微。需要考虑时间和资源成本,优先解决投入产出比高的优化方向。以上是作者在实际项目中遇到的优化问题,仅供大家参考。

查看原文

赞 20 收藏 12 评论 0

palmerye 赞了文章 · 2019-09-30

Lottie-前端实现AE动效

项目背景

在海外项目中,为了优化用户体验加入了几处微交互动画,实现方式是设计输出合成的雪碧图,前端通过序列帧实现动画效果:
图片描述
序列帧:
图片描述
动画效果:
图片描述
序列帧:
图片描述
帧动画的缺点和局限性比较明显,合成的雪碧图文件大,且在不同屏幕分辨率下可能会失真。经调研发现,Lottie是个简单、高效且性能高的动画方案。


Lottie是可应用于Android, iOS, Web和Windows的库,通过Bodymovin解析AE动画,并导出可在移动端和web端渲染动画的json文件。换言之,设计师用AE把动画效果做出来,再用Bodymovin导出相应地json文件给到前端,前端使用Lottie库就可以实现动画效果。
图片描述

Bodymovin插件的安装与使用

  1. 关闭AE
  2. 下载并安装ZXP installer
    https://aescripts.com/learn/z...
  3. 下载最新版bodymovin插件
    https://github.com/airbnb/lot...
  4. 把下载好的bodymovin.zxp拖到ZXP installer
    图片描述
  5. 打开AE,在菜单首选项->常规中勾选☑️允许脚本写入文件和访问网络(否则输出JSON文件时会失败)
    图片描述
  6. 在AE中制作动画,打开菜单窗口->拓展->Bodymovin,勾选要输出的动画,并设置输出文件目录,点击render
    图片描述
    打开输出目录会看到生成的JSON文件,若动画里导入了外部图片,则会在images中存放JSON中引用的图片

前端使用lottie

静态URL
https://cdnjs.com/libraries/l...

NPM

npm install lottie-web

调用loadAnimation

lottie.loadAnimation({
  container: element, // 容器节点
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // JSON文件路径
});

vue-lottie

也可以在vue中使用lottie

    import lottie from '../lib/lottie';
    import * as favAnmData from '../../raw/fav.json';

    export default {
        props: {
            options: {
                type: Object,
                required: true
            },
            height: Number,
            width: Number,
        },

        data () {
            return {
                style: {
                    width: this.width ? `${this.width}px` : '100%',
                    height: this.height ? `${this.height}px` : '100%',
                    overflow: 'hidden',
                    margin: '0 auto'
                }
            }
        },

        mounted () {
            this.anim = lottie.loadAnimation({
                    container: this.$refs.lavContainer,
                    renderer: 'svg',
                    loop: this.options.loop !== false,
                    autoplay: this.options.autoplay !== false,
                    animationData: favAnmData,
                    assetsPath: this.options.assetsPath,
                    rendererSettings: this.options.rendererSettings
                }
            );
            this.$emit('animCreated', this.anim)
        }
    }

loadAnimation参数

container用于渲染动画的HTML元素,需确保在调用loadAnimation时该元素已存在
renderer渲染器,可选值为'svg'(默认值)/'canvas'/'html'。svg支持的功能最多,但html的性能更好且支持3d图层。各选项值支持的功能列表在此
loop默认值为true。可传递需要循环的特定次数
autoplay自动播放
pathJSON文件路径
animationDataJSON数据,与path互斥
name传递该参数后,可在之后通过lottie命令引用该动画实例
rendererSettings可传递给renderer实例的特定设置,具体可看

Lottie动画监听

Lottie提供了用于监听动画执行情况的事件:

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready(初始配置完成)
  • data_ready(所有动画数据加载完成)
  • DOMLoaded(元素已添加到DOM节点)
  • destroy

可使用addEventListener监听事件

// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);

// 当前循环播放完成触发 
anm.addEventListener('loopComplete', anmComplete);

// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

控制动画播放速度和进度

可使用anm.pause和anm.play暂停和播放动画,调用anm.stop则会停止动画播放并回到动画第一帧的画面。
使用anm.setSpeed(speed)可调节动画速度,而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定帧数,也可结合anm.totalFrames控制进度百分比,比如可传anm.totalFrames - 1跳到最后一帧。

anm.goToAndStop(anm.totalFrames - 1, 1);

这样的好处是可以把相关联的JSON文件合并,通过anm.goToAndPlay控制动画状态的切换,如下图例中一个JSON文件包含了2个动画状态的数据:
图片描述

图片资源

JSON文件里assets设置了对图片的引用:
图片描述
若想统一修改静态资源路径或者设置成绝对路径,可在调用loadAnimation时传入assetsPath参数:

lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  path: 'data.json',
  assetsPath: 'URL'  // 静态资源绝对路径
});

功能支持列表

即使用bodymovin成功输出了JSON文件(没有报错),也会出现动效不如预期的情况,比如这是在AE中构建的形象图:
图片描述
但在页面中渲染效果是这样的:
图片描述
这是因为使用了不支持的Merge Paths功能
图片描述
因此对设计师而言,创建Lottie动画和往常制作AE动画有所不同,此文档记录了Bodymovin支持输出的AE功能列表,动画制作前需跟设计师沟通好,根据动画加载平台来确认可使用的AE功能。

除此之外,尽量遵循官方文档里对设计过程的指导和建议

  • 动画简单化。创建动画时需时刻记着保持JSON文件的精简,比如尽可能地绑定父子关系,在相似的图层上复制相同的关键帧会增加额外的代码,尽量不使用占用空间最多的路径关键帧动画。诸如自动跟踪描绘、颤动之类的技术会使得JSON文件变得非常大且耗性能。
  • 建立形状图层。将AI、EPS、SVG和PDF等资源转换成形状图层否则无法在Lottie中正常使用,转换好后注意删除该资源以防被导出到JSON文件。
  • 设置尺寸。在AE中可设置合成尺寸为任意大小,但需确保导出时合成尺寸和资源尺寸大小保持一致。
  • 不使用表达式和特效。Lottie暂不支持。
  • 注意遮罩尺寸。若使用alpha遮罩,遮照的大小会对性能产生很大的影响。尽可能地把遮罩尺寸维持到最小。
  • 动画调试。若输出动画破损,通过每次导出特定图层来调试出哪些图层出了问题。然后在github中附上该图层文件提交问题,选择用其他方式重构该图层。
  • 不使用混合模式和亮度蒙版
  • 不添加图层样式
  • 全屏动画。设置比想要支持的最宽屏幕更宽的导出尺寸。
  • 设置空白对象。若使用空白对象,需确保勾选可见并设置透明度为0%否则不会被导出到JSON文件。

预览效果

由于以上所说的功能支持问题会导致输出动画效果不确定性,设计师和前端之间有个动画效果联调的过程,为了提高联调效率,设计师可先进行初步的效果预览,再把文件交付给前端。

方法1:输出预览HTML文件

渲染前设置所要渲染的文件
图片描述
勾选☑️Demo选项
图片描述
在输出的文件目录中就可找到可预览的demo.html文件

方法2:LottieFiles分享平台

把生成的JSON文件传到LottieFiles平台,可播放、暂停生成文件的动画效果,可设置图层颜色、动画速度,也可以下载lottie preview客户端在iOS或Android机子上预览。
图片描述
LottieFiles平台还提供了很多线上公开的Lottie动画效果,可直接下载JSON文件使用
图片描述

交互hack

Lottie的不足之处是没有对应的API操纵动画层,若想做更细化的动画处理,只能直接操作节点来实现。比如当播放完左图动画进入惊讶状态后,若想实现右图随鼠标移动而控制动画层的简单效果:
图片描述图片描述
开启调试面板可以看到,lottie-web通过使用<g>标签的transform属性来控制动画:
图片描述

当元素已添加到DOM节点,找到想要控制的<g>标签,提取其transform属性的矩阵值,并使用rematrix解析矩阵值。

onIntroDone() {
    const Gs = this.refs.svg.querySelectorAll('svg > g > g > g');
    Gs.forEach((node, i) => {
        // 过滤需要修改的节点
        ...

        // 获取transform属性值
        const styleArr = node.getAttribute('transform').split(',');
        styleArr[0] = styleArr[0].replace('matrix(', '');
        styleArr[5] = styleArr[5].replace(')', '');
        const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]},                     ${styleArr[5]})`;

        // 使用Rematrix解析
        const transform = Rematrix.parse(style);
        this.matrices.push({
            node,
            transform,
            prevTransform: transform
      });
    }
}

监听鼠标移动,设置新的transform属性值。

onMouseMove = (e) => {
    this.mouseCoords.x = e.clientX || e.pageX;
    this.mouseCoords.y = e.clientY || e.pageY;
      
    let x =  this.mouseCoords.x - (this.props.browser.width / 2);
    let y =  this.mouseCoords.y - (this.props.browser.height / 2);

    const diffX = (this.mouseCoords.prevX - x);
    const diffY = (this.mouseCoords.prevY - y);

    this.mouseCoords.prevX = x;
    this.mouseCoords.prevY = y;

    this.matrices.forEach((matrix, i) => {
        let translate = Rematrix.translate(diffX, diffY);
        const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply);
        const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`;

        matrix.prevTransform = product;
        matrix.node.setAttribute('transform', css);
     })
  }

进一步优化

看到一个方法,在AE中将图层命名为#id格式,生成的SVG相应的图层id会被设置为id,命名为.class格式,相应的图层class会被设置为class
图片描述
试了下的确可以,如下图,因此可通过这个方法快速找到需要操作的动画层,进一步简化代码:
图片描述

小结

  1. Lottie的缺点在于若在AE动画制作的过程不注意规范,会导致数据文件大、耗内存和性能的问题;Lottie-web的官方文档不够详尽,例如assetsPath参数是在看源码的时候发现的;开放的API不够齐全,无法很灵活地控制动画层。
  2. 优点也很明显,Lottie能帮助提高开发效率,精简代码,易于调试和维护;资源文件小,输出动画效果保真;跨平台——Android, iOS, Web和Windows通用。
  3. 总的来说,Lottie的引用可以替代传统的GIF和帧动画,灵活利用好提供的属性和方法可以控制动画的播放,但需注意规范设计和开发的流程,才可以更高效地完成动画的制作与调试。
查看原文

赞 167 收藏 119 评论 6

palmerye 赞了文章 · 2019-09-25

11道浏览器原理面试题

浏览器与新技术

面试题来源于我的项目「前端面试与进阶指南」

本章关于浏览器原理部分的内容主要来源于浏览器工作原理,这是一篇很长的文章,可以算上一本小书了,有精力的非常建议阅读。

常见的浏览器内核有哪些?

浏览器/RunTime内核(渲染引擎)JavaScript 引擎
ChromeBlink(28~)
Webkit(Chrome 27)
V8
FireFoxGeckoSpiderMonkey
SafariWebkitJavaScriptCore
EdgeEdgeHTMLChakra(for JavaScript)
IETridentChakra(for JScript)
PhantomJSWebkitJavaScriptCore
Node.js-V8

浏览器的主要组成部分是什么?

  1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
  2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  4. 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  5. 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
  6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

图:浏览器的主要组件。

值得注意的是,和大多数浏览器不同,Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

浏览器是如何渲染UI的?

  1. 浏览器获取HTML文件,然后对文件进行解析,形成DOM Tree
  2. 与此同时,进行CSS解析,生成Style Rules
  3. 接着将DOM Tree与Style Rules合成为 Render Tree
  4. 接着进入布局(Layout)阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标
  5. 随后调用GPU进行绘制(Paint),遍历Render Tree的节点,并将元素呈现出来

2019-06-22-06-48-02

浏览器如何解析css选择器?

浏览器会『从右往左』解析CSS选择器。

我们知道DOM Tree与Style Rules合成为 Render Tree,实际上是需要将Style Rules附着到DOM Tree上,因此需要根据选择器提供的信息对DOM Tree进行遍历,才能将样式附着到对应的DOM元素上。

以下这段css为例

.mod-nav h3 span {font-size: 16px;}

我们对应的DOM Tree 如下

2019-06-22-06-58-56

若从左向右的匹配,过程是:

  1. 从 .mod-nav 开始,遍历子节点 header 和子节点 div
  2. 然后各自向子节点遍历。在右侧 div 的分支中
  3. 最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,一颗DOM树的节点动不动上千,这种效率很低。

如果从右至左的匹配:

  1. 先找到所有的最右节点 span,对于每一个 span,向上寻找节点 h3
  2. 由 h3再向上寻找 class=mod-nav 的节点
  3. 最后找到根元素 html 则结束这个分支的遍历。

后者匹配性能更好,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。

DOM Tree是如何构建的?

  1. 转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
  2. 生成Tokens: 之后开始parser,浏览器会将HTML字符串解析成Tokens
  3. 构建Nodes: 对Node添加特定的属性,通过指针确定 Node 的父、子、兄弟关系和所属 treeScope
  4. 生成DOM Tree: 通过node包含的指针确定的关系构建出DOM

Tree

2019-06-22-11-48-00

浏览器重绘与重排的区别?

  • 重排: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素
  • 重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变

单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』,『重排』必然会出现『重绘』。

如何触发重排和重绘?

任何改变用来构建渲染树的信息都会导致一次重排或重绘:

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘,因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表,调整样式属性
  • 用户行为,例如调整窗口大小,改变字号,或者滚动。

如何避免重绘或者重排?

集中改变样式

我们往往通过改变class的方式来集中改变样式

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

使用DocumentFragment

我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点,然后在此节点上批量操作,最后插入DOM树中,因此只触发一次重排

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

提升为合成层

将元素提升为合成层有以下优点:

  • 合成层的位图,会交由 GPU 合成,比 CPU 处理要快
  • 当需要 repaint 时,只需要 repaint 本身,不会影响到其他的层
  • 对于 transform 和 opacity 效果,不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性:

#target {
  will-change: transform;
}
关于合成层的详解请移步无线性能优化:Composite

前端如何实现即时通讯?

短轮询

短轮询的原理很简单,每隔一段时间客户端就发出一个请求,去获取服务器最新的数据,一定程度上模拟实现了即时通讯。

  • 优点:兼容性强,实现非常简单
  • 缺点:延迟性高,非常消耗请求资源,影响性能

comet

comet有两种主要实现手段,一种是基于 AJAX 的长轮询(long-polling)方式,另一种是基于 Iframe 及 htmlfile 的流(streaming)方式,通常被叫做长连接。

具体两种手段的操作方法请移步Comet技术详解:基于HTTP长连接的Web端实时通信技术

长轮询优缺点:

  • 优点:兼容性好,资源浪费较小
  • 缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护

长连接优缺点:

  • 优点:兼容性好,消息即时到达,不发无用请求
  • 缺点:服务器维护长连接消耗资源

SSE

使用指南请看Server-Sent Events 教程

SSE(Server-Sent Event,服务端推送事件)是一种允许服务端向客户端推送新数据的HTML5技术。

  • 优点:基于HTTP而生,因此不需要太多改造就能使用,使用方便,而websocket非常复杂,必须借助成熟的库或框架
  • 缺点:基于文本传输效率没有websocket高,不是严格的双向通信,客户端向服务端发送请求无法复用之前的连接,需要重新发出独立的请求

2019-06-22-12-33-19

Websocket

使用指南请看WebSocket 教程

Websocket是一个全新的、独立的协议,基于TCP协议,与http协议兼容、却不会融入http协议,仅仅作为html5的一部分,其作用就是在服务器和客户端之间建立实时的双向通信。

  • 优点:真正意义上的实时双向通信,性能好,低延迟
  • 缺点:独立与http的协议,因此需要额外的项目改造,使用复杂度高,必须引入成熟的库,无法兼容低版本浏览器

2019-06-22-12-33-43

Web Worker

后面性能优化部分会用到,先做了解

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行

Web Worker教程

Service workers

后面性能优化部分会用到,先做了解

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理,创建有效的离线体验。

Service workers教程

什么是浏览器同源策略?

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

下表给出了相对http://store.company.com/dir/...:

2019-06-23-10-25-28

浏览器中的大部分内容都是受同源策略限制的,但是以下三个标签可以不受限制:

  • <img data-original=XXX>
  • <link href=XXX>
  • <script data-original=XXX>

如何实现跨域?

跨域是个比较古老的命题了,历史上跨域的实现手段有很多,我们现在主要介绍三种比较主流的跨域方案,其余的方案我们就不深入讨论了,因为使用场景很少,也没必要记这么多奇技淫巧。

最经典的跨域方案jsonp

jsonp本质上是一个Hack,它利用<script>标签不受同源策略限制的特性进行跨域操作。

jsonp优点:

  • 实现简单
  • 兼容性非常好

jsonp的缺点:

  • 只支持get请求(因为<script>标签只能get)
  • 有安全性问题,容易遭受xss攻击
  • 需要服务端配合jsonp进行一定程度的改造

jsonp的实现:

function JSONP({  
  url,
  params,
  callbackKey,
  callback
}) {
  // 在参数里制定 callback 的名字
  params = params || {}
  params[callbackKey] = 'jsonpCallback'
    // 预留 callback
  window.jsonpCallback = callback
    // 拼接参数字符串
  const paramKeys = Object.keys(params)
  const paramString = paramKeys
    .map(key => `${key}=${params[key]}`)
    .join('&')
    // 插入 DOM 元素
  const script = document.createElement('script')
  script.setAttribute('src', `${url}?${paramString}`)
  document.body.appendChild(script)
}

JSONP({  
  url: 'http://s.weibo.com/ajax/jsonp/suggestion',
  params: {
    key: 'test',
  },
  callbackKey: '_cb',
  callback(result) {
    console.log(result.data)
  }
})

最流行的跨域方案cors

cors是目前主流的跨域解决方案,跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

如果你用express,可以这样在后端设置

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://example.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();
}

//...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

在生产环境中建议用成熟的开源中间件解决问题。

最方便的跨域方案Nginx

nginx是一款极其强大的web服务器,其优点就是轻量级、启动快、高并发。

现在的新项目中nginx几乎是首选,我们用node或者java开发的服务通常都需要经过nginx的反向代理。

2019-06-24-10-19-34

反向代理的原理很简单,即所有客户端的请求都必须先经过nginx的处理,nginx作为代理服务器再讲请求转发给node或者java服务,这样就规避了同源策略。

#进程, 可更具cpu数量调整
worker_processes  1;

events {
    #连接数
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    #连接超时时间,服务器会在这个时间过后关闭连接。
    keepalive_timeout  10;

    # gizp压缩
    gzip  on;

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    # srever模块配置是http模块中的一个子模块,用来定义一个虚拟访问主机
    server {
        listen       80;
        server_name  localhost;
        
        # 根路径指到index.html
        location / {
            root   html;
            index  index.html index.htm;
        }

        # localhost/api 的请求会被转发到192.168.0.103:8080
        location /api {
            rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.0.103:8080; # 转发地址
        }
        
        # 重定向错误页面到/50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

其它跨域方案

  1. HTML5 XMLHttpRequest 有一个API,postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
  2. WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了,因此可以跨域。
  3. window.name + iframe:window.name属性值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值,我们可以利用这个特点进行跨域。
  4. location.hash + iframe:a.html欲与c.html跨域相互通信,通过中间页b.html来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。
  5. document.domain + iframe: 该方式只能用于二级域名相同的情况下,比如 a.test.com 和 b.test.com 适用于该方式,我们只需要给页面添加 document.domain ='test.com' 表示二级域名都相同就可以实现跨域,两个页面都通过js强制设置document.domain为基础主域,就实现了同域。
其余方案来源于九种跨域方式

参考文章:


公众号

想要实时关注笔者最新的文章和最新的文档更新请关注公众号程序员面试官,后续的文章会优先在公众号更新.

简历模板: 关注公众号回复「模板」获取

《前端面试手册》: 配套于本指南的突击手册,关注公众号回复「fed」获取

2019-08-12-03-18-41

查看原文

赞 58 收藏 49 评论 0

palmerye 赞了文章 · 2019-09-03

深入理解Node.js 进程与线程(8000长文彻底搞懂)

前言

进程线程是一个程序员的必知概念,面试经常被问及,但是一些文章内容只是讲讲理论知识,可能一些小伙伴并没有真的理解,在实际开发中应用也比较少。本篇文章除了介绍概念,通过Node.js 的角度讲解进程线程,并且讲解一些在项目中的实战的应用,让你不仅能迎战面试官还可以在实战中完美应用。

文章导览

16c6cf612c275894?w=2772&h=1104&f=jpeg&s=377258

面试会问

Node.js是单线程吗?

Node.js 做耗时的计算时候,如何避免阻塞?

Node.js如何实现多进程的开启和关闭?

Node.js可以创建线程吗?

你们开发过程中如何实现进程守护的?

除了使用第三方模块,你们自己是否封装过一个多进程架构?

进程

进程Process是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础,进程是线程的容器(来自百科)。进程是资源分配的最小单位。我们启动一个服务、运行一个实例,就是开一个服务进程,例如 Java 里的 JVM 本身就是一个进程,Node.js 里通过 node app.js 开启一个服务进程,多进程就是进程的复制(fork),fork 出来的每个进程都拥有自己的独立空间地址、数据栈,一个进程无法访问另外一个进程里定义的变量、数据结构,只有建立了 IPC 通信,进程之间才可数据共享。

  • Node.js开启服务进程例子
const http = require('http');

const server = http.createServer();
server.listen(3000,()=>{
    process.title='程序员成长指北测试进程';
    console.log('进程id',process.pid)
})

运行上面代码后,以下为 Mac 系统自带的监控工具 “活动监视器” 所展示的效果,可以看到我们刚开启的 Nodejs 进程 7663

16c4dc0ca13fec40?w=1406&h=1182&f=jpeg&s=131412

线程

线程是操作系统能够进行运算调度的最小单位,首先我们要清楚线程是隶属于进程的,被包含于进程之中。一个线程只能隶属于一个进程,但是一个进程是可以拥有多个线程的

单线程

单线程就是一个进程只开一个线程

Javascript 就是属于单线程,程序顺序执行(这里暂且不提JS异步),可以想象一下队列,前面一个执行完之后,后面才可以执行,当你在使用单线程语言编码时切勿有过多耗时的同步操作,否则线程会造成阻塞,导致后续响应无法处理。你如果采用 Javascript 进行编码时候,请尽可能的利用Javascript异步操作的特性。

经典计算耗时造成线程阻塞的例子

const http = require('http');
const longComputation = () => {
  let sum = 0;
  for (let i = 0; i < 1e10; i++) {
    sum += i;
  };
  return sum;
};
const server = http.createServer();
server.on('request', (req, res) => {
  if (req.url === '/compute') {
    console.info('计算开始',new Date());
    const sum = longComputation();
    console.info('计算结束',new Date());
    return res.end(`Sum is ${sum}`);
  } else {
    res.end('Ok')
  }
});

server.listen(3000);
//打印结果
//计算开始 2019-07-28T07:08:49.849Z
//计算结束 2019-07-28T07:09:04.522Z

查看打印结果,当我们调用127.0.0.1:3000/compute
的时候,如果想要调用其他的路由地址比如127.0.0.1/大约需要15秒时间,也可以说一个用户请求完第一个compute接口后需要等待15秒,这对于用户来说是极其不友好的。下文我会通过创建多进程的方式child_process.forkcluster 来解决解决这个问题。

单线程的一些说明

  • Node.js 虽然是单线程模型,但是其基于事件驱动、异步非阻塞模式,可以应用于高并发场景,避免了线程创建、线程之间上下文切换所产生的资源开销。
  • 当你的项目中需要有大量计算,CPU 耗时的操作时候,要注意考虑开启多进程来完成了。
  • Node.js 开发过程中,错误会引起整个应用退出,应用的健壮性值得考验,尤其是错误的异常抛出,以及进程守护是必须要做的。
  • 单线程无法利用多核CPU,但是后来Node.js 提供的API以及一些第三方工具相应都得到了解决,文章后面都会讲到。

Node.js 中的进程与线程

Node.js 是 Javascript 在服务端的运行环境,构建在 chrome 的 V8 引擎之上,基于事件驱动、非阻塞I/O模型,充分利用操作系统提供的异步 I/O 进行多任务的执行,适合于 I/O 密集型的应用场景,因为异步,程序无需阻塞等待结果返回,而是基于回调通知的机制,原本同步模式等待的时间,则可以用来处理其它任务,

科普:在 Web 服务器方面,著名的 Nginx 也是采用此模式(事件驱动),避免了多线程的线程创建、线程上下文切换的开销,Nginx 采用 C 语言进行编写,主要用来做高性能的 Web 服务器,不适合做业务。

Web业务开发中,如果你有高并发应用场景那么 Node.js 会是你不错的选择。

在单核 CPU 系统之上我们采用 单进程 + 单线程 的模式来开发。在多核 CPU 系统之上,可以通过 child_process.fork 开启多个进程(Node.js 在 v0.8 版本之后新增了Cluster 来实现多进程架构) ,即 多进程 + 单线程 模式。注意:开启多进程不是为了解决高并发,主要是解决了单进程模式下 Node.js CPU 利用率不足的情况,充分利用多核 CPU 的性能。

Node.js 中的进程

process 模块

Node.js 中的进程 Process 是一个全局对象,无需 require 直接使用,给我们提供了当前进程中的相关信息。官方文档提供了详细的说明,感兴趣的可以亲自实践下 Process 文档。

  • process.env:环境变量,例如通过 process.env.NODE_ENV 获取不同环境项目配置信息
  • process.nextTick:这个在谈及 Event Loop 时经常为会提到
  • process.pid:获取当前进程id
  • process.ppid:当前进程对应的父进程
  • process.cwd():获取当前进程工作目录,
  • process.platform:获取当前进程运行的操作系统平台
  • process.uptime():当前进程已运行时间,例如:pm2 守护进程的 uptime 值
  • 进程事件:process.on(‘uncaughtException’, cb) 捕获异常信息、process.on(‘exit’, cb)进程推出监听
  • 三个标准流:process.stdout 标准输出、process.stdin 标准输入、process.stderr 标准错误输出
  • process.title 指定进程名称,有的时候需要给进程指定一个名称

以上仅列举了部分常用到功能点,除了 Process 之外 Node.js 还提供了 child_process 模块用来对子进程进行操作,在下文 Nodejs进程创建会继续讲述。

Node.js 进程创建

进程创建有多种方式,本篇文章以child_process模块和cluster模块进行讲解。

child_process模块

child_process 是 Node.js 的内置模块,官网地址:

child_process 官网地址:http://nodejs.cn/api/child_pr...

几个常用函数:
四种方式

  • child_process.spawn():适用于返回大量数据,例如图像处理,二进制数据处理。
  • child_process.exec():适用于小量数据,maxBuffer 默认值为 200 * 1024 超出这个默认值将会导致程序崩溃,数据量过大可采用 spawn。
  • child_process.execFile():类似 child_process.exec(),区别是不能通过 shell 来执行,不支持像 I/O 重定向和文件查找这样的行为
  • child_process.fork(): 衍生新的进程,进程之间是相互独立的,每个进程都有自己的 V8 实例、内存,系统资源是有限的,不建议衍生太多的子进程出来,通长根据系统 CPU 核心数设置。
CPU 核心数这里特别说明下,fork 确实可以开启多个进程,但是并不建议衍生出来太多的进程,cpu核心数的获取方式const cpus = require('os').cpus();,这里 cpus 返回一个对象数组,包含所安装的每个 CPU/内核的信息,二者总和的数组哦。假设主机装有两个cpu,每个cpu有4个核,那么总核数就是8。
fork开启子进程 Demo

fork开启子进程解决文章起初的计算耗时造成线程阻塞。
在进行 compute 计算时创建子进程,子进程计算完成通过 send 方法将结果发送给主进程,主进程通过 message 监听到信息后处理并退出。

fork_app.js
const http = require('http');
const fork = require('child_process').fork;

const server = http.createServer((req, res) => {
    if(req.url == '/compute'){
        const compute = fork('./fork_compute.js');
        compute.send('开启一个新的子进程');

        // 当一个子进程使用 process.send() 发送消息时会触发 'message' 事件
        compute.on('message', sum => {
            res.end(`Sum is ${sum}`);
            compute.kill();
        });

        // 子进程监听到一些错误消息退出
        compute.on('close', (code, signal) => {
            console.log(`收到close事件,子进程收到信号 ${signal} 而终止,退出码 ${code}`);
            compute.kill();
        })
    }else{
        res.end(`ok`);
    }
});
server.listen(3000, 127.0.0.1, () => {
    console.log(`server started at http://${127.0.0.1}:${3000}`);
});
fork_compute.js

针对文初需要进行计算的的例子我们创建子进程拆分出来单独进行运算。

const computation = () => {
    let sum = 0;
    console.info('计算开始');
    console.time('计算耗时');

    for (let i = 0; i < 1e10; i++) {
        sum += i
    };

    console.info('计算结束');
    console.timeEnd('计算耗时');
    return sum;
};

process.on('message', msg => {
    console.log(msg, 'process.pid', process.pid); // 子进程id
    const sum = computation();

    // 如果Node.js进程是通过进程间通信产生的,那么,process.send()方法可以用来给父进程发送消息
    process.send(sum);
})
cluster模块

cluster 开启子进程Demo

const http = require('http');
const numCPUs = require('os').cpus().length;
const cluster = require('cluster');
if(cluster.isMaster){
    console.log('Master proces id is',process.pid);
    // fork workers
    for(let i= 0;i<numCPUs;i++){
        cluster.fork();
    }
    cluster.on('exit',function(worker,code,signal){
        console.log('worker process died,id',worker.process.pid)
    })
}else{
    // Worker可以共享同一个TCP连接
    // 这里是一个http服务器
    http.createServer(function(req,res){
        res.writeHead(200);
        res.end('hello word');
    }).listen(8000);

}
cluster原理分析

16c5658b2e97e9b2

cluster模块调用fork方法来创建子进程,该方法与child_process中的fork是同一个方法。
cluster模块采用的是经典的主从模型,Cluster会创建一个master,然后根据你指定的数量复制出多个子进程,可以使用cluster.isMaster属性判断当前进程是master还是worker(工作进程)。由master进程来管理所有的子进程,主进程不负责具体的任务处理,主要工作是负责调度和管理。

cluster模块使用内置的负载均衡来更好地处理线程之间的压力,该负载均衡使用了Round-robin算法(也被称之为循环算法)。当使用Round-robin调度策略时,master accepts()所有传入的连接请求,然后将相应的TCP请求处理发送给选中的工作进程(该方式仍然通过IPC来进行通信)。

开启多进程时候端口疑问讲解:如果多个Node进程监听同一个端口时会出现 Error:listen EADDRIUNS的错误,而cluster模块为什么可以让多个子进程监听同一个端口呢?原因是master进程内部启动了一个TCP服务器,而真正监听端口的只有这个服务器,当来自前端的请求触发服务器的connection事件后,master会将对应的socket具柄发送给子进程。

child_process 模块与cluster 模块总结

无论是 child_process 模块还是 cluster 模块,为了解决 Node.js 实例单线程运行,无法利用多核 CPU 的问题而出现的。核心就是父进程(即 master 进程)负责监听端口,接收到新的请求后将其分发给下面的 worker 进程

cluster模块的一个弊端:

16c565aaeb065b4a?w=501&h=261&f=png&s=23033

cluster内部隐时的构建TCP服务器的方式来说对使用者确实简单和透明了很多,但是这种方式无法像使用child_process那样灵活,因为一直主进程只能管理一组相同的工作进程,而自行通过child_process来创建工作进程,一个主进程可以控制多组进程。原因是child_process操作子进程时,可以隐式的创建多个TCP服务器,对比上面的两幅图应该能理解我说的内容。

Node.js进程通信原理

前面讲解的无论是child_process模块,还是cluster模块,都需要主进程和工作进程之间的通信。通过fork()或者其他API,创建了子进程之后,为了实现父子进程之间的通信,父子进程之间才能通过message和send()传递信息。

IPC这个词我想大家并不陌生,不管那一张开发语言只要提到进程通信,都会提到它。IPC的全称是Inter-Process Communication,即进程间通信。它的目的是为了让不同的进程能够互相访问资源并进行协调工作。实现进程间通信的技术有很多,如命名管道,匿名管道,socket,信号量,共享内存,消息队列等。Node中实现IPC通道是依赖于libuv。windows下由命名管道(name pipe)实现,*nix系统则采用Unix Domain Socket实现。表现在应用层上的进程间通信只有简单的message事件和send()方法,接口十分简洁和消息化。

IPC创建和实现示意图

16c5b379ad12199e?w=391&h=311&f=png&s=23661

IPC通信管道是如何创建的

16c5b3812e3bb7d9?w=866&h=612&f=jpeg&s=103501

父进程在实际创建子进程之前,会创建IPC通道并监听它,然后才真正的创建出子进程,这个过程中也会通过环境变量(NODE_CHANNEL_FD)告诉子进程这个IPC通道的文件描述符。子进程在启动的过程中,根据文件描述符去连接这个已存在的IPC通道,从而完成父子进程之间的连接。

Node.js句柄传递

讲句柄之前,先想一个问题,send句柄发送的时候,真的是将服务器对象发送给了子进程?

子进程对象send()方法可以发送的句柄类型
  • net.Socket TCP套接字
  • net.Server TCP服务器,任意建立在TCP服务上的应用层服务都可以享受它带来的好处
  • net.Native C++层面的TCP套接字或IPC管道
  • dgram.Socket UDP套接字
  • dgram.Native C++层面的UDP套接字
send句柄发送原理分析

结合句柄的发送与还原示意图更容易理解。

16c5b52b15d87bbe?w=916&h=548&f=png&s=82815
send()方法在将消息发送到IPC管道前,实际将消息组装成了两个对象,一个参数是hadler,另一个是message。message参数如下所示:

{
    cmd:'NODE_HANDLE',
    type:'net.Server',
    msg:message
}

发送到IPC管道中的实际上是我们要发送的句柄文件描述符。这个message对象在写入到IPC管道时,也会通过JSON.stringfy()进行序列化。所以最终发送到IPC通道中的信息都是字符串,send()方法能发送消息和句柄并不意味着它能发送任何对象。

连接了IPC通道的子线程可以读取父进程发来的消息,将字符串通过JSON.parse()解析还原为对象后,才触发message事件将消息传递给应用层使用。在这个过程中,消息对象还要被进行过滤处理,message.cmd的值如果以NODE_为前缀,它将响应一个内部事件internalMessage,如果message.cmd值为NODE_HANDLE,它将取出message.type值和得到的文件描述符一起还原出一个对应的对象。

以发送的TCP服务器句柄为例,子进程收到消息后的还原过程代码如下:

function(message,handle,emit){
    var self = this;
    
    var server = new net.Server();
    server.listen(handler,function(){
      emit(server);
    });
}

这段还原代码,子进程根据message.type创建对应的TCP服务器对象,然后监听到文件描述符上。由于底层细节不被应用层感知,所以子进程中,开发者会有一种服务器对象就是从父进程中直接传递过来的错觉。

Node进程之间只有消息传递,不会真正的传递对象,这种错觉是抽象封装的结果。目前Node只支持我前面提到的几种句柄,并非任意类型的句柄都能在进程之间传递,除非它有完整的发送和还原的过程。

Node.js多进程架构模型

我们自己实现一个多进程架构守护Demo

16c565f2d5b5e5c2?w=533&h=352&f=png&s=47188
编写主进程

master.js 主要处理以下逻辑:

  • 创建一个 server 并监听 3000 端口。
  • 根据系统 cpus 开启多个子进程
  • 通过子进程对象的 send 方法发送消息到子进程进行通信
  • 在主进程中监听了子进程的变化,如果是自杀信号重新启动一个工作进程。
  • 主进程在监听到退出消息的时候,先退出子进程在退出主进程
// master.js
const fork = require('child_process').fork;
const cpus = require('os').cpus();

const server = require('net').createServer();
server.listen(3000);
process.title = 'node-master'

const workers = {};
const createWorker = () => {
    const worker = fork('worker.js')
    worker.on('message', function (message) {
        if (message.act === 'suicide') {
            createWorker();
        }
    })
    worker.on('exit', function(code, signal) {
        console.log('worker process exited, code: %s signal: %s', code, signal);
        delete workers[worker.pid];
    });
    worker.send('server', server);
    workers[worker.pid] = worker;
    console.log('worker process created, pid: %s ppid: %s', worker.pid, process.pid);
}

for (let i=0; i<cpus.length; i++) {
    createWorker();
}

process.once('SIGINT', close.bind(this, 'SIGINT')); // kill(2) Ctrl-C
process.once('SIGQUIT', close.bind(this, 'SIGQUIT')); // kill(3) Ctrl-\
process.once('SIGTERM', close.bind(this, 'SIGTERM')); // kill(15) default
process.once('exit', close.bind(this));

function close (code) {
    console.log('进程退出!', code);

    if (code !== 0) {
        for (let pid in workers) {
            console.log('master process exited, kill worker pid: ', pid);
            workers[pid].kill('SIGINT');
        }
    }

    process.exit(0);
}

工作进程

worker.js 子进程处理逻辑如下:

  • 创建一个 server 对象,注意这里最开始并没有监听 3000 端口
  • 通过 message 事件接收主进程 send 方法发送的消息
  • 监听 uncaughtException 事件,捕获未处理的异常,发送自杀信息由主进程重建进程,子进程在链接关闭之后退出
// worker.js
const http = require('http');
const server = http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/plan'
    });
    res.end('I am worker, pid: ' + process.pid + ', ppid: ' + process.ppid);
    throw new Error('worker process exception!'); // 测试异常进程退出、重启
});

let worker;
process.title = 'node-worker'
process.on('message', function (message, sendHandle) {
    if (message === 'server') {
        worker = sendHandle;
        worker.on('connection', function(socket) {
            server.emit('connection', socket);
        });
    }
});

process.on('uncaughtException', function (err) {
    console.log(err);
    process.send({act: 'suicide'});
    worker.close(function () {
        process.exit(1);
    })
})

Node.js 进程守护

什么是进程守护?

每次启动 Node.js 程序都需要在命令窗口输入命令 node app.js 才能启动,但如果把命令窗口关闭则Node.js 程序服务就会立刻断掉。除此之外,当我们这个 Node.js 服务意外崩溃了就不能自动重启进程了。这些现象都不是我们想要看到的,所以需要通过某些方式来守护这个开启的进程,执行 node app.js 开启一个服务进程之后,我还可以在这个终端上做些别的事情,且不会相互影响。,当出现问题可以自动重启。

如何实现进程守护

这里我只说一些第三方的进程守护框架,pm2 和 forever ,它们都可以实现进程守护,底层也都是通过上面讲的 child_process 模块和 cluster 模块 实现的,这里就不再提它们的原理。

pm2 指定生产环境启动一个名为 test 的 node 服务

pm2 start app.js --env production --name test

pm2常用api

  • pm2 stop Name/processID 停止某个服务,通过服务名称或者服务进程ID
  • pm2 delete Name/processID 删除某个服务,通过服务名称或者服务进程ID
  • pm2 logs [Name] 查看日志,如果添加服务名称,则指定查看某个服务的日志,不加则查看所有日志
  • pm2 start app.js -i 4 集群,-i <number of workers>参数用来告诉PM2以cluster_mode的形式运行你的app(对应的叫fork_mode),后面的数字表示要启动的工作线程的数量。如果给定的数字为0,PM2则会根据你CPU核心的数量来生成对应的工作线程。注意一般在生产环境使用cluster_mode模式,测试或者本地环境一般使用fork模式,方便测试到错误。
  • pm2 reload Name pm2 restart Name 应用程序代码有更新,可以用重载来加载新代码,也可以用重启来完成,reload可以做到0秒宕机加载新的代码,restart则是重新启动,生产环境中多用reload来完成代码更新!
  • pm2 show Name 查看服务详情
  • pm2 list 查看pm2中所有项目
  • pm2 monit用monit可以打开实时监视器去查看资源占用情况

pm2 官网地址:

http://pm2.keymetrics.io/docs...

forever 就不特殊说明了,官网地址

https://github.com/foreverjs/...

注意:二者更推荐pm2,看一下二者对比就知道我为什么更推荐使用pm2了。https://www.jianshu.com/p/fdc...

linux 关闭一个进程

  • 查找与进程相关的PID号

    ps aux | grep server

说明:

    root     20158  0.0  5.0 1251592 95396 ?       Sl   5月17   1:19 node /srv/mini-program-api/launch_pm2.js
上面是执行命令后在linux中显示的结果,第二个参数就是进程对应的PID


  • 杀死进程
  1. 以优雅的方式结束进程

    kill -l PID

    -l选项告诉kill命令用好像启动进程的用户已注销的方式结束进程。

当使用该选项时,kill命令也试图杀死所留下的子进程。
但这个命令也不是总能成功--或许仍然需要先手工杀死子进程,然后再杀死父进程。

  1. kill 命令用于终止进程

    例如: kill -9 [PID]

-9 表示强迫进程立即停止

这个强大和危险的命令迫使进程在运行时突然终止,进程在结束后不能自我清理。
危害是导致系统资源无法正常释放,一般不推荐使用,除非其他办法都无效。
当使用此命令时,一定要通过ps -ef确认没有剩下任何僵尸进程。
只能通过终止父进程来消除僵尸进程。如果僵尸进程被init收养,问题就比较严重了。
杀死init进程意味着关闭系统。
如果系统中有僵尸进程,并且其父进程是init,
而且僵尸进程占用了大量的系统资源,那么就需要在某个时候重启机器以清除进程表了。
  1. killall命令

    杀死同一进程组内的所有进程。其允许指定要终止的进程的名称,而非PID。

    killall httpd

Node.js 线程

Node.js关于单线程的误区

const http = require('http');

const server = http.createServer();
server.listen(3000,()=>{
    process.title='程序员成长指北测试进程';
    console.log('进程id',process.pid)
})

仍然看本文第一段代码,创建了http服务,开启了一个进程,都说了Node.js是单线程,所以 Node 启动后线程数应该为 1,但是为什么会开启7个线程呢?难道Javascript不是单线程不知道小伙伴们有没有这个疑问?

解释一下这个原因:

Node 中最核心的是 v8 引擎,在 Node 启动后,会创建 v8 的实例,这个实例是多线程的。

  • 主线程:编译、执行代码。
  • 编译/优化线程:在主线程执行的时候,可以优化代码。
  • 分析器线程:记录分析代码运行时间,为 Crankshaft 优化代码执行提供依据。
  • 垃圾回收的几个线程。

所以大家常说的 Node 是单线程的指的是 JavaScript 的执行是单线程的(开发者编写的代码运行在单线程环境中),但 Javascript 的宿主环境,无论是 Node 还是浏览器都是多线程的因为libuv中有线程池的概念存在的,libuv会通过类似线程池的实现来模拟不同操作系统的异步调用,这对开发者来说是不可见的。

某些异步 IO 会占用额外的线程

还是上面那个例子,我们在定时器执行的同时,去读一个文件:

const fs = require('fs')
setInterval(() => {
    console.log(new Date().getTime())
}, 3000)

fs.readFile('./index.html', () => {})

线程数量变成了 11 个,这是因为在 Node 中有一些 IO 操作(DNS,FS)和一些 CPU 密集计算(Zlib,Crypto)会启用 Node 的线程池,而线程池默认大小为 4,因为线程数变成了 11。
我们可以手动更改线程池默认大小:

process.env.UV_THREADPOOL_SIZE = 64

一行代码轻松把线程变成 71。

Libuv

Libuv 是一个跨平台的异步IO库,它结合了UNIX下的libev和Windows下的IOCP的特性,最早由Node的作者开发,专门为Node提供多平台下的异步IO支持。Libuv本身是由C++语言实现的,Node中的非苏塞IO以及事件循环的底层机制都是由libuv实现的。

libuv架构图

16c565ec3aaa0424?w=323&h=156&f=jpeg&s=7864

在Window环境下,libuv直接使用Windows的IOCP来实现异步IO。在非Windows环境下,libuv使用多线程来模拟异步IO。

注意下面我要说的话,Node的异步调用是由libuv来支持的,以上面的读取文件的例子,读文件实质的系统调用是由libuv来完成的,Node只是负责调用libuv的接口,等数据返回后再执行对应的回调方法。

Node.js 线程创建

直到 Node 10.5.0 的发布,官方才给出了一个实验性质的模块 worker_threads 给 Node 提供真正的多线程能力。

先看下简单的 demo:

const {
  isMainThread,
  parentPort,
  workerData,
  threadId,
  MessageChannel,
  MessagePort,
  Worker
} = require('worker_threads');

function mainThread() {
  for (let i = 0; i < 5; i++) {
    const worker = new Worker(__filename, { workerData: i });
    worker.on('exit', code => { console.log(`main: worker stopped with exit code ${code}`); });
    worker.on('message', msg => {
      console.log(`main: receive ${msg}`);
      worker.postMessage(msg + 1);
    });
  }
}

function workerThread() {
  console.log(`worker: workerDate ${workerData}`);
  parentPort.on('message', msg => {
    console.log(`worker: receive ${msg}`);
  }),
  parentPort.postMessage(workerData);
}

if (isMainThread) {
  mainThread();
} else {
  workerThread();
}

上述代码在主线程中开启五个子线程,并且主线程向子线程发送简单的消息。

由于 worker_thread 目前仍然处于实验阶段,所以启动时需要增加 --experimental-worker flag,运行后观察活动监视器,开启了5个子线程

16c6cfb939b5b268?w=1306&h=238&f=jpeg&s=49232

worker_thread 模块

worker_thread 核心代码(地址https://github.com/nodejs/nod...
worker_thread 模块中有 4 个对象和 2 个类,可以自己去看上面的源码。

  • isMainThread: 是否是主线程,源码中是通过 threadId === 0 进行判断的。
  • MessagePort: 用于线程之间的通信,继承自 EventEmitter。
  • MessageChannel: 用于创建异步、双向通信的通道实例。
  • threadId: 线程 ID。
  • Worker: 用于在主线程中创建子线程。第一个参数为 filename,表示子线程执行的入口。
  • parentPort: 在 worker 线程里是表示父进程的 MessagePort 类型的对象,在主线程里为 null
  • workerData: 用于在主进程中向子进程传递数据(data 副本)

总结

多进程 vs 多线程

对比一下多线程与多进程:

属性多进程多线程比较
数据数据共享复杂,需要用IPC;数据是分开的,同步简单因为共享进程数据,数据共享简单,同步复杂各有千秋
CPU、内存占用内存多,切换复杂,CPU利用率低占用内存少,切换简单,CPU利用率高多线程更好
销毁、切换创建销毁、切换复杂,速度慢创建销毁、切换简单,速度很快多线程更好
coding编码简单、调试方便编码、调试复杂编码、调试复杂
可靠性进程独立运行,不会相互影响线程同呼吸共命运多进程更好
分布式可用于多机多核分布式,易于扩展只能用于多核分布式多进程更好

加入我们一起学习吧!

16b8a3d23a52b7d0?w=940&h=400&f=jpeg&s=217901
node学习交流群

交流群满100人不能自动进群, 请添加群助手微信号:【coder_qi】备注node,自动拉你入群。

查看原文

赞 205 收藏 151 评论 7

palmerye 发布了文章 · 2019-08-30

记一次换行符引发的事故

那天项目部署的时候,遇到一个很诡异的现象,一度怀疑自己职业生涯到此结束了,后面经排除发现,原来是LinuxWindowsshell脚本换行符的格式问题,导致脚本一直执行不了...(到此,标题所说的事故讲完了...:)

看起来很蠢的问题,溜了 :) ...但莎士比亚说过,解决一个问题最好的方式,就是下次不要再犯了。所以我们刨根问底儿,彻底搞清楚换行符在计算机系统中到底是个啥玩意儿。

历史来源

在计算机出现之前,有一种通信设备叫电传打字机(Teletype Mode),每秒输出10个字符,平均每个字符0.1秒,但有个问题,就是打完一行换行的时候,要消耗0.2秒,在这个时间段内,如果有新字符传来,就将丢失,所以有人为了解决这个问题,在每一行后面加两个字符表示该行结束。

那这里就涉及到两个动作:

  • 将打印探头(就如上图的那个刻度上的头子)从右边拉回到左边,这就是回车(carriage return)
  • 拉回到左边还不够,还要将探头换行(相对应的就是将纸往上吐一行的距离),这就是换行(line feed)

后面这个概念就被搬到了计算机系统上,But,有人的地方就有分歧,各大系统开始秀了。

  • Windows系统里,每行结尾是回车+换行(和上述提到的两个动作一致),\r\n;
  • Unix系统,每行结尾只有换行\n;
  • Mac系统,每行结尾只有换行\n;
PS:老MAC系统用的\r,现在的MAC都是用的\n,和Unix一致了。

不同系统之间的换行规则的不同,导致不同系统下的文件交叉使用的时候,存在不一致,比如最常见的,Unix/Mac系统下的文件在Windows里打开,所有文字会变成一行,原因显而易见。

ASCII码

二进制十进制十六进制字符/缩写解释
00001001909HT (Horizontal Tab)水平制表符
00001010100ALF/NL(Line Feed/New Line)换行键
00001011110BVT (Vertical Tab)垂直制表符
00001100120CFF/NP (Form Feed/New Page)换页键
00001101130DCR (Carriage Return)回车键
00001110140ESO (Shift Out)不用切换

实践见真章

我们一步步来实践下上述说的,测试环境是WindowsLinux
  1. Windows下新建个win.txt文件,写一句大白话。上面有听讲的同学应该知道,这里的换行符为CRLF
talk is cheap,
show me your code.
  1. Linux系统用vim打开刚新建的文件

这看起来不是挺正常的么?和Windows上显示的一样啊。注意这里vim查看文件的时候,会检测换行符,如果所有的换行符都是CRLF,那么它会自动以dos格式来显示文本内容,最下面[dos]里也体现了这一点。

dos(Disk Operating System 磁盘操作系统)和Windows一样采用的是CRLF
  1. 使用cat -A选项查看文本所有的字符

可以看到多了^M$^M这是Linux等系统下规定的特殊标记,占一个字符大小,不是^M的组合,只能用Ctrl+v,Ctrl+m按出来;而$不是换行符,可以理解为Linux下用来表示文本结束EOF的符号。

  1. 使用cat -v选项显示出非打印字符

  1. 把第一行的回车符去掉再看看
sed -i '1s/^M//' win.txt

看到第一行的^M不见了,第二行还是保留。

  1. 再重复第一步看看变化

结果展示vim中多了^M这个符号,左下角也没了[dos]的标识,这里回应了第二点提到的现象,表示vimLinux来显示文本内容。

到这一步为止,我们证实了WindowsLinux环境下不同换行规则带来的差异。

验证下回车符的真实存在

看到社区里的小伙伴做了这个尝试,便参考着做了下,可以直观体现什么是“回车”。
  1. 还原上述的例子,cat -A查看所有字符
  2. sed -i '1s/.*/& ypm/g' win.txt在第一行末尾加上 ypm
  3. 再次查看,我们发现上面执行的命令用.*匹配整行的时候,不包括换行符^M,所以 ypm加在了第一行的末尾
  4. cat正常查看文本的时候,发现一件奇怪的事情, ypm覆盖了talk,怎么解释?
我们要知道cat普通模式下输出文本内容,会将^M理解为回车。

这就可以解释了,遇到回车符,就像打印探头从右回到了左, ypm这里的四个字符,刚好覆盖了talk四个字符。这就直观解释了什么是回车。

如何规避

谈到如何规避这个差异,其实不同方向上有不同方法,比如针对^M、强制转换文本格式,但个人觉得,能解决其根本问题的,还是在不同系统间,代码编辑的时候,注意到这个格式问题,各大IDE都有自己的解决方案。

  1. 去除回车符号
cat -v win.txt | tr -d '^M'  > linux.txt
或者
cat win.txt |tr -d '\015' > linux.txt
或者
cat win.txt |tr -d '\r' > linux.txt
vim 编辑器中输入
:%s/^M//g
或者
:set fileformat=unix
  1. 终端命令转换
dos2unix win.txt

总结

  • 回车符 \r:CR(carriage return)
  • 换行符 \n:LF(line feed)
  • Windows系统遵循最原始的规则,即必须满足回车符+换行符,缺少或者顺序调换都不可,即\r\n
  • Unix系统中遇到换行符\n就会进行回车+换行的操作,而回车符\r会作为特殊字符^M显示

没想到这么简单的问题,扯了这么多,其实很多小伙伴也都遇到过这个问题,社区里也经常有因为换行符导致的“血案”,希望没有因此酿成之前那个程序猿小哥手误导致的几千万的损失。在运维、DB等领域,这些“小问题”可能会被放大,因此还是需要引起重视,虽然有很多规避手段,但在代码编写的初期,就应该养成习惯关注到这一点,排查问题的时候这同样是一个方向。

PS: 可能会有不严谨的地方,也欢迎大家讨论,轻喷...

参考

http://www.ruanyifeng.com/blog/2006/04/post_213.html

https://www.cnblogs.com/linuxnote/p/3753153.html

https://blog.csdn.net/zhangguangyi888/article/details/8159601

查看原文

赞 1 收藏 0 评论 1

palmerye 发布了文章 · 2019-08-27

Nodejs调试的各种姿势

Node.js 调试的痛点

对于绝大部分前端人员,对JavaScript的调试更多停留在浏览器中,类似console.logdebugger,但这种方式对代码侵入性较高,甚至需要刷新页面或重启编译器。转向服务端后,没有浏览器界面,如果仅停留在原来的调试方式,开发效率想必是较低的。因此,前端人员转向服务端开发时,要习惯于命令行及 IDE 等调试手段,走出舒适区,才能准确定位问题,提高开发效率。

Node.js 调试的手段

下文中涉及到的依赖库及软件版本
  • Node.js - v10.15.3
  • Chrome - v72.0.3626
  • VS Code - v1.13.0
以下代码段为例,用koa起一个简单的http server
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    const time = new Date();
    ctx.body = `hello, hiker! ${time}`;
});

app.listen(3000, () => {
    console.log('nodejs listening 3000.');
});

1. console.log()

对前端人员非常友好,与浏览器中调试一样,console.log()console.error()console.time()等各种console形式,在代码中需要调试的地方直接写上,只是展示形式有所不同,在Node.js中是在终端命令行中打印。这是最简单快速的调试手段,缺点也很明显,对原有代码入侵较大,在特定场景中使用较局限。

举例

app.use(async ctx => {
    const time = new Date();

    console.time('TIME_TAKE');
    console.log('this is time', time);

    ctx.body = `hello, hiker! ${time}`;
    console.timeEnd('TIME_TAKE');
});

app.listen(3000, () => {
    console.log('nodejs listening 3000.');
});

结果

终端起服务:node index.js,并浏览器访问localhost:3000, 即可在终端命令行中看到相应打印的日志。

2. Debugger Protocol (node-inspector)

Nodejs v6.3+ 的版本提供了两个用于调试的协议:v8 Debugger Protocolv8 Inspector Protocol 可以使用第三方的 Client/IDE 等监测和介入 Node(v8) 运行过程,进行调试。

node-inspector是早期可以基于Chrome,有可视化调试界面的调试工具,用的是v8 Debugger Protocol协议,通过 TCP 端口与 Client/IDE 交互通信。但由于v8 Inspector Protocol的推出,这个工具逐渐被替代,后文会介绍相应替代方案。

使用方式

$ npm install -g node-inspector

通过浏览器连接到node-inspector,启动inspector服务:
$ node-inspector

以debug模式运行node.js应用:
$ node --debug=5858 index.js

浏览器打开 http://127.0.0.1:8080/debug?port=5858,后台会提供一个类似于 chrome devtools 的 UI 调试界面。

3. Inspector Protocol + Chrome DevTools

v8 Inspector Protocolnodejs v6.3 新加入的调试协议,通过 websocket与 Client/IDE 交互,同时基于 Chrome/Chromium 浏览器的 devtools 提供了图形化的调试界面。
$ node --inspect=9222 index.js
如果程序执行完会直接结束进程的,那么--inspect会一闪而过,断点信号还没发送出去前就结束了,断点根本不起作用,这种情况可以用--inspect-brk启动调试器,使得脚本可以代码执行之前break

结果

ws://127.0.0.1:9222/a45dc332-2c8c-4614-bf01-1dbf212ae28a这个不是提供给我们在Chrome浏览器中访问的地址,而是Node.js和Chrome之间进行通信的的地址,通过websocket进行通信,从而将调试结果实时展示在Chrome浏览器中。

那么如何获取在chrome浏览器中的调试地址?我们可以访问http://localhost:9222/json/list,可以看到相应信息。其中id为UUID,是一个特定的标识,每一个进程都会分配一个uuid,因此每一次调用会有出现不同的结果。devtoolsFrontendUrl则为我们要访问的chrome地址,新窗口打开这个地址即可调试。

更便捷的调试入口

上述步骤是不是有点麻烦,不要紧,强大的Chrome提供了更方便的调试入口。

node --inspect=9222 index.js起服务后,打开浏览器访问http监听端口页面,并打开调试窗口,可以看到一个绿色的按钮,点开即可下断点调试,是不是很方便?

这个绿油油的按钮究竟打开了什么呢?我们可以继续看。访问chrome://inspect/#devices,可以看到当前浏览器监听的所有inspect

到这里,我们就可以利用Chrome DevTools的各类功能,Sources Panel查看脚本、Profile Panel监测性能等,文中不具体展开。

4. Inspector Protocol + VS Code

对服务端开发来讲,浏览器的使用反而不那么频繁,因此在IDE中调试Nodejs显得格外重要。值得高兴的是,市面上各类IDE对Nodejs的调试还算友好,尤其是VS Code。它内置了Node debugger,支持v8 Debugger Protocolv8 Inspector Protocol两种协议。

launch

在VS Code中,打开调试/添加配置/,如下图,添加launch配置,点击开始调试即可。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\index.js"
        }
    ]
}

下图展示了调试窗口,可以看到,我们可以直接在IDE中下断点,左侧小窗口中可以看到当前作用域的变量(可展开树),调用堆栈,所有断点等,右上方亦可逐步调试函数、重启等功能,非常强大。

Auto Attach

同样VS Code提供了自动附加的功能:Auto Attach。不用配置即可快速调试。

Ctrl+Shift+p打开Auto Attach功能,然后同样的方式在终端命令行中:node --inspect=9222 .\index.js

醉后

本文总结了Nodejs的调试方法,基本涵盖了所有的调试手段,包括了命令行调试,Chrome浏览器调试,VS Code编辑器调试,并深入部分调试协议,图文结合,可供其他的Nodejs开发者参考,降低开发人员的学习成本,在项目工程应用中,准确定位问题,提高开发效率。

参考文献:

http://nodejs.cn/api/inspector.html

http://nodejs.cn/api/debugger.html

http://i5ting.github.io/vsc/#1

查看原文

赞 14 收藏 8 评论 0

palmerye 赞了文章 · 2018-12-08

记一次思否问答的问题思考:Vue为什么不能检测数组变动

问题来源:https://segmentfault.com/q/10...

问题描述:Vue检测数据的变动是通过Object.defineProperty实现的,所以无法监听数组的添加操作是可以理解的,因为是在构造函数中就已经为所有属性做了这个检测绑定操作。

但是官方的原文:由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength

这句话是什么意思?我测试了下Object.defineProperty是可以通过索引属性来设置属性的访问器属性的,那为何做不了监听?

有些论坛上的人说因为数组长度是可变的,即使长度为5,但是未必有索引4,我就想问问这个答案哪里来的,修改length,新增的元素会被添加到最后,它的值为undefined,通过索引一样可以获取他们的值,怎么就叫做“未必有索引4”了呢?

既然知道数组的长度为何不能遍历所有元素并通过索引这个属性全部添加set和get不就可以同时更新视图了吗?

如果非要说的话,考虑到性能的问题,假设元素内容只有4个有意义的值,但是长度确实1000,我们不可能为1000个元素做检测操作。但是官方说的由于JS限制,我想知道这个限制是什么内容?各位大大帮我解决下这个问题,感谢万分



面对这个问题,我想说的是,首先,长度为1000,但只有4个元素的数组并不一定会影响性能,因为js中对数据的遍历除了for循环还有forEach、map、filter、some等,除了for循环外(for,for...of),其他的遍历都是对键值的遍历,也就是除了那四个元素外的空位并不会进行遍历(执行回调),所以也就不会造成性能损耗,因为循环体中没有操作的话,所带来的性能影响可以忽略不计,下面是长度为10000,但只有两个元素的数组分别使用for及forEach遍历的结果:

var arr = [1]; arr[10000] = 1
function a(){
    console.time()
    for(var i = 0;i<arr.length;i++)console.log(1)
    console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
    console.time()
    arr.forEach(item=>{console.log(2)})
    console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

可以看到结果非常明显,不过,如果for循环中不做操作的话两者速度差不多

其次,我要说的是,我也不知道这个限制是什么      (⇀‸↼‶)      ╮( •́ω•̀ )╭

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。数组的索引也是属性,所以我们是可以监听到数组元素的变化的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
    Object.defineProperty(arr,index,{
        set:function(val){
            console.log('set')
            item = val
        },
        get:function(val){
            console.log('get')
            return item
        }
    })
})
arr[1]; // get  2
arr[1] = 1; // set  1

但是我们新增一个元素,就不会触发监听事件,因为这个新属性我们并没有监听,删除一个属性也是。

再回到题主的问题,既然数组是可以被监听的,那为什么vue不能检测vm.items[indexOfItem] = newValue导致的数组元素改变呢,哪怕这个下标所对应的元素是存在的,且被监听了的?

为了搞清楚这个问题,我用vue的源码测试了下,下面是vue对数据监测的源码:
Observer

可以看到,当数据是数组时,会停止对数据属性的监测,我们修改一下源码:
修改Observer

使数据为数组时,依然监测其属性,然后在defineReactive函数中的get,set打印一些东西,方便我们知道调用了get以及set。这里加了个简单判断,只看数组元素的get,set
修改defineReactive

然后写了一个简单案例,主要测试使用vm.items[indexOfItem] = newValue改变数组元素能不能被监测到,并响应式的渲染页面
简单案例

运行页面
数组测试

可以看到,运行了6次get,我们数组长度为3,也就是说数组被遍历了两遍。两遍不多,页面渲染一次,可能多次触发一个数据的监听事件,哪怕这个数据只用了一次,具体的需要看尤大代码怎么写的。就拿这个来说,当监听的数据为数组时,会运行dependArray函数(代码在上面图中get的实现里),这个函数里对数组进行了遍历取值操作,所以会多3遍get,这里主要是vue对data中arr数组的监听触发了dependArray函数。

当我们点击其中一个元素的时候,比如我点击的是3
点击3

可以看到会先运行一次set,然后数据更新,重新渲染页面,数组又是被遍历了两遍。

但是!!!数组确实变成响应式的了,也就是说js语法功能并不会限制数组的监测。

这里我们是用长度为3的数组测试的,当我把数组长度增加到9时
新数组测试

可以看到,运行了18次get,数组还是被遍历了两遍,点击某个元素同理,渲染的时候也是被遍历两次。
新数组测试

有了上面的实验,我的结论是数组在vue中是可以实现响应式更新的,但是不明白尤大是出于什么考虑,没有加入这一功能,希望有知道的大佬们不吝赐教


2018-07-27补充

github上提问了尤大
github提问

查看原文

赞 199 收藏 117 评论 44

palmerye 收藏了文章 · 2018-12-07

剖析Vue原理&实现双向绑定MVVM

本文能帮你做什么?
1、了解vue的双向数据绑定原理以及核心代码模块
2、缓解好奇心的同时了解如何实现双向绑定
为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助<
本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm

相信大家对mvvm双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和vue一样的语法,如果还不了解双向绑定,猛戳Google

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script data-original="./js/observer.js"></script>
<script data-original="./js/watcher.js"></script>
<script data-original="./js/compile.js"></script>
<script data-original="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

效果:
图片描述

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种:

发布者-订阅者模式(backbone.js)

脏值检查(angular.js)

数据劫持(vue.js)

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value),这里有篇文章讲的比较详细,有兴趣可点这里

这种方式现在毕竟太low了,我们更希望通过 vm.property = value 这种方式更新数据,同时自动更新视图,于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里
整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、mvvm入口函数,整合以上三者

上述流程如图所示:
图片描述

1、实现Observer

ok, 思路已经整理完毕,也已经比较明确相关逻辑和模块功能了,let's do it
我们知道可以利用Obeject.defineProperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 settergetter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
        }
    });
}

这样我们已经可以监听每个数据的变化了,那么监听到变化之后就是怎么通知订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法,代码改善之后是这样:

// ... 省略
function defineReactive(data, key, val) {
    var dep = new Dep();
    observe(val); // 监听子属性

    Object.defineProperty(data, key, {
        // ... 省略
        set: function(newVal) {
            if (val === newVal) return;
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify(); // 通知所有订阅者
        }
    });
}

function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?
没错,上面的思路整理中我们已经明确订阅者应该是Watcher, 而且var dep = new Dep();是在 defineReactive方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们可以在 getter里面动手脚:

// Observer.js
// ...省略
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addSub(Dep.target);
        return val;
    }
    // ... 省略
});

// Watcher.js
Watcher.prototype = {
    get: function(key) {
        Dep.target = this;
        this.value = data[key];    // 这里会触发属性的getter,从而添加订阅者
        Dep.target = null;
    }
}

这里已经实现了一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,完整代码。那么接下来就是实现Compile了

2、实现Compile

compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:
图片描述

因为遍历解析的过程有多次操作dom节点,为提高性能和效率,会先将跟节点el转换成文档碎片fragment进行解析编译操作,解析完成,再将fragment添加回原来的真实dom节点中

function Compile(el) {
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);
    if (this.$el) {
        this.$fragment = this.node2Fragment(this.$el);
        this.init();
        this.$el.appendChild(this.$fragment);
    }
}
Compile.prototype = {
    init: function() { this.compileElement(this.$fragment); },
    node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(), child;
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }
        return fragment;
    }
};

compileElement方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染,并调用对应的指令更新函数进行绑定,详看代码及注释说明:

Compile.prototype = {
    // ... 省略
    compileElement: function(el) {
        var childNodes = el.childNodes, me = this;
        [].slice.call(childNodes).forEach(function(node) {
            var text = node.textContent;
            var reg = /\{\{(.*)\}\}/;    // 表达式文本
            // 按元素节点方式编译
            if (me.isElementNode(node)) {
                me.compile(node);
            } else if (me.isTextNode(node) && reg.test(text)) {
                me.compileText(node, RegExp.$1);
            }
            // 遍历编译子节点
            if (node.childNodes && node.childNodes.length) {
                me.compileElement(node);
            }
        });
    },

    compile: function(node) {
        var nodeAttrs = node.attributes, me = this;
        [].slice.call(nodeAttrs).forEach(function(attr) {
            // 规定:指令以 v-xxx 命名
            // 如 <span v-text="content"></span> 中指令为 v-text
            var attrName = attr.name;    // v-text
            if (me.isDirective(attrName)) {
                var exp = attr.value; // content
                var dir = attrName.substring(2);    // text
                if (me.isEventDirective(dir)) {
                    // 事件指令, 如 v-on:click
                    compileUtil.eventHandler(node, me.$vm, exp, dir);
                } else {
                    // 普通指令
                    compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
                }
            }
        });
    }
};

// 指令处理集合
var compileUtil = {
    text: function(node, vm, exp) {
        this.bind(node, vm, exp, 'text');
    },
    // ...省略
    bind: function(node, vm, exp, dir) {
        var updaterFn = updater[dir + 'Updater'];
        // 第一次初始化视图
        updaterFn && updaterFn(node, vm[exp]);
        // 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher
        new Watcher(vm, exp, function(value, oldValue) {
            // 一旦属性值有变化,会收到通知执行此更新函数,更新视图
            updaterFn && updaterFn(node, value, oldValue);
        });
    }
};

// 更新函数
var updater = {
    textUpdater: function(node, value) {
        node.textContent = typeof value == 'undefined' ? '' : value;
    }
    // ...省略
};

这里通过递归遍历保证了每个节点及子节点都会解析编译到,包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记,如<span v-text="content" other-attrv-text便是指令,而other-attr不是指令,只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中,通过new Watcher()添加回调来接收数据变化的通知

至此,一个简单的Compile就完成了,完整代码。接下来要看看Watcher这个订阅者的具体实现了

3、实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
如果有点乱,可以回顾下前面的思路整理

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter,从而在dep添加自己,结合Observer更易理解
    this.value = this.get(); 
}
Watcher.prototype = {
    update: function() {
        this.run();    // 属性值变化收到通知
    },
    run: function() {
        var value = this.get(); // 取到最新值
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调,更新视图
        }
    },
    get: function() {
        Dep.target = this;    // 将当前订阅者指向自己
        var value = this.vm[exp];    // 触发getter,添加自己到属性订阅器中
        Dep.target = null;    // 添加完毕,重置
        return value;
    }
};
// 这里再次列出Observer和Dep,方便理解
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以可以在Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addDep(Dep.target);
        return val;
    }
    // ... 省略
});
Dep.prototype = {
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update(); // 调用订阅者的update方法,通知变化
        });
    }
};

实例化Watcher的时候,调用get()方法,通过Dep.target = watcherInstance标记订阅者是当前watcher实例,强行触发属性定义的getter方法,getter方法执行的时候,就会在属性的订阅器dep添加当前watcher实例,从而在属性值有变化的时候,watcherInstance就能收到更新通知。

ok, Watcher也已经实现了,完整代码
基本上vue中数据绑定相关比较核心的几个模块也是这几个,猛戳这里 , 在src 目录可找到vue源码。

最后来讲讲MVVM入口文件的相关逻辑和实现吧,相对就比较简单了~

4、实现MVVM

MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

一个简单的MVVM构造器是这样子:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data;
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

但是这里有个问题,从代码中可看出监听的数据对象是options.data,每次需要更新视图,则必须通过var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq'; 这样的方式来改变数据。

显然不符合我们一开始的期望,我们所期望的调用方式应该是这样的:
var vm = new MVVM({data: {name: 'kindeng'}}); vm.name = 'dmq';

所以这里需要给MVVM实例添加一个属性代理的方法,使访问vm的属性代理为访问vm._data的属性,改造后的代码如下:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data, me = this;
    // 属性代理,实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxy(key);
    });
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    _proxy: function(key) {
        var me = this;
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    }
};

这里主要还是利用了Object.defineProperty()这个方法来劫持了vm实例对象的属性的读写权,使读写vm实例的属性转成读写了vm._data的属性值,达到鱼目混珠的效果,哈哈

至此,全部模块和功能已经完成了,如本文开头所承诺的两点。一个简单的MVVM模块已经实现,其思想和原理大部分来自经过简化改造的vue源码,猛戳这里可以看到本文的所有相关代码。
由于本文内容偏实践,所以代码量较多,且不宜列出大篇幅代码,所以建议想深入了解的童鞋可以再次结合本文源代码来进行阅读,这样会更加容易理解和掌握。

总结

本文主要围绕“几种实现双向绑定的做法”、“实现Observer”、“实现Compile”、“实现Watcher”、“实现MVVM”这几个模块来阐述了双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点,以及通过展示部分关键代码讲述了怎样一步步实现一个双向绑定MVVM。文中肯定会有一些不够严谨的思考和错误,欢迎大家指正,有兴趣欢迎一起探讨和改进~

最后,感谢您的阅读!

查看原文

palmerye 赞了文章 · 2018-12-07

剖析Vue原理&实现双向绑定MVVM

本文能帮你做什么?
1、了解vue的双向数据绑定原理以及核心代码模块
2、缓解好奇心的同时了解如何实现双向绑定
为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助<
本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm

相信大家对mvvm双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和vue一样的语法,如果还不了解双向绑定,猛戳Google

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script data-original="./js/observer.js"></script>
<script data-original="./js/watcher.js"></script>
<script data-original="./js/compile.js"></script>
<script data-original="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

效果:
图片描述

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种:

发布者-订阅者模式(backbone.js)

脏值检查(angular.js)

数据劫持(vue.js)

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value),这里有篇文章讲的比较详细,有兴趣可点这里

这种方式现在毕竟太low了,我们更希望通过 vm.property = value 这种方式更新数据,同时自动更新视图,于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里
整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、mvvm入口函数,整合以上三者

上述流程如图所示:
图片描述

1、实现Observer

ok, 思路已经整理完毕,也已经比较明确相关逻辑和模块功能了,let's do it
我们知道可以利用Obeject.defineProperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 settergetter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
        }
    });
}

这样我们已经可以监听每个数据的变化了,那么监听到变化之后就是怎么通知订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法,代码改善之后是这样:

// ... 省略
function defineReactive(data, key, val) {
    var dep = new Dep();
    observe(val); // 监听子属性

    Object.defineProperty(data, key, {
        // ... 省略
        set: function(newVal) {
            if (val === newVal) return;
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify(); // 通知所有订阅者
        }
    });
}

function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?
没错,上面的思路整理中我们已经明确订阅者应该是Watcher, 而且var dep = new Dep();是在 defineReactive方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们可以在 getter里面动手脚:

// Observer.js
// ...省略
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addSub(Dep.target);
        return val;
    }
    // ... 省略
});

// Watcher.js
Watcher.prototype = {
    get: function(key) {
        Dep.target = this;
        this.value = data[key];    // 这里会触发属性的getter,从而添加订阅者
        Dep.target = null;
    }
}

这里已经实现了一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,完整代码。那么接下来就是实现Compile了

2、实现Compile

compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:
图片描述

因为遍历解析的过程有多次操作dom节点,为提高性能和效率,会先将跟节点el转换成文档碎片fragment进行解析编译操作,解析完成,再将fragment添加回原来的真实dom节点中

function Compile(el) {
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);
    if (this.$el) {
        this.$fragment = this.node2Fragment(this.$el);
        this.init();
        this.$el.appendChild(this.$fragment);
    }
}
Compile.prototype = {
    init: function() { this.compileElement(this.$fragment); },
    node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(), child;
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }
        return fragment;
    }
};

compileElement方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染,并调用对应的指令更新函数进行绑定,详看代码及注释说明:

Compile.prototype = {
    // ... 省略
    compileElement: function(el) {
        var childNodes = el.childNodes, me = this;
        [].slice.call(childNodes).forEach(function(node) {
            var text = node.textContent;
            var reg = /\{\{(.*)\}\}/;    // 表达式文本
            // 按元素节点方式编译
            if (me.isElementNode(node)) {
                me.compile(node);
            } else if (me.isTextNode(node) && reg.test(text)) {
                me.compileText(node, RegExp.$1);
            }
            // 遍历编译子节点
            if (node.childNodes && node.childNodes.length) {
                me.compileElement(node);
            }
        });
    },

    compile: function(node) {
        var nodeAttrs = node.attributes, me = this;
        [].slice.call(nodeAttrs).forEach(function(attr) {
            // 规定:指令以 v-xxx 命名
            // 如 <span v-text="content"></span> 中指令为 v-text
            var attrName = attr.name;    // v-text
            if (me.isDirective(attrName)) {
                var exp = attr.value; // content
                var dir = attrName.substring(2);    // text
                if (me.isEventDirective(dir)) {
                    // 事件指令, 如 v-on:click
                    compileUtil.eventHandler(node, me.$vm, exp, dir);
                } else {
                    // 普通指令
                    compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
                }
            }
        });
    }
};

// 指令处理集合
var compileUtil = {
    text: function(node, vm, exp) {
        this.bind(node, vm, exp, 'text');
    },
    // ...省略
    bind: function(node, vm, exp, dir) {
        var updaterFn = updater[dir + 'Updater'];
        // 第一次初始化视图
        updaterFn && updaterFn(node, vm[exp]);
        // 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher
        new Watcher(vm, exp, function(value, oldValue) {
            // 一旦属性值有变化,会收到通知执行此更新函数,更新视图
            updaterFn && updaterFn(node, value, oldValue);
        });
    }
};

// 更新函数
var updater = {
    textUpdater: function(node, value) {
        node.textContent = typeof value == 'undefined' ? '' : value;
    }
    // ...省略
};

这里通过递归遍历保证了每个节点及子节点都会解析编译到,包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记,如<span v-text="content" other-attrv-text便是指令,而other-attr不是指令,只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中,通过new Watcher()添加回调来接收数据变化的通知

至此,一个简单的Compile就完成了,完整代码。接下来要看看Watcher这个订阅者的具体实现了

3、实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
如果有点乱,可以回顾下前面的思路整理

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter,从而在dep添加自己,结合Observer更易理解
    this.value = this.get(); 
}
Watcher.prototype = {
    update: function() {
        this.run();    // 属性值变化收到通知
    },
    run: function() {
        var value = this.get(); // 取到最新值
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调,更新视图
        }
    },
    get: function() {
        Dep.target = this;    // 将当前订阅者指向自己
        var value = this.vm[exp];    // 触发getter,添加自己到属性订阅器中
        Dep.target = null;    // 添加完毕,重置
        return value;
    }
};
// 这里再次列出Observer和Dep,方便理解
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以可以在Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addDep(Dep.target);
        return val;
    }
    // ... 省略
});
Dep.prototype = {
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update(); // 调用订阅者的update方法,通知变化
        });
    }
};

实例化Watcher的时候,调用get()方法,通过Dep.target = watcherInstance标记订阅者是当前watcher实例,强行触发属性定义的getter方法,getter方法执行的时候,就会在属性的订阅器dep添加当前watcher实例,从而在属性值有变化的时候,watcherInstance就能收到更新通知。

ok, Watcher也已经实现了,完整代码
基本上vue中数据绑定相关比较核心的几个模块也是这几个,猛戳这里 , 在src 目录可找到vue源码。

最后来讲讲MVVM入口文件的相关逻辑和实现吧,相对就比较简单了~

4、实现MVVM

MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

一个简单的MVVM构造器是这样子:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data;
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

但是这里有个问题,从代码中可看出监听的数据对象是options.data,每次需要更新视图,则必须通过var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq'; 这样的方式来改变数据。

显然不符合我们一开始的期望,我们所期望的调用方式应该是这样的:
var vm = new MVVM({data: {name: 'kindeng'}}); vm.name = 'dmq';

所以这里需要给MVVM实例添加一个属性代理的方法,使访问vm的属性代理为访问vm._data的属性,改造后的代码如下:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data, me = this;
    // 属性代理,实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxy(key);
    });
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    _proxy: function(key) {
        var me = this;
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    }
};

这里主要还是利用了Object.defineProperty()这个方法来劫持了vm实例对象的属性的读写权,使读写vm实例的属性转成读写了vm._data的属性值,达到鱼目混珠的效果,哈哈

至此,全部模块和功能已经完成了,如本文开头所承诺的两点。一个简单的MVVM模块已经实现,其思想和原理大部分来自经过简化改造的vue源码,猛戳这里可以看到本文的所有相关代码。
由于本文内容偏实践,所以代码量较多,且不宜列出大篇幅代码,所以建议想深入了解的童鞋可以再次结合本文源代码来进行阅读,这样会更加容易理解和掌握。

总结

本文主要围绕“几种实现双向绑定的做法”、“实现Observer”、“实现Compile”、“实现Watcher”、“实现MVVM”这几个模块来阐述了双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点,以及通过展示部分关键代码讲述了怎样一步步实现一个双向绑定MVVM。文中肯定会有一些不够严谨的思考和错误,欢迎大家指正,有兴趣欢迎一起探讨和改进~

最后,感谢您的阅读!

查看原文

赞 1338 收藏 1801 评论 152

palmerye 收藏了文章 · 2018-04-04

每个 JavaScript 工程师都应当知道的 10 个面试题

原文链接:10 Interview Questions Every JavaScript Developer Should Know


对大部分公司来说,招聘技术人员这种事情,管理层就应该放手交给技术团队,只有他们才能够准确地判断应聘者的技术实力。如果你恰巧是应聘者,你也是迟早都要去面试的。不管你是哪边的,都让大哥来教你几招。

大兄弟们,要收藏,也要点赞呐。

以人为本

How to Build a High Velocity Development Team 一文中,我提出了一些观点,我觉得这些观点很重要,所以在这里再重复一遍:

优秀的团队才是决定公司业绩的关键,一家公司要想于逆境之中仍能有所建树,最重要的就是得先培养出一只优秀的团队。

就像 Marcus Lemonis 说的,有三点(3 个 P)最重要:

员工(People),流程(Process),产品(Product)。

在创业初期,你招来的工程师必须是能够独当一面的大神队友。他最好能够帮着招聘工程师,能指导其它工程师,还能帮初级和中级工程师解决各种问题。这样优秀的队友,无论何时都多多益善。

要想知道面试应聘者时,有哪些常见的注意事项,可以读读 Why Hiring is So Hard in Tech 这篇文章。

要评估一个应聘者的真实水准,最佳方式就是结对编程(pair programming)。

和应聘者结对编程,一切都听应聘者的。多观察、多聆听,看看应聘者是个怎样的人。用微博的 API 抓取消息并显示在时间线上,就是个很好的考察应聘者的面试项目。

不过结对编程再好使,也没办法让你完全了解一个应聘者。这个时候,面试也能帮上很多忙——但是千万别浪费时间去问一些语法(syntax)或者语言上的细节(language quirks)——问些高端的问题吧,大兄弟。问问项目架构(architecture),编程范式(paradigms),这个层面上的判断(the big desicions)能够在很大程度上影响一个项目的成败。

语法和语言特性(features)这种小知识,Google 一搜一大把,谁都会。而工程师在工作中所积累的软件工程方面的经验,以及个人常用的编程范式及代码风格(idioms),这些可都是很难 Google 到的宝贵财富。

JavaScript 很独特,它在各种大型项目中都起着至关重要的作用。那是什么让 JavaScript 如此与众不同?

下面几个问题,也许能帮你一探究竟。


1. 能说出来两种对于 JavaScript 工程师很重要的编程范式么?

JavaScript 是一门多范式(multi-paradigm)的编程语言,它既支持命令式(imperative)/面向过程(procedural)编程,也支持面向对象编程(OOP,Object-Oriented Programming),还支持函数式编程(functional programming)。JavaScript 所支持的面向对象编程包括原型继承(prototypal inheritance)。

面试加分项

  • 原型继承(即:原型,OLOO——链接到其它对象的对象);
  • 函数式编程(即:闭包(closure),一类函数(first class functions),lambda 函数:箭头函数)。

面试减分项

  • 连范式都不知道,更别提什么原型 OO(prototypal oo)或者函数式编程了。

深入了解

2. 什么是函数式编程?

函数式编程,是将数学函数组合起来,并且避免了状态共享(shared state)及可变数据(mutable data),由此而产生的编程语言。发明于 1958 年的 Lisp 就是首批支持函数式编程的语言之一,而 λ 演算(lambda calculus)则可以说是孕育了这门语言。即使在今天,Lisp 这个家族的编程语言应用范围依然很广。

函数式编程可是 JavaScript 语言中非常重要的一个概念(它可是 JavaScript 的两大支柱之一)。ES5 规范中就增加了很多常用的函数式工具。

面试加分项

  • 纯函数(pure functions)/函数的纯粹性(function purity)
  • 知道如何避免副作用(side-effects)
  • 简单函数的组合
  • 函数式编程语言:Lisp,ML,Haskell,Erlang,Clojure,Elm,F#,OCaml,等等
  • 提到了 JavaScript 语言中支持函数式编程(FP)的特性:一类函数,高阶函数(higher order functions),作为参数(arguments)/值(values)的函数

面试减分项

  • 没有提到纯函数,以及如何避免副作用
  • 没有提供函数式编程语言的例子
  • 没有说是 JavaScript 中的哪些特性使得函数式编程得以实现

深入了解

3. 类继承和原型继承有什么区别?

类继承(Class Inheritance):实例(instances)由类继承而来(类和实例的关系,可以类比为建筑图纸和实际建筑 🏠 的关系),同时还会创建父类—子类这样一种关系,也叫做类的分层分类(hierarchical class taxonomies)。通常是用 new 关键字调用类的构造函数(constructor functions)来创建实例的。不过在 ES6 中,要继承一个类,不用 class 关键字也可以。

原型继承(Prototypal Inheritance):实例/对象直接从其它对象继承而来,创建实例的话,往往用工厂函数(factory functions)或者 Object.create() 方法。实例可以从多个不同的对象组合而来,这样就能选择性地继承了。

在 JavaScript 中,原型继承比类继承更简单,也更灵活。

面试加分项

  • 类:会创建紧密的耦合,或者说层级结构(hierarchies)/分类(taxonomies)。
  • 原型:提到了衔接继承(concatenative inheritance)、原型委托( prototype delegation)、函数继承(functional inheritance),以及对象组合(object composition)。

面试减分项

  • 原型继承和组合,与类继承相比,不知道哪个更好。

深入了解

4. 函数式编程和面向对象编程,各有什么优点和不足呢?

面向对象编程的优点:关于“对象”的一些基础概念理解起来比较容易,方法调用的含义也好解释。面向对象编程通常使用命令式的编码风格,声明式(declarative style)的用得比较少。这样的代码读起来,像是一组直接的、计算机很容易就能遵循的指令。

面向对象编程的不足:面向对象编程往往需要共享状态。对象及其行为常常会添加到同一个实体上,这样一来,如果一堆函数都要访问这个实体,而且这些函数的执行顺序不确定的话,很可能就会出乱子了,比如竞争条件(race conditions)这种现象(函数 A 依赖于实体的某个属性,但是在 A 访问属性之前,属性已经被函数 B 修改了,那么函数 A 在使用属性的时候,很可能就得不到预期的结果)。

函数式编程的优点:用函数式范式来编程,就不需要担心共享状态或者副作用了。这样就避免了几个函数在调用同一批资源时可能产生的 bug 了。拥有了“无参风格”(point-free style,也叫隐式编程)之类的特性之后,函数式编程就大大简化了,我们也可以用函数式编程的方式来把代码组合成复用性更强的代码了,面向对象编程可做不到这一点。

函数式编程更偏爱声明式、符号式(denotational style)的编码风格,这样的代码,并不是那种为了实现某种目的而需要按部就班地执行的一大堆指令,而是关注宏观上要做什么。至于具体应该怎么做,就都隐藏在函数内部了。这样一来,要是想重构代码、优化性能,那就大有可为了。(译者注:以做一道菜为例,就是由 买菜 -> 洗菜 -> 炒菜 这三步组成,每一步都是函数式编程的一个函数,不管做什么菜,这个流程都是不会变的。而想要优化这个过程,自然就是要深入每一步之中了。这样不管内部如何重构、优化,整体的流程并不会变,这就是函数式编程的好处。)甚至可以把一种算法换成另一种更高效的算法,同时还基本不需要修改代码(比如把及早求值策略(eager evaluation)替换为惰性求值策略(lazy evaluation))。

利用纯函数进行的计算,可以很方便地扩展到多处理器环境下,或者应用到分布式计算集群上,同时还不用担心线程资源冲突、竞争条件之类的问题。

函数式编程的不足:代码如果过度利用了函数式的编程特性(如无参风格、大量方法的组合),就会影响其可读性,从而简洁度有余、易读性不足。

大部分工程师还是更熟悉面向对象编程、命令式编程,对于刚接触函数式编程的人来说,即使只是这个领域的一些的简单术语,都可能让他怀疑人生。

函数式编程的学习曲线更陡峭,因为面向对象编程太普及了,学习资料太多了。相比而言,函数式编程在学术领域的应用更广泛一些,在工业界的应用稍逊一筹,自然也就不那么“平易近人”了。在探讨函数式编程时,人们往往用 λ 演算、代数、范畴学等学科的专业术语和专业符号来描述相关的概念,那么其他人想要入门函数式编程的话,就得先把这些领域的基础知识搞明白,能不让人头大么。

面试加分项

  • 共享状态的缺点、资源竞争、等等(面向对象编程)
  • 函数式编程能够极大地简化应用开发
  • 面向对象编程和函数式编程学习曲线的不同
  • 两种编程方式各自的不足之处,以及对代码后期维护带来的影响
  • 函数式风格的代码库,学习曲线会很陡峭
  • 面向对象编程风格的代码库,修改起来很难,很容易出问题(和水平相当的函数式风格的代码相比)
  • 不可变性(immutability),能够极大地提升程序历史状态(program state history)的可见性(accessible)和扩展性(malleable),这样一来,想要添加诸如无限撤销/重做、倒带/回放、可后退的调试之类的功能的话,就简单多了。不管是面向对象编程还是函数式编程,这两种范式都能实现不可变性,但是要用面向对象来实现的话,共享状态对象的数量就会剧增,代码也会变得复杂很多。

面试减分项

  • 没有讲这两种编程范式的缺点——如果熟悉至少其中一种范式的话,应该能够说出很多这种范式的缺点吧。

深入了解

总是你俩,看来你俩真是非常重要啊。

5. 什么时候该用类继承?

千万别用类继承!或者说尽量别用。如果非要用,就只用它继承一级(one level)就好了,多级的类继承简直就是反模式的。这个话题(不太明白是关于什么的……)我也参与讨论过好些年了,仅有的一些回答最终也沦为 常见的误解 之一。更多的时候,这个话题讨论着讨论着就没动静了。

如果一个特性有时候很有用
但有时候又很危险
并且还有另一种更好的特性可以用
务必要用另一种更好的特性
~ Douglas Crockford

面试加分项

  • 尽量别用,甚至是彻底不用类继承。
  • 有时候只继承一级的话也还是 OK 的,比如从框架的基类继承,例如 React.Component
  • 相比类继承,对象组合(object composition)更好一些。

深入了解

6. 什么时候该用原型继承?

原型继承可以分为下面几类:

  • 委托(delegation,也就是原型链)
  • 组合(concatenative,比如混用(mixins)、Object.assign()
  • 函数式(functional,这个函数式原型继承不是函数式编程。这里的函数是用来创建一个闭包,以实现私有状态(private state)或者封装(encapsulation))

上面这三种原型继承都有各自的适用场景,不过它们都很有用,因为都能实现组合继承(composition),也就是建立了 A 拥有特性 B(has-a)、A 用到了特性 B(uses-a) 或者 A 可以实现特性 B(can-do) 的这样一种关系。相比而言,类继承建立的是 A 就是 B 这样一种关系。

面试加分项

  • 知道在什么情况下不适合用模块化(modules)或者函数式编程。
  • 知道需要组合多个不同来源的对象时,应该怎么做。
  • 知道什么时候该用继承。

面试减分项

  • 不知道什么时候应该用原型。
  • 不知道混用和 Object.assign()

深入了解

7. 为什么说“对象组合比类继承更好”?

这句话引用的是《设计花纹》(Design Patterns,设计模式)这本书的内容。意思是要想实现代码重用,就应该把一堆小的功能单元组合成满足需求的各种对象,而不是通过类继承弄出来一层一层的对象。

换句话说,就是尽量编程实现 can-dohas-a 或者 uses-a 这种关系,而不是 is-a 这种关系。

面试加分项

  • 避免使用类继承。
  • 避免使用问题多多的基类。
  • 避免紧耦合。
  • 避免极其不灵活的层次分类(taxonomy)(类继承所产生的 is-a 关系可能会导致很多误用的情况)
  • 避免大猩猩香蕉问题(“你只是想要一根香蕉,结果最后却整出来一只拿着香蕉的大猩猩,还有整个丛林”)。
  • 要让代码更具扩展性。

面试减分项

  • 没有提到上面任何一种问题。
  • 没有表达清楚对象组合与类继承有什么区别,也没有提到对象组合的优点。

深入了解

8. 双向数据绑定/单向数据流的含义和区别

双向数据绑定(two-way data binding),意味着 UI 层所呈现的内容和 Model 层的数据动态地绑定在一起了,其中一个发生了变化,就会立刻反映在另一个上。比如用户在前端页面的表单控件中输入了一个值,Model 层对应该控件的变量就会立刻更新为用户所输入的值;反之亦然,如果 Modal 层的数据有变化,变化后的数据也会立刻反映至 UI 层。

单向数据流(one-way data flow), 意味着只有 Model 层才是单一数据源(single source of truth)。UI 层的变化会触发对应的消息机制,告知 Model 层用户的目的(对应 React 的 store)。只有 Model 层才有更改应用状态的权限,这样一来,数据永远都是单向流动的,也就更容易了解应用的状态是如何变化的。

采用单向数据流的应用,其状态的变化是很容易跟踪的,采用双向数据绑定的应用,就很难跟踪并理解状态的变化了。

面试加分项

  • React 是单向数据流的典型,面试时提到这个框架的话会加分。Cycle.js 则是另一个很流行的单向数据流的库。
  • Angular 则是双向数据绑定的典型。

面试减分项

  • 不理解单向数据流/双向数据绑定的含义,也说不清楚两者之间的区别。

深入了解

9. 单体架构和微服务架构各有何优劣?

采用单体架构(monolithic architecture)的应用,各组件的代码是作为一个整体存在的,组件之间互相合作,共享内存和资源。

而微服务架构(microservice architecture)则是由许许多多个互相独立的小应用组成,每个应用都有自己的内存空间,应用在扩容时也是独立于其它应用进行的。

单体架构的优势:大部分应用都有相当数量的横切关注点(cross-cutting concerns),比如日志记录,流量限制,还有审计跟踪和 DOS 防护等安全方面的需求,单体架构在这方面就很有优势。

当所有功能都运行在一个应用里的时候,就可以很方便地将组件与横切关注点相关联。

单体架构也有性能上的优势,毕竟访问共享内存还是比进程间通信(inter-process communication,IPC)要快的。

单体架构的劣势:随着单体架构应用功能的不断开发,各项服务之间的耦合程度也会不断增加,这样一来就很难把各项服务分离开来了,要做独立扩容或者代码维护也就更不方便了。

微服务的优势:微服务架构一般都有更好的组织结构,因为每项服务都有自己特定的分工,而且也不会干涉其它组件所负责的部分。服务解耦之后,想要重新组合、配置来为各个不同的应用提供服务的话,也更方便了(比如同时为 Web 客户端和公共 API 提供服务)。

如果用合理的架构来部署微服务的话,它在性能上也是很有优势的,因为这样一来,就可以很轻松地分离热门服务,对其进行扩容,同时还不会影响到应用中的其它部分。

微服务的劣势:在实际构建一个新的微服务架构的时候,会遇到很多在设计阶段没有预料到的横切关注点。如果是单体架构应用的话就很简单,新建一个中间件(shared magic helpers 不知道怎么翻译……)来解决这样的问题就行了,没什么麻烦的。

但是在微服务架构中就不一样了,要解决这个问题,要么为每个横切关注点都引入一个独立的模块,要么就把所有横切关注点的解决方案封装到一个服务层中,让所有流量都从这里走一遍就行了。

为了解决横切关注点的问题,虽然单体架构也趋向于把所有的路由流量都从一个外部服务层走一遍,但是在这种架构中,可以等到项目非常成熟之后再进行这种改造,这样就可以把还这笔技术债的时间尽量往后拖一拖。

微服务一般都是部署在虚拟机或容器上的,随着应用规模的不断增加,虚拟机抢工作(VM wrangling work)的情况也会迅速增加。任务的分配一般都是通过容器群(container fleet)管理工具来自动实现的。

面试加分项

  • 对于微服务的积极态度,虽然初始成本会比单体架构要高一些。知道微服务的性能和扩容在长期看来表现更佳。
  • 在微服务架构和单体架构应用上都有实战经验。能够使应用中的各项服务在代码层面互相独立,但是又可以在开发初期迅速地将各项服务打包成一整个的单体架构应用。微服务化的改造可以在应用相当成熟之后,改造成本在可承受范围内的时候再进行。

面试减分项

  • 不知道单体架构和微服务架构的区别。
  • 不知道微服务架构额外的开销,或者没有实际经验。
  • 不知道微服务架构中,IPC 和网络通信所导致的额外的性能开销。
  • 过分贬低微服务。说不清楚什么时候应该把单体架构应用解耦成微服务。
  • 低估了可独立扩容的微服务的优势。

10. 异步编程是什么?又为什么在 JavaScript 中这么重要?

在同步编程中,代码会按顺序自顶向下依次执行(条件语句和函数调用除外),如果遇到网络请求或者磁盘读/写(I/O)这类耗时的任务,就会堵塞在这样的地方。

在异步编程中,JS 运行在事件循环(event loop)中。当需要执行一个阻塞操作(blocking operation)时,主线程发起一个(异步)请求,(工作线程就会去执行这个异步操作,)同时主线程继续执行后面的代码。(工作线程执行完毕之后,)就会发起响应,触发中断(interrupt),执行事件处理程序(event handler),执行完后主线程继续往后走。这样一来,一个程序线程就可以处理大量的并发操作了。

用户界面(user interface,UI)天然就是异步的,大部分时间它都在等待用户输入,从而中断事件循环,触发事件处理程序。

Node.js 默认是异步的,采用它构建的服务端和用户界面的执行机制差不多,在事件循环中等待网络请求,然后一个接一个地处理这些请求。

异步在 JavaScript 中非常重要,因为它既适合编写 UI,在服务端也有上佳的性能表现。

面试加分项

  • 理解阻塞的含义,以及对性能带来的影响。
  • 理解事件处理程序,以及它为什么对 UI 部分的代码很重要。

面试减分项

  • 不熟悉同步、异步的概念。
  • 讲不清楚异步代码和 UI 代码的性能影响,也说不明白它俩之间的关系。

总结

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

不要因为应聘者在一些简单的知识上表现不佳就把对方 pass 掉,比如经典的 CS-101 算法课,或者一些解谜类的题目。

面试官真正应该关注的,是应聘者是否知道如何把一堆功能组织在一起,形成一个完整的应用。

电话面试的注意点就这些了,在线下的面试中,我更加关注应聘者实际编写代码的能力,我会观察他如何写代码。在我的《精通 JavaScript 面试》这个系列文章中,会有更深入的描述。

查看原文

palmerye 收藏了文章 · 2018-04-02

Vue.js最佳实践(五招让你成为Vue.js大师)

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。

对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。

第一招:化繁为简的Watchers

场景还原:

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?

招式解析:
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

第二招:一劳永逸的组件注册

场景还原:

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}
<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

我们写了一堆基础UI组件,然后每次我们需要使用这些组件的时候,都得先import,然后声明components,很繁琐!秉持能偷懒就偷懒的原则,我们要想办法优化!

招式解析:
我们需要借助一下神器webpack,使用 require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。这个方法需要3个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

我们在components文件夹添加一个叫global.js的文件,在这个文件里借助webpack动态将需要的基础组件统统打包进来。

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾,只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

最后我们在main.js中import 'components/global.js',然后我们就可以随时随地使用这些基础组件,无需手动引入了。

第三招:釜底抽薪的router key

场景还原:
下面这个场景真的是伤透了很多程序员的心...先默认大家用的是Vue-router来实现路由的控制。
假设我们在写一个博客网站,需求是从/post-page/a,跳转到/post-page/b。然后我们惊人的发现,页面跳转后数据竟然没更新?!原因是vue-router"智能地"发现这是同一个组件,然后它就决定要复用这个组件,所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据,如下:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
}, 
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},
methods: {
  resetData() {
    this.loading = false
    this.error = null
    this.post = null
    this.getPost(this.$route.params.id)
  },
  getPost(id){

  }
}

bug是解决了,可每次这么写也太不优雅了吧?秉持着能偷懒则偷懒的原则,我们希望代码这样写:

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}

招式解析:

那要怎么样才能实现这样的效果呢,答案是给router-view添加一个unique的key,这样即使是公用组件,只要url变化了,就一定会重新创建这个组件。(虽然损失了一丢丢性能,但避免了无限的bug)。同时,注意我将key直接设置为路由的完整路径,一举两得。

<router-view :key="$route.fullpath"></router-view>

第四招: 无所不能的render函数

场景还原:
vue要求每一个组件都只能有一个根元素,当你有多个根元素时,vue就会给你报错

<template>
  <li
    v-for="route in routes"
    :key="route.name"
  >
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>


 ERROR - Component template should contain exactly one root element. 
    If you are using v-if on multiple elements, use v-else-if 
    to chain them instead.

招式解析:
那有没有办法化解呢,答案是有的,只不过这时候我们需要使用render()函数来创建HTML,而不是template。其实用js来生成html的好处就是极度的灵活功能强大,而且你不需要去学习使用vue的那些功能有限的指令API,比如v-for, v-if。(reactjs就完全丢弃了template)

functional: true,
render(h, { props }) {
  return props.routes.map(route =>
    <li key={route.name}>
      <router-link to={route}>
        {route.title}
      </router-link>
    </li>
  )
}

第五招:无招胜有招的高阶组件

划重点:这一招威力无穷,请务必掌握
当我们写组件的时候,通常我们都需要从父组件传递一系列的props到子组件,同时父组件监听子组件emit过来的一系列事件。举例子:

//父组件
<BaseInput 
    :value="value"
    label="密码" 
    placeholder="请填写密码"
    @input="handleInput"
    @focus="handleFocus>
</BaseInput>

//子组件
<template>
  <label>
    {{ label }}
    <input
      :value="value"
      :placeholder="placeholder"
      @focus=$emit('focus', $event)"
      @input="$emit('input', $event.target.value)"
    >
  </label>
</template>

有下面几个优化点:

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来,我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子,无需声明。方法如下:

    <input
      :value="value"
      v-bind="$attrs"
      @input="$emit('input', $event.target.value)"
    >
   

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做,只是把event传回给父组件而已,那其实和上面类似,我完全没必要显式地申明:

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是,由于我们input并不是BaseInput这个组件的根节点,而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false,这些默认行为将会被去掉, 以上两点的优化才能成功。


结尾

掌握了以上五招,你就能在Vue.js的海洋中自由驰骋了,去吧少年。
陆续可能还会更新一些别的招数,敬请期待。

如果你对VueJs或者ReactJs的虚拟DOM是如何实现的感兴趣,可以去看我的这个系列文章:
【React进阶系列】从零开始手把手教你实现一个Virtual DOM(一)
【React进阶系列】从零开始手把手教你实现一个Virtual DOM(二)
【React进阶系列】从零开始手把手教你实现一个Virtual DOM(二)

标题虽然是React进阶,但事实上Vuejs从2.0开始也使用了虚拟DOM,虽然你仍然可以使用Vuejs的模板template写代码,但本质上template最后也会complile成虚拟DOM。(官方文档Vuejs 渲染函数 & JSX)。

广告时间:阿里巴巴电商板块增速最快的新业务之一内推招人,请大家多多推荐或自荐,内部推荐优先面试,技术面试一周内出结果。可以私信我了解详情,或者直接把简历发到我邮箱:zeqiang.wang@alibaba-inc.com

查看原文

palmerye 收藏了文章 · 2018-03-30

前端知识点总结——JS基础

前端知识点总结——JS基础

1.javascript概述(了解)

1.什么是javascript

javascript简称为js,是一种运行于js解释器/引擎中的脚本语言
js的运行环境:
1.独立安装的js解释器(node)
2.嵌入在浏览器内核中的js解释器

2.js的发展史

1.1992年Nombas公司为自己开发了一款脚本语言SciptEase
2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript
3.1996年Microsoft在IE3.0版本中克隆javascript,JScript
4.1997年,javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5,ES6

3.js组成部分

1.核心(ECMAScript)
2.DOM (Document object model)文档对象模型
3.BOM (Browser object model)浏览器对象模型

4.js的特点

1.语法类似于c,java
2.无需编译,由js解释器直接运行
3.弱类型语言
4.面向对象的

2.JavaScript的基础语法

1.使用javascript

1.搭建运行环境
  1.独立安装的JS解释器-NodeJS
    1.在命令行界面:输入node
  console.log("你好,世界");
  在控制台打印输出
  说明:js是可以独立在js解释器中运行
2.使用浏览器内核中嵌的js解释器
  浏览器内核负责页面内容的渲染,由两部分组成:
     内容排版引擎-解析:HTML/CSS
     脚本解释引擎-解析:javascript
 1.直接在Console(控制台)中输入脚本并运行
 2.将js脚本嵌入在HTML页面中执行
   1.html元素的事件中执行js脚本
      事件-onclick-鼠标单击时要执行的操作
   2.在<script>中编写脚本并执行
      网页的任何位置处,嵌入一对<script>标记,并且将脚本编写在<script>标记中。
       3.使用外部脚本文件(.js为后缀)
     1.创建脚本文件(.js)并在文件中编写脚本
     2.在使用的网页中引用脚本文件
        <script data-original="脚本文件的url"></script>
      
 3.js调试,F12查看错误,出错时不影响其它代码块,后续代码继续执行。
   <script>
    /*这个脚本错误*/
    document.writ("<h3>周芷若</h3>");
       </script>
      <script>
    /*继续执行*/
        console.log("金花婆婆");  
      </script>
    3.通过语法规范
  1.语句:可执行的最小单元
          必须以;结束
      严格区分大小
      所有的符号必须是英文
      2.注释:
    // :单行注释
    /**/:多行注释

3.变量和常量

1.变量声明

1.声明变量
  var 变量名;
2.为变量赋值
  变量名=值;
3.声明变量是直接赋值
  var 变量名=值;
  ex:
  var uname="张无忌";
  var age=20;
 注意:
   1.允许在一条语句中声明多个变量,用逗号隔开变量名。
     var uname="韩梅梅",uage=20;
   2.如果声明变量,但未赋值,则值默认为undefined
   3.声明变量时可以不适用var,但不推荐
     uname="tom";

2.变量名的规范

1.不允许以数字开头
2.不允许使用关键词和保留关键字
3.最好见名知意
  var uname; var uage;
4.允许包含字母,数字,下划线(_),$
  var $name="Tom";
5.尽量使用小驼峰命名法
  var userName;
  var uname;
  var _uname;//下划线
  var user_name;//下划线
  var UserName;//大驼峰命名法

4.变量的使用

1.声明变量未赋值,值默认为undefined
2.使用未声明过的变量 报错
3.赋值操作
  变量名出现在=的左边,一律是赋值操作
    var uname="林妹妹";
4.取值操作
  变量只要没出现在=的左边,一律是取值操作
    var uage=30;
console.log(uage);
var num1=uage;

5.常量

1.什么是常量
  在程序中,一经声明就不允许被修改的数据就是常量。
2.语法
  const 常量名=值;
  常量名在程序中,通常采用大写形式。
  const PI=3.1415926;

5.1数据类型

1.数据类型的作用

规定了数据在内存中所占的空间
10.1 64位 8个字节
bit:位
8bit=1byte字节
1024byte=1KB 
1024KB=1MB
1024MB=1G 
1024G=1T

2.数据类型详解

1.数据类型分两大类
  原始类型(基本类型)
  引用类型
  1.原始类型
    1.Number 类型
  数字类型
  作用:可以表示32位的整数,也可以表示64位的浮点数(小数)
  整数:
     1.十进制
       10 
     2.八进制
       由0-7八个数字组成,逢八进一
       八进制中以0开始
       var num=010;
     3.十六进制
       由0-9和A-f组成,逢十六进一
          A:10
      B:11
      C:12
      D:13
      E:14
      F:15
       十六进制中以0X开始
      浮点数:又称小数
    小数点计数法:12.58  
    指数计数法:3.4e3(3.4*10的3次方)
2.String类型
  字符串类型
  作用:表示一系列的文本字符数据,如:姓名,性别,住址...
  字符串中的每个字符,都是由Unicode码的字符,标点和数字组成。
  Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符,
  该码就是unicode码(他是十六进制)
     1.查找一个字符的unicode码:
     "李".charCodeAt();
     //10进制输出

     "李".charCodeAt().toString(2);
     //二进制输出

     "李".charCodeAt().toString(16);
     //十六进制

       李的unicode码是:674e
     2.如何将674e转换为汉字?
        用\u
       ex:
        var str="\u674e";
    console.log(str);//结果是“李”

    汉字的Unicode码的范围:
    \u4e00~\u9fa5
     3.特殊字符需要转义字符
       \n: 换行
       \t: 制表符(缩进)
       \": "
       \': '
       \\: \
3.Boolean类型
  布尔类型
  作用:在程序中表示真或假的结果
  取值:
     true或false
  var isBig=true;
  var isRun=false;
  在参与到数学运算时,true可以当成1做运算,false可以当做0做运算。
  var res=25+true; //结果为26
    4.Undefined类型
  作用:表示使用的数据不存在
  Undefined类型只有一个值,即undefined当声明的变量未赋值(未初始化)时,
  该变量的默认值就是undefined.
5.Null类型
  null用于表示不存在的对象。
      Null类型只有一个值,即null,如果函数或方法要返回的是对象,
      找不到该对象,返回的就是null。

5.2数据类型的转换

1.隐式(自动)转换
  不同类型的数据在计算过程中自动进行转换
  1.数字+字符串:数字转换为字符串
    var num=15;
var str="Hello";
var res=num+str; //结果:15Hello
  2.数字+布尔:将布尔转换为数字true=1,false=0
    var num1=10;
var isSun=true;
var res1=num1+isSun;//结果:11
  3.字符串+布尔:将布尔转换为字符串
    var str1="Hello";
var isSun1=true;
var res2=str1+isSun1;//结果:Hellotrue
  4.布尔+布尔:将布尔转换为数字
    true=1,false=0;
    var isSun2=true;
var isSun3=flase;
var res=isSun2+isSun3;//结果1
2.强制转换 -转换函数
  1.toString()
    将任意类型的数据转换为字符串
语法:
  var num=变量.toString();
  ex:
  var num=15;
  var str=num.toString();
  console.log(typeof(str));
  2.parseInt()
    将任意类型的数据转换为整数
如果转换不成功,结果为NaN(Not a Number)
语法:var result=parseInt(数据);
  3.parseFloat()
    将任意类型的数据转换为小数
如果转换不成功,结果为NaN
语法:var result=parseFloat(数据);
  4.Number()
    将任意类型数据转为Number类型
注意:如果包含非法字符,则返回NaN
语法:var result=Number(数据);

6.运行符和表达式

1.什么是表达式

由运算符连接操作数所组成的式子就是表达式。
ex:
  15+20
  var x=y=40
任何一个表达式都会有结果。

2.运算符

1.算术运算符
  +,-,*,/,%,++,--

  5%2=1;
  ++:自增运算,只做+1操作
  ++在前:先自增,再运算;
  ++在后:先运算,再自增;
  ex:
    var num=5;
console.log(num++);//打印5,变为6
console.log(++num);//变为7,打印7

ex:
    var num=5;
             5   (6)6   6(7)    (8)8
    var res=num+ ++num +num++ + ++num +num++ +num;  
  8(9)   9
结果:42
2.关系运算符(比较)
  >,<,>=,<=,==,===(全等),!=,!==(不全等)
  关系运算的结果:boolean类型(true,false)
  问题:
    1. 5 > "10" 结果:false
   关系运算符两端,只要有一个是number的话,另外一个会隐式转换为number类型,再进行比较。
2."5">"1 0" 结果:true
  "5".charCodeAt(); //53
  "1".charCodeAt(); //49
  "张三丰" > "张无忌" 结果:false
    19977  >   26080
3."3a" > 10 结果:false
  Number("3a")--->NaN
  注意:
    NaN与任何一个数据做比较运算时,结果都是false.
    console.log("3a">10); false
    console.log("3a"==10); false
    console.log("3a"<10); false
    isNaN()函数:
       语法:isNaN(数据);
       作用:判断指定数据是否为非数字,如果不是数字,返回值为true,是数字的话返回的值为false
       console.log(isNaN("3")); //false
       console.log(isNaN("3a")); //ture 

       console.log("3a"!=10);//true
3.逻辑运算符
  !,&&,||

  !:取反
  &&:并且,关联的两个条件都为true,整个表达式的结果为true
  ||:或者,关联的两个条件,只要有一个条件为true,整个表达式的结果就为true

  短路逻辑:
     短路逻辑&&:
     当第一个条件为false时,整体表达式的结果就为false,不需要判断第二个条件
     如果第一个条件为true,会继续判断或执行第二个条件
 短路逻辑||:
     当第一个条件为true时,就不再执行后续表达式,整体结果为true。
     当第一个条件为false时,继续执行第二个条件或操作。

4.位运算符
  <<,>>,&,|,^

  右移是把数变小,左移是把数变大
  &:按位与,判断奇偶性
     任意数字与1做按位与,结果为1,则为奇数,结果为0,则为偶数。
     var num=323;
 var result=num & 1
 console.log(result); //结果为1
  |:按位或,对小数取整
     将任意小数与0做按位或,结果则取整数部分。

  ^:按位异或,用于交换两个数字
      二进制位数,逐位比较,不同则为1,相同则为0
   a=a^b;
   b=b^a;
   a=a^b;
5.赋值运算符和扩展赋值运算符
  1.赋值运算 =
    var uname="TOM";
  2.扩展赋值运算符
    +=,-=,*=,/=,%=,^=...
a=a+1 a+=1;a++;++a
a=a^b
a^=b
6.条件(三目)运算符
  单目(一目)运算符,只需要一个操作数或表达式
  ex: a++,b--,!isRun
  双目(二元)运算符,需要两个操作数或表达式
   +,-,*,/,%,>,<,>=,<=,==,!=,===,!==,&&,||,&,|,^
  三目(三元)运算符,需要三个操作数或表达式
     条件表达式?表达式1:表达式2;
        先判断条件表达式的值,
    如果条件为true,则执行表达式1的操作
    如果条件为false,则执行表达式2的操作
  ex:成绩大于60及格,否则,输出不及格
 

7.函数-function

1.什么是函数

函数,function,也称为方法(method)
函数是一段预定义好,并可以被反复执行的代码块。
   预定义:提前定义好,并非马上执行。
   代码块:可以包含多条可执行的语句
   反复执行:允许被多次调用
函数-功能
   parseInt();
   parseFloat();
   Number();
   console.log();
   alert();
   document.write();

2.定义和使用函数

1.普通函数的声明和调用(无参数无返回值)
  1.声明
    function 函数名(){
   //函数体
     若干可执行的语句
  
}
  2.调用函数
    在任意javascript合法的位置处通过 函数名(); 对函数进行调用。
 

2.带参函数的声明和调用
  1.声明
    function 函数名(参数列表){
   //函数体
}
参数列表:可以声明0或多个参数,多个参数间用逗号隔开
声明函数时,声明的参数,称之为“形参”
 2.调用
   函数名(参数值列表);
   注意:调用函数时,传递的参数数值,称之为“实参”。
         尽量按照声明函数的格式进行调用
3.带返回值函数声明和调用
  1.声明
    function 函数名(参数){
   //函数体
   return 值;
   //return关键字,程序碰到return关键词,就立马跳出并且把值带出去
}
注意:最多只能返回一个值
  2.调用
    允许使用一个变量接收函数的返回值
    var result=函数名(实参);

8.作用域

1.什么是作用域
  作用域表示的是变量或函数的可访问范围。
  JS中的作用域分两种:
     1.函数作用域
   只在函数范围内有效
 2.全局作用域
   代码的任何位置都有效

2.函数作用域中变量

 又称为局部变量,只在声明的函数中有效
 ex:
   function test(){
     var num=10;
   }
   

3.全局作用域中的变量

 又称为全局变量,一经声明,任何位置都能用
 1.不在function中声明的变量,为全局变量
 2.声明变量不使用var,无论任何位置声明,都是全局变量(不推荐)

 注意:
   全局变量和局部变量冲突时,优先使用局部变量。
 3.变量的声明提前
   1.什么是声明提前
     在JS程序正式执行之前,function声明的函数,
     会将所有var声明的变量,都预读(声明)到所在作用域的顶部,但赋值还是保留在原位。
  

9.按值传递

1.什么是按值传递

原始(基本)类型的数据(number,string,bool),在做参数传递时,
都是按照“值传递”的方式进行传参的。
值传递:真正传递参数时,实际上传递的是值的副本(复制出来一个值),
而不是原始值。

2.函数的作用域

1.分为两种
  1.局部函数
    在某个function中声明的函数。
  2.全局函数
    在最外层(<script>中)定义的函数就是全局函数,全局函数一经定义,
    任何位置处都能调用。

10.ECMAScript提供一组全局函数

1.parseInt()
2.parseFloat()
3.isNaN()
4.encodeURI()

URL:uniform resource locator路径
URI:uniform resource Identifier
作用:对统一资源标识符进行编码,并返回编码后的字符串
所谓的进行编码,就是将地址中的多字节文字编成单字节的文字
(英文数字:单字节,汉字2-3字节不等)

5.decodeURI()

作用:对已经编码的URI进行解码,并返回解码后的字符串。

6.encodeURIComponent()

在encodeURI的基础上,允许对特殊符号进行编码。

7.decodeURIComponent()

解码特殊符号

8.eval()

作用:执行以字符串表示的js代码

11.递归调用

递归:在一个函数的内部再一次调用自己
问题:

 1*2*3*4*5
 
 5*4*3*2*1
 求5!(5*4*3*2*1) 4!(4*3*2*1) 3!(3*2*1)
       2!(2*1) 1!(1*1)

   5!=5*4!
   4!=4*3!
   3!=3*2!
   2!=2*1!
   1!=1
   通过一个函数,求数字n的阶乘
   10!=10*(10-1)!
   效率:
     在本次调用还未结束时,就开始下次的调用,本次调用就会被挂起,
     直到所有的调用都完成之后,才会依次返回,调用的次数越多,效率越低。
  

12.分支结构

1.if结构

if(条件){
   语句块;
}
注意:
  条件尽量是boolean的,如果不是boolean,以下情况会当做false处理
   if(0){...}
   if(0.0){...}
   if(""){...}
   if(undefined){...}
   if(null){...}
   if(NaN){...}
注意:if后的{}可以省略,但是不推荐,只控制if后的第一句话。

2.if...else...结构

语法:
  if(条件){
     语句块
  }else{
     语句块
  }

3.if....else if...else...

语法:
  if(条件1){
    语句块1
  }else if(条件2){
     语句块2
  }else if(条件3){
     语句块3
  }else{
     语句块n
  }

4.switch...case

1.作用:(使用场合)
  等值判断
2.语法
  1.switch(值/表达式){
     case 值1:
    语句块1;
    break;//结束switch结构,可选的
 case 值2:
    语句块2;
    break;
    ...
 default:
   语句块n;
   break;
   }
  2.特殊用法
    执行相同操作时:
   switch(值/表达式){
       case 值1:
       case 值2:
       case 值3:
          语句块;
   }

  

12.循环结构

1.特点

1.循环条件:循环的开始和结束
2.循环操作:要执行的相同或相似的语句

2.循环-while

语法:
   while(条件){
      //循环体-循环操作
      
  //更新循环条件
   }

3.循环的流程控制

1.break
  作用:终止整个循环的运行
2.continue
  作用:终止本次循环的运行,继续执行下一次循环
 ex:
   循环从弹出框中录入信息,并且打印,直到输入exit为止。
   

4.循环-do...while

1.语法
  do{
     //循环体
  }while(条件);

 执行流程:
     1.先执行循环体
 2.再判断循环条件
   如果条件为真,则继续执行循环体
   如果条件为假,则跳出循环操作

5.循环-for

语法:
  for(表达式1;表达式2;表达式3){
     //循环操作
  }
  表达式1:循环条件的声明
  表达式2:循环条件的判断
  表达式3:更新循环变量
  执行流程:
     1.先执行表达式1
 2.判断表达式2的结果(boolean类型)
 3.如果2条件为真,则执行循环体,否则退出
 4.执行完循环体后,再执行表达式3
 5.判断表达式2的结果
  ex: for(var i=1;i<=10;i++){
      console.log(i);
   }

13.for的特殊用法

1.for(表达式1;表达式2;表达式3;){}

1.省略表达式
  三个表达式可以任意省略,分号不能省
  但一定在循环的内部或外部将表达式补充完整
2.表达式1和表达式3 允许写多个表达式,用逗号隔开表达式

14.循环嵌套

1.循环嵌套

在一个循环的内部,又出现一个循环
  for(var i=1;i<100;i++){ //外层循环
     for(var j=1;j<=10;j++){
    //内层循环
 }
  }
 外层循环走一次,内层循环走一轮

15.数组

1.什么是数组

在一个变量中保存多个数据。
数组是按照线型顺序来排列的-线型结构
数组中:除了第一个元素外,每个元素都有一个直接的"前驱元素"。
数组中:除了最后一个元素外,每个元素都有一个会直接的"后继元素"。

2.声明数组

1.语法
  1.var 数组名=[];
    var names=[];
  2.var 数组名=[元素1,元素2,元素3...];
    var names=["孙悟空","猪八戒","沙和尚"];
  3.var 数组名=new Array();
    var names=new Array();
  4.var 数组名=new Array(元素1,元素2...);
    var names=new Array("林黛玉","贾宝玉","王熙凤");

3.数组的使用

1.取值和赋值操作
  取值:
   数组名[下标]
   var newArr=["tom","lilei"];
   newArr[0]
  赋值:
    数组名[下标]=值;
     newArr[2]="韩梅梅";
2.获取数组的长度
  数组长度:数组中元素的个数
  属性:length
  语法:数组名.length
3.配合循环,遍历数组中的每个元素
  for(var i=0;i<names.length;i++){
      i:表示数组中每个元素的下标
      names[i]:每个元素
  }
  
  length表示数组中即将要插入的元素的下标
  var names=["tom","lili","lucy"];
      names[names.length]="lilei";
 

16.关联数组

1.关联数组
  以字符串作为元素的下标的数组,就是关联数组。
  以数字作为下标的数组,就是索引数组。
$array=["name"=>"tom"]
2.js中的关联数组
  var array=[];
  array["字符串下标"]=值;
  注意:
    1.关联数组中,字符串下标的内容是不记录到length中的
2.只能通过 字符串 做下标取值
3.for...in
  遍历出任意数组中的字符串下标 以及 索引下标
  语法:for(var 变量 in 数组名){
       //变量:字符串下标 或 索引下标
  }

17.冒泡排序

1.什么是冒泡
  排序算法之一,将一组数据进行排序,小的数字往前排,大的数字往后排。
  两两比较,小的靠前。
  var arr=[9,23,6,78,45]; 5个数  比4轮
  第一轮:比较了4次
  第二轮:比较了3次
  第三轮:比较了2次
  第四轮:比较了1次
  1.n个数字,则比较n-1轮
    for(var i=1;i<arr.length;i++)
  2.轮数增加,比较的次数较少
    for(var j=0;j<arr.length-i;j++)
          第一轮  5     -1=4次
      第二轮  5     -2=3次
              第三轮  5     -3=2次
      第四轮  5     -4=1次
      两两比较 小的靠前
      if(arr[j]>arr[j+1])

         arr[j]^=arr[j+1];
         arr[j+1]^=arr[j];
         arr[j]^=arr[j+1]

18.数组的常用方法

1.toString();

作用:将数组转换为字符串,并返回转换后的结果。
语法: var str=数组对象.toString();

2.join()

作用:将数组的元素通过指定的字符连接到一起,并返回连接后字符串
语法:var str=数组对象.join("字符");

3.concat()

作用:拼接两个或更多的数组,并返回拼接后的结果
语法:var res=数组对象.concat(数组1,数组2,...);

 

19.数组的函数

1.slice()

作用:截取子数组,从指定的数组中,截取几个连续的元素组成一个新的数组
语法:var arr=数组名.slice(start,[end]);
      start:从哪个下标位置处开始截取,取值为正,从前向后算; 
      取值为负,从后向前算          0      1      2
   var arr=["中国","美国","俄罗斯"];
             -3      -2    -1 
      end:指定结束位置处的下标(不包含自己),该参数可以省略,
      如果省略的话,就是从strat开始一直截取到尾。

2.splice()

作用:允许从指定数组中,删除一部分元素,同时再添加一部分元素
语法:arr.splice(start,count,e1,e2...);
      start:指定添加或删除元素的起始下标
  count:指定要删除元素的个数,取值为0表示不删除
  e1:要增加的新元素,可以多个
  返回值:返回一个由删除元素所组成的数组

3.reverse()

作用:将一个数组反转
语法:数组名.reverse();
注意:该函数会改变当前数组的内容

4.sort()

作用:排序,默认情况下按照数组元素们的Unicode码进行升序排序。
语法:数组名.sort();
特殊:
   允许自定义排序函数,从而实现对数字的升序或降序的排序
   ex:
     var arr=[12,6,4,115,78];
 //排序函数(升序)
 function sortAsc(a,b){
    return a-b;
 }
 arr.sort(sortAsc);
  原理:
    1.指定排序行数sortAsc,定义两个参数a和b,表示数组中相邻的两个数字
2.将排序函数指定给数组sort()函数,数组会自动传递数据到sortAsc()中,
  如果sortAsc()的返回值>0,则交互两个数字的位置,否则不变。
  使用函数完成升序排序:
     arr.sort(
       function(a,b){  //匿名函数
         return a-b;
       }
    )

20.进出栈操作

JS是按照标准的“栈式操作”来访问数组
所有的“栈式操作”的特点就是“后进先出”
1.push()

入栈,在栈顶添加指定的元素,并返回新数组的长度
 var arr=[10,20,30];
 //向栈顶增加新的数据40
 var len=arr.push(40); //4

2.pop()

出栈,删除(删除栈顶数据)并返回删除元素
注意:改变原来数组

3.shift()

删除数组头部(第一个)的元素并返回删除元素
语法:数组名.shift();

4.unshift()

在数组的头部(第一个)元素的位置处,增加元素,返回的是数组的长度。
语法:数组名.unshift(增加的数据);

3.二维数组
1.什么是二维数组

在一个数组中的元素又是一个数组,也可以称为:数组的数组。

2.二维数组的使用

var names=[
    ["孙悟空","猪八戒","沙和尚"],
["大乔","小乔","曹操"],
["林黛玉","贾宝玉","薛宝钗"]
];
 //打印输出“小乔”
   console.log(names[1][1]);
       



  

  

 
查看原文

palmerye 发布了文章 · 2018-03-29

DOM操作成本到底高在哪儿?

从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM。尤其是React、vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQuery时代提供的强大便利地操作DOM的API在前端工程里用的越来越少。刨根问底,这里说的成本,到底高在哪儿呢?

什么是DOM

Document Object Model 文档对象模型

什么是DOM?可能很多人第一反应就是div、p、span等html标签(至少我是),但要知道,DOM是Model,是Object Model,对象模型,是为HTML(and XML)提供的API。HTML(Hyper Text Markup Language)是一种标记语言,HTML在DOM的模型标准中被视为对象,DOM只提供编程接口,却无法实际操作HTML里面的内容。但在浏览器端,前端们可以用脚本语言(JavaScript)通过DOM去操作HTML内容。

那么问题来了,只有JavaScript才能调用DOM这个API吗?

答案是NO

Python也可以访问DOM。所以DOM不是提供给Javascript的API,也不是Javascript里的API。

PS: 实质上还存在CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构,与DOM是两个独立的数据结构

浏览器渲染过程

讨论DOM操作成本,肯定要先了解该成本的来源,那么就离不开浏览器渲染。

这里暂只讨论浏览器拿到HTML之后开始解析、渲染。(怎么拿到HTML资源的可能后续另开篇总结吧,什么握握握手啊挥挥挥挥手啊,万恶的flag...)

  1. 解析HTML,构建DOM树(这里遇到外链,此时会发起请求)
  2. 解析CSS,生成CSS规则树
  3. 合并DOM树和CSS规则,生成render树
  4. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
  5. 绘制render树(paint),绘制页面像素信息
  6. 浏览器会将各层的信息发送给GPU,GPU将各层合成(composite),显示在屏幕上

1.构建DOM树

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img data-original="awesome-photo.jpg"></div>
  </body>
</html>
无论是DOM还是CSSOM,都是要经过Bytes → characters → tokens → nodes → object model这个过程。

DOM树构建过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2.构建CSSOM树

上述也提到了CSSOM的构建过程,也是树的结构,在最终计算各个节点的样式时,浏览器都会先从该节点的普遍属性(比如body里设置的全局样式)开始,再去应用该节点的具体属性。还有要注意的是,每个浏览器都有自己默认的样式表,因此很多时候这棵CSSOM树只是对这张默认样式表的部分替换。

3.生成render树

DOM树和CSSOM树合并生成render树

简单描述这个过程:

DOM树从根节点开始遍历可见节点,这里之所以强调了“可见”,是因为如果遇到设置了类似display: none;的不可见节点,在render过程中是会被跳过的(但visibility: hidden; opacity: 0这种仍旧占据空间的节点不会被跳过render),保存各个节点的样式信息及其余节点的从属关系。

4.Layout 布局

有了各个节点的样式信息和属性,但不知道各个节点的确切位置和大小,所以要通过布局将样式信息和属性转换为实际可视窗口的相对大小和位置。

5.Paint 绘制

万事俱备,最后只要将确定好位置大小的各节点,通过GPU渲染到屏幕的实际像素。

Tips

  • 在上述渲染过程中,前3点可能要多次执行,比如js脚本去操作dom、更改css样式时,浏览器又要重新构建DOM、CSSOM树,重新render,重新layout、paint;
  • Layout在Paint之前,因此每次Layout重新布局(reflow 回流)后都要重新出发Paint渲染,这时又要去消耗GPU;
  • Paint不一定会触发Layout,比如改个颜色改个背景;(repaint 重绘)
  • 图片下载完也会重新出发Layout和Paint;

何时触发reflow和repaint

reflow(回流): 根据Render Tree布局(几何属性),意味着元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树;
repaint(重绘): 意味着元素发生的改变只影响了节点的一些样式(背景色,边框颜色,文字颜色等),只需要应用新样式绘制这个元素就可以了;
reflow回流的成本开销要高于repaint重绘,一个节点的回流往往回导致子节点以及同级节点的回流;

GoogleChromeLabs 里面有一个csstriggers,列出了各个CSS属性对浏览器执行Layout、Paint、Composite的影响。

引起reflow回流

现代浏览器会对回流做优化,它会等到足够数量的变化发生,再做一次批处理回流。
  1. 页面第一次渲染(初始化)
  2. DOM树变化(如:增删节点)
  3. Render树变化(如:padding改变)
  4. 浏览器窗口resize
  5. 获取元素的某些属性:
    浏览器为了获得正确的值也会提前触发回流,这样就使得浏览器的优化失效了,这些属性包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、调用了getComputedStyle()或者IE的currentStyle

引起repaint重绘

  1. reflow回流必定引起repaint重绘,重绘可以单独触发
  2. 背景色、颜色、字体改变(注意:字体大小发生变化时,会触发回流)

优化reflow、repaint触发次数

  • 避免逐个修改节点样式,尽量一次性修改
  • 使用DocumentFragment将需要多次修改的DOM元素缓存,最后一次性append到真实DOM中渲染
  • 可以将需要多次修改的DOM元素设置display: none,操作完再显示。(因为隐藏元素不在render树内,因此修改隐藏元素不会触发回流重绘)
  • 避免多次读取某些属性(见上)
  • 将复杂的节点元素脱离文档流,降低回流成本

为什么一再强调将css放在头部,将js文件放在尾部

DOMContentLoaded 和 load

  • DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片...
  • load 事件触发时,页面上所有的DOM,样式表,脚本,图片都已加载完成

CSS 资源阻塞渲染

构建Render树需要DOM和CSSOM,所以HTML和CSS都会阻塞渲染。所以需要让CSS尽早加载(如:放在头部),以缩短首次渲染的时间。

JS 资源

  • 阻塞浏览器的解析,也就是说发现一个外链脚本时,需等待脚本下载完成并执行后才会继续解析HTML

  • 普通的脚本会阻塞浏览器解析,加上defer或async属性,脚本就变成异步,可等到解析完毕再执行

    • async异步执行,异步下载完毕后就会执行,不确保执行顺序,一定在onload前,但不确定在DOMContentLoaded事件的前后
    • defer延迟执行,相对于放在body最后(理论上在DOMContentLoaded事件前)

举个栗子

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img data-original="awesome-photo.jpg"></div>
    <script data-original="app.js"></script>
  </body>
</html>

  • 浏览器拿到HTML后,从上到下顺序解析文档
  • 此时遇到css、js外链,则同时发起请求
  • 开始构建DOM树
  • 这里要特别注意,由于有CSS资源,CSSOM还未构建前,会阻塞js(如果有的话)
  • 无论JavaScript是内联还是外链,只要浏览器遇到 script 标记,唤醒JavaScript解析器,就会进行暂停 blocked 浏览器解析HTML,并等到 CSSOM 构建完毕,才执行js脚本
  • 渲染首屏(DOMContentLoaded 触发,其实不一定是首屏,可能在js脚本执行前DOM树和CSSOM已经构建完render树,已经paint)

首屏优化Tips

说了这么多,其实可以总结几点浏览器首屏渲染优化的方向
  • 减少资源请求数量(内联亦或是延迟动态加载)
  • 使CSS样式表尽早加载,减少@import的使用,因为需要解析完样式表中所有import的资源才会算CSS资源下载完
  • 异步js:阻塞解析器的 JavaScript 会强制浏览器等待 CSSOM 并暂停 DOM 的构建,导致首次渲染的时间延迟
  • so on...

知道操作DOM成本多高了吗?

其实写了这么多,感觉偏题了,大量的资料参考的是chrome开发者文档。感觉js脚本资源那块还是有点乱,包括和DOMContentLoaded的关系,希望大家能多多指点,多多批评,谢谢大佬们。

操作DOM具体的成本,说到底是造成浏览器回流reflow和重绘reflow,从而消耗GPU资源。

参考文献:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

已同步至个人博客-软硬皆施
Github 欢迎star :)
查看原文

赞 120 收藏 235 评论 23

palmerye 收藏了文章 · 2018-03-26

【基础】这15种CSS居中的方式,你都用过哪几种?

简言

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。

css居中

1 水平居中

1.1 内联元素水平居中

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

核心代码:

.center-text {
    text-align: center;
 }

演示程序:

演示代码

1.2 块级元素水平居中

通过把固定宽度块级元素的margin-leftmargin-right设成auto,就可以使块级元素水平居中。

核心代码:

.center-block {
  margin: 0 auto;
}

演示程序:

演示代码

1.3 多块级元素水平居中

1.3.1 利用inline-block

如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

演示程序:

演示代码

1.3.2 利用display: flex

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示。

核心代码:

.flex-center {
    display: flex;
    justify-content: center;
}

演示程序:

演示代码

2 垂直居中

2.1 单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。

核心代码:

#v-box {
    height: 120px;
    line-height: 120px;
}

演示程序:

演示代码

2.2 多行元素垂直居中

2.2.1 利用表布局(table

利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

演示程序:

演示代码

2.2.2 利用flex布局(flex

利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。

核心代码:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

演示程序:

演示代码

2.2.3 利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

核心代码:

.ghost-center {
    position: relative;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 20rem;
}

演示程序:

演示代码

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。

核心代码:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

演示程序:

演示代码

2.3.2 未知高度的块级元素

当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

演示程序:

演示代码

3 水平垂直居中

3.1 固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半,使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

演示程序:

演示代码

3.2 未知宽高元素水平垂直居中

利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。

核心代码:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

演示程序:

演示代码

3.3 利用flex布局

利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

核心代码:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

演示程序:

演示代码

3.4 利用grid布局

利用grid实现水平垂直居中,兼容性较差,不推荐。

核心代码:

.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

演示程序:

演示代码

3.5 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局。

核心代码:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

演示程序:

演示代码

4 说明

文中所述文字及代码部分汇编于网络。因时间不足,能力有限等原因,存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围,不适用于实际应用。

文中所述方案只是居中方案其中的一部分,并不是全部。另代码中涉及CSS3的flex,transform,grid等内容都存在兼容性问题。

5 引用参考

Centering in CSS: A Complete Guide

w3.org centering things

How To Center Anything With CSS

如何使DIV在屏幕上水平垂直居中显示?

查看原文

palmerye 收藏了文章 · 2018-03-21

BAT 要的是什么样的前端实习生?

面试季又到了,各位小鲜肉也在着手准备基本的面试、实习。但是,有小鲜肉的思想我确实有点不敢苟同。面试无非就是问一些问题,你能答出来就行,答不出来就 pass。那如果我知道你要问哪些问题,这不就行了吗?感觉这不就是做一场考试吗?

一个学期的课程,我用 7 天学完,题目我都会做,考试分数还比那些学了一个学期的要好得多。那我为什么还要上课呢?现在,侥幸你通过了面试,知道如何做算法题,但在实际工程领域,你这样的人能解决什么问题呢?

年轻人拥有着无限可能大概是这世界上最搞笑的一句话了。本来在这个世界上在某一个领域里做好一件事情都很难的,怎么就无限可能了呢?越是对世界缺少洞见,对自己缺乏了解,越是容易被这句话感动得热泪盈眶。

最近看了一下,基本的面试题目集,发现都是一问一答的形式,这个不是和 7 天速成一模一样了吗?知其然,不知其所以然。那么,我这里也和他们一样,也给大家一份面试题目集,不过,答案并没有写出来,而是在每篇文章里(有些,就直接归纳在下面),你能看懂多少,这个题目你就能解决多少。

而面试题目也会持续更新下去

最新的内容,请访问:front-end-interview

image.png-961.6kB

面试问题

浏览器内核

更多可以参考:前端Villainhr

查看原文