浅析页面内容加载顺序的方法

很多时候，我们都想确认页面内容：html标签、css、js、图片等元素的加载顺序。

现在的浏览器基本都自带调试工具，下面就介绍下用chrome浏览器正确查看页面内容加载顺序的方法：

F12打开开发人员工具，点击【Network】(网络)的tab切换到页面元素加载内容查看标签，这里需要说明的是：在该面板未激活时的任何请求都不会被显示，这就是为什么 我们初始看到面板展示的是一片空白啦！要想查看页面内容加载顺序，必须重新加载下页面(f5，或保险起见ctrl+f)，这样就可以快速查看到页面各内容加载顺序啦！

Network面板下还有很多分类tab，如：name、domain、cookies、 time(查看元素加载用时)，点击各title还可按tab所代表的降序或升序排序标准重新对页面所加载的内容进行排序。当然这种排序，chrome在多次按f12即重新打开开发人员工具时会被重置，恢复至默认，这就很方便我们查看页面内容的加载顺序啦！！

firefox 的firebug查看页面内容加载顺序，方法同chrome类似，至于喜欢用ie的同学，可用httpwatch pro， 继续享受ie的摧残吧，骚年！！

另外需要强调的是：

页面是按“由上到下”的加载顺序来加载图片、js等内容的。但对于样式中加载的图片，它们的加载顺序是根据标签元素在html页面的先后位置决定的，如：body>子元素>子孙元素！更形象的实例是：

假如body 跟 div.test 元素都有定义背景图，则不管两者css是以行内式样式(标签style属性)、嵌入式样式表(<style></style>标签)还是外部样式表(<link>标签) 加载的，加载的顺序始终都是先加载body的背景图片再加载子元素div.test的背景图片，因为body 在html页面中位于div.test之前！

上面强调图片加载顺序完全可用文章前端介绍的“快速查看到页面各内容加载顺序”的方法得到验证！！