您的位置：首页 > 编程技术 > html  >  浅析页面内容加载顺序的方法

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

 更新时间：2016年9月20日 18:58  点击：1309
你知道你的网页是如何加载的吗，那个先加载那个后加载人有数吗？如果不知道就进入看看吧，本文章很详细的给你总结了哦。

很多时候，我们都想确认页面内容：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之前！

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

<embed width="480" height="338" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="dock=true&plugins=drelated-1&drelated.dxmlpath=relatedclips.xml&drelated.dposition=center&drelated.dshow=complete&drelated.dskin=grayskin.swf&drelated.dtarget=_self&skin=chrome.zip&image=http://blog.fity.cn/images/video.jpg" salign="lt" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#000000" name="ply" id="ply" src="http://blog.fity.cn/demo/mp4player/fity.cn_player.swf?file=http://blog.fity.cn/video.mp4" type="application/x-shockwave-flash">

使用百度站长工具的朋友可能都知道他会让我们把css或js文件合并成一样，这样可以减少请求了，下面我来根据百度需要做了一篇关于合并静态资源请求的文章。


除过在前端编码的时候将css、js等静态资源文件合并压缩之外，我们还可以在页面中将多个css、js的请求合并为一个请求。

比如我们在淘宝的首页源码中可以看到以下的css引用：

<link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231">

这段代码通过一个网络请求完成两个css文件的请求，是怎么做到的呢？

原来是一个叫nginx-http-concat的模块，nginx-http-concat模块是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量。

nginx-http-concat是一个nginx扩展模块，需要在安装nginx的服务器上重新编译nginx并加入nginx-http-concat，这个模块可以在github上下载。

安装之后需要重新修改nginx配置：

location /static/css/ {
    concat on;           #是否开启concat，默认是关闭的
    concat_max_files 20; #允许concat的最大文件数，默认是10
}

location /static/js/ {
    concat on;
    concat_max_files 30;
}

nginx重新reload之后，就可以使用类似淘宝的方法将多个css或js文件合并为一个请求。比如：

/css/??global.min.css,index.min.css?t=20140107

以上concat的配置在http、server、location中都能生效，除此之外还有几个参数，不设置也罢。

concat_unique on;                               #是否只对同一类型的MIME types文件进行合并，默认是开启的
concat_types text/css application/x-javascript; #指定可以合并的MIME types，默认是text/css application/x-javascript
concat_delimiter;                               #指定合并文件之间的分隔符。该分隔符会被插入被合并的文件之间。
concat_ignore_file_error off;                   #是否忽略文件错误(403或404等)，默认是关闭的。

[!--infotagslink--]

相关文章

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22

  • php抓取网站图片并保存的实现方法

    php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • intellij idea快速查看当前类中的所有方法(推荐)

    这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02

  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31

  • js导出table数据到excel即导出为EXCEL文档的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13

  • 用js的document.write输出的广告无阻塞加载的方法

    一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告，如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07

  • mysql 批量更新与批量更新多条记录的不同值实现方法

    批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04

  • js基础知识（公有方法、私有方法、特权方法）

    本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08

  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06

  • jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07

  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24

  • PHP 验证码不显示只有一个小红叉的解决方法

    最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下 未修改之前，出现如下错误； （1）修改步骤如下，原因如下，原因是apache权限没开， （2）点击打开php.int.， 搜索extension=ph...2013-10-04

  • c#中分割字符串的几种方法

    单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25

  • 安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法

    手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21

  • 解决IDEA插件市场Plugins无法加载的问题

    这篇文章主要介绍了解决IDEA插件市场Plugins无法加载的问题,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-21

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • 连接MySql速度慢的解决方法(skip-name-resolve)

    最近在Linux服务器上安装MySql5后，本地使用客户端连MySql速度超慢，本地程序连接也超慢。 解决方法：在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21