首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-08-21 
web 页面内容优化管理与性能技巧回 想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今

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

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

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

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

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

在CSS中,你可以参照以下方式,显示你喜欢的sprite部分:?

?数据URI方案/内联图像

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

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

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

CSS

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

使用CSS预处理器

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

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

或者:

模块模式

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

var Module = (function() {    var _index = 0;    var privateMethod = function() {        return _index * 10;    }    return {        increment: function() {            _index += 1;        },        getIndex: function() {            return _index;        }    };      })();
观察者模式

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

var Users = {    list: [],    listeners: {},    add: function(name) {        this.list.push({name: name});        this.dispatch("user-added");    },    on: function(eventName, listener) {        if(!this.listeners[eventName]) this.listeners[eventName] = [];        this.listeners[eventName].push(listener);    },    dispatch: function(eventName) {        if(this.listeners[eventName]) {            for(var i=0; i<this.listeners[eventName].length; i++) {                this.listeners[eventName][i](this);            }        }    },    numOfAddedUsers: function() {        return this.list.length;    }} Users.on("user-added", function() {    alert(Users.numOfAddedUsers());}); Users.add("Krasimir");Users.add("Tsonev");
函数链接模式

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

var User = {    profile: {},    name: function(value) {        this.profile.name = value;        return this;    },    job: function(value) {        this.profile.job = value;        return this;    },    getProfile: function() {        return this.profile;    }};   var profile = User.name("Krasimir Tsonev").job("web developer").getProfile();console.log(profile);

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

Assets-Pack

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

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

下面是你如何安装和使用Assets-Pack:

npm install -g assetspack
用法

该模块可与JSON配置,当它通过命令行被调用的时候,你应该把设置放到.json文件中。

通过命令行

创建assets.json文件夹,在同一个目录下执行以下代码:

assetspack

如果你想使用另一种名称或者换一个目录:

assetspack --config [path to json file]

代码形式的

var AssetsPack = require("assetspack");var config = [    {        type: "css",        watch: ["css/src"],        output: "tests/packed/styles.css",        minify: true,        exclude: ["custom.css"]    }];var pack = new AssetsPack(config, function() {    console.log("AssetsPack is watching");});pack.onPack(function() {    console.log("AssetsPack did the job"); });
配置

配置应该是一个有效的JSON文件/对象,下面只是一个对象数组:

[    (asset object),    (asset object),    (asset object),    ...]

Asset Object

Asset Object的基本结构如下:

{    type: (file type /string, could be css, js or less for example),    watch: (directory or directories for watching /string or array of strings/),    pack: (directory or directories for packing /string or array of strings/. ),    output: (path to output file /string/),    minify: /boolean/,    exclude: (array of file names)}

?pack属性不是强制的,如果丢失了,它的值还是相等的,默认情况下的缩减是假属性。

下面是一些例子:

Packing CSS

{    type: "css",    watch: ["tests/data/css", "tests/data/css2"],    pack: ["tests/data/css", "tests/data/css2"],    output: "tests/packed/styles.css",    minify: true,    exclude: ["header.css"]}

?Packing JavaScript

{    type: "js",    watch: "tests/data/js",    pack: ["tests/data/js"],    output: "tests/packed/scripts.js",    minify: true,    exclude: ["A.js"]}

?Packing .less Files

Packing .less Files有点不同,pack属性是强制性的,基于你的切入点。你应当导入所有其他的.less文件。排除属性在这里无效。

{    type: "less",    watch: ["tests/data/less"],    pack: "tests/data/less/index.less",    output: "tests/packed/styles-less.css",    minify: true}

如果有其他问题,可以在源代码(GitHub)库中查看tests/packing-less.spec.js?

压缩其他格式文件

assets-pack适用于所有文件格式。比如你可以结合HTML模板和一个简单文件,用以下方式:

{    type: "html",    watch: ["tests/data/tpl"],    output: "tests/packed/template.html",    exclude: ["admin.html"]}

有一点需要注意的是这里没有缩小倍率。

结论

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

热点排行