设计模式：Web App 系统架构（一）

一个文件就可以构建一个前端

试想一下如下场景：
当网站请求一个JS文件并执行其中代码之后，整个应用前端马上出现。一切在客户端上完成渲染，这只能说是客户端渲染。

在本文所描述的设计模式里面，用 app.js 代指可以构建前端的JS代码文件。

简单地在HTML文件中加上这样一行（或者是用JS控制JS执行）
<script src="app.js"></script>

客户端马上去请求 app.js 接收完毕后立即执行渲染整个页面。

性能问题

说起客户端渲染的性能问题，主要在于首屏加载速度，而首屏加载速度则取决于网络IO与JS执行效率。其实一般来说，主要还是网络IO的问题，因为前端逻辑都包含在JS文件中就会使得JS文件的大小比较大（通常在1MB左右），对于一些小水管用户就比较尴尬了，他们可能会看到长时间的白屏页面，这个时候就非常尴尬了。本文提出两个方法去试图解决这个问题。

利用 App-Manager 解决首屏白屏问题

解决白屏其实很简单，那就是在页面上放点东西。这个东西一定要非常轻量，以便快速加载。

很多人喜欢用初始页面加载动画来解决首屏加载问题，让用户耐心等待。