<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>随网之舞WEB</title>
	<atom:link href="http://dancewithnet.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://dancewithnet.com</link>
	<description>WEB Design{HTML:CSS:Javascript:DOM:AJAX:PHP:Usability}/Viewpoint/Photo/Food/Mood</description>
	<lastBuildDate>Mon, 18 Jul 2011 02:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>《高性能网站建设进阶指南》译者序和样章</title>
		<link>http://dancewithnet.com/2010/04/21/even-faster-websites/</link>
		<comments>http://dancewithnet.com/2010/04/21/even-faster-websites/#comments</comments>
		<pubDate>Wed, 21 Apr 2010 15:30:25 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[web2.0 & so on]]></category>
		<category><![CDATA[Steve Souders]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[性能]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/?p=1508</guid>
		<description><![CDATA[经过大半年的努力和等待，口碑网前端团队5位成员共同翻译的《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》终于面市了。翻译的过程本身就是学习的过程，又... ]]></description>
			<content:encoded><![CDATA[<p>经过大半年的努力和等待，<a href="http://ued.koubei.com">口碑网前端团队</a>5位成员共同翻译的<a href="http://book.douban.com/subject/4719162/">《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》</a>终于面市了。翻译的过程本身就是学习的过程，又经过了在口碑网的实践，我们深刻地感受到本书内容不仅和每个Web开发者的日常工作结合得非常紧密，而且对于每个开发者都有着重大的指导意义。在此，我们诚恳地向所有的Web开发者推荐本书，欢迎大家就本书内容进行交流、批评和指正。</p>
<p>本书的主要作者Steve Souders是<a href="http://book.douban.com/subject/3132277/">《高性能网站建设指南（high Performance Web Sites）：前端工程师技能精髓》</a>的作者，Web性能优化领域的权威，前Yahoo!首席性能工程师，现在Google负责Web性能和开源组织。他是Firebug的性能分析扩展<a href="http://developer.yahoo.com/yslow/">YSlow</a>的创建者，也是O&#8217;Reilly Web性能与运作会议Velocity的联合主席。通过他的个人网站<a href="http://stevesouders.com/">http://stevesouders.com/</a>能了解全球最新的Web性能动态和技术发展。</p>
<p><span id="more-1508"></span></p>
<h3>译者序</h3>
<p>“信息网络的扩展正在为我们的星球建立一个新的神经系统”，而Web正是我们与这个系统对接的最重要平台。现在，信息与用户量在Web平台上呈爆炸式增长，用户与Web界面的交互越来越复杂，会话时间也越来越长，速度已经成为Web产品使用体验好坏和市场成败的最重要指标之一。在Google，网页呈现速度慢500毫秒将丢失20%的流量；在Yahoo!，慢400毫秒将丢失5%~9%的流量；在Amazon，慢100毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。所以作为Web开发者，我们不会满足现状，要让网页变得更快更好。</p>
<p>本书作者Steve Souders在他上一部震惊业界的大作《高性能网站建设指南》中告诉我们，Web的80%~90%的性能由前端决定，并为提升Web性能设置了14条规则。本书中，Souders与8位Web开发界顶级大牛（<a href="http://almaer.com/blog">Dion Almaer</a>、<a href="http://dancewithnet.com/2009/03/29/douglas-crockford/">Douglas Crockford</a>、Ben Galbraith、Tony Gentilcore、Dylan Schiemann、<a href="http://phpied.com">Stoyan Stefanov</a>、<a href="http://stubbornella.org">Nicole Sullivan</a> 和 <a href="http://www.nczonline.net">Nicholas C. Zakas</a>）通力合作，一起向我们传授让网站速度更快的思想和原则，以及相应的技术和工具。它是上一部作品的进阶之作，如果说上一部作品使Web开发者有机会实现高性能的网站以满足当前用户的需要，那么本书将帮助我们立足现在更着眼于未来，以实现超出用户期望的速度体验。</p>
<p>Web的高速发展让开发者应接不暇，开发者应该把智慧、时间和精力放在用户最需要的地方，因此在做性能优化时不能盲目行动、捉小放大，需要事前有效评估找到重点，事后建立监控和保证机制，把有规律的、重复的、精确的工作交给机器去做。9位大牛把众多的思想、原则、方法和自动化工具融汇到这本书中，让Web开发者有机会站在巨人的肩上，借助于全球业界的最新成果，用自己的智慧、行动和坚持开发出令人赞叹的Web产品来。</p>
<p>如果你稍加留心就会发现，这两本书副标题的变化很有趣，第一本书的副标题是“前端工程师技能精髓”，而本书的是“Web开发者性能优化最佳实践”。Web性能优化不只是前端工程师的工作，而是需要所有Web开发者协作完成。在实际工作中，如果没有人关注Web性能，那么，不管我们作为Web开发者的哪种角色都应该挺身而出勇于担当，不仅要担当建设高速网站的责任，还要担当Web性能优化的布道义务，团结一切可以团结的力量。这是我们所有Web开发者的使命。在口碑网我们已经开始这样做了，前端工程师与对此有兴趣的后端工程师和产品经理一起组建了一个虚拟的Web性能优化团队，在完成工作之余，一起学习、研究、分享、布道和推动性能优化项目。虽然刚刚开始，但是已经有了一些令人欣喜的成果，这就是团结的力量。</p>
<p>本书由口碑网前端团队的鄢学鹍（三七）、郑旭东（正旭）、刘志涛（钨龙）、崔明达（灵佑）和姜凡（展炎）协作译成。翻译的过程也是自我学习、应用实践和总结提升的过程，我们深感本书的博大精深，同时也感到自己知识面的浅薄狭窄。我们把学习和实践本书思想及方法过程中收获的心得和相关资料作为译注补充在译文中，希望会对大家有所帮助。我们深信学习本书正是学习大牛思想、提升专业技能的最好途径之一，把它的精华最精确地传递给每位读者是我们现在的想法和最大动力。</p>
<p>感谢博文视点引进如此高品质的图书，这让中国的Web开发者可以从中受益，进而为更多用户提供更快速的Web使用体验。除了封面上列出的译者外，还有很多人为翻译这本书倾注了智慧和汗水。编辑徐定翔老师，包容了我们交稿的一次次延期，正是由于他的信任、帮助、支持和耐心指导才让我们能有这样一次边学习、边成长、边共享的宝贵经历。编辑白爱萍老师负责译稿的统稿编加，她的专业、仔细和辛勤工作保证了我们阅读本书时的良好体验。可爱的同事林枝萍（般若）、高嘉峻（伯灵）、全鑫（泉心）、闻明（阿苏）、沙峰（善朋）、曾焕数（合沙）、王维锋（元天）、严斌锋（邦彦）、何莹莹（冰浠）、周炼（灵落）等，给了我们热情的建议和细心的校对，有效地提升了本书的品质。要特别感谢淘宝网前端团队的赵泽欣（小马）、王保平（玉伯）和郑叶飞（圆心）3位同学，在百忙之中帮我们校对重要章节，解决疑难问题。如果没有家人和同伴的支持，是很难做好翻译的，在此向所有关心和支持我们的朋友表示衷心的感谢！</p>
<p style="text-align:right;">口碑网前端团队<br />
三七 正旭 钨龙 灵佑 展炎 <br />
2010.02.25 于杭州</p>
<h3>样章等相关信息</h3>
<ol>
<li>样章：
<ol>
<li><a href="http://www.slideshare.net/kavenyan/ajax-3803778">第1章，理解Ajax性能，Douglas Crockford</a></li>
<li><a href="http://www.slideshare.net/kavenyan/03-3803769">第3章，拆分初始化负载，Steve Souders</a></li>
</ol>
</li>
<li>任何交流、建议、批评和指正请<a href="mailto:kavenyan@gmail.com">写信给kavenyan@gmail.com</a></li>
<li><a href="http://www.china-pub.com/196626">购买《高性能网站建设进阶指南》</a></li>
<li><a href="http://book.douban.com/subject/discussion/23168459/">《高性能网站建设进阶指南》目录表</li>
<li><a href="http://book.douban.com/subject/4719162/">豆瓣上的《高性能网站建设进阶指南》</a></li>
<li>封面：<br /><a href="http://book.douban.com/subject/4719162/"><img src="http://dancewithnet.com/wp-content/uploads/2010/04/even-faster-web-sites.png" alt="" title="《高性能网站建设进阶指南：Web开发者性能优化最佳实践（Even Faster WebSties）》" width="640" height="856" class="alignnone size-full wp-image-1509" /></a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2010/04/21/even-faster-websites/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>闭上眼睛，WEB就不存在了吗？</title>
		<link>http://dancewithnet.com/2008/04/10/care-of-eyes-free-web/</link>
		<comments>http://dancewithnet.com/2008/04/10/care-of-eyes-free-web/#comments</comments>
		<pubDate>Thu, 10 Apr 2008 14:53:53 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[爱想想爱写写]]></category>
		<category><![CDATA[WEB]]></category>
		<category><![CDATA[健康]]></category>
		<category><![CDATA[眼睛]]></category>
		<category><![CDATA[过劳死]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/?p=1277</guid>
		<description><![CDATA[最近几天眼睛一直不舒服，感觉眼皮很重仿佛肿了，盯着屏幕就感觉很累，总想闭上眼睛。不舒服归不舒服，但是轻伤不下火线向来是优良传统，所以就拿了两根火柴撑着眼皮继续盯着屏幕上... ]]></description>
			<content:encoded><![CDATA[<p>最近几天眼睛一直不舒服，感觉眼皮很重仿佛肿了，盯着屏幕就感觉很累，总想闭上眼睛。不舒服归不舒服，但是轻伤不下火线向来是优良传统，所以就拿了两根火柴撑着眼皮继续盯着屏幕上的WEB。但今天早上突然看到了<a href="http://www.junchenwu.com/2008/04/posner_schlossman_sydnrome.html">JunchenWu的《青光。》</a>，特别是其中的提醒：</p>
<blockquote><p>所以提醒各位 IT 从业者，注意用眼，尤其是设计师朋友们。即使有时并不觉得疲劳（因为每个人眼睛的适应性不一样），但也得固定时间休息。有条件的话，可以定期去做眼压测试或其他眼科方面的检查。如果出现任何不适的症状，立即去医院检查，以免延误治疗。</p></blockquote>
<p>想想闭上眼睛的感觉，下午就还是请了假，问了杭州的同事，直奔浙二医院。挂了专家号，等了一个多小时，一个老专家用了两分钟，随便问几句看几眼，得出了结论“没什么事，视疲劳”，开了贝西迪牌倍他胡萝卜素胶囊和威可达牌维生素B<sub>12</sub>滴眼液就打发我走了。貌似视疲劳大家或多或少都有吧，没事到看看<a href="http://zhidao.baidu.com/topic?ct=29&#038;tn=iktopic&#038;word=%CA%D3%C6%A3%C0%CD">视疲劳的相关资料</a>，开始保护眼睛吧。<span id="more-1277"></span><br /><a href='http://dancewithnet.com/wp-content/uploads/2008/04/eye-online.jpg'><img src="http://dancewithnet.com/wp-content/uploads/2008/04/eye-online.jpg" alt="eye online" title="eye-online" width="500" height="346" class="alignnone size-full wp-image-1279" /></a></p>
<p>前几天去看一个在浙大读研的高中的老同学，他很不幸得了急性淋巴细胞性白血病，和他聊天时，谈的最多的是IT民工，他强调最多的是高强度的工作和锻炼身体。想起很早以前转的<a href="http://dancewithnet.com/2005/01/02/it-killer-karoshi/">《过劳死—-IT界杀手》</a>和这篇<a href="http://health.163.com/05/0823/14/1RRJVAJ400181ABA.html">《“过劳死”27个危险信号》</a>，对照对照，发现似曾相识的事情如此之多，从现在开始善待自己吧，保护眼睛、保护颈椎、保护自己。</p>
<p>虽然现在眼睛好多了，但还是下线睡觉去了，善待自己，从小事做起。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2008/04/10/care-of-eyes-free-web/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>网页一屏有多大？</title>
		<link>http://dancewithnet.com/2007/03/30/how-much-is-one-screen-of-web/</link>
		<comments>http://dancewithnet.com/2007/03/30/how-much-is-one-screen-of-web/#comments</comments>
		<pubDate>Fri, 30 Mar 2007 15:48:18 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[UX & Usability]]></category>
		<category><![CDATA[1屏]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[WEB]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/03/30/how/</guid>
		<description><![CDATA[网站设计时，有一个最常用的指导性原则：页面长度原则上不超过3屏，宽度不超过1屏。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条... ]]></description>
			<content:encoded><![CDATA[<p>网站设计时，有一个最常用的指导性原则：<strong>页面长度原则上不超过3屏，宽度不超过1屏</strong>。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条，这几乎是目前的设计准则。那么这里的一屏到底是多大呢？<span id="more-945"></span></p>
<p>普通用户通常浏览网页时，其浏览网页的有效面积会受到下面几个方面的影响：</p>
<ol>
<li>显示器的分辨率<br />
  这个由科技发展和用户购买力及喜好决定，其数据取决于统计。</li>
<li>操作系统<br />
  毫无疑问目前是Windows的天下，其中WindowsXP占绝大多数。</li>
<li>网页浏览器<br />
  IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。</li>
<li>个人定制<br />
  主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式，但是总体上这部分应该属于高级用户，绝大部分用户依旧会使用操作系统和浏览器的默认样式。</li>
</ol>
<p>下面是关于浏览器和屏幕分辨率的统计数据：<br /><img src='http://dancewithnet.com/wp-content/uploads/2007/03/browser.png' alt='W3Counter于2006.11.12发布的全球统计数据' width="446" height="319" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.w3counter.com/globalstats/">W3Counter</a>于2006.11.12发布的全球统计数据<br />
<img src='http://dancewithnet.com/wp-content/uploads/2007/03/browser-1.png' alt='国内某知名站点2006年10月份的数据' width="472" height="200" /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;国内某知名站点2006年10月份的数据</p>
<p>由上面的数据可以得出：</p>
<ol>
<li>基本上用户分辨率都在800×600以上，绝大部分都在1024×768以上，从全球情况来看，800×600的分辨率会越来越少。</li>
<li>国内浏览器依旧是IE6的天下，这将会持续较长的时间。从全球市场来看，国内的Firefox2.0和IE7会逐步增长，特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市，IE7增长会更快。</li>
</ol>
<p>所以计算一屏大小应基于以下原则：</p>
<ol>
<li>一屏指绝大部分用户的浏览器显示网页的有效可视区域。</li>
<li>一屏的计算环境是Windows XP和浏览器均处于默认样式。</li>
<li>由于IE无论是否超过一屏都存在纵向滚动条的位置，Firefox和Opera是在页面超过一屏的时候出现纵向滚动条，且浏览绝大部分网页都有纵向滚动条的存在，所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。</li>
<li>由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏，而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页，所以一屏大小在Firefox中指多窗口的控制栏存在时。</li>
</ol>
<p>下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果：</p>
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th colspan="6">有效可视区域（单位：px）</th>
</tr>
<tr>
<th rowspan="2">屏幕</th>
<th colspan="2">一</th>
<th colspan="2">二</th>
<th colspan="2">三</th>
</tr>
<tr>
<td>800</td>
<td>600</td>
<td>1024</td>
<td>768</td>
<td>1280</td>
<td>1024</td>
</tr>
</thead>
<tbody>
<tr>
<td>IE6.0</td>
<td>779<small>(+21)</small> </td>
<td>432<small>(+168)</small> </td>
<td>1003<small>(+21)</small> </td>
<td>600<small>(+168)</small> </td>
<td>1259<small>(+21)</small> </td>
<td>856<small>(+168)</small> </td>
</tr>
<tr>
<td>IE7.0</td>
<td>779<small>(+21)</small> </td>
<td>452<small>(+148)</small> </td>
<td>1003<small>(+21)</small> </td>
<td>620<small>(+148)</small> </td>
<td>1259<small>(+21)</small> </td>
<td>876<small>(+148)</small> </td>
</tr>
<tr>
<td>Firefox2.0</td>
<td>783<small>(+17)</small> </td>
<td>417<small>(+183)</small> </td>
<td>1007<small>(+17)</small> </td>
<td>585<small>(+183)</small> </td>
<td>1263<small>(+17)</small> </td>
<td>841<small>(+183)</small> </td>
</tr>
<tr>
<td>Opera9.0</td>
<td>781<small>(+19)</small> </td>
<td>461<small>(+139)</small> </td>
<td>1005<small>(+19)</small> </td>
<td>629<small>(+139)</small> </td>
<td>1261<small>(+19)</small> </td>
<td>885<small>(+139)</small> </td>
</tr>
</tbody>
</table>
<p>关于上面数据的解释和一些其他事实：</p>
<ol>
<li>在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445，Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似，所以相同分辨率下应该比Windows XP默认的样式要大。</li>
<li>知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积，比如1024×768下IE7.0的可视面积是（1024-21）×（1024-148）</li>
</ol>
<p>综合上面所有的数据，结论如下：</p>
<ol>
<li>最保守而最有兼容性的一屏大小是：<strong>779×432</strong></li>
<li>最广泛的一屏大小是：<strong>1003×600</strong></li>
<li>适合目前国内的情况，一屏大小是<strong>779×600</strong></li>
</ol>
<p><ins datetime="2011-03-21T22:13:38+8:00">2011.03.21，近4年过去了，今天在<a href="http://www.chencheng.org/blog/archives/design-fp-line.html">陈成关于设计稿标注首屏线的确定始末</a>中的总结，发现作为设计的首屏600px并未发生变化，可见屏幕的大小还是在一定范围内徘徊，同时前端加载的首屏是710px，这样能够覆盖80%的用户，不过从<a href="http://img01.taobaocdn.com/tps/i1/T1kTR3XXFbXXXXXXXX-599-196.png">曲线图</a>来看，我认为740px作为前端加载的首屏可能更合适，较小的代价覆盖了88%用户。</ins></p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/03/30/how-much-is-one-screen-of-web/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

