HTML：减小页面加载时间的方法

时间 2019-11-19

标签 html 减小页面加载时间方法栏目 HTML 繁體版

原文原文链接

1. 重复的HTTP请求数量应尽可能减小javascript

　　（1）减小调用其余页面、文件的数量。php

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

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

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

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

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

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

5. css、javascript改由外部调用express

　　若是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. 避免采用30一、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