旅行►记录

首次体验北方冬天

22年元旦又去了趟北京，当然是想看看雪，不过那几天天气好到不行，大晴空。即便没看到雪，这也是本南方人第一次见识北方的冬天。无论是光秃秃的树木，结冰的河面，还是凛冽的寒风，喷香的铜炉羊肉，都很有趣。

1.jpg

Read More

开发►前端

前端性能监控

前端性能参数，可以直接敲 performance。里面记录了各个性能指标。具体的各个参数，可以查看大佬们的总结。

这里记录几个参数

1、首屏绘制（First Paint，FP）

就是白屏时间啦。

performance.getEntriesByType('paint')[0]

2、首屏内容绘制（First Contentful Paint，FCP）

就是首屏加载时间啦

performance.getEntriesByType('paint')[1]

Read More

开发►前端

webpack 的快

现在啥都离不开性能。性能其实就是讲快的问题。一般 webpack 的快，都是讲它的构建（打包）的速度，但其实也可以有辅助运行时候的快的。
简单记录一下。

构建速度

一、缓存

基本上只要讲到快的肯定都有缓存。

  1. webpack5 的持久化缓存

  2. 各类 loader 自带的缓存功能（比如 babel-loader的 cacheDirectory: true）

  3. cache-loader

  4. hard-source-webpack-plugin

  5. DllPlugin 和 DllReferencePlugin

前面四个是编译一次后产生缓存，也就是用以第二次缓存。
最后一个 Dll 是把一些不常变化的先打包好，然后引进来就可以了，不要每次都花时间构建。另类缓存。

二、加速文件查找

  1. 对文件进行编译，那文件多少，找文件也是个耗时的工作。webpack 配置的 resolve 字段，就是用来告诉查找规则。
module.exports = {
  resolve: { // 配置一系列搜索资源的规则
    alias: { // 起别名，相当于转换成绝对路径了，所以比相对路径快
      @src: path.resolve(process.cwd(), 'src')
    },
    // 引用的文件可以不加后缀，会找这些后缀的文件，引用文件详细到后缀名最快了
    // 但是一般也习惯不写后缀名，但这字段不要太多吧
    extensions: ['.wasm', '.mjs', '.js', '.json'],
    // 明确告诉 webpack 搜索哪个依赖文件，可以用绝对路径写死
    modules: ['node_modules']
  }
}
  1. 以及 loader 配置里的 include 和 exclude 来告诉 webpack 哪些需要编译哪些不需要，不干活当然最省时间。

三、多进程打包

  1. happypack（作者都推荐用 thread-loader 了。。。）

  2. thread-loader

运行速度

一、缓存

还是避不开缓存，这个结合《关于缓存的几个关键词》最下面内容来看。就是跟浏览器的缓存策略搭配起来。

二、花样减少代码

  1. 压缩代码，现在 prodcution 模式，webpack 会自定开启混淆压缩功能了。（当然也可以自己配置压缩功能）

  2. 减去不被触及的代码，Tree Shaking，但我想还是尽量不要写这种代码吧，Tree Shaking 也不是百分百靠谱。

  3. 按需加载，配合 ES6 的 import export，webpack就会处理了。没有用到的模块就不打包进来。
    注意：这里提一下，require 也可以使用，但并不是浏览器支持 require，而是 webpack 对其做了方法处理。
    无论是 import 还是 require，最终都会变成 __webpack_require__。使用 require 就没有按需这种功效了。代码都会全部打进去。
    而且因为 import 语法原因，所以需要放在最上面声明，是静态解析，所以才能分析出哪些要不要。（其实这部分是 babel 干的活）
    当然 require 也有用处，代码虽然都打进来，但是不会一开始就运行（调用 require 了才会），也就是省去一开始的解析时间，最关键的还是，可以条件引入：

function getModule(flag) {
  if (flag) {
    return require('./a.js')
  }
  return require('./b.js')
}

  1. 抽出公共js，虽然大部分工程都会打成一个 js，但有些还是会有多份，就可能存在重复代码，然后这个相当复杂的 SplitChunksPlugin （CommonsChunkPlugin的升级版，不过这家伙已经是时代的眼泪了）就出场了。可以抽出公共组件，可以很精细地配置，当然官网说他们的默认配置最优了，没什么事就不要瞎改了。

  2. 异步加载，这个就跟上面那个有千丝的关系。我们运行性能讲究一个最小展示，可以看下JS性能优化探讨里的加快响应。
    有些功能不一定会被点到，那这部分功能就可以延后初始化。那相关的 js 就可以延迟加载。也即是动态加载，对应上面说的 import 是静态加载。使用 webpack 的语法 import()。这个跟 require 不同，不会被打包进去，而是抽多一份 js 出来。延迟去下载。

  3. 合并js文件，这个就跟上面那两个有万缕的关系。抽的 js 太多就会增多 http 请求，这是最耗性能的，走多一次 http 的消耗可能比一次请求多点内容更消耗，当然 http2 的多路复用另说。
    LimitChunkCountPlugin 和 MinChunkSizePlugin（LimitChunkCountPlugin功能多一点，没具体使用过） 用于合并小 js 文件。实际场景中，我们就曾在使用 monaco-editor（vscode的网页版）的时候，打包出来有很多细碎的 js，然后用了 MinChunkSizePlugin 把小 js 文件给合成一份。

开发►前端

几个相似（splice slice，substr substring）方法的区别

数组有 splice，slice 这两个方法，字符串也有类似的，长得很像，经常混了，这里记录下。

arrayObject.splice(index, howmany, item1, ….., itemX)

splice：绞接，捻接(两段绳子)的意思。该方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会直接对数组进行修改。

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX：可选。向数组添加的新项目。

const arr = [1, 2, 3, 4]
arr.splice(2, 0, 7, 7, 7) // 返回[]，arr = [1, 2, 7, 7, 7, 3, 4]
arr.splice(2, 1, 7, 7, 7) // 返回[3]，arr = [1, 2, 7, 7, 7, 4]
arr.splice(0, 1) // 返回[1]，arr = [2, 3, 4]
arr.splice(-1, 1, 7, 7, 7) // 返回[4]，arr = [1, 2, 3, 7, 7, 7]

arrayObject.slice(start, end)

slice：切片的意思。该方法可从已有的数组中返回选定的元素。返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。不会改变原数组。

start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

const arr = [1, 2, 3, 4]
arr.slice(0, 0) // []
arr.slice(0, 1) // [1]
arr.slice(2, 3) // [3]
arr.slice(0) // [1, 2, 3, 4]
arr.slice(-2) // [3, 4]
arr.slice(-2, -1) // [3]

字符串的 slice，substr，substring 方法

stringObject.slice(start, end)

该方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。跟数组一样不赘述

'1234567'.slice(1, 3) // 23
'1234567'.slice(-4, -1) // 456

stringObject.substr(start, length)

该方法可在字符串中抽取从 start 下标开始的指定数目的字符。
注意：ECMAscript 没有对该方法进行标准化，因此反对使用它。

start：必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

'1234567'.substr(1, 3) // 234
'1234567'.substr(0) // 1234567
'1234567'.substr(-4, 2) // 45

stringObject.substring(start, stop)

该方法用于提取字符串中介于两个指定下标之间的字符。

start：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

注意：与 slice 和 substr 方法不同的是，substring 不接受负的参数。substring 功能与 slice 一样。

'1234567'.substring(1, 3) // 23
'1234567'.substring(3, 1) // 23，如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
'1234567'.substring(3) // 4567
'1234567'.substring(-1, 1) // 1，参数 -1 被解析成 0