LGC
在[【webpack进阶系列】核心原理与流程](https://github.com/amandakelake/blog/issues/92)中我们顺着webpack的核心脉络走了一遍`run`的流程，本篇我们详细读一下webpack如何从入口entry找到所有的依赖，并转为module的 ## 总览 下图为本篇文章的总览流程图 从入口开始，初始化`Compiler`控制整个webpack的编译流程，它的生命周期中暴露了很多方法，如`run,make,compile,finish,seal,emit`等，`Compiler`中会实例化`Compilation`，它负责把所有的文件构建处理成module，一个`Compiler`周期内会反复触发 `Compilation` 实例 无论入口文件是什么，都要从`compilation.addEntry`开始，执行`_addModuleChain`，将入口文件加入需要编译的队列中，将队列里的文件依次处理，通过`import/require`等方法依赖的文件也会通过`addModuleDependencies`被添加到编译队列中，当整个编译队列完成时，从文件到module的转换就完成了 ## 编译队列 编译队列的控制是由`Semaphore`（信号量）来完成的，它的代码量很少，先看下它的实现 ```js // Semaphore.js class Semaphore { constructor(available) { // 最大的并发数量 this.available = available; // 等待编译的队列 this.waiters = []; this._continue...
## 目录 - 一、如何用vscode断点调试webpack - 二、webpack源码探索 - 1、webpack入口 - 2、WebpackOptionsApply.process：处理用户自定义的webpack配置 - 3、compiler.run() - 4、compiler.compile() - 5、添加模块依赖+构建 - 6、封装seal+打包输出 - 三、总结 ## 一、如何用vscode断点调试webpack 相信有不少小伙伴在膜拜别人的文章时，经常性的会被“断点调试”这四个字劝退，毕竟很多看源码写文章的作者都是大佬，默认断点必备技能，一笔带过，环境没搭起来，怎么跟着作者遨游源码世界呢？ 今天，让我们手把手，环境没搭好，我们就不看这源码了好不好！！！ * 把Github上的Webpack项目拉到本地 ```bash git clone https://github.com/webpack/webpack.git...
> 网上关于缓存的文章非常多，但大都比较片面，或者只对某块进行了深入，没有把它们联系起来，本着系统学习的态度，笔者进行了整理，写成一个小系列，方便自己也方便他人共同学习，有写的不对的地方欢迎指正。 [缓存（一）——缓存总览：从性能优化的角度看缓存](https://github.com/amandakelake/blog/issues/43) [缓存（二）——浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41) [缓存（三）——数据存储：cookie、Storage、indexedDB](https://github.com/amandakelake/blog/issues/13) [缓存（四）——离线应用缓存：App Cache => Manifest](https://github.com/amandakelake/blog/issues/15) [缓存（五）——离线应用缓存：Service Worker(还没写，先占坑)](https://github.com/amandakelake/blog/issues/44) 有经验的同学可以直接去看第四部分的流程图，如果你能完全理解那个图，那这篇文章你可以不看了，当然，看看当复习也好 ## 一、概述 良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度 通常浏览器缓存策略分为两种：强缓存和协商缓存 #### 1、基本原理 * 1）浏览器在加载资源时，根据请求头的`expires`和`cache-control`判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。 * 2）如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过`last-modified`和`etag`验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源 * 3）如果前面两者都没有命中，直接从服务器加载资源 #### 2、相同点 如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据； #### 3、不同点 强缓存不发请求到服务器，协商缓存会发请求到服务器。...
> 写了一个月的vue项目，个人感觉，emm… > 一旦熟悉了尤大给我们画好的舒适圈，很容易就陷在业务代理里，主要是vue封装的太好了，写代码几乎不用脑，只要按照规范一顿瞎写，怎么都过得去。 > 长久下去，写多了感觉会废，暂时还没用到服务端渲染，就是简单的前后端分离的web app，要想深入一点，感觉还是得多看看源码，免得最后成为了API工程师 > 前端娱乐圈，之前有一条喷vue，说用vue的都是小白或者菜鸟，其实从某种角度来说也有点道理 > 个人一直认为，三大框架框架没有优劣之分，只有最合适的业务场景，都是神写出来的东西，我等凡人达不到那个水平之前，何来的资格讨论人家的优劣；个人喜好与客观优劣不是一回事。 > 但对于用框架的人本身来说，那还是有点影响的，react越用越灵活，vue越用越。。。看完源码再说哈哈哈 这个vue源码阅读系列，参考着各路大神的文章学习，都是记录来自己看的，不太合适star了本blog的朋友们观看 ## Vue定义 `src/core/instance/index.js` ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue)...
## 概述 当一个资源从与该资源本身所在的服务器不同的`域、协议、端口`请求一个资源时，资源会发起一个跨域 HTTP 请求。同源策略参考[浏览器的同源策略 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求，XMLHttpRequest和Fetch API，只能从加载应用程序的同一个域请求HTTP资源，除非使用`CORS头文件` 对于**浏览器限制**这个词，要着重解释一下：不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了 ## CORS概述 跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。 另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），**浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。** **服务器确认允许之后，才发起实际的...
执行上下文
[原文](https://github.com/kuitos/kuitos.github.io/issues/18) 先看下两段代码的不同，再来分析执行上下文的不同 ```js var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope(); ``` ```js var scope = "global...
## 一、背景介绍 在电商产品中（可以打开你的淘宝、天猫、京东App），通过对商品的曝光进行数据埋点，就能反推出用户的行为和交互习惯，从而优化推荐和搜索算法以及交互，最终的目的当然是为了增加用户购买力。 曝光：商品出现在用户眼前，也就是浏览器视窗，可谓之曝光 最直白的两种方法 1、监听滚动事件，通过[Element.getBoundingClientRect() - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)计算某个商品与视窗的位置 2、页面跑一个定时器，定时计算某个商品与视窗的位置 这两种办法都能用，但是`getBoundingClientRect`这个API是会引起页面回流的，使用不当容易导致性能问题。 基于此，浏览器特意为我们打造了一个[Intersection Observer API - Web API | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)，把性能相关的细节都处理掉，让开发者只关心业务逻辑即可  ## 二、Intersection Observer API 整个曝光打点方案基于[Intersection Observer API...
全文比较长，列个大纲 一、Why choose front-end 二、2017.01-2017.05（自学） 三、2017.06.01-2018.06.01（工作一年） 1. 勤奋 2. 养生 3. 学英语 4. 输出 5. 杂学 四、next to learn 五、一点学习心得 1. 合理利用时间 2. 补基础+看文档 3. 科学上网+学好英语 4. 搜索+提问 5. 总结、反思、归纳...