在手机上翻开页面时，经常会由于收集不好致使须要较长的加载时候，假如这段时候内只是显现一个“白板”，用户体验异常不好。一般的解决方案就是完全翻开页眼前给用户展示一个加载动画，让用户能够看到页面还活着呢。本认为是个很简单的活，真做起来才发明【有不少学问】！
一、首先要搞清楚的题目是，为何加载历程中会涌现”白板“，下面用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;}三、还能够做什么？
能够斟酌页面的规划也动态加载，如许用户能够先看见页面的框架，然后再猎取数据填到框架中。然则还没有想到成熟的解决方案。
