1. 首先安装webpack的可视化资源分析工具，命令行执行： 2. 然后在webpack的dev开发模式配置中，引入插件，代码如下： 3. 最后命令行执行npm run build --report , 浏览器会自动打开分析结果，如下所示： 可以看到vue全家桶相关依赖占用了…

事件流机制 向水里扔一个西瓜， 首先它会有一个下降的过程，这个过程可以理解为从最顶层元素向事件发生的具体元素（目标点）的捕获过程 之后会产生泡泡，会在最低点（具体元素）之后漂浮到水面上，这个过程相当于

见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 ----------超长文+多图预警，需要花费不少时间。---------- 如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我…

我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么，通常我们并不清楚。 事实上关于Web性能有很多可以优化的点，其中涉及到的知识大致可以划分为几类：度量标准、编码优化、静态资源优化、交付优化、构建优化、…

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 能提升…

单页应用性能的最大痛点就是 bundle 体积大导致首屏时间过长。使用 webpack 的 code splitting（代码分割）功能可以将 bundle 分片，加速首屏，但之后的交互势必会受到影响。预加载分片 thunk 是必需的，本文探讨最理想的预加载手段。

时间回到一周前，当时刚开发完公司A项目的一个新的版本，等待着测试完成就进行发布。此时的我也准备从连续多日的紧张开发状态中走出来，以为可以稍稍放松一下。而那时的我还不知道，我即将面临一个强大的Bug选手，更不知道我要跟这个Bug来来回回进行多次的搏斗。当然，我们能看到这篇文章也就…

服务端渲染，客户端渲染，同构

一边学习前端，一边通过博客的形式自己总结一些东西，当然也希望帮助一些和我一样开始学前端的小伙伴。 cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。用户验证这种场合一般会用 session 1、 由于HTTP协…