在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。
一、分析Vue页面的内容加载过程
vue项目中的入口index.html只有简单的内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript" src="bundle.js"></script></body>
</body>
</html
当js执行完之后，会用vue渲染成的dom将div#root完全替换掉。
我们在div#root中加入模拟骨架屏，在Chrome开发者工具调整网速：
<div id="root">
这里是骨架屏
</div>
由此可知，将骨架屏内容直接插入div#root中即可实现骨架屏。