脚儿网 http://www.jo2.org 高性能web前端优化 Thu, 02 Feb 2012 02:54:42 +0000 en hourly 1 html代码优化与精简 http://www.jo2.org/archives/280.htm http://www.jo2.org/archives/280.htm#comments Thu, 02 Feb 2012 02:53:20 +0000 十年灯 http://www.jo2.org/?p=280 过年归来，继续我的《高性能web前端优化指南》系列。虽然看的人少，顶的人更少，但我还是应该坚持下去，权且当作工作总结吧。

html代码优化与html优化并不是一回事，前者只是后者的一部分，html代码优化，就是在不大伤脑筋重构的前提下，或者说，在web整体架构结束后，进一步尽量减少html代码的字节数而已。

下面简单说一些html代码优化的技巧：

一，去除不必要的html标签

既然要削减代码体积，那就先从没必要保留的地方下手。也许你是用的智能编辑器如dreamweaver,VS等，让你点点鼠标就能插入代码，但这些代码中也有一些代码是不必要的。下面是一些常见的可优化的html标签。

  1. meta标签。除了其中的编码声明行，keyword与description子标签，其余的都可以不要。
  2. link标签。通常用来载入css文件，其余用途则可选择删掉；而且，link载入css时，带上type=”text/css”即可，不用再加上那句rel=”stylesheet”，media属性也可不要。
  3. 通常<html xmlns=”http://www.w3.org/1999/xhtml”>这句，其实只保留<html>即可
  4. script标签，也只保留type，而无需使用language属性
  5. 内容为空的属性。比如img的空白alt，a的空白title
  6. 加在不需要视觉操作的元素上的属性。如link,script上的class,id等（这个真心可删）

删除，是最简单的事，只要知道该删哪些。以上并没有列举完。

二，主动减少html标签

这点需要比较良好的代码知识。我们应该本着写更少的代码，做同样多的事情的心态来写html。

1，重点：减少html标签嵌套

就是能用1层标签的就不要用两层，然后通过css来达到相同的视觉效果。如有下面这样一个效果图：

这个块的html结构要怎么写呢？可以这么写：

<div>
<div><h2>相关文章</h2></div>
<div><ul><li>。。。</li></ul></div>
</div>

也可以这样：

<div>
<h2>相关文章</h2>
<ul><li>。。。</li></ul>
</div>

相比之下，后者代码精简的多，而且可以通过css实现相同的视觉效果。减少嵌套，对seo也更好。

不过，前者无疑具有更好的扩展性。比如你想在“相关文章”右边加一个“更多”链接，那前面这种结构容易修改多了。

所以，精简代码，是在确认了需求改动不频繁的前提下，否则以后修改起来会让你很痛苦。

2，尽量少使用行内css

就是style=”height..”这种。因为行内css每次都要加个style=，关键是，只能对此元素生效。不如用一个class代替，重用起来也方便。

3，合并css

把不需要判断条件载入的css文件给合并了，可以减少一个link标签，也就减少了一个http请求

三，web在线编辑器造成的噩梦

这个编辑器就是你在网页上发布文章时用的编辑器，如果你使用博客，空间，QQ空间等，你应该经常用web在线编辑器。

通常，写网站的与发文章的都是两批人。发文章的多是网站编辑，网页知识了解甚少。甚至有的人直接把文章从word文档里复制进编辑器，就发布了。这时，就会生成大量的垃圾代码。详细》

—————————————–分割线——————–

其实，代码的精简，随着你编码能力的提高，你就会不知不觉的实现它。因为谁也不喜欢做无用功，谁都希望事半功倍。如何精简，多半都要靠悟性了。

不过，只要你启用了gzip压缩，代码精简与否都是浮云！gzip能直接把html等文件体积压缩至原来的30%~50%。。。额

 

 

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/280.htm/feed 3 准备回家过年 http://www.jo2.org/archives/279.htm http://www.jo2.org/archives/279.htm#comments Mon, 16 Jan 2012 08:47:05 +0000 十年灯 http://www.jo2.org/?p=279 俺已经准备回家过年了。由于网络不便所以会有半个月不更新，各位朋友，也别再忙了，准备回家团圆吧。

我会先在这边过了年，初几里再回老家跑一趟。但我老婆却要过年之前就回去，因为嘛，我们快结婚了，这估计是她和她父母一起过的最后一个年了，所以我也不能强留她在这边过年。唉

不过，今年貌似没存到什么钱呢。

用bShare分享或收藏本文

随机日志

]]> http://www.jo2.org/archives/279.htm/feed 0 google流量来源恢复正常了 http://www.jo2.org/archives/277.htm http://www.jo2.org/archives/277.htm#comments Fri, 13 Jan 2012 09:27:13 +0000 十年灯 http://www.jo2.org/?p=277 之前因为百度对本站收录一直不正常，所以我想了个办法：使用百度统计，更换主题，更换了本站永久链接格式！结果我如愿以偿了：百度收录正常了，而且多多少少带来了一些流量。

但让我蛋疼的是：从那以后google就对我不正常了！从google进入的流量日益减少，前两天甚至一个google的流量也木有！这是为毛啊！这让我这个本来就是做网站优化的情何以堪！

从上次网站大换血以来，google的表现如下：我发的新文章依旧是秒收，但没有任何权重！前几天我尝试过搜索xTaoke,居然翻了几页也没找到我站点的文章，反而是一些我在其他网站比如wordpress论坛上发布的文章，或者其他专门收录主题的网站——但就是没有我的。我在外站上发文章可都是加了链接的啊！

我猜测google这样对我应该是因为我改了wordpress固定链接的格式——从原来的2级链接直接变成了3级，才导致了这个惨烈的结果。

不过，当当当当，从前天开始，google就恢复正常了！我的网站权重终于上来了。百度正常，google正常，哇哈哈！自然流量首次突破了100IP。

等等，好像有点不对呢。。。。我靠，做了两年的博客，流量才上100！天啊！

 

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/277.htm/feed 4 大修pearlie主题 http://www.jo2.org/archives/274.htm http://www.jo2.org/archives/274.htm#comments Thu, 12 Jan 2012 09:48:40 +0000 十年灯 http://www.jo2.org/?p=274 自从xTaoke加强版上线出售后，充分感觉我的人脉不够，主题不好卖。。49块钱的主题，还有人来和我砍价，要我20块钱卖。汗，49块钱还不如我半天的工资呢，20块的话，就够买一包烟啊！情何以堪！

后来我觉得，作为一个制作wordpress主题的网站来讲，这款pearlie主题的样式有点太简陋了。虽然pearlie功能强大，但没用过的人也不知道啊。一个漂亮的主题，应该有利于以后的业务开展。

pearlie修改版

pearlie修改版

于是我又花时间修改了pearlie，共计用时：1天半？最新样式如此刻本站。

首页幻灯片展示当然是要保留的，只是我移到了最上面，图片加宽而收矮，样式也改了。不过我感觉：太矮了！比如那个美女现在只能现出一个脖子…

幻灯片下面放的就是最新文章，有缩略图的会显示缩略图。

最新文章下面（如果你继续往下拉滚动条的话），是原来放在中间的某两个分类文章。不过由于位置太靠下，估计曝光率很低。

侧边栏增加了一个tabs切换效果，把不常用的东西如标签和热门文章放在了里面。借jQuery的便利，加了动态效果。

但侧边栏这样一来就很短了，所以放了几个广告位。目前这些广告位只有凑数的作用。

其他说明：

基本兼容各浏览器，但使用非IE核心浏览器效果更好。

 

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/274.htm/feed 1 QQ2011皮肤半透明设置 http://www.jo2.org/archives/271.htm http://www.jo2.org/archives/271.htm#comments Thu, 12 Jan 2012 01:35:36 +0000 十年灯 http://www.jo2.org/?p=271 qq2011有很多让你的QQ看起来更炫的功能，比如随意调整皮肤颜色，以及设置QQ皮肤透明度。

如图，设置了半透明后，就类似于windows7的毛玻璃效果，可以看到QQ面板背后的东西。

QQ2011设置皮肤透明度的位置如上图：在你QQ主面板的天气图标下面，点那个七彩小图标，然后在弹出的小面板下面可以看到一个带过度效果的长条，拖动长条上的滑块就能调整皮肤的透明度。

也许你长条左边那个”气球”上会有一个红色的禁止提示，那就表明透明度设置是被禁止了的。你可以点一下那个气球，在弹出的对话框里选确定，就能设置透明度了。

友情提示：开启透明度效果会拖慢QQ的界面运行速度。。不过一般情况下可以忽略。

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/271.htm/feed 1 收费淘宝客主题：xTaoke加强版 http://www.jo2.org/archives/269.htm http://www.jo2.org/archives/269.htm#comments Thu, 05 Jan 2012 07:40:13 +0000 十年灯 http://www.jo2.org/?p=269 我的wordpress主题：淘宝客主题xTaoke加强版新鲜发布！加强版由原来的xTaoke主题升级而来，保留xTaoke的所有功能，并加入了更多功能，持续更新中！

售价：49元/套。共计10套，已售出2套。售完即止。购买地址：http://buyibang.com/o/xtaoke

预览地址：http://buyibang.com/

原有功能可到xTaoke主题发布页查看，新增功能介绍如下：

1，方便的自定义网站logo

2，可设置公告，支持html代码

3，便捷插入广告位，分别在顶部，侧边栏和评论区，都有启用开关

4，有购买链接的文章，则会在文章页自动生成购买按钮；反之则无

主题作者：脚儿网，http://jo2.org/

售价：49元/套。共计10套，售完即止。购买地址：http://buyibang.com/o/xtaoke

主题特色简介：

  1. 方便的输入商品信息
  2. 淘宝链接加密
  3. 自定义网站logo,公告
  4. 自定义广告位
  5. 简单网站前端特效

售后服务：

购买本主题后，你可以得到：

  1. xTaoke主题文件压缩包x1;
  2. xTaoke使用说明文档x1;
  3. 一个为你定制的简单的网站3d logo;
  4. 一张为你定制的提示”没有图片“的图片；
  5. 免费的主题升级与维护；
  6. 热心解答所有使用过程中的问题。

下单前请先联系我，谢谢

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/269.htm/feed 3 notepad++转换文档格式 http://www.jo2.org/archives/265.htm http://www.jo2.org/archives/265.htm#comments Thu, 05 Jan 2012 06:15:07 +0000 十年灯 http://www.jo2.org/?p=265 说明：这里的文档格式不是指常说的ANSI,UTF8什么的，而是windows文档，Unix文档与Mac文档。

这三个文档格式有什么不同呢？简单的说就是换行符各不同。这几天一直在折腾xTaoke主题，本来我在本地早调试好了的，结果上传到网站（linux系统）却发现错误百出，用wp自己的主题编辑功能打开一看，原来所有主题代码文件都变成了不换行的形式…

我也不是第一次修改主题了，之前也碰到这种情况，一般是文件编码的问题，比如utf8与不带BOM的utf8啦。结果这次怎么改文件编码都不对。后来我发现notepad++的【设置–首选项–新建】里面可以设置新建文档为unix文档，于是我就新建了一个unix文档并把一个PHP文件代码复制进去，覆盖保存，咦，这个文件就对了。

npp设置

npp设置

然后我注意看了下，发现notepad++的状态栏上就有当前文档的文档格式。

npp状态栏文档格式

npp状态栏文档格式

有的文件这里显示的是Unix,甚至还有一个是Mac文件，汗

经测试发现Unix文档格式则不会导致上传到linux空间换行失效（当然，linux=unix)，所以我需要把我的主题文件都转化成Unix文档。

挨个儿查看菜单，终于被我找到了更换系统文档格式的地方：

npp转换文档格式

npp转换文档格式

菜单位置：【编辑–档案格式转换】，即可在windows,unix与mac文档之间互相切换。

———————————–

不多说了，我继续折腾主题去了。

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/265.htm/feed 3 wordpress3.3，升还是不升呢？ http://www.jo2.org/archives/264.htm http://www.jo2.org/archives/264.htm#comments Thu, 29 Dec 2011 08:45:59 +0000 十年灯 http://www.jo2.org/?p=264 不知道准不准，自从firefox升级速度变得越来越快后，我发现我使用的一些其他国外产品，如jQuery,wordpress，升级速度也加快了，很小的一个功能也要上跳一个版本号。这样做的直接副作用就是，这个新版本还没摸热呢，下个更新的版本又出来了。

给一张我的测试网站升级到wordpress3.3后的截图。

wp3.3截图

wp3.3截图

实事求是的说，我觉得3.3相对于3.2来说，功能上的改进并没有多少。看看他的这些改变：

  1. 原来的“控制板”被翻译成了“仪表盘”…这个，不重要吧
  2. 简化了后台界面和管理工具条
  3. 据说更高效的固定链接形式
  4. 如图：“仪表盘”左侧的管理菜单现在以侧边下级菜单展现了…
  5. 写文章是上传媒体变成了只有一个按钮（图片，视频，音频都在这一个按钮里），支持拖拽上传（这功能不错）

改动得真的不算多，但如果我升级，代价是巨大的。主要就是我之前对wordpress的改动就基本失效了，得重来一次，其中我最受不了的就是wordpress的1分钟就自动保存草稿的功能…

如果哪天wordpress推出了一个可以禁用自动保存或者自行设置自动保存时间间隔的版本，我立马升级！绝无二话！

用bShare分享或收藏本文

随机日志

]]> http://www.jo2.org/archives/264.htm/feed 3 flash不利于seo？谈谈补救方法 http://www.jo2.org/archives/262.htm http://www.jo2.org/archives/262.htm#comments Mon, 26 Dec 2011 03:57:00 +0000 十年灯 http://www.jo2.org/?p=262 flash seo补救措施

flash seo补救措施

 

flash的优点是能制作出迷人的网页特效，这点JS基本比不上。但flash的一大缺点就是seo差劲，对搜索引擎来说，一个flash文件基本就像一个打不开的保险箱，里面的资料什么的都没法查看。

如果你用flash为网站做了一个漂亮的导航菜单，先别忙沾沾自喜，因为你的这个菜单对搜索引擎来讲等于没有，起不到导航的作用。

不过我觉得这是可以补救的，只是需要一点点额外功夫。

先讲一下原理:漂亮的flash是给用户看的，搜索引擎看不到。那我们为什么不再写一份专门给搜索引擎看的呢？

就拿导航菜单来说吧，你可以用html代码将你的导航菜单的内容写下来，如：

<ul>
	<li><a href="#" title="">menu1</a></li>
	<li><a href="#" title="">menu2</a></li>
	<li><a href="#" title="">menu3</a></li>
</ul>

也许你会说，还要专门给搜索引擎写一份哪！多麻烦啊靠！其实并不麻烦，因为这和平时写的html代码不一样——这是给搜索引擎看的。所以，这段代码不需要CSS，不需要图片，不需要任何定位，只加个display:none就行了。相信这对任何一个web前端来说都不是难事。

如此一来，用户看到的是漂亮的flash菜单，而搜索引擎看到的是直观的html菜单，各取所需，互不干扰。

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/262.htm/feed 0 QQ2011的朋友面板隐藏设置 http://www.jo2.org/archives/260.htm http://www.jo2.org/archives/260.htm#comments Sat, 17 Dec 2011 12:09:46 +0000 十年灯 http://www.jo2.org/?p=260 前不久我的破本本上被朋友装上了最新版的QQ2011，突然发现多了个“朋友”面板。这是继微博面板后QQ上再次新增的一个面板。不过我觉得嘛，对我来讲没什么用，好像这是和朋友网关联的，而我并没有使用过朋友网。

这个朋友面板和微博面板一样是可以隐藏的，而且设置位置都一样。在QQ主面板你的头像下面的区域，鼠标右键一下，选界面管理器，切换到“其他”，取消朋友那里的勾选，确定后，在主面板上就看不到朋友了。如图：

隐藏朋友面板

隐藏朋友面板

我还发现QQ2011在主面板底部右键已经没反应了，原来本来也是会弹出界面管理器的。不过主面板右下角多出了一个叫”应用盒子”的东西，打开里面一堆的东西。。。额，不过大部分都没用过啊，残念

用bShare分享或收藏本文

]]> http://www.jo2.org/archives/260.htm/feed 1