无距

浏览器渲染帧主流的PC屏幕刷新率（FPS）大多在60Hz，即1秒钟对屏幕进行60次刷新，平均每次刷新耗时大概是16.6ms。刷新率高于60帧/s，会做一些无用的刷新，浪费cpu资源；刷新率低于60帧/

babel解析js是非常耗时的，想象一下，假如我们有100个js文件，某一时刻只修改了其中一个，构建的时候还是会对这100个文件进行解析，这显然是不够高效的。这时候我们可以给babel加一个缓存，再次构建时，对那些没有发生修改的js文件，直接从缓存中读取解析结果而不需要重新解析…

最近在阅读webpack源码的时候，发现在webpack的编译器（compiler.js）里用到了tapable，于是查资料学习了以下，这里做一个学习记录。 异步钩子分为异步并发（Parallel）执行和异步串行（Series）执行，从hook名字我们就可以看出来。

今天，我们从浏览器的渲染原理出发，彻底搞明白为什么。 从图中可以看出，页面渲染需要经历html解析，css解析，js解释执行，layout布局，绘制几个阶段。今天我们讨论问题的答案就在html解析，css解析，js解释执行阶段 答案是肯定的，js会阻塞页面渲染。在浏览器解析ht…

webpack只能处理js模块，在js中加载图片模块时需要借助file-loader。如 url-loader可以把较小的图片转化成base64数据，从而减少对图片资源的http请求。同时打包文件也会变大； 当图片大小超过设置的限制（limit）时，默认采用file-loade…

在聊浏览器基本原理之前，我们先简单说一下两个重要概念——进程和线程。 当解析过程中遇到link，script，img等标签时，通知网络进程发起资源请求，并把网络请求任务放在一个Task Queue（任务队列）中。如遇到script标签，主线程停止解析dom（步骤一暂停），直到j…

index 和 other 分别作为两个入口文件，且都引用了a，b两个模块。我们可以使用webpack的optimization配置抽离a，b到单独的模块，index 和 other 只需要引入抽离的公共模块即可，不需要再单独引入a，b。配置如下： 此刻，如果我们还引用了第三方…

最近在整理eslint，prettier，tslint，stylelint...等代码规范的东西，也顺带手说一下pre-commit吧。 顾名思义，pre-commit就是在我们commit代码之前做一些事情，比如代码检查，避免把不规范的代码提交到仓库。其实pre-commit…

随着前端开发越来越规范，代码规范已经成为一个标准前端开发的基本技能，并且很多的大厂对代码规范有严格要求。 很长一段时间，我们都没有太注意代码规范，至少我一直都是懵逼状态哈哈哈，今天就eslint+prettier+vscode做一次实战记录。话不多说，上干货！！！ 这里我曾经疑…