web 页面内容优化管理与性能技巧

网友投稿 240 2022-06-12

回想一下，以前我们不得不花费大量时间去优化页面内容（图片、CSS等等），如今用户有更快速的互联网链接，我们似乎能够使用更大的图像或更大的闪存文件，里面包含的有视频或者图片。然而，随着移动开发的兴起，我们又回到了过去的窘状。网站优化是十分重要的，需要下载的内容少，反应速度快，就能使我们加载应用程序更快速。

图片：控制在合适的尺寸大小

很多时候我们在不同的网站使用同样的图像，例如一个网上商店，所有产品都有一个概览图片。打个比方，有三个页面描述产品，第一个页面显示产品清单，第二个页面显示产品细节图，第三个页面显示产品原始大小图。因此，我们需要三种不同大小的图片。如果使用一个文件放到不同的三个页面上，那么浏览器会自动加载完整大小的图片，就连清单页也是，实际上清单页只需要200×200尺寸的图片。如果原始文件大小在1MB左右，每页上有十个产品介绍，那么用户就要下载10MB大小的资源。这样做效果不好。如果可以的话，尽量为你的网站不同位置分配不同的图像文件，那么就可以让用户少下载资源。把屏幕分辨率因素也考虑进去也是很好的。如果有人用iPhone打开你的网站页面，手机上不需要显示电脑上那么大尺寸的图片，只需适应手机屏幕的大小就可以了。通过CSS Media Queries，你就能将图像压缩到较小尺寸发送出去了：

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

.header {

}

压缩

传送图像的时候单单控制适当的尺寸往往是不够的。不少文件格式在不失真的前提下可以被压缩很多。有一类应用程序可以达到这个效果。比如Photoshop有个很好的功能叫做Save for Web and Devices：

在此对话框中有多个选项，其中最重要的是质量，将其设计为80%左右，就能显著减少文件大小了。当然，你还可以使用代码来压缩文件，但我个人偏向于使用PS。下面是用PHP编写的一个简单的例子：

function compressImage($source, $destination, $quality) {

$info = getimagesize($source);

switch($info['mime']) {

case "image/jpeg":

$image = imagecreatefromjpeg($source);

imagejpeg($image, $destination, $quality);

break;

case "image/gif":

$image = imagecreatefromgif($source);

imagegif($image, $destination, $quality);

break;

case "image/png":

$image = imagecreatefrompng($source);

imagepng($image, $destination, $quality);

break;

}

compressImage('source.png', 'destination.png', 85);

Sprite

增加应用程序性能的方法之一，是减少到服务器的请求数。每一个新图像代表一个请求数。有一个办法是将几个图片合并成一个，合并之后的图像叫做一个sprite，在CSS中改变背景层的位置，就能准确的把特定部分的图像显示出来。比如Twitter Bootstrap利用sprites引导内部图标：

在CSS中，你可以参照以下方式，显示你喜欢的sprite部分：

.icon-edit {

background-position: -96px -72px;

}

超高速缓存

浏览器超高速缓存十分好用。尽管有时在开发过程中会导致一些非常有趣的情况，但它确实有助于提高你的网站的性能。所有浏览器的超高速缓存下来的内容包括图片、JavaScript或者CSS。有几种方法可以控制缓存，建议你阅读相关文章。一般情况下，你可以通过设置标题，达到控制效果：

$expire = 60 * 60 * 24 * 1;// seconds, minutes, hours, days

header('Cache-Control: maxage='.$expire);

header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).' GMT');

header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');

预读取

HTML 5每天都在进步，有一个很好的功能叫做预读取，它让浏览器提前下载你马上需要用到的资源：

数据URI方案/内联图像

几年前我曾开发了一个简单的网页，只包含一个HTML文件夹，但当然里面应该还包括一些我需要的图像。数据URI方案帮助我解决了问题。我们的想法是将图像转换成一个base64编码的字符串，并将其放置在src属性中的img标签里，例如：

Red dot

通过这种方法，你的图像实际上在HTML中并保存了一个HTTP请求。你的图像越大的话，字符串就越长。下面是一个简单的PHP脚本图像转换为base64字符串的实例：

$picture = fread($fp,filesize($file));

fclose($fp);

// base64 encode the binary data, then break it

// into chunks according to RFC 2045 semantics

$base64 = base64_encode($picture);

$tag = '';

$css = 'url(data:image/jpg;base64,'.str_replace("\n", "", $base64).'); ';

有些情况下这种方法挺好用的，但请注意，在IE浏览器中无法很好的兼容。

CSS

我觉得编写CSS就如同写代码。你同样需要组织模式，定义不同板块和关系。所以我认为CSS管理非常重要。应用程序的每一部分应该有对应的模式，并很好的独立。不同的内容存储在不同的文件夹可以有效的管理，但同样也存在问题。使用@import状态这种方法不好用，因为每用一个@import都意味着一个新的请求发送到服务器。如果你有20个不同的.css文件，就相当于浏览器要发送20个请求。浏览器在渲染/下载所有内容之前不会显示页面。如果你的.css文件丢失了或者太大，浏览器加载页面的时间就会大大延长。

使用CSS预处理器

CSS预处理器可以解决上述问题。你同样可以保存不同的文件夹，预处理器可以将这些散文件夹最终生成一个.css文件。实际上提供了一系列非常帮的功能比如变量、嵌套块、混入和继承。代码看上去类似CSS，但实际上被很好的统一格式与结构了。有几种好用的预处理器值得体验——Sass、LESS、Stylus。下面是用LESS编写的例子：

.position(@top: 0, @left: 0) {

position: absolute;

top: @top;

left: @left;

text-align: left;

font-size: 24px;

}

.header {

.position(20px, 30px);

.tips {

.position(10px, -20px);

}