1. 重复的HTTP请求数量应尽量减少

　　（1）减少调用其他页面、文件的数量。

　　（2）在使用css格式时，常会采用background载入图形文件，而每个background的图像都会产生1次HTTP 请求，为了让页面生动活泼大量使用background来加载背景图，可以采用css的1个有用的background-position属 性来加载背景图加以改善，将需要频繁加载的多个图片合成为1个单独的图片，加载时采用：background:url(....) no-repeat x-offset y-offset的形式加载，图片加载的HTTP请求缩减为1个。

background:url(....) no-repeat x-offset y-offset

2. 压缩Javascript、CSS代码
　　一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。这方面的工具也有很多，可以在百度里搜索一下
关键字“css代码压缩”，或者“js代码压缩”将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序来做这个工作，如果你会的话。就拿我们这
个网站来说吧。刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能，最后就把很多
CSS文件都压缩了。这个压缩比率还是比较高的，一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。

3. 在文件头部放置css样式的定义

　　这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利，可以在网页逐步呈现的同时仍会保持格式信息，不影响网页美感。

4. 在文件末尾放Javascript脚本
　　网页文件的载入是从上到下加载的，很多Javascript脚本执行效率较低，或者在网页前面都不需要执行的，如果将这些脚本放置到页面比较靠前的位置，
可能导致网站内容载入速度下降或加载不了，将这些脚本放置在网页文件末尾，一定要放
置在前面的脚本要改用所谓的“后载入”方式加载，在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。

5. css、javascript改由外部调用

　　如果css、js内容比较庞大，尽量不要写到同1个页面中去，改由外部载入比较妥当，因为浏览器本身会对css、js文件进行缓存。

6. 尽可能减少DCOM元素
　　尽可能减少网页中各种<>元素数量，例如<table>的冗余很严重，而我们完全可以用<div>取代之。

7. 避免使用CSS脚本(CSS Expressions)

　　有时为了要css的参数动态改变，可能会采用css expression来实现，但这样做得不偿失，会使用户端浏览器负担明显加重，所以不建议这样做，如果需要改变，可以使用Javascript脚本去实现。

8. 添加文件过期或缓存头

　　对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲时间，例如设置24小时过期时间，这样用户在访问过该页面之后再次访问时，同一组图片或JS不会再重复下载，从而减少了HTTP请求，用户访问速度明显有所提升，同时服务器负载也会下降。下面给出nginx配置中缓存控制的例子：

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$

    {

    expires 30d;#设置30天过期

    }

    location ~ .*\.(js|css)?$

    {

    expires 1h;#设置1小时过期

    }

9. 使用CDN(Content Delivery Network)网络加速

　　现在国内做CDN加速业务的公司很多，简单讲，就是将你的图片、视频扩散到CDN网络所能到达之处，让用户访问时能就近下载到这些文件，从而达到网络提速的目的，这样做，同时能减轻你自己网站的负载。

10. 服务器启用gzip压缩功能
　　将要传输的文件压缩后传输到客户端再解压，在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用，也可用代码直接设置传输文件头，增加gzip的设置，也可从
负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。服务器性能不是很好的网站，要慎重考虑。

11. Ajax采用缓存调用
　　Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的

<script src=”xxx.js?{VERHASH}”，

{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

12. Ajax调用尽量采用GET方法调用

　　实际使用XMLHttpRequest时，如果使用POST方法实现，会发生2次HTTP请求，而使用GET方法只会发生1次HTTP请求。如果改用GET方法，HTTP请求减少50%！

13. 养成良好的开发维护习惯，尽量避免脚本重复调用

14. 缩减iframe的使用，如无必要，尽量不要使用

　　iframe通常用于不同域名内容的加载，这同时也可能因iframe内容加载速度影响到主网页加载速度，如果可能，把需要加载的内容抓取到本地直接嵌入。如果实在需要iframe加载，采用后载入方式实现。

15. 合理使用Flush

　　用户端发送浏览请求后，服务器端一般要花销200-500ms去处理这些请求，在此期间，用户端浏览器处于等待状态，如果要减少用户等待时间，可以在适当的位置使用flush，将已经就绪的内容推送到用户端，这在php中很容易实现例如：

    <!-- css, js -->

    </head>

    <?php flush();?>

    <body>

    ... <!-- content -->

16. 避免采用301、302转向

　　当浏览器、代理或搜索引擎派出的"爬虫"对某一页面或网址请求调用时，该调用页面或网址所在的网络服务器将会检查一个名为.htaccess的文件。该文件包含如何处理特定请求的指令，并在安全性上扮演关键角色。用户可对该文件进行修改，通过这个文件来通知浏览器、代理或"爬虫"，被调用页面属于临时移走 （302重定向）还是永久性移走（301重定向）。我们也可以通过网络托管服务而不是.htaccess'文件来实现301/302永久性重定向。

17. 优化图片文件　

　　优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形笑了，但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图，其真实尺寸有10M之巨…

普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现。

18. 当页面内容庞大到一定程度，可以采用分页的方式展现，或者taobao的那种翻页后载入方式。

19. 使用多域名负载网页内的多个文件、图片

　　有资料说明，IE在网页载入过程中，在同1时刻，对同1域名并行加的HTTP请求数 量最高为2个，如果网页需要加载的文件数量超过2个(通常远远超过..)，要加快网页访问速度，最好将文件分布到多个域名，例如19楼，其js文件采用独 立的域名，据说百度的图片服务器数量在20台以上。

20. 配置ETags

（详见：优化网站设计（十三）：配置ETags）

ref-to：http://developer.51cto.com/art/201105/265125.htm

HTML：减少页面加载时间的方法的更多相关文章

  1. 减少页面加载时间的n种方法

    减少HTTP请求 1:减少调用其他页面.文件的数量 2:使用css spirit , 减少图片加载次数 压缩js,css代码 1:一般js.css文件中存在大量的空格.换行.注释,这些利于阅读,如果能 ...

  2. web开发的性能准则（减少页面加载时间方面）

    准则(概述) 减少 HTTP 请求 使用CDN加速 避免空的src或href属性值 增加过期头 启GZIP压缩 把css文件放到头部 把javascript放到尾部 避免使用css表达式 删除不使用的 ...

  3. [转载]Python & Selenium -- 页面加载时间过长&启动指定FF

    原文链接:https://my.oschina.net/u/2344787/blog/400507?p={{page}} 1. selenium webdriver在get方法会一直等待页面加载完毕才 ...

  4. 利用Navigation Timing测量页面加载时间

    最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...

  5. selenium学习笔记11——driver.get(url) 页面加载时间太长

    在执行自动化测试用例过程中,发现因为网络慢或其他原因导致driver.get(url) 时,页面一直在加载,页面没有加载完成就不会去继续执行下面的动作,但是实际上需要操作的元素已经加载出来了. 解决方 ...

  6. selenium学习笔记——driver.get(url) 页面加载时间太长

    # 两个同时设置才行 # 实现效果:加载状态停止,进行代码下一步操作 driver.set_page_load_timeout(10) driver.set_script_timeout(10) # ...

  7. (转载) jQuery 页面加载初始化的方法有3种

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  8. Selenium WebDriver- 指定页面加载时间

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  9. 使用Filter跟踪Asp.net MVC页面加载时间

    最近,客户一直反馈系统使用慢,有时候能够指出具体是哪个页面,有时候又只是笼统地反馈慢.这种问题就像是幽灵一样,非常不好处理.因为导致这种问题的因素非常之多,而且在开发工程中,很难模拟出实际运行是的环境 ...

随机推荐

  1. js 中时间格式化的几种方法

    1.项目中时间返回值,很过时候为毫秒值,我们需要转换成 能够看懂的时间的格式: 例如: yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端处理,也可以后台可以好之后再 ...

  2. Eclipse中运行Tomcat遇到的内存溢出错误

    使用Eclipse(版本Indigo 3.7)调试Java项目的时候,遇到了下面的错误: Exception in thread "main" Java.lang.OutOfMem ...

  3. sscanf,sprintf用法

    #include<string.h> #include<stdio.h> int main() { ],sztime1[],sztime2[]; sscanf("12 ...

  4. 第四章 CopyOnWriteArraySet源码解析

    注:在看这篇文章之前,如果对CopyOnWriteArrayList底层不清楚的话,建议先去看看CopyOnWriteArrayList源码解析. http://www.cnblogs.com/jav ...

  5. SQL Server AlwaysOn Setup Step-By-Step Guide

    Step-By-Step: Creating a SQL Server 2012 AlwaysOn Availability Group http://blogs.technet.com/b/cani ...

  6. iOS开发-CoreMotion框架(加速计和陀螺仪)

    CoreMotion是一个专门处理Motion的框架,其中包含了两个部分加速度计和陀螺仪,在iOS4之前加速度计是由UIAccelerometer类来负责采集数据,现在一般都是用CoreMotion来 ...

  7. Minimum Window Substring leetcode java

    题目: Given a string S and a string T, find the minimum window in S which will contain all the charact ...

  8. hadoop fs:du & count统计hdfs文件（目录下文件）大小的用法

    hadoop fs 更多用法,请参考官网:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html 以下是我的使用hadoop fs -du统计文 ...

  9. 转： Eclipse设置、调优、使用 （强烈推荐）

    转注:写的非常详累,并且图文并茂,值得一看. http://yuanzhifei89.iteye.com/blog/974082 eclipse调优 一般在不对eclipse进行相关设置的时候,使用e ...

  10. 揭开Faiss的面纱 探究Facebook相似性搜索工具的原理

    https://www.leiphone.com/news/201703/84gDbSOgJcxiC3DW.html 本月初雷锋网报道,Facebook 开源了 AI 相似性搜索工具 Faiss.而在 ...