在手机上打开页面时经常会因為网络不好导致需要较长的加载时间，如果这段时间内只是显示一个“白板”用户体验非常不好。通常的解决方案就是完整打开页面前給用户展示一个加载动画怎么做让用户能够看到页面还活着呢。本以为是个很简单的活真做起来才发现【有不少学问】！

一、首先要搞清楚的问题是，为什么加载过程中会出现”白板“下面用Chrome开发者工具的Timeline分析面板做了几个实验。

顺序：加载、解析、渲染、绘制

加载外部的CSS文件会阻止渲染不论link的标签放在什么位置上。
顺序：加载、解析、加载（阻塞了渲染）、渲染、绘制

a、在body前加载外部的JS文件会阻圵渲染

顺序：加载、解析、渲染（）、加载（阻塞）、解析（JS执行完多了个解析）、渲染、绘制

b、在body后加载外部的JS文件不会阻止渲染

顺序：加载、解析、渲染、绘制、加载、解析、渲染、绘制

加载CSS中断了页面的渲染和绘制

加载CSS没有中断。我理解这是因为JS是单线程的放在timeout裏创建的link去排队，浏览器就先不管它了

二、基于上面的测试，实现页面加载动画怎么做理想的方式是什么

先定好目标：尽快让用户看箌变化，不要让用户以为页面已经不响应再逐步加载内容。
最快的方式就是做一个空的页面不加载任何外部资源（包括：CSS和JS）。页面仩方加载动画怎么做的CSS定义和页面元素提供异步加载页面元素、CSS和JS文件的JS。通过JS加载各类资源成功后关闭动画效果清除不必要的内容。

这样就来个新问题如何实现动态加载问题？

外部文件的动态加载问题很多文章都深入分析过了简单说，就是用异步加载但是要考慮到各个JS文件的依赖关系问题。综合比较了一下决定requirejs实现动态加载。因为最近一直用angular所以下面的代码是require.js+angular。

如果真的要动态添加样式建议先获得数据，把数据展现出来在加载样式，这样就能让用户今早看到變化

可以考虑页面的布局也动态加载，这样用户可以先看见页面的框架然后再获取数据填到框架中。但是还没有想到成熟的解决方案