WEB前端

本文翻译自：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html

当你使用Page Speed剖析一个web页面时，它要通过许多不同的规则（rules）去评估页面。这些规则是来自前端的最佳实践，你可以应用在web开发的任何阶段。我们这里提供这些每个规则的文档, 所以不管你是否使用Page Speed这个工具（也许你仅仅是开发一个全新的网站，且并不准备对它进行测试），你任何时候都可以从本文档获益。我们给出特定的提示和建议让你可以最好的应用这些规则，并将它们融入到你的开发过程。

关于性能最佳实践

Page Speed是从前端的视角衡量性能，典型的是从页面加载时间（page load time）来衡量，它是从一个用户请求一个新页面到页面完全被浏览器渲染显示之间的时间差。 页面加载时间优化的最佳实践涉及到多个步骤，包括解析DNS名称、建立TCP连接、发送HTTP请求、下载资源、从缓存获取资源、解析和执行脚本，和在页面上渲染对象。

理想的Page Speed对页面性能的衡量，既要同时消除这些步骤、进行并行处理，还要减少它们完成的时间。最佳实践被分成五类，涵盖了页面加载优化的不同的方面：

• 优化缓存——保持你的应用的数据和逻辑同时离线
• 尽量减少往返时间——减少请求-响应周期序列的数量
• 尽量减少请求大小——减少上传的大小
• 尽量减少负载大小——减少响应、下载和缓存页面的大小
• 最优化浏览器渲染——改善浏览器的页面布局

今天在浏览JosephJ的博客的时候，看到一篇标题为：英國 Yahoo! 行的意外收穫的文章。（http://josephjiang.com/entry.php?id=140）

当我看到他在介绍Accessibility的时候，并且介绍到Artur Ortega : 盲人軟體工程師的时候，我觉得我总算明白了，结构语言化的真谛。

在第三期交流会的时候，我们也提到了这个问题，而且他所说的这一点也证实了我们当时的说法：适应于各种终端，并且适用于所有的群体（看的，听的）。

下面是摘自他文章的一段话：

他很熱情地跟我介紹了他是如何操作電腦的，原來他大多時間是透過 Screen Reader
先了解整份文件的結構、有那些大標題（所以 h1 ~ h6 這樣的 Semantic Markup 對他是很重要的）
接著再瞭解列表中有幾個項目，最後才會開始閱讀。

这次交流会主要讨论的话题是：页面重构合理化。

本次讨论分为了三个环节，并且采取了分组讨论，汇总的方式进行。三个环节的小标题分别为：结构合理化、样式合理化及素材合理化。详细的提岗如下：

一、 结构合理化

a) 统一的DTD声明 html4.01 xhtml1.0 html5
b) 通过W3C验证
c) 语义化的html 标记应用
d) 语义扩展 microformats或RDFa
e) Class id命名规则一致性,借鉴html5新标记名称和microformats。
f) SEO

二、 样式合理化

a) 样式的分层管理
i. 公共规则层 reset base layout-rules …
ii. 公共模块层 header footer …
iii. 项目模块层 频道、店铺、检索…
iv. 项目文件夹尽量平级，不要多层嵌套

b) 样式的书写
i. 编码 utf-8避免中文字符造成样式读取问题
ii. 注释 统一
iii. 模块区分，避免代码耦合增加维护难度

c）CSS代码压缩
三、 素材合理化
a) 图片类型合理应用 jpg png-32 png-8 gif
b) 图片字节
c) 图片管理
e) css sprites
f) 图片缓存

通过大家对上述的讨论，最后的结果大致如下：

1、关于dtd声明，html4.01 xhtml1.0 html5这三种声明还是根据公司具体情况来决定，特别是技术水平，因为涉及到有一些开发人员，或者编辑，他们还没有接受xhtml的一些严格要求，故而使用html会更好一些。不过从现场情况来看，使用xhtml过渡型的相对较多。

2、关于W3C验证来说，其实有同学谈到了一点很重要，就是验证可以检测我们在书写代码的一些疏落，比如id重复使用，还有标签未必合等问题，但是问题在于如果我们把 通过标准验证的代码，交给后端开发以后，并且最终上线，就不敢确定页面是否能够通过标准验证了。所以这是一个问题，不过有些公司关于模板这一块就由前端开发程师来实现，这样可以避免这种问题。

我个人觉得，当你书写完代码以后，还是通过一个验证得好，或者是看一看W3C的提示，来确定是否存在严重的BUG，还有一些是否可以不需修改，比如CSS中的为IE6书写的hack：下划线。养成这样良好的习惯。

3、关于语义化的html,其实这个问题大家有一些偏题了，谈到了为什么要进行语义化html，哈哈！不过听了一下，最后我觉得有一个很有道理，就是语义化html标签，有助于适合于更多平台的客户端，而且他还能够适合于更多人群的浏览，比如盲人，他可以通过听来判断出这段话的意思，比如，我们使用了H1标签，这样他可以确切的知道这就是本页面的中心，还有ul标签，他知道这是一个列表。

回到正题，我觉得语义化html其实是一个很庞大的课题，而且现在有时候从原型上，或者视觉设计上来看，无法确定应该使用什么语义的标签，会有很多歧义，像这种情况下，首先作为一名前端开发工作者，应该对html中的每一个标签的含义搞清楚，第二，网站不是前端开发一个人的事，他是一个产品，大家共同在做产品，这种事情应该和交互设计师确切清楚，他这里究竟是一个什么意思，什么概念，他想表述什么，这样一来，我觉得在做语义化的html的时候，就会容易得多。其实这里的语义化html，就是我们经常嘴里谈到的结构语义化，结构最重要，WEB标准的精髓就在于结构语义化。

4、关于微格式与RDFa这个问题，在场的大多数人都不太了解，所以没有太多的答案，其实这个东西我个人觉得他和我们的命名语义化应该是有很大的关系，所以如果你对此感兴趣，可以到网上去搜索一下，对他进行进一步的了解，对这两个名词，如果大家对此特别感兴趣，我们后期也可以进行专题的讨论。

5、Class、id命名规则一致性，其实说句实在的，这个问题其实对于前端开发工程师来，应该是一个很困扰的问题，因为不知道是使用英文命名还是拼音命名，因为作为中国人，英文水平比较菜。这一点比较悲哀，还有就是关于命名的问题，其实也是一个很大的话题，我建议可以专开一个专题进行讨论，因为我觉得今天的讨论结果，并不理想。

但有人提到了作为重构人员建议只使用class，不要使用Id，把id留给后端工程师或者JS工程师来做，我不同意此观点。

id和class作为css、js与html的一个挂钩，而且有时候我们必须使用ID来明确，语义这个模板，而且不管是xhtml,css还是js，其实他们都属于前端开发工程师的职责，但是有些公司会把css和js分成两个不同的职位，可以，分工明确，但是我不太喜欢这样的分工，如果遇到这种情况，职位与职位之前完全可以通过规范来约束，而不是说不用id，我觉得这有些霸道了，而且有实为不妥。

5、关于SEO的问题，这个就很难说了，从结构语义化的角度来看，他也算是为SEO服务器的，但是具体各搜索引擎怎么抓取页面数据的，怎么去判断的，这就不太清楚了，但是我曾经从谷歌的文档中有看到，他们对h标签是有权重的。

6、其实第二大点，关于样式的合理化，这个问题，我觉得也太大了，而且讨论的时间不是很长，我觉得关于样式的分层管理的问题，在第一次克军说的分为三层就比较合理，第一层，是整站的公共样式，第二层，频道的公共样式，第三层，本页面的个性样式。这样分层就比较合理。这样从谷歌的pages speed的检测上也说得过去，因为他不会检测到对于本页面多余的css代码。关于css的书写，这个的话，其实他又与结构中的class和id定义有关系了，这个问题，我后期专门写一个文章和大家讨论。看是否可行。

7、关于素材的合理化，那主要谈到了背景图片的问题，其实我觉得这个问题，有待研究，今天有位同学说得很对，图片的优化是无止境的，这一点我是同意的，而且听说国外有专人的有写相关的文章，如果你有兴趣，可以去搜一下，今天的交流会主要讨论到了背景图片的使用格式，其实目前来看，主要还是png-8的使用，当然还有一些同学在使用gif，因为他们对png-8有一些误解，当然色值超过256色的，还是得使用jpg，因为这样存储的效果比其他格式更好，而且得到的文件会更小。还有就是我建议就是当你的图片需要发布的时候，可以使用ywlow的工具进行进一步的无失真的压缩，以保证图片的最小化。

还有就是背景图片的缓存问题，其实在IE6下是有一个BUG的，在网上有一个关于IE6背景图片闪烁的问题，其实就是因为背景图片不被缓存的原因造成的，但是我觉得这个问题我们可以忽略，因为我们需要将IE6从这个大的互联网圈子中淘汰出局，这可能是一句不太负责任的话。

内容大概就这些，如果我有想到其他的，到时候在补充。谢谢各位支持交流会的同学们，也谢谢参加了交流会的同学们，希望你们也能总结一下你们参加这次交流会的心得，同时如果你们对交流会有什么意见或者建议，请告诉我。

一个公司的老板，或者说老大级人物，他其实都是非常关心自己的产品。

从腾讯的马化腾，新浪的陈彤，巨人网络史玉柱，包括我们公司（浪淘金）在内，他们都非常关心自己的产品，并且也会亲自去体验，尝试自己的产品。

可想，如果一个产品做出来以后，连老板的这一关都过不来，你觉得….嘿嘿，说得有点大了。还是单从前端开发说说吧。

如果你的老板在浏览自己公司产品的时候，发现到处都是错位，或者其他的问题，你觉得他能坐得住吗？恐怕不能吧!

所以我在想，如果互联网的老大都用的是基于标准的浏览器，这样是不是对于WEB标准的推动会更好一些呢？

思绪有些乱，哈哈，有什么不妥之处，还请见谅，欢迎拍砖，拍死我！

2009年12月12日, WebRebuild北京第一届交流会在谷歌中国成功举办。虽然天寒地冻，但与会者热情高涨，实际到会人数比预计人数超出两倍多，临时加开了视频同步会场才满足了超员的要求。

Webrebuild.org成立于2007年，致力于推广“Web标准”，促进全国前端开发工作者的交流，提升前端开发的影响力。自成立以来一直受到W3C中国、蓝色理想等组织的大力支持。深圳站于今年已经成功举办三届交流会，为了促进更大范围的交流，于今年正式成立北京站。

本届会议的主题是《悟道web标准》。Web标准在中国走过了不寻常的岁月，在2009年岁末，前端从业者们聚在一起，总结Web标准在中国发展的成果，并展望未来发展方向和奋斗目标。

W3C中国办事处李安琪女士出席本次交流会并致开幕词，谷歌技术用户组主席王开源先生也到会致辞。本次交流会的主要分享主题如下：

· 《网站重构who am i》——Tommy[范俊豪] 

· 《浏览器兼容性问题简介》——黄昊 

· 《一专多长》——Twinsen[梁璟彪] 

· 《分层语义化模板实践》——张克军 

· 《javascript的分层概念》——阿当 

· 《揭秘HTML5及CSS3.0》——鲁超伍 

与会者们也非常有幸借这个机会参观到谷歌中国公司的风采。谷歌不但为会议提供了免费的场地，还提供了免费的饮料。同时也感谢W3C中国办事处、Google技术用户组、谋智网络、华章出版社、图灵出版社、浪淘金、蓝色理想等组织的协助，让这次交流会能够顺利和成功举办。

与会者均是来自各个公司的前端开发人员和Web标准的支持者，现场气氛热烈，内容详实，得到了与会者的高度评价，不管是会议的组织还是会议的内容都让他们非常满意，急切的期待下一次交流会的到来。更值得一提的是W3C中国对本次交流会的高度肯定，本次会议已经更新到W3C官方主页，作为对交流会的认可和支持。

我们感慨中国的W3Cer们共同的努力造就了今天这场当之无愧的业界盛会，也欣慰地看到我们的声音终于传到了W3C美国总部，传到了全球。让我们为之共勉吧。

今天网上闲逛，看到克军写了一句话，恶搞一下。凭着这句话的吸引力，我点进去了。

哇，居然页面倒过来了，页头和页脚翻了一个根头，其实我以前还在想，背景图片是不是可以这样呢，今天至少在页面上看到了。

真好奇，立即启动火狐看了一下，哈哈，找到原因了，马上在试了一下IE，搞定，也OK，哈哈，如果不知道的同学们，我想你们也想知道这是怎么回事吧。

其实就是这个东东在做怪。。。

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

三行代码，分别用来支持moz，webkit和IE的内核的浏览器。

我们看看克军是怎么做的呢，他使用了JS，让代码立即执行的方式。。给页面增加一个<sytle>和相应的样式，并且为body增加相应的class.下面我将他的js代码贴出来。嘿嘿！

<script>
;(function(){
var d = document, n = d.createElement('style'), r='.flip { -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }';
n.type = 'text/css';
if(n.styleSheet){
	n.styleSheet.cssText = r;
}else{
	n.appendChild(d.createTextNode(r))
}
d.getElementsByTagName('head')[0].appendChild(n);
d.body.className += ' flip';
})();
</script>

为了使用document方便，他把document传给了变量d,建立了一个style标签为变量n，把样式的内容传给
了变量r，克军的命名都很简洁。
在为这个n其实就是style标签了type这个属性。
下面是进行判断页面中style有不有属性，如果没有，直接将r，也就是样式的内容放入n中。
如果有，就得使用建立文本并且追加的方式。
我不知道我的解释对不对哈，反正大概意思就是这样的，欢迎指正。
一切准备就绪以后，就将n添加到head中去，在将class增加到body上，这样页面一加载。。。。你的页面就会被旋转180度，当然你可以旋转90度，10度，数字是可以调整的哟。

web标准化交流会在这周六（11月28日）将迎来第二期。不仅如此，webrebuild.org北京第一届交流会也将在12月12日举办。

在搞这个交流会之前，我就有说过，做交流会的目的，是能够真正的以一种轻松的方式，让前端开发工作者聚在一起，共同提高，共同进步的！

在10月31日web标准化交流会第一期结束后，到今天，我都觉得算是比较成功的，因为这必竟是我第一次组织这样的交流会，而且看大家都应该是有收获的。当然我心里也挺高兴的！

可是也是在今天，让我改变了这样的想法，突然那种成功感被掉进了万丈深渊。因为有一个参加过第一期交流会的同学在和我聊天的时候告诉我，其实他在第一期听得是云里雾里，很多都听不懂，太概念。我问他，那既然不懂，当时为什么不提出来呢？他却说害怕别人笑话他。这真是让我惭愧，让我害羞呀，交流会 —- 目的让是能够通过大家共同的努力，共同的沟通，解决自己一些不明白的问题。可是主题提出来了，最后又因为害羞，怕别人看不起，而不问，那做交流会干什么呢？这完全没有达到我的初衷呀！

我真的感觉到很失败。在这么小范围的讨论，像这种以技术沙龙性质的讨论，圆桌形式的讨论，当你参加完以后，都不能把当天的东西吃透的话，那真的….我真的不知道应该组织什么式的交流会才能解决这样的问题了。

其实做交流会，在很多人眼里，认为这是在作秀，这是为了出名，这些其实都不重要：

1、活动是免费的，我们不会因为说，我们为交流会准备过什么，付出过什么，向参与者收费;当然晚上大家一起吃饭，你是需要付费的，因为我也只是一个打工者，甚至没有来参与交流会的某些人收入高。

2、我们谈到了实质的内容，没有说让大家只是来坐一坐，随便说说，而且我们给了每个人发言的机会，我们不是说请大家来，照照相，就开始对外宣传。

所以我认为，我这不是作秀，我不用管其他的活动是怎么样的，至少我们的交流会不是在作秀，我也希望以后参与我们WEB标准化交流会的同学们，不要害羞，不要担心，不管来参与的人有多么的利害，多么的强大，他也是从初学者过来的。而且正是因为他们愿意分享，所以才会和大家坐在一起讨论，他们是非常愿意为大家解答他们知道的问题，当然也愿意和大家一起共同解决大家第一次遇到的问题。

在谈webrebuild.org北京第一届交流会，他是一次人数相对较多的，时间不是非常充裕的，是以嘉宾演讲为核心的交流会，如果想所有人都同时参与到与嘉宾互动中来，恐怕是不太现实的。所以他也是有他的缺陷，但是我却认为，这种方式有一点像以前在学校的时候，师傅引进门，修行靠个人，当然并不是不准参与互动，是完全允许的，如果你对此有疑问，同样可以与嘉宾互动的。

我有看到报名表上，有人的期望是不虚此行。但是我还是要说：虚不虚行，还是得看你自己，得看你自己所期望要的是什么，我们此次交流会是技术为核心的。和大家共同讨论WEB标准为主题的。嘉宾不是圣人，所以他们谈的是他们自己的一些见解，当然如果你参与后，完全不认同他们的观念，必然，我想你可能会觉得虚行一趟，但是我个人觉得不然。

好了，不多说，我想说的就是，交流会不是作秀，做交流会的目的是希望能够让真正参与的人，和真正关注我们交流会的人学到真正的本事！

时间：2009-12-12 13:00 – 18:00
地点：北京 – 谷歌中国办公楼二楼会议室

说明：
webrebuild.ORG的成立日在2007年8月18日，致力于推广“Web标准”，促进全国前端开发工作者的交流，提升前端开发的影响力。自成立以来一直受到W3C中国、蓝色理想等组织的大力支持。深圳站于今年已经成功举办三届交流会。为了促进更大范围的交流，于今年正式成立北京站，定于12月12日在谷歌中国举办webrebuild.ORG北京第一届交流会。
交流会内容：
相互见面、交流、探讨“网站重构，前端开发”的发展路向；其间有精彩分享如下：
twinsenliang——《一专多长》
张克军——《分层语义化模板实践》
阿当——《面向对象思想在css中的应用》
鲁超伍——《揭秘HTML5及CSS3.0》
座谈会费用：活动不收取任何费用，晚餐自愿（AA制）。
预定人数：100人。
活动奖品：由Google技术用户组以及华章出版社提供
与会者要求：
由于场地有限会议采取邀请制，筛选后统一发送邀请函，请持邀请函打印版进入会场。W3C标准爱好者，网站重构和前端开发人员，谢绝一切推销和推广人员参加。
报名表单： http://spreadsheets.google.com/v … qZkJ0aERaay1QTWc6MA。
报名开始和截止日期：
11月19日——11月30日
与会邀请发出：
在12月1号至12月5号，以邮件方式发送邀请函。
致外地同学：
如果你是非北京同学，请提前联系好酒店，大会由于人手有限不能负责住宿的预定，实在抱歉。
主办方：
webrebuild.org
W3C中国
Google Technology User Groups (GTUG)北京论坛
详情页面
http://www.webrebuild.org

“W3C中国官方组织在中国沉睡了多年，总算醒了。”其实这算是对W3C中国的一个误解吧，由于在中国W3C官方人员有限，当时所寻找的突破口不同，故而在WEB前端开发的眼里，W3C中国可以算是属于沉睡状态。

昨天（11.13日）得知W3C中国将在中国进行社区建设的时候，还是挺兴奋的，但是很多也对W3C中国的官方网站提出了很多质疑，作为W3C的制定者，连自己的网站都没有通过验证，而且还有本地链接等等，这样的问题，其实我当时也有这样的疑问，带着这样的疑问，准备今天也去参加一下这个会议，顺便也帮大家拨开云雾嘛，嘿嘿！所以当时我就打了电话到W3C中国办事处，后来是安琪（W3C中国的成员，今天我才知道她的名字）接的电话，我问她是否可以参加，她很热情的告诉我，可以的，如果人员过多的话，我们就得重新准备，因为他们当时只请了几个行业内比较知名的站长和前端开发的工作者吧！不过得到了她的同意，我也挺高兴的。故而今天一大早就过去了，参于了这次社区建设的启动大会，很荣幸。

W3C中国社区建设启动会议

注：本次参加此次会议的人员数为16人，此照片为人数不全照片，W3C中国官方后期应该会上传人数最全的照片

此次大会虽然没有说什么过多的技术的问题，但是我还是感到很高兴，有一种找到组织的感觉，因为我可以告诉大家的是，W3C中国终于醒了，要开始发力对中国进行大力推动W3C这个标准了，作为前端开发的一员，我是感到很高兴的，所以不用我说，你们也应该猜到了，今天讨论的内容了吧，哈哈，其实就是关于W3C中国未来的发展的一些东西。

关于本次会议的具体讨论得出的结论，稍后W3C中国官方会有相关的公告，我在此就不多说了！

让我们共同期待W3C中国的下一步动作吧！

W3C中国官方网站：http://www.chinaw3c.org

WEB标准化交流第一期聚会合照

作为前端开发中的一员，一直希望能够将同行聚在一起，大家聊一聊，相互学习，共同进步，共同推进WEB标准！但是苦无机会。10，31日，10月的最后一天，终于迎来了前端开发的第一次聚会。首先非常感谢身边网[http://shop.360side.com/]给我们提供了交流的场地，也很荣幸的请来了克军，阿当与建斌，作为我们这次技术交流会的主要嘉宾，让他们来和我们一起共同拨开云雾。在此非常感谢他们。此次交流会的主题是：WEB重构中文件的组织。通过此次交流会，我的收获还是颇多的，在此我还是来谈谈我对此次交流会的收获吧：

作为我们日常工作中的WEB重构，主要分为：html,css,js.但是会涉及到的东西就比较多了，有切图，还有可能会嵌套模板程序等工作。故而在此事交流会，建斌提到了作为一名前端开发人员，需要成为一名多面手，一专多长的概念。就是你的前端开发必须要精通，也就是所谓的专，而对于其他的你也必须得了解，甚至会，比如交互设计，视觉设计，后端的程序语言，等等。刚才提到了我们在工作中主要做的就是切图，书写html,css及js.那么我们的文件的组织当然也就是这些东西啦，但是对于html来说的话，他是随着一个设计稿，或者说随着一个页面走的，所以在此，我们就不多说了，主要谈的是：css，js,还有就是背景图片。

根据我的收获我就来谈谈css，js 及背景图片的文件组织吧：

CSS：听完大家的交流以后，我觉得CSS从产品来分，还是比较合理的，首先确定整站的公用样式，比如全局样式，当然就包括html,div,p,ul,li等标签的margin，padding的清零，链接的颜色，整站的基本字体大小，头部，尾部，及一些可以公用的样式，可以作为一个公用的样式文件，对于这个公用样式的话，需要你与交互设计师，视觉设计师一起沟通交流，来确定，如果前期不能确定的话，那么在后期在来进行确定公用样式的话，是非常费力气的。作为 一个好的产品应该是这样的。也许有些人会觉得这个成本是否太高，是不是不太现实，的确有一部分公司的设计稿是一张一张的出的，而且设计师是随心所欲，只要觉得怎么好看就怎么来，根据感觉不出来，是一套整体的风格，如果出现这种情况 ，就得看你的沟通能力了，曾经彪叔有说过，WEB重构就是一场战斗，如果你有看过地下党的片子就清楚，他们里面虽然也有流血牺牲，但是他们很多时间为了避免牺牲，采用的方式就是沟通。所以沟通的技巧也是非常重要的。

有了公用样式以后，那么如果你的站比较庞大的话，那么还会分为频道样式与当前页样式，这样其实频道样式也算是频道的公用样式吧，前面的公用样式是指整站的公用样式，频道样式是指频道的公用样式，那当前页样式呢？就是本页专属的样式，与其他页面没有任何共同点的样式。哈哈，也许有又人觉得这样是不是很复杂呢？而且有三个样式表了，是不是对http请求数的增加呢，很多人应该看过关于前端性能优化相关的书籍或者文章，因为里面提到了http请求数，不过这不用担心，因为现在是开发阶段，还没有到发布的时候，还有就是因为当前页样式是本页专属的，克军的建议是可以直接写在本页的<style />中，还有就是解决http请求数方法很多，我们还会考虑到此页面的访问量，还有就是用户的第一次着陆情况来决定，在发布的时候是采用合并公用样式与频道样式呢，还是分开，在着陆页最多的页面采用空余时间加载这两个公用样式来解决http请求数的问题。

这就是我觉得css的文件组织，个人觉得这种方案还是很不错的，不过当然你得花心思了，嘿嘿，有人会说，项目紧张怎么办？时间来不及怎么办？这些的确都属于事实，有些人还会用生活质量作为借口，来说要把工作之外的时候用来休息，不能用来优化，如果这样的话，那我建议你换一家公司吧，能够有时间真正做一个合格前端开发的公司，这句话不知道又会得罪多少人了。

谈完了CSS，我们来看看JS：如果真正在要讲JS的话，就相对于比较复杂了，最终给出了一个可能一些大公司的操作方式，大部分公司还没有开始使用的方式：按需加载，主要提到的是YUI的load功能，这个我也正在学习中，如果你有兴趣，就和我们一起来学习吧。

嘿嘿，JS讲得比较简单，以后我们会专门增加JS的讨论，饭一口一口吃，路一步一步走，不要想一口吃个大胖子。

现在我们来讲讲图片，其实在我们的工作中主要分为两类图片：修饰图片（背景）与内容图片，由于内容图片主要是内容部门做的事情，我们涉及的比较少，我们主要涉及到的还是背景图片，但是在说内容图片之前，我还是建议大家给自己的公司建议，内容图片尽量压缩到最优化。什么是是最优化，就是在不影响图片质量的情况下的最小化。

对于背景图片，当然就会谈到背景图片的格式，因为格式可以影响到图片的大小及质量。还有就是背景图片的个数，他会影响到http请求数，所以我们需要对背景进行整合，就这就是国外所称的：CSS Spirits。

关于背景图片的格式，建议使用png8,这是我最热衷的，不过有时候因为设计师做出一些半透明的效果，故而只有使用png24,这个你可以和你的设计师商梁，因为现在ie6还占据了很大的市场，如果使用png24的半透明，就必须使用滤镜，不然在IE6下没法交差，不过还有一种办法就是单独针对IE6用一种有别于其他浏览器的背景图片，不过这样个人觉得没有什么必要，使用滤镜的风险还是挺大的，不仅仅降低页面的效果，甚至有可能让用户在访问你的页面的时候浏览器掉挂，所以本人暂时不建议使用 png-24。当然克军也提到了如果有动画效果的背景，就得选择使用gif格式。至于什么jpg这类的图片，在我的工作中，几乎很少使用，因为超过256色的背景图片还是非常之少的，不过有这种情况，就是整个页面的头部有一个大背景，但是 如果设计师把控得好，也可以使用png-8的。

关于背景整合的问题，其实也提到了，是将整站背景完全整合在一起呢？还是如何整合呢？方案是还是按CSS规则进行，就是全部公用的整合在一张上，频道公用的整合，单独使用的整合。当然还有一些会被频繁更换的背景，这时候就得小了，也可以整合，这你就得考虑清楚，将他们放在整合的背景中的什么位置，便于你更换。克军还提到了关于背景图片的使用，使用dataURI的方式，这种方式听说不会产生http请求数，这个我还得找时间学习学习。

这些基本就是整个交流会的主要内容，当然在这个过程我们引入了SEO，换肤，还有一些CMS相关的内容。如果谁对此有兴趣，可以单独和我们来聊，在此就不在多说了。

这是我们WEB前端开发交流线下第一次活动，在活动的准备上还是不够充分，比如没有提醒大家带上水，还有忘记了自我介绍的环节，不过也好，轮到自己的时候，在自我介绍，可以节约时间嘛，嘿嘿，不过下一期我们将有所改进，在错误中找到自己，嘿嘿，非常感谢来参加此次交流活动的同行们，谢谢你们。

有了你们的支持与参于，我相信前端开发会强大起来的。

参加此次活动的朋友们的分享：

克军：http://hikejun.com/blog/?p=466&cpage=1

建斌：http://www.greengnn.org/index.php/2009/11/01/club.html

期待其他同学的文章，由于本人水平有限，文章内容有不全之处，希望其他同学提醒，补充。

感觉崔凯[http://uicss.cn/]同学为我们照相，非常感谢。有了同学们的共同努力，让我们顺利的，并且成功的完成了第一期交流会，期待第二期的交流会。

顺便说一句：这是我们WEB标准化交流会的第一期，我们计划每月的最后一个周六举行，我们必须以WEB标准作为主题，以轻松的方式进行技术交流。

鉴于WEB标准化的范畴，后期我们可能将主题变为前端开发交流会。