影响网站加载速度之外部资源文件分析

在总结了影响网页加载速度的服务器端因素与页面内容因素后，达闻今天要分享的就是网站外部资源文件对网页加载速度的影响。

针对外部资源文件的分析将主要围绕CSS,JS,和图片进行展开。

1，指定图片的大小

当浏览器加载页面的HTML代码时，有时需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示（消耗额外时间）。所以在优化网站加载速度时建议为每个图片都指定大小。

2，图片的优化

图片作为多媒体文件的一种主要形式，在网站上使用频率较高，因此对网站（尤其是电商类）图片的优化也是必不可少的。

首先建议在不损失视觉效果的前提下尽量缩减图片体积，从而加快整个网页的加载速度。

在尺寸不变的前提下，可以通过以下方式优化图片的体积：

• 降低颜色深度，如把32位色彩变为24位；
• 转换图片的格式，如把.bmp格式转换为.gif，或者如果确定网页是白背景，图片的白色底色可以弄为透明的。

3，把CSS文件放置在头部，JS文件放置在底部

据统计，把CSS放在头部可以加快网页渲染的速度，避免最后加载CSS引起的浏览器白屏。JS文件一般来说较大，而浏览器同时下载元素的数目是有限制的，大的JS文件会妨碍其它重要元素的加载。（JS文件中含有document.write等代码，不能放在网页最后）。

注：如果JS放在开头而又不想浏览器先加载的话可以用deferred属性，可以起到跟放在网页结尾一样的效果。

4,合并外部CSS和JS文件

过多的JS和CSS文件会导致过度的HTTP开销，合并外部的JS和CSS文件，能够有效减少往返时间及在下载其他资源时减少延迟。

5，压缩CSS和JS文件

压缩JS和CSS的方案跟压缩HTML本质上是一样的，减小代码体积，提高加载速度。常用的压缩方式如：

• 压缩多余的空格和换行符
• 删除注释
• 把较长的变量名称和过程名称统一替换为更短的名称。
• 也可以使用压缩工具进行压缩。