Web 页面内容优化与性能优化技巧

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

一、图片处理 

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

很多时候我们在不同的网站使用同样的图像，例如一个网上商店，所有产品 都 有一个概览图片。打个比方，有三个页面描述产品，第一个页面显示产品清单，第二个页面显示产品细节图，第三个页面显示产品原始大小图。因此，我们需要三种不同大小的图片。如果使用一个文件放到不同的三个页面上，那么浏览器会自动加载完整大小的图片，就连清单页也是，实际上清单页只需要200×200尺寸的图片。如果原始文件大小在1MB左右，每页上有十个产品介绍，那么用户就要下载10MB大小的资源。这样做效果不好。 

如果可以的话，尽量为你的网站不同位置分配不同的图像文件，那么就可以让用户少下载资源。把屏幕分辨率因素也考虑进去也是很好的。如果有人用iPhone打开你的网站页面，手机上不需要显示电脑上那么大尺寸的图片，只需适应手机屏幕的大小就可以了。 

通过CSS Media Queries，你就能将图像压缩到较小尺寸发送出去了： 

Css代码 

1. @media only screen  
2. and (min-device-width : 320px)   
3. and (max-device-width : 480px) {  
4.     .header {  
5.         background-image: url(../images/background_400x200.jpg);  
6.     }  
7. }  

2.  压缩 

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

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

Php代码 

1. function compressImage($source, $destination, $quality) {  
2.     $info = getimagesize($source);  
3.     switch($info['mime']) {  
4.         case "image/jpeg":  
5.             $image = imagecreatefromjpeg($source);  
6.             imagejpeg($image, $destination, $quality);  
7.         break;  
8.         case "image/gif":  
9.             $image = imagecreatefromgif($source);  
10.             imagegif($image, $destination, $quality);  
11.         break;  
12.         case "image/png":  
13.             $image = imagecreatefrompng($source);  
14.             imagepng($image, $destination, $quality);  
15.         break;  
16.     }  
17. }  
18. compressImage('source.png', 'destination.png', 85);  

3.  Sprite 

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

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

Css代码 

1. .icon-edit {  
2.     background-image: url("../img/glyphicons-halflings-white.png");  
3.     background-position: -96px -72px;  
4. }  

4.  超高速缓存 

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

Php代码 

1. $expire = 60 * 60 * 24 * 1;// seconds, minutes, hours, days  
2. header('Cache-Control: maxage='.$expire);  
3. header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).' GMT');  
4. header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');  

5.  预读取 

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

Html代码 

1. <link rel="prefetch" href="/images/background.jpg">  

6.  数据URI方案/内联图像 

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

Html代码 

1. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">  

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

Php代码 

1. $picture = fread($fp,filesize($file));  
2. fclose($fp);  
3. // base64 encode the binary data, then break it  
4. // into chunks according to RFC 2045 semantics  
5. $base64 = base64_encode($picture);  
6. $tag = '<img src="data:image/jpg;base64,'.$base64.'" alt="" />';  
7. $css = 'url(data:image/jpg;base64,'.str_replace("\n", "", $base64).'); ';  

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

二、CSS 

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

1.  使用CSS预处理器 

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

Css代码 

1. .position(@top: 0, @left: 0) {  
2.     position: absolute;  
3.     top: @top;  
4.     left: @left;  
5.     text-align: left;  
6.     font-size: 24px;  
7. }  
8. .header {  
9.     .position(20px, 30px);  
10.     .tips {  
11.         .position(10px, -20px);  
12.     }  
13.     .logo {  
14.         .position(10px, 20px);    
15.     }  
16. }  

运行生成： 

Css代码 

1. .header {  
2.     position: absolute;  
3.     top: 20px;  
4.     left: 30px;  
5.     text-align: left;  
6.     font-size: 24px;  
7. }  
8. .header .tips {  
9.     position: absolute;  
10.     top: 10px;  
11.     left: -20px;  
12.     text-align: left;  
13.     font-size: 24px;  
14. }  
15. .header .logo {  
16.     position: absolute;  
17.     top: 10px;  
18.     left: 20px;  
19.     text-align: left;  
20.     font-size: 24px;  
21. }  

又如你想再创建一个同样样式的按钮，但是颜色不同，你可以这样做： 

Css代码 

1. .button {  
2.     border: solid 1px #000;  
3.     padding: 10px;  
4.     background: #9f0;  
5.     color: #0029FF;  
6. }  
7. .active-button {  
8.     .button();  
9.     color: #FFF;  
10. }  

2.  高效的CSS 

通常情况下，大多数开发人员没有考虑过CSS效率问题。CSS的效率反映在页面渲染上，如果模式低效，应用程序在浏览器上运行就会很慢。有趣的是浏览器解析CSS选择器是从右到左的。所以以下代码一点效率都没有： 

Css代码 

1. body ul li a {  
2.     color: #F000;  
3.     text-decoration: none;  
4. }  

这是因为该引擎首先识别所有的<a>标签，评估每个母元素，最终收集到所需模式。你要知道，为了提高效率，选择器有个 先后排序：ID、类、标签及其一般。这意味着一个带有id的元素集比只带有标签选择器的元素更快的被渲染。当然，在所有DOM树元素都加上id是没有意义 的，但你应该特定检查代码，把可能加id的地方都加上。比如你可以按照以下方式做： 

Css代码 

1. ul #navigation li {  
2.     background: #ff0232;  
3. }  

.content元素是body tag的子集，实际上所有元素都是body tag的子集。关于这个话题有两个有用的链接： developers.google.com和 css-tricks.com。 

3.  文件大小 

正如我们上面提到的，代码越少越好，因为浏览器在加载CSS之前不渲染页面。下面几个技巧可供缩小文件大小： 

把类似的行 

Css代码 

1. .header {  
2.     font-size: 24px;  
3. }  
4. .content {  
5.     font-size: 24px;  
6. }  

转换成 

Css代码 

1. .header, .content {  
2.     font-size: 24px;  
3. }  

用速记形式，而不是以下形式： 

Css代码 

1. .header {  
2.     background-color: #999999;  
3.     background-image: url(../images/header.jpg);  
4.     background-position: top right;  
5. }  

用下面的风格编写： 

Css代码 

1. .header {  
2.     background: #999 url(../images/header.jpg) top right;  
3. }  

缩减代码，也就是使用一个工具除去所有空间和线，可以使用 CSSOptimiser或 Minifycss。常见做法是在应用程序服务器端使用这种工具。也就是在后端写的语言。通常情况相爱这些组件可以缩减你的代码。 

4.  将你的CSS文件放在<head>标签下 

将你的CSS文件放在head标签下是很好的方法，浏览器会首先下载它们。 

三、JavaScript 

1.  减少HTTP请求数量 

与CSS情况一样，减少服务器请求是有利的。大多数情况下，加载JavaScript文件的同时不会停止渲染页面，但会造成页面某些部分失去作用。 

2.  缩减代码 

有些小工具可以缩减JavaScript，使文件大小减小了，但要记住在开发环境中，保持代码整洁是十分必要的。这些工具几乎都会改变变量名称，并转换成一个单行的字符串，这个过程不可能调试。 

可以试试 CommonJS、 AMD、 RequireJS 

JavaScript本身并没有一个机制来管理模数，因此，这些工具是为了解决这个问题的。他们提供一个应用程序接口，你可以定义和使用模数。例如 http://requirejs.org/： 

Html代码 

1. <!DOCTYPE html>  
2. <html>  
3.     <head>  
4.         <title>My Sample Project</title>  
5.         <!-- data-main attribute tells require.js to load  
6.              scripts/main.js after require.js loads. -->  
7.         <script data-main="scripts/main" src="scripts/require.js"></script>  
8.     </head>  
9.     <body>  
10.         <h1>My Sample Project</h1>  
11.     </body>  
12. </html>  

运行脚本，你可以用require()代替main.js 

Javascript代码 

1. require(["helper/util"], function(util) {  
2.     //This function is called when scripts/helper/util.js is loaded.  
3.     //If util.js calls define(), then this function is not fired until  
4.     //util's dependencies have loaded, and the util argument will hold  
5.     //the module value for "helper/util".  
6. });  

3.  使用命名空间 

提到代码组织，必然要提到命名空间的部分。原本在JavaScript中是没有这个功能的，但你可以通过几行代码来实现这个功能。比如，你想搭一个 MVC框架，就可以用以下方式： 

Javascript代码 

1. var model = function() { ... };  
2. var view = function() { ... };  
3. var controller = function() { ... };  

光有以上代码是不够的，很容易与其他行的代码发生冲突。所以需要按照以下方式将它们作为独立的对象（命名空间）分组，以保护整体框架： 

Javascript代码 

1. var MyAwesomeFramework = {  
2.     model: function() { ... },  
3.     view: function() { ... },  
4.     controller: function() { ... }  
5. }  

4.  遵循设计模式 

JavasScript之所以很受欢迎是因为里面包含了大量例子。可重复使用的设计模式是编程中常见问题的解决方案。遵循某些设计模式可以帮助你更好的设计应用程序。以下列举一些设计模式。 

构造函数模式 

用这个模式构建具体对象实例： 

Javascript代码 

1. var Class = function(param1, param2) {  
2.     this.var1 = param1;  
3.     this.var2 = param2;  
4. }  
5. Class.prototype = {  
6.     method:function() {  
7.         alert(this.var1 + "/" + this.var2);  
8.     }  
9. };  

或者： 

Javascript代码 

1. function Class(param1, param2) {  
2.     this.var1 = param1;  
3.     this.var2 = param2;  
4.     this.method = function() {  
5.         alert(param1 + "/" + param2);  
6.     };  
7. };  
8.    
9. var instance = new Class("value1", "value2");  

模块模式 

模块模式可以让我们创建私有和公共方法。比如下面的代码中，变量_index和方法privateMethod是私有的，increment和getIndex是公开的。 

Javascript代码 

1. var Module = (function() {  
2.     var _index = 0;  
3.     var privateMethod = function() {  
4.         return _index * 10;  
5.     }  
6.     return {  
7.         increment: function() {  
8.             _index += 1;  
9.         },  
10.         getIndex: function() {  
11.             return _index;  
12.         }  
13.     };        
14. })();  

观察者模式 

事件的订阅和分派发生的时候就能看到这种模式。观察者对特定对象相关的东西有兴趣，一旦发生动作，就会通知观察者。下面的例子显示我们如何才能增加用户对象的观察者： 

Javascript代码 

1. var Users = {  
2.     list: [],  
3.     listeners: {},  
4.     add: function(name) {  
5.         this.list.push({name: name});  
6.         this.dispatch("user-added");  
7.     },  
8.     on: function(eventName, listener) {  
9.         if(!this.listeners[eventName]) this.listeners[eventName] = [];  
10.         this.listeners[eventName].push(listener);  
11.     },  
12.     dispatch: function(eventName) {  
13.         if(this.listeners[eventName]) {  
14.             for(var i=0; i&lt;this.listeners[eventName].length; i++) {  
15.                 this.listeners[eventName][i](this);  
16.             }  
17.         }  
18.     },  
19.     numOfAddedUsers: function() {  
20.         return this.list.length;  
21.     }  
22. }  
23.    
24. Users.on("user-added", function() {  
25.     alert(Users.numOfAddedUsers());  
26. });  
27.    
28. Users.add("Krasimir");  
29. Users.add("Tsonev");  

函数链接模式 

这种模式可以很好的组织模块的公共接口。节省时间，提高可读性： 

Javascript代码 

1. var User = {  
2.     profile: {},  
3.     name: function(value) {  
4.         this.profile.name = value;  
5.         return this;  
6.     },  
7.     job: function(value) {  
8.         this.profile.job = value;  
9.         return this;  
10.     },  
11.     getProfile: function() {  
12.         return this.profile;  
13.     }  
14. };   var profile = User.name("Krasimir Tsonev").job("web developer").getProfile();  
15. console.log(profile);  

我强烈推荐 Addy Osmani出的书，它涵盖了JavaScript中设计模式所有最棒的资源。 

四、Assets-Pack 

在本文结尾的时候，我想分享一些关于服务器上CSS和JavaScript代码管理方面的想法。这是一个常用手段来添加合并、缩小、编译成应用程序的逻辑。时常有种缓存机制，但在程序运行的时候所有事情都在同时发生。就是说你或许有代码的逻辑，同时处理.js或.css文件请求，然后提供适当的内容。这个过程的背后是汇编、压缩，以及其他。在我最新一个项目中我用到一种叫做Assets-Pack的工具。它非常有用，我可以详尽解释它能做什么，但更有趣的是我是怎样使用这个工具的。只能用在开发模式中，不是停留在基于代码形式的，也不是在服务器上调配的。 

我的想法是运用这个工具只当你在处理 CSS和JS的时候，它可以监视特定目录中的变化，然后把代码编译/打包成为一个单一的文件。通过这个步骤，你不需要再去考虑压缩或者汇编。所有你所要做 的仅仅是将编译后的静态文件发送给用户。这增加了应用程序的性能，因为它只能提供静态文件，这当然让事情变得更简单。你不需要设置任何服务器或实施不必要的逻辑。 

Assets-Pack的具体安装和使用方法见： https://github.com/krasimir/assets-pack 

五、结论 

作为前端Web开发人员，我们应该尽量为的用户提供最佳的性能。上面的提示不应该涵盖所有资产的组织和性能方面的技巧，但它们是常用的几种。