在手机上打开页面时，经常会因为网络不好导致需要较长的加载时间，如果这段时间内只是显示一个“白板”，用户体验非常不好。通常的解决方案就是完整打开页面前给用户展示一个加载动画，让用户能够看到页面还活着呢。本以为是个很简单的活，真做起来才发现【有不少学问】！
一、首先要搞清楚的问题是，为什么加载过程中会出现”白板“，下面用Chrome开发者工具的Timeline分析面板做了几个实验。
1、不加载资源文件
顺序：加载、解析、渲染、绘制
2、加载CSS
加载外部的CSS文件会阻止渲染，不论link的标签放在什么位置上。
顺序：加载、解析、加载（阻塞了渲染）、渲染、绘制
3、加载JS
a、在body前加载外部的JS文件会阻止渲染
顺序：加载、解析、渲染（？）、加载（阻塞）、解析（JS执行完多了个解析）、渲染、绘制
b、在body后加载外部的JS文件不会阻止渲染
顺序：加载、解析、渲染、绘制、加载、解析、渲染、绘制
4、在<script>标签中动态创建link标签加载CSS
加载CSS中断了页面的渲染和绘制
5、在<script>标签中通过setTimeout函数动态创建link标签加载CSS
加载CSS没有中断。我理解这是因为JS是单线程的，放在timeout里创建的link去排队，浏览器就先不管它了。
二、基于上面的测试，实现页面加载动画理想的方式是什么？
先定好目标：尽快让用户看到变化，不要让用户以为页面已经不响应，再逐步加载内容。
最快的方式就是做一个空的页面，不加载任何外部资源（包括：CSS和JS）。页面上方加载动画的CSS定义和页面元素，提供异步加载页面元素、CSS和JS文件的JS。通过JS加载各类资源成功后关闭动画效果，清除不必要的内容。
这样就来个新问题，如何实现动态加载问题？
外部文件的动态加载问题很多文章都深入分析过了，简单说，就是用异步加载，但是要考虑到各个JS文件的依赖关系问题。综合比较了一下，决定requirejs实现动态加载。因为最近一直用angular，所以下面的代码是require.js+angular。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport">
<base href='/'>
<title>loading</title>
<style id='loadingStyle' type="text/css">
/*省略了，这里是loading元素转圈的样式，为了快应该压缩了再放里面*/
</style>
</head>
<body>
<div id="content" ng-app="app" ng-controller="ctrl">
<ul class='list-group'>
<li class='list-group-item' ng-repeat="d in data"><i ng-bind="d"></i></li>
</ul>
</div>
<div class="loading"><div class='loading-indicator'><i></i></div></div>
<script src="static/js/require.js" defer async data-main="test/loading/loader.js?_=11"></script>
</body>
</html>loader.js
因为angular不是AMD，所以用shim引用成angular全局变量
require.config({
paths: {
"angular": "/static/js/angular.min",
},
shim: {
"angular": {
exports: "angular"
},
},
deps: ['/test/loading/app.js?_=10']
});app.js
如果真的要动态添加样式，建议先获得数据，把数据展现出来，在加载样式，这样就能让用户今早看到变化。
define(["angular"], function(angular) {
'use strict';
angular.module('app', []).controller('ctrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.data = [];
// 模拟长时间获得数据
$timeout(function() {
for (var i = 0; i < 100; i++) {
$scope.data.push('data:' + i);
}
// 模拟长时间获得样式
$timeout(function() {
var link, head;
link = document.createElement('link');
link.href = "/test/loading/app.css?_=" + (new Date()).getTime();
link.rel = 'stylesheet';
link.onload = function() {
var eleLoading, eleStyle;
eleLoading = document.querySelector('.loading');
eleLoading.parentNode.removeChild(eleLoading);
eleStyle = document.querySelector('#loadingStyle');
eleStyle.parentNode.removeChild(eleStyle);
};
head = document.querySelector('head');
head.appendChild(link);
}, 2000);
}, 2000);
}]);
});app.css
#content{color:red;}三、还可以做什么？
可以考虑页面的布局也动态加载，这样用户可以先看见页面的框架，然后再获取数据填到框架中。但是还没有想到成熟的解决方案。