核心系统向云迁移的三个步骤

大多数时候，我们在不了解有关内存管理的知识下也只开发，因为 JS 引擎会为我们处理这个问题。不过，有时候我们会遇到内存泄漏之类的问题，这个只有知道内存分配是怎样工作的，我们才能解决这些问题。

在本文中，主要介绍内存分配和垃圾回收的工作原理以及如何避免一些常见的内存泄漏问题。

缓存( Memory)生命周期

在 JS 中，当我们创建变量、函数或任何对象时，J S引擎会为此分配内存，并在不再需要时释放它。

分配内存是在内存中保留空间的过程，而释放内存则释放空间，准备用于其他目的。

每次我们分配一个变量或创建一个函数时，该变量的存储会经历以下相同的阶段：
 

测试过程如下：

1. 在 Elements 面板下，选中 h1 这个标签，然后按 delete 键将它从 DOM 中删掉，从而模拟首次加载;
2. 刷新浏览器，马上 Elements 面板下就加载出 h1 标签，继续加载 3 到 4 秒后(此时正在加载 bootstrap.css)，页面出现 我是 h1 标签 字样，此时页面已经渲染完成。

从而得出结论：

• bootstrap.css 还没加载完成，而 DOM 中就已经出现 h1 标签，说明 CSS 不会阻塞 DOM 的解析;
• 页面直到 bootstrap.css 加载完成才出现 h1 里的文案，说明 CSS 会阻塞 DOM 的渲染。

为什么是这个结论呢?试想一下页面渲染的流程就知道了。浏览器首先解析 HTML 生成 DOM树，解析 CSS 生成 CSSOM 树，然后 DOM 树和 CSSOM 树进行合成生成渲染树，通过渲染树进行布局并且计算每个节点信息，绘制页面。
 

上面这张图片的大小大概是 200kb，当把网络下载速度限制成 50kb/s，打开该页面，可以看到如下结果：当 h1 和 h2 标签渲染出来且打印了 DOMContentLoaded 的时候，此时图片还在加载中，这就说明了图片并不会阻塞 DOM 的加载，更加不会阻塞页面渲染;当图片加载完成的时候，会打印 onload，说明图片延迟了 onload 事件的触发。

视频、字体和图片其实是一样的，也不会阻塞 DOM 的加载和渲染。

CSS 加载阻塞

同样的，我们还是直接用代码来测试 CSS 加载对页面阻塞的情况，因为下面代码加载的 bootstrap.css 是 192kb 的，所以理论上下载它应该需要花费 3 到 4 秒左右。
 

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢?今天我们来一探究竟。

阅读完这篇文章你将解开如下谜团：

• 如何用 Chrome 定制网络加载速度?
• 图片/视频/字体会阻塞页面加载嘛?
• CSS 是如何阻塞页面加载的?
• JS 又是如何阻塞页面加载的?
• JS 一定会阻塞 DOM 加载嘛?
• defer 和 async 是什么?又有何特点?
• 动态脚本会造成阻塞嘛?
• 阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的?

测试前环境准备

（编辑：淮安站长网）