前端性能优化之加载篇

前端页面加载的过程其实跟我们常常提起的浏览器页面渲染流程几乎一致：

1. 网络请求，服务端返回 HTML 内容。

2. 浏览器一边解析 HTML，一边进行页面渲染。

3. 解析到外部资源，会发起 HTTP 请求获取，加载 Javascript 代码时会暂停页面渲染。

4. 根据业务代码加载过程，会分别进入页面开始渲染、渲染完成、用户可交互等阶段。

5. 页面交互过程中，会根据业务逻辑进行逻辑运算、页面更新。

那么，我们可以针对其中的每个步骤做优化，主要包括：资源获取、资源加载、页面可见、页面可交互。

一、资源获取

资源获取主要可以围绕两个角度做优化：

• 资源大小

• 资源缓存

1.1 资源大小

一般来说，前端都会在打包的时候做资源大小的优化，资源类型包括 HTML、JavaScript、CSS、图片等。优化的方向包括：

(1) 合理的对资源进行分包。

首次渲染时只保留当前页面渲染需要的资源，将可以异步加载、延迟加载的资源拆离。通常我们会在代码编译打包的时候做处理，比如