一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 14:40:48 编辑:袖梨 来源:一聚教程网

很多时候,我们都想确认页面内容: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属性)、嵌入式样式表(标签)还是外部样式表(标签) 加载的,加载的顺序始终都是先加载body的背景图片再加载子元素div.test的背景图片,因为body 在html页面中位于div.test之前!

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

热门栏目