20200309 - lipeiwei

[vianvio]

问题列表：

1. 描述异步模块加载实现原理，amd/cmd中的实现方案，webpack中的实现方案。
2. 举几个你认为非常经典的案例，来说明前端基础知识在日常工作中的作用。
3. 画一张业务大图，来说明目前负责的业务与公司整体业务的关系。

[vivianli-me]

Q1：描述异步模块加载实现原理，amd/cmd中的实现方案，webpack中的实现方案

在此先说说思路，在看异步加载之前，需要先熟悉同步加载的机制，我看了YouTube一个讲解视频Ronen Amiel - Build Your Own Webpack，研究懂原理后，在最基本的同步加载之上，处理了module缓存跟循环引用的问题，实现代码见https://github.com/lipeiwei-szu/minipack。

然后说到异步加载，我喜欢根据结果推断实现逻辑，这样子比较快。所以我基于webpack写了一个异步加载的demo，分析了输出的代码，从而得知是通过promise + jsonp实现。如果这个异步模块没有加载过，会通过jsonp去请求，然后缓存到同步的modules中。这是大致的思路。具体原理及研究过程我写在了这篇文章中如何实现一个支持异步加载的打包工具（二），文章底下还画了一个流程图。

一共有三篇文章

如何实现一个支持异步加载的打包工具（一） 基于Ronen Amiel - Build Your Own Webpack实现的minipack，并处理了module缓存跟循环引用的问题

如何实现一个支持异步加载的打包工具（二） 分析webpack的异步加载机制

如何实现一个支持异步加载的打包工具（三）（todo） 完善https://github.com/lipeiwei-szu/minipack，参考webpack的实现，为其加上异步加载的功能

（cmd/amd的实现方案还没看，先欠着）

[vivianli-me]

Q2：举几个你认为非常经典的案例，来说明前端基础知识在日常工作中的作用

起初看到这个问题，我不知道磐冲大佬这个前端基础的定义具体指啥，感觉这道题可以从“输入URL到页面显示经历了什么”这道题扩展开来，前端基础会涉及到这问题的整个链路，包括javascript/html/css、浏览器、网络等

（http缓存）=> dns解析 => tcp连接 => http连接 => 解析并渲染（并逐步请求页面中的其它资源）

我认为，前端基础知识能够将web的整个知识面串联起来，以点成面，并从中找到可以优化的点

以下将列举一些

浏览器缓存

1. 为了使客户端尽快显示页面，客户端跟服务端之间有指定的一套缓存机制，比如在一定时间内直接使用浏览器缓存（http强缓存），超过指定时间后用文件指纹（if-none-match/etag）或文件修改时间（if-modified-since/last-modified）去请求服务端校验（协商缓存）。如果熟知这一点，想要利用http缓存，那么就得给资源文件设置独一无二的路径名称。假设一个图标更改前名称是icon.png，更改后还是叫icon.png，那么至少在强缓存期间，这个文件不可能得到更新。这也是文件指纹的重要性，目前多种打包工具都会提供这种功能。

浏览器层面的tcp连接限制

1. 如果处于http1.1
   1. 既然对同一域名做了限制，那么可以切分为多个域名，有的放图片，有的放视频，这不就可以突破限制了吗！这里还有一点好处，在原来未切分域名的时候，就算是请求一个小图标，主站的cookie也会被带上，十分浪费流量。
   2. 减少连接数，我们也可以将一些体积较小的资源合并起来，这也就是雪碧图、资源内联等
2. 升级http2，从而实现单个tcp连接并行发送http

dns预解析

1. 在上一步，由于切分成多域名，所以最好通过dns prefetch去预解析dns

减少浏览器渲染的重排问题

1. 直接使用定义好 css 的class，然后修改dom的className。而不是一条一条地修改dom的样式
2. 使用documentFragment将dom离线后再进行修改
3. 将需要频繁修改css属性的节点（比如执行动画的）脱离正常文档流，position修改为fixed或absolute
4. 终极一点，用React/Vue这一类响应式框架，你只需要操作更改数据，dom操作都交给框架，让它去做到最优

如何更快地响应用户交互

这里涉及到的基础点是事件循环机制，也就是one macro task => all micro task => render这一套循环。这里需要提到fps（frame per second）这个概念，如果能达到60fps（一秒钟渲染60次，也就是每16.6ms渲染一次），页面将会很流畅。所以我们要保证每个循环中的macro task、micro task不要超过16.6ms，不然页面就会卡顿，比如用户的输入没有及时显示出来、用户点击后无及时响应等等。在此我想到了react 16的fiber分片渲染，让交互响应更快就是它出现的缘由

[vivianli-me]

Q3：画一张业务大图，来说明目前负责的业务与公司整体业务的关系

在公司主要是负责面向用户的app跟web，简而言之就是资金的入口，为用户提供出借的渠道。然后还配合着各种运营策略等等

[vianvio]

Q1的文章沉淀非常细致，而且还加上了简易版的webpack，点个赞，后面如果补上amd和cmd的话，整个动态模块能力基本都全了。

Q2是因为觉得你在基础部分经常有深入，所以希望能通过你的实际例子，结合日常工作，给其他同学证明一下，研究基础和底层不是只为了面试的。答案里聊到fiber部分是一个很好的例子，不过还是里我们日常有点远，有时间可以再举几个接地气的。