JerryJi !

Linux Apache Mysql Php jQuery

Google
 

最新文章

评论排行

文章留言

友情链接

　您当前位置 : 本站首页

站长应当避免的四十三个经典Web设计错误

这是一篇关于网站易用性的文章，作者以亲身体会讲述了43条网站设计中常犯的错误，而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势，但纵观国内的各大网站，似乎易用性并未成为设计者们广泛理解的概念，因此希望这篇文章对大家能有作用。

1. 用户必须在几秒钟知道网站是做什么的。

注意力是因特网上最有价值的货币。如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。

因特网不是书，因此没必要使用大段的文字。也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。

当然，某些字体可以让网站精彩纷呈。不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。

4. 不要用小字体。

如上一条所述，你得让读者阅读时感到舒服。虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。

我的第一个网站曾经经常这么做。原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。不用担心用户离开你的网站，在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。

用户有权控制自己的浏览器。如果你改变窗口大小，你会在他们面前失去信用。

7. 不必要时不要让用户注册。

直白地讲，我上网是为了获取信息，不是为了别的。不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。

不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。

Flash不仅会增加网站的读取时间，过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。

早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。记住，永远不要使用音乐。

全文阅读>>

2010-03-09 19:37:40 | 作者:jerry | 评论:0 | 标签:站长应当避免的四十三个经典Web设计错误

通过索引优化含ORDER BY的MySQL语句

关于建立索引的几个准则：

1、合理的建立索引能够加速数据读取效率，不合理的建立索引反而会拖慢数据库的响应速度。

2、索引越多，更新数据的速度越慢。

3、尽量在采用MyIsam作为引擎的时候使用索引（因为MySQL以BTree存储索引），而不是InnoDB。但MyISAM不支持Transcation。

4、当你的程序和数据库结构/SQL语句已经优化到无法优化的程度，而程序瓶颈并不能顺利解决，那就是应该考虑使用诸如memcached这样的分布式缓存系统的时候了。

5、习惯和强迫自己用EXPLAIN来分析你SQL语句的性能。

一个很容易犯的错误：

不要在选择的栏位上放置索引，这是无意义的。应该在条件选择的语句上合理的放置索引，比如where，order by。

例子：

SELECT id,title,content,cat_id FROM article WHERE cat_id = 1;

上面这个语句，你在id/title/content上放置索引是毫无意义的，对这个语句没有任何优化作用。但是如果你在外键cat_id上放置一个索引，那作用就相当大了。

几个常用ORDER BY语句的MySQL优化：

1、ORDER BY + LIMIT组合的索引优化。如果一个SQL语句形如：

SELECT [column1],[column2],.... FROM [TABLE] ORDER BY [sort] LIMIT [offset],[LIMIT];

这个SQL语句优化比较简单，在[sort]这个栏位上建立索引即可。

2、WHERE + ORDER BY + LIMIT组合的索引优化，形如：

SELECT [column1],[column2],.... FROM [TABLE] WHERE [columnX] = [value] ORDER BY [sort] LIMIT[offset],[LIMIT];

这个语句，如果你仍然采用第一个例子中建立索引的方法，虽然可以用到索引，但是效率不高。更高效的方法是建立一个联合索引(columnX,sort)

3、WHERE + IN + ORDER BY + LIMIT组合的索引优化，形如：

SELECT [column1],[column2],.... FROM [TABLE] WHERE [columnX] IN ([value1],[value2],...) ORDER BY[sort] LIMIT [offset],[LIMIT];

这个语句如果你采用第二个例子中建立索引的方法，会得不到预期的效果（仅在[sort]上是using index，WHERE那里是using where;using filesort），理由是这里对应columnX的值对应多个。

这个语句怎么优化呢？我暂时没有想到什么好的办法，看到网上有便宜提供的办法，那就是将这个语句用UNION分拆，然后建立第二个例子中的索引：

SELECT [column1],[column2],.... FROM [TABLE] WHERE [columnX]=[value1] ORDER BY [sort] LIMIT[offset],[LIMIT]
UNION
SELECT [column1],[column2],.... FROM [TABLE] WHERE [columnX]=[value2] ORDER BY [sort] LIMIT[offset],[LIMIT]
UNION
……

但经验证,这个方法根本行不通,效率反而更低,测试时对于大部分应用强制指定使用排序索引效果更好点

4、不要再WHERE和ORDER BY的栏位上应用表达式(函数)，比如：

SELECT * FROM [table] ORDER BY YEAR(date) LIMIT 0,30;

5、WHERE+ORDER BY多个栏位+LIMIT，比如

SELECT * FROM [table] WHERE uid=1 ORDER x,y LIMIT 0,10;

对于这个语句，大家可能是加一个这样的索引(x,y,uid)。但实际上更好的效果是(uid,x,y)。这是由MySQL处理排序的机制造成的。

以上例子你在实际项目中应用的时候，不要忘记在添加索引后，用EXPLAIN看看效果。

全文阅读>>

2010-03-09 19:33:53 | 作者:jerry | 评论:0 | 标签:通过索引优化含ORDER BY的MySQL语句

PHP命名空间规则解析及高级功能

日前发布的PHP 5.3中，最重要的一个新特性就是命名空间的加入。本文介绍了PHP命名空间的一些术语，其解析规则，以及一些高级功能的应用，希望能够帮助读者在项目中真正使用命名空间。

在这里中我们介绍了PHP命名空间的用途和namespace关键字，在这篇文章中我们将介绍一下use命令的使用以及PHP如何解析命名空间的名字的。

为了便于对比，我定义了两个几乎一样的代码块，只有命名空间的名字不同。

  1. < ?php  
  2. // application library 1  
  3. namespace App\Lib1;  
  4. const MYCONST = 'App\Lib1\MYCONST';  
  5. function MyFunction() {  
  6.  return __FUNCTION__;  
  7. }  
  8. class MyClass {  
  9.  static function WhoAmI() {  
  10. eturn __METHOD__;  
  11.  }  
  12. }  
  13. ?>
lib2.php

  1. < ?php  
  2. // application library 2  
  3. namespace App\Lib2;  
  4.  
  5. const MYCONST = 'App\Lib2\MYCONST';  
  6.  
  7. function MyFunction() {  
  8.  return __FUNCTION__;  
  9. }  
  10.  
  11. class MyClass {  
  12.  static function WhoAmI() {  
  13. eturn __METHOD__;  
  14.  }  
  15. }  
  16. ?> 

开始之前先要理解几个PHP命名空间相关术语。

◆完全限定名称(Fully-qualified name)

任何PHP代码都可以引用完全限定名称，它是一个以命名空间反斜线开头的标识符，如\App\Lib1\MYCONST，\App\Lib2\MyFunction( )等。

完全限定名称是没有任何歧义的，开头的反斜线和文件路径的作用有点类似，它表示“根”全局空间，如果我们在全局空间中实现了一个不同的MyFunction( )，可以使用\MyFunction( )从lib1.php或lib2.php调用它。

完全限定名称对一次性函数调用或对象初始化非常有用，但当你产生了大量的调用时它们就没有实用价值了，在下面的讨论中我们将会看到，PHP提供了其它选项以解除我们为命名空间打字的烦恼。

◆限定名称(Qualified name)

至少有一个命名空间分隔符的标识符，如Lib1\MyFunction( )。

◆非限定名称(Unqualified name)

没有命名空间分隔符的标识符，如MyFunction( )。

在相同的命名空间内工作

仔细思考下面的代码：

myapp1.php

  1. < ?php  
  2. namespace App\Lib1;  
  3.  
  4. require_once('lib1.php');  
  5. require_once('lib2.php');  
  6.  
  7. header('Content-type: text/plain');  
  8. echo MYCONST . "\n";  
  9. echo MyFunction() . "\n";  
  10. echo MyClass::WhoAmI() . "\n";  
  11. ?>  

即使我们同时包括了lib1.php和lib2.php，MYCONST，MyFunction和MyClass标识符只能在lib1.php中引用，这是因为myapp1.php的代码在相同的App\Lib1命名空间内。

执行结果：

  1. App\Lib1\MYCONST  
  2. App\Lib1\MyFunction  
  3. App\Lib1\MyClass::WhoAmI  

命名空间导入

可以使用use操作符导入命名空间，如：

myapp2.php

 
  1. < ?php  
  2. use App\Lib2;  
  3.  
  4. require_once('lib1.php');  
  5. require_once('lib2.php');  
  6.  
  7. header('Content-type: text/plain');  
  8. echo Lib2\MYCONST . "\n";  
  9. echo Lib2\MyFunction() . "\n";  
  10. echo Lib2\MyClass::WhoAmI() . "\n";  
  11. ?>  

可以定义任意数量的use语句，或使用逗号分隔成独立的命名空间，在这个例子中我们导入了App\Lib2命名空间，但我们仍然不能直接引用 MYCONST，MyFunction和MyClass，因为我们的代码还在全局空间中，但如果我们添加了“Lib2\”前缀，它们就变成限定名称 了，PHP将会搜索导入的命名空间，直到找到匹配项。

执行结果：

  1. App\Lib2\MYCONST  
  2. App\Lib2\MyFunction  
  3. App\Lib2\MyClass::WhoAmI 

命名空间别名

命名空间别名可能是最有用的构想了，别名允许我们使用较短的名称引用很长的命名空间。

myapp3.php

  1. < ?php  
  2. use App\Lib1 as L;  
  3. use App\Lib2\MyClass as Obj;  
  4.  
  5. header('Content-type: text/plain');  
  6. require_once('lib1.php');  
  7. require_once('lib2.php');  
  8.  
  9. echo L\MYCONST . "\n";  
  10. echo L\MyFunction() . "\n";  
  11. echo L\MyClass::WhoAmI() . "\n";  
  12. echo Obj::WhoAmI() . "\n";  
  13. ?>  

第一个use语句将App\Lib1定义为“L”，任何使用“L”的限定名称在编译时都会被翻译成“App\Lib1”，因此我们就可以引用L\MYCONST和L\MyFunction而不是完全限定名称了。

第二个use语句定义了“obj”作为App\Lib2\命名空间中MyClass类的别名，这种方式只适合于类，不能用于常量和函数，现在我们就可以使用new Obj( )或象上面那样运行静态方法了。

执行结果：

  1. App\Lib1\MYCONST  
  2. App\Lib1\MyFunction  
  3. App\Lib1\MyClass::WhoAmI  
  4. App\Lib2\MyClass::WhoAmI  

PHP命名解析规则

PHP标识符名称使用下列命名空间规则进行解析，请参考PHP用户手册了解更详细的信息：

1.在编译时调用完全限定函数、类或常量；

2.非限定名称和限定名称根据导入规则进行翻译，例如，如果A\B\C导入为C，调用C\D\e( )就会被翻译成A\B\C\D\e( )；

3.在PHP命名空间内，所有限定名称尚未根据导入规则转换，例如，如果在命名空间A\B中调用C\D\e( )，那么会被翻译成A\B\C\D\e( )；

4.非限定类名称根据当前的导入规则进行转换，使用全名替换导入的短名称，例如，如果类C在命名空间A\B中被导入为X，那么new X( )就会被翻译为new A\B\C( )；

5.在命名空间中非限定函数调用在运行时解析，例如，如果MyFunction( )在命名空间A\B中被调用，PHP首先会查找函数\A\B\MyFunction( )，如果没有找到，然后会在全局空间中查找\MyFunction( )；

6.调用非限定或限定类名在运行时被解析，例如，如果我们在命名空间A\B中调用new C( )，PHP将会查找类A\B\C，如果没有找到，PHP会尝试自动载入A\B\C。


PHP命名空间高级特性

接下来让我们看一看PHP命名空间的一些高级特性。

__NAMESPACE__常量

__NAMESPACE__是一个PHP字符串，它总是返回当前命名空间的名称，在全局空间中它是一个空字符串。

  1. < ?php  
  2. namespace App\Lib1;  
  3. echo __NAMESPACE__; // outputs: App\Lib1  
  4. ?>  
  5.  

这个值在调试时非常有用，它也可由于动态生成一个完全限定类名，如：

  1. < ?php  
  2. namespace App\Lib1;  
  3.  
  4. class MyClass {  
  5.  public function WhoAmI() {  
  6. return __METHOD__;  
  7.  }  
  8. }  
  9.  
  10. $c = __NAMESPACE__ . '\\MyClass';  
  11. $m = new $c;  
  12. echo $m->WhoAmI(); // outputs: App\Lib1\MyClass::WhoAmI  
  13. ?>  

namespace关键字

namespace关键字可以用于明确引用一个当前命名空间或子命名空间中的项目，它等价于类中的self命名空间：

  1. < ?php  
  2. namespace App\Lib1;  
  3.  
  4. class MyClass {  
  5.  public function WhoAmI() {  
  6. return __METHOD__;  
  7.  }  
  8. }  
  9.  
  10. $m = new namespace\MyClass;  
  11. echo $m->WhoAmI(); // outputs: App\Lib1\MyClass::WhoAmI  
  12. ?>  

自动载入命名空间类

PHP 5中最省时省力的特性是自动载入，在全局（非命名空间）PHP代码中，可以写一个标准自动载入函数：

  1. < ?php  
  2. $obj= new MyClass1(); // classes/MyClass1.php is auto-loaded  
  3. $obj= new MyClass2(); // classes/MyClass2.php is auto-loaded  
  4.  
  5. // autoload function  
  6. function __autoload($class_name) {  
  7.  require_once("classes/$class_name.php");  
  8. }  
  9. ?>  

在PHP 5.3中，你可以创建一个命名空间类的实例，在这种情况下，完全限定命名空间和类名传递给__autoload函数，例如，$class_name的值可 能是App\Lib1\MyClass。你可以在相同的文件夹下放置所有的PHP类文件，从字符串中提取命名空间，但那样会导致文件名冲突。

另外，你的类文件层次结构会按照命名空间的结构重新组织，例如，MyClass.php文件可以创建在/classes/App/Lib1文件夹下：

/classes/App/Lib1/MyClass.php

  1. < ?php  
  2. namespace App\Lib1;  
  3.  
  4. class MyClass {  
  5.  public function WhoAmI() {  
  6. return __METHOD__;  
  7.  }  
  8. }  
  9. ?>  

在根文件夹下的文件就使用下面的代码了：

myapp.php

  1. < ?php  
  2. use App\Lib1\MyClass as MC;  
  3.  
  4. $obj = new MC();  
  5. echo $obj->WhoAmI();  
  6.  
  7. // autoload function  
  8. function __autoload($class) {  
  9.  // convert namespace to full file path  
  10.  $class = 'classes/' . str_replace('\\', '/', $class) . '.php';  
  11.  require_once($class);  
  12. }  
  13. ?>  

解释：

1.类App\Lib1\MyClass的别名是MC；

2. new MC( )在编译时被翻译成new App\Lib1\MyClass( )；

3.字符串App\Lib1\MyClass被传递给__autoload函数，使用文件路径正斜线替换所有命名空间中的反斜线，然后修改字符串，classes\App\Lib1\MyClass.php文件被自动载入；

总结

有关PHP命名空间的使用就介绍到这里，希望您能够对PHP的命名空间有一个新的认识，并希望你能在新项目中真正使用命名空间。

全文阅读>>

2010-03-09 19:32:58 | 作者:jerry | 评论:0 | 标签:PHP命名空间规则解析及高级功能

如何正确运用PHP json_encode函数进行中文转换

json_encode 和 json_decode

这两个函数的具体用法 网上有很多相关的文章 ，本文主要介绍 用json_encode 时中文无法转换的解决方案，本文假设文件所用的编码为gb2312；

先写出所需的数组

<?php
$json = array (
0 =>
array (
'id' => '13',
'name' => '乒乓球',
),
1 =>
array (
'id' => '17',
'name' => '篮球',
)
)
?>

如果直接用PHP json_encode函数

<?php
echo json_encode($json);
?>

结果为：

<?php
[{"id":"13","name":null}
,{"id":"13","name":null}]
?>

可以看到汉字没有被转义都为null，这是因为json仅仅转义encoding编码(类似于:%B0%AE)，故上面语句应该先转换编码

<?php
foreach ($ajax as $key=>$val)
{
$ajax[$key]['name'] =
urlencode($val['name']);
}
echo json_encode($json);
?>

客户端js代码

<script type="text/javascript">
function getsort(obj)
{
$.ajax(
{
type : "GET",
url : "< ?=$this->baseUrl?>/index/getajax",
data : "c=" obj.value,
success : function(json)
{
var json=eval(json);
var html = '< select>';
$.each(json, function(k)
{
html = '< option value="'
json[k]['id'] '">'
decodeURI(json[k]['name']) '< /option>';
});
html ="< /select>";
$('#sort').html(html);
}
}
)
}
</script>

用上面的代码js会报错 说编码不符合标准

原因是因为js 中decodeURI 仅仅支持utf8 转码。所以 ，PHP json_encode函数的代码应该为下面的代码

<?php
foreach ($ajax as $key=>$val)
{
$ajax[$key]['name'] =
urlencode(iconv('gb2312',
'utf-8',$val['name']));
}
echo json_encode($json);
?>

以上就是使用PHP json_encode函数在实际操作中出现问题的解决方法。

全文阅读>>

2010-03-08 22:30:56 | 作者:jerry | 评论:0 | 标签:如何正确运用PHP json_encode函数进行中文转换

如何在PHP开启gzip页面压缩实例

示例一（用php的内置压缩函数）：

<?PHP
if(Extension_Loaded('zlib')) Ob_Start('ob_gzhandler');
Header("Content-type: text/html");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<?php
for($i=0;$i<10000;$i++){
echo 'Hello World!';
}
?>
</body>
</html>
<?PHP
if(Extension_Loaded('zlib')) Ob_End_Flush();
?>

示例二（自写函数）：

<?php ob_start('ob_gzip'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

<?php
ob_end_flush();
//压缩函数
function ob_gzip($content){
if(!headers_sent()&&extension_loaded("zlib")&&strstr($_SERVER["HTTP_ACCEPT_ENCODING"],"gzip")){
$content = gzencode($content,9);
header("Content-Encoding: gzip");
header("Vary: Accept-Encoding");
header("Content-Length: ".strlen($content));
}
return $content;
}
?>

全文阅读>>

2010-03-08 18:16:29 | 作者:jerry | 评论:0 | 标签:如何在PHP开启gzip页面压缩实例

有效提高网页打开速度的十四条建议

网站最基本的东西是什么？

——内容，SEO（搜索引擎优化）还是UE（用户体验）？都不对！是速度！

内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。

所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？

第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：

1、用一个大图片代替多个小图片。

这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。

第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。

第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。


一个大小为40528bytes的337*191px的大图片的分析结果


一个大小为13883bytes的280*90px的小图片的分析结果

第一张大图片花费时间为：

Blocked：13.034s
Send：0.001s
Wait：0.163s
Receive：4.596s
TTFB：0.164s
NetWork：4.760s
功耗时：17.795s

真正用于传输大文件花费的时间为Reveive时间，即4.596s，多数的时间是用来检索缓存和确定链接是否有效的Blocked时间，供花费13.034s，占总时间的73.2%。

第二张小图片花费时间为：

Blocked：16.274s
Send：小于0.001s
Wait：0.117s
Receive：0.397s
TTFB：0.118s
NetWork：0.516s
功耗时：16.790s

真正用于传输文件的花费时间是Reveive时间，即0.397s，这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s，占总时间的97%。

如果这些数据还不够说服你的话，让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然，里面的图片有大有小，规格不一。

大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。

其中藏青色的为传输文件花费的Reveive时间，而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们：

大文件和小文件下载所需时间的确是不同的，差异的绝对值不大。而且下载所需时间占总耗费时间比例很小。

大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。无论文件大小，这个时间的花费大致是相同的。而且所占总耗费时间的比例是极大的。

一个100k的大图片总耗费时间绝对大于4个25k的小图片的总耗费时间。而且主要差别就是4个小图片的Blocked时间绝对大于1个大图片的Blocked时间。

所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。

但是，请注意：也不能用太大的单张图片，因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。

2：合并你的css文件。

图:合并与融合我以前犯了一个错误，你在看我《样式表的组织与规划》的系列文章中会知道。当时，我为了方便组织和规划样式表，将用于不同用途的样式 表文件 分离开来，形成不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道，那样的确 是不合理的，因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以，从提高网页效率的角度上而言，我们还是应该将所有的css 写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢？这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍 然使用多个css文件以便于规划和组织。而等到发布的时候，再将多个css文件合并到一个文件中去，从而达到减少HTTPRequest请求数的目的。

3：合并你的javascript文件。

原因和处理方法同上，不再赘言。

第二条：Use a Content Delivery Network 使用CDN

这个看上去好像很深奥的样子，但是只要结合中国的网络特色，这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务 器”……这些 词听起来是那么熟悉和压抑。如果，一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时，你就能很深刻的理解。

鉴于这个不是我们开发人员力所能及的准则，所以这里也就不多言了。 

第三条：Add an Expires Header 添加周期头

这个也并非开发人员来控制，而是网站服务器管理员的职责。所以，如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。

第四条：Gzip Components 启用Gzip压缩

这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员，而是网站服务器管理员的工作范畴，这里就不详细讲解了。如果你对此感兴趣，可以资讯贵公司的网站服务器管理人员。

第五条：Put CSS at the Top 把CSS样式放在页面的上方。

无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行 渲染。 这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。

第六条：Move Scripts to the Bottom 将脚本放在底部

原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。

第七条：Avoid CSS Expressions 避免使用CSS中的Expressions

CSS中的Expressions其实也是一种if判断首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——

<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
<INPUT TYPE="text" NAME="">

<INPUT TYPE="text" NAME="" readonly="true">这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。

第八条：Make JavaScript and CSS External 将javascript和css独立成外部文件

这一条好像和第一条有点矛盾。的确，如果从HTTP的request请求数来讲的话，这样做的确是降低了效率。但是之所以这么做，是因为另外一个重 要的考 虑因素——缓存。因为外部的引用文件会被浏览器缓存，所以如果javascript和css体积较大的时候，我们将它们独立成外部文件。这样当用户只要浏 览一次以后，这些体积较大的js和css文件就能被缓存起来，从而极高地提高用户再次访问时的效率。

第九条：Reduce DNS Lookups  减少DNS查询

DNS域名解析系统。大家都知道我们之所以能记住那么多的网址，是因为我们记住的都是单词，而非http://202.153.125.45这样的 东西，而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢？其实有 两条：

1：如果不是必须，请不要把网站放到两台服务器上。

2：网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条：Minify JavaScript and CSS  减少JavaScript和CSS文件的体积

这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低，好在网上到处都是用于压缩这些东西的工具。压 缩JavaScript代码体积的工具随处可见，我便不再列举了，这里我只提供一个用于压缩css代码体积的在线工具网站—— http://www.cssdrive.com/index.php/main/csscompressor（重点推荐！写css的一定要看啊，可以减小我们的css体积。）
它提供了多种压缩方式，可以适应多种要求。

第十一条：Avoid Redirects 避免跳转

我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢？2点——

1：“此域名已过期，5秒钟以后，页面将跳转到http://www.xxxxxx.com/index.html页面”，这句话看起来的确很熟悉。但是，我就奇怪了，为什么不直接链接到那个页面呢？

2：一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com （注意最后面一个“/”符号）。的确，这两个网址都能访问到我的博客，但是，事实上，它们是有区别的。http: //justinyoung.cnblogs.com 的结果是个301响应，它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然，中间多浪费了一些时间。

第十二条 Remove Duplicate Scripts 移除重复的脚本

图:对重复说“不！”这个准则的道理很浅显，但是真正在工作中，很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你，的确可以找很多的理由不去处理这些多余重复的脚本代码，如果你的网站不需要更高的效率和后期维护的话。
也正是这点，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要问一下：用了这个js kit 到底给我们多少方便，提高了多少工作效率。然后，再与它因为多余的、重复的代码带来的负面效果比较一下。

第十三条：Configure ETags 配置你的实体标签

首先来讲讲什么是Etag吧。Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器 缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这和 “Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果，你对此有兴趣，可以咨询 贵公司的网站服务器管理员。

第十四条：Make Ajax Cacheable 上面的准则也适用Ajax

Ajax的使用要恰当现在的Ajax好像有点被神话了，好像网页只要Ajax了，那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不 会让你 的网页效率更高，反而会降低你的网页效率。Ajax的确是个好东西，但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。

全文阅读>>

2010-03-06 09:48:04 | 作者:jerry | 评论:0 | 标签:有效提高网页打开速度的十四条建议

网页设计中常用的CSS命名规则整理

很多站长制作网站模板的时候或许会出现CSS明明不规范的问题，为了提高网站模板的CSS样式表的可读性，推荐站长们了解下常用的CSS命名规则。

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper 或 wrap

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

注释的写法:

/* Footer */

内容区

/* End Footer */

id的命名:

1.页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

2. 导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

3. 功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

class的命名:

1.颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

2. 字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

3. 对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

4. 标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项:

1. 一律小写;

2. 尽量用英文;

3. 不加中杠和下划线;

4. 尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

全文阅读>>

2010-03-06 09:47:30 | 作者:jerry | 评论:0 | 标签:网页设计中常用的CSS命名规则整理

CSS样式表的属性选择器的四种格式

属性选择器（Attribute Selectors），或许你不应该对属性选择器感到生疏，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。

属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式（不知道描述是否正确，自创的词），比如h1[title], h1[title="Logo"]等，你可以从我下面的论述中看到4种具体形式。

1、简易属性选择器

只顾其名不顾其值，这是简易属性选择器的特点。

h1[class] {color: silver;}将会作用于任何带class的h1元素，不管class的值是什么。所以<h1 class="hoopla">Hello</h1>、<h1 class="severe">Serenity</h1>、<h1 class="fancy">Fooling</h1>的h1都会受到这条规则的影响。

当然，这个“属性”不仅仅是class或者id，可以是该元素所有合法属性，比如img的alt，这样img[alt]{css declarations here;}将会作用于任何带有alt属性的img元素。那么a[href][title] {font-weight: bold;}呢？聪明的你一定已经知道，这会作用于同时带href和title属性的a元素，比如<a href="http://www.mb5u.com/" title="mb5u Home"></a>。

2、精确属性值选择器

id和类本质上就是精确属性值选择器，没错，h1#logo等于h1[id="logo"]。如前所述，我们不要局限于id或者class，我们可 以使用任何属性！例如a[href="http://www.mb5u.com/"][title="W3C Home"] {font-size: 200%;}将会作用于<a href="http://www.mb5u.com/" title="mb5u Home"></a>。

3、部分属性值选择器

如其名，只要属性值部分匹配（这里的部分，实际上要匹配整个单词）就会作用于该元素。让我们来看个例子：

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>p[class~="warning"] {font-weight: bold;}

和

p[class~="urgent"] {font-weight: bold;}

中任何一条都可以让这个p的字体变粗。

该选择器十分有用，比如你要样式化插图，其title中都含字符串”Figure”，如 title= "Figure 5：xxx说明"，则你可以使用img[title~="Figure"] 。

需要注重的是，如我第一句就强调的，你需要匹配的是整个单词，img[title~="Figure"] 不会匹配title= "Figure5：xxx说明"。

另外，我做了个小小的测试，你把例子中的“Figure”改成“插图”，把img[title~="Figure"] 改成img[title~="插图"] ，在Firefox中依然可以匹配，不管编码（encoding）是GB2312还是UTF-8。看来CSS对中文的支持还不赖。

4、非凡属性选择器

有点怪，这个选择器。它是这样工作的，嗯，举个例子比描述更轻易。

*[lang|="en"] {color: white;}，这条规则（rule）将会选择属性lang的值en或者en-打头的元素。就是说，它可以匹配<h1 lang="en">Hello!</h1>、<p lang="en-us">Greetings!</p>和<div lang="en-au">G'day!</div>而不匹配<p lang="fr">Bonjour!</p>和<h3 lang="cy-en">Jrooana!</h3>。

全文阅读>>

2010-03-06 09:47:04 | 作者:jerry | 评论:0 | 标签:CSS样式表的属性选择器的四种格式

我们十分崇拜统计局专家...
我们十分崇拜统计局专家...

全文阅读>>

2010-03-05 17:39:38 | 作者:jerry | 评论:0 | 标签: 我们十分崇拜统计局专家...

常用的三种修改mysql最大连接数的方法

MYSQL数据库安装完成后，默认最大连接数是100，一般流量稍微大一点的论坛或网站这个连接数是远远不够的，增加默认MYSQL连接数的方法有两个

方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100   修改为 max_connections=1000 服务里重起MYSQL即可

方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppassword

设置新的最大连接数为200：mysql> set GLOBAL max_connections=200

显示当前运行的Query：mysql> show processlist

显示当前状态：mysql> show status

退出客户端：mysql> exit

查看当前最大连接数：mysqladmin -uusername -ppassword variables

方法三：以centos 4.4 下面的mysql 5.0.33 手工编译版本为例说明：

vi /usr/local/mysql/bin/mysqld_safe

找到safe_mysqld编辑它，找到mysqld启动的那两行，在后面加上参数 ：

-O max_connections=1500

具体一点就是下面的位置：

用红字特别说明：

then $NOHUP_NICENESS $ledir/$MYSQLD

$defaults --basedir=$MY_BASEDIR_VERSION

--datadir=$DATADIR $USER_OPTION

--pid-file=$pid_file

--skip-external-locking

-O max_connections=1500

>> $err_log 2>&1 else

eval "$NOHUP_NICENESS $ledir/$MYSQLD

$defaults --basedir=$MY_BASEDIR_VERSION

--datadir=$DATADIR $USER_OPTION

--pid-file=$pid_file

--skip-external-locking $args

-O max_connections=1500 >>

$err_log 2>&1"

保存。

# service mysqld restart

# /usr/local/mysql/bin/mysqladmin -uroot -p variables

输入root数据库账号的密码后可看到

max_connections 1500 即新改动已经生效。

还有一种方法，

修改原代码:

解开MySQL的原代码，进入里面的sql目录修改mysqld.cc找到下面一行：

{"max_connections", OPT_MAX_CONNECTIONS,

"The number of simultaneous clients allowed.", (gptr*) &max_connections,

(gptr*) &max_connections, 0, GET_ULONG, REQUIRED_ARG, 100, 1, 16384, 0, 1,

0},

把它改为：

{"max_connections", OPT_MAX_CONNECTIONS,

"The number of simultaneous clients allowed.", (gptr*) &max_connections,

(gptr*) &max_connections, 0, GET_ULONG, REQUIRED_ARG, 1500, 1, 16384, 0, 1,

0},

存盘退出，然后./configure ;make;make install可以获得同样的效果。

全文阅读>>

2010-03-05 09:28:08 | 作者:jerry | 评论:0 | 标签:常用的三种修改mysql最大连接数的方法

1 [2] [3] [4] [5] >>> 下页 尾页   第 1 页，共 124 页 1240 条

Page Created:2010-03-11 04:32:21 Cache_lifetime:600(s) © Jerry 2009/07/17
E-Mail:qsbaq@163.com
苏ICP备08109900号