在线咨询：点击这里在线咨询(在线支持1)4EB Studio(在线支持2)

15个网站加速，代码优化的技巧

发布者:4EB Studio 发布日期:2009/01/27 分类:Javascript, jQuery, 天兔贴士, 实用工具, 网页设计

将图片压缩到最小

compress images

当我们使用photoshop“存储成网页格式”的选项时，我们可以将图片文件压缩的小一些。但是，你是否知道这些图片大小可以被压缩的更多而不降低图片质量呢？有个名叫Smush.It 的网站可以帮助你实现这一点。

学会擅用Snippets

snippets

许多的IDE是都提供”code snippet” 控制面板允许你存储一些代码以备后用。你是否发现自己经常会去lipsum.com获取一些常用本文呢？那为什么不试试使用snippet？在Dreamweaver中，按下”Shift+F9″键即可打开snippet标签。你可以将需要的snippet托拽到任何你需要的地方。这个方法将节省你的大量时间。

利用Console.log()进行调试

console.log

你或许下载了一个jQuery库，并且在试图掌握它的语法结构。同样，你可能遇到了一些困难并且意识到你无法确认变量的对应值。没关系，你可以这样做：

键入命令：

console.log($someVariable);

现在，打开Firefox（请确认你已安装了FireBug），然后点击F12。你将会看到你正在查找的变量所对应的值。

下载网页开发工具

web developer toolbar

这是一款由Chris Pederick 开发的，非常实用的Firefox扩展插件，具有很多选项。或许你们大多数看过我视频教程的人都会发现我非常喜欢使用”Edit CSS” 这个选项来实时调整我的样式表。该工具的其他功能包括：

  • 轻松禁用Javascript
  • 轻松禁用CSS
  • 快速HTML/CSS验证链接
  • 标尺
  • 禁用cookies
  • 还有其他一系列很多伟大的功能

Web Developer Toolbar

将Script标签放置到页面最底端

snippets

我们似乎很少这样做。虽然它并非总是适宜，但是你的确可以通过把script标签放到<body>标签后来提高网站速度很多倍。

....

大多数现代浏览器在同一台服务器上最多同时加载两个内容。但是，当你加载脚本文件的时候，其他的都不会被同时加载。因此，只要情况允许的话，最好将你的脚本文件移动到文件最底端，以便让服务器先加载其他内容（如图片，css等）。

压缩CSS和Javascript文件

compress files

如果网站的性能最你来说最重要的话，我强烈建议你考虑在展开之前压缩CSS和Javascript文件。在开发之前不要嫌它麻烦，这会对你非常有帮助的。

Javascript压缩服务

CSS压缩服务

另外两个有用的JavaScript压缩工具是 YUI Compressor, 和 JSMin.

jQuery贴士集

jQuery Tips

不久前，tvidesign.co.uk的Jon Hobbs-Smith发表了一篇非常棒的文章详述了jQuery的25个实用技巧。请确保将该页面收藏了。这里列举了我非常喜欢用的一些技巧。

检查元素是否已经存在？

if ($(’#myDiv).length) {
// this code will only run if the div with an id of #myDiv exists.
}

使用Context

很多人都没有意识到这一点，当访问dom元素的时候，jQuery函数会接受第二个参数 – “context”。请往下看：

var myElement = $('#someElement');

该代码将命令jQuery越过整个dom。我们可以通过使用context作为第二个参数来加速网站。

var myElement = $('#someElement', $('.someContainer'));

现在我们将告诉jQuery仅搜索.someContainer 内的元素，并且或略所有该元素以外的东西。

使用ID代替Class

当用jQuery访问ID的时候，通常会使用传统的”getElementById”方式。但是，当访问class元素的时候，jQuery必须使用他自己的方式跨越整个dom，结果这样会花费更长的时间。

产看所有25个技巧!

尽可能使用$_GET代替 $_POST

querystrings

如果在编写Ajax命令的时候，你可以在$_GET 或者$_POST之间选择的话，那么请选择前者。

” Yahoo! Mail团队发现，当使用XMLHttp请求的时候，POST在浏览器中会通过两个步骤实现：首先发送header，然后再发送数据。因此最好使用GET，它仅使用一个TCP数据分组（除非你有非常多的cookies）。” – Developer.Yahoo.com

请记住：不要轻率的使用$_GET。请先弄清楚你第一步要作什么。

适时使用Library和Framework

use frameworks

无论你使用PHP, ASP.NET, Mootools, jQuery，或他们中的多种，请考虑适时的使用架构。

例如:

  • 如果我要在网站上运行一个简单的静态页面，仅需要一个小的Javascript来实现翻转效果，那么使用jQuery的话就不太合适了。
  • 如果我的静态网站的大多数特性被放在一个XML文件中，我就不需要使用架构。否则，我将会网站额外的带宽付出许多费用。

但是，如果我正在建设一个负责的网站，需要一个完整的CMS系统和复杂的数据访问，那么我将会使用一些我常用的架构。

请记住：架构仅仅是在需要的时候才会为你服务，否则请慎用。

YSlow

ySlow

YSlow是一款非常棒的工具可以帮助你检查网站的有效性。

这里有一个很好的 YSlow视频教程 来讲述该款工具的实用性。我强烈推荐你有机会看一看。

ySlow

学会使用键盘快捷键

template

大多数有经验的设计师/开发人员都会同意我的观点，如果我要实现网站或者设计的一个变化我都要去工具栏里面寻找相应的菜单，那会浪费我很多时间。我已经使用快捷键很长时间了，以至于我根本不知道这些命令的正确菜单位置。我就知道”Shift + X” 可以打开我需要的面板。

我建议你可以在Google中搜索 “X 快捷键”（X代表软件的名字，比如Photoshop）。打印这些表单放在你垂手可得的地方。在接下来的几个星期中，试着尽可能用鼠标进行操作，渐渐地你就会养成习惯了。

建立一个 “New Website”模板

template

让我们来看看如何建立一个网站模板。并非所有的网站都需要大型而复杂的应用。有时候，我们仅仅需要一个可以展示我们简历的网站。这时，我们为何不建立一个简单的“模板”来包含你需要的任何东西呢？

在我的模板文件夹里面，我建立了名为”JS”和”CSS”的二级文件夹。

  • 前者包含了我的“DD_belatedPNG.js” 文件 (支持IE6 PNG背景透明)。
  • 后者包含了一个空白的”default.css” 文件以及我自己的自定义reset文件。

除此之外，我还有一个 “index.html(php)” 文件包含了一些我常用的代码片段。这些并没有什么特别之处，不过会节约我不少时间。

正如你所看到的，我引用了我自己的CSS 和Javascript文件,链接了Google上的 jQuery文件，创建了document.ready() jQuery函数，并且打开了一个标准的”container” div。

这看上去非常简单，但却节省了不少时间。

内联Vs.外联

inline and external

总的来说，你的所有CSS和Javascript文件应该从页面上移走放入其各自的外部文件中。

为什么这么做?

  • 清理代码
  • 简报和内容分开很重要
  • 使用外部文件，数据会被缓存以备后用。这将降低HTML文件大小而不会导致多余的HTTP请求。

如果你仅有几句简单的样式结构，还是可以有例外的。把他们放在HTML页面内或许还是有益的，但仅限此种情况而已。

使用PHP判定Javascript调本是否被调用

inline and external

AJAX几乎应用到了现在所有的领域，多数是因为他的用户友好性，这些都要归功于Javascript 库。在有些情况下，你需要考虑是否需要使用Javascrip来调用你的脚本。这需要几天的时间来完成这项任务。

其中一个方法就是当发送POST命令的时候使用Javascript附加上一对独特的键值。然后你可以使用PHP来决定某个特殊的值是否存在。如果存在的话，我们就会知道Javascript被调用了。

一个最好的构建方式就是使用PHP的特性”HTTP_X_REQUESTED_WITH”。

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// write some code and rest assured that the Javascript is enabled.
} else {
// Do something different to compensate for users that have JS turned off.
}

连接到Google的CDN

link to google

不久前，Google主机开始存放一些流行的脚本库如jQuery等。如果你正在使用类似的库，我强烈建议你将它们链接到Google的CDN，而不是使用你自己的脚本。

AJAX Libraries API

使用Firefox扩展

embrace firefox extensions

我是Google Chrome的忠实用户。他打开的速度非常快，并且运行Javascript的速度也比其他浏览器快很多，至少到目前为止是这样的。但是，你会发现我并不会很快放弃使用Firefox的。它的一系列非常有用的浏览器插件是令人惊叹的。下面就是我最常用的一些：

embrace firefox extensions

如果有用的话，可以使用IDE

use an ide

现在痛恨微软似乎变得非常流行，攻击那些在开发的时候使用IDE的人似乎非常时髦。事实上，这样看来比较愚蠢。

在很多情况，使用高级的IDE应该还是首选，特别是当你在使用OOP语言工作的时候。现在，如果你仅仅是创建一个小巧的HTML模板，Notepad++和Coda这样的程序已经非常棒了。事实上，在这种情况下我还是建议使用这样的工具的，毕竟多余的功能对你来说没有任何用处。但是，当你开发一些高级程序的时候，还是充分利用IDE的优势吧。

[原文链接]


发表评论