<?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>刘钢的博客 - 我是UED &#187; 性能</title>
	<atom:link href="http://www.iamued.com/tag/%e6%80%a7%e8%83%bd/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 18 Jan 2012 02:51:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>悟道web标准:前端性能优化</title>
		<link>http://www.iamued.com/qianduan/542.html</link>
		<comments>http://www.iamued.com/qianduan/542.html#comments</comments>
		<pubDate>Tue, 17 Nov 2009 13:15:04 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[性能]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=542</guid>
		<description><![CDATA[前端性能优化完全是一个技术话题，但是对于项目的用户体验有非常大的影响，如果你的网站打开要等待三五秒或者等到浏览器提示无法连接，那网站哪来的流量，哪来的品牌影响和用户忠诚度，挣钱就算了。 3s，作为判断一个用户忍受你网站速度的限度，如果超过3s，用户已经对这个网站产生了负面的抵触心理。 前端性能优化和web标准有什么关系，接着第一篇 悟道web标准——统一思想，遵循标准 ，这是对你遵循web标准的一个补偿或者是对标准的一个认可。 引用: 落后的页面工程师体系，美工代劳的页面代码，唯独IE才能浏览的页面代码，不需要写代码用图形工具直接导出的页面代码，大量的流量消耗的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修改都要打动干戈，重复产生的页面代码，一种让页面工程师和民工一样的页面代码。 我们当然要革命它，取代他，创造全新的页面工程师体系和页面质量，独立的页面工程师完成的页面代码，跨越平台的页面代码，只要能解析页面的设备都能够访问和浏览，手写的页面代码，整齐划一，层次分明，最低流量消耗的页面代码，程序员喜欢的页面代码，访问速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，骄傲的称自己是工程师，书写的也是计算机代码的页面代码。 前端优化正好给Web标准提供了一个检验的机会，用“实践是检验真理的唯一标准”来判断标准化到底好不好，对不对。   前端性能优化了解yahoo性能优化N条的同学应该不会陌生，安装一个YSlow评分并对照着优化就可以了，但是有没有想过为什么要这么做就可以提升速度，这些与Web标准有没有某种关联或者因果呢。 我把这些个条目分成三类，服务端运算优化，传输优化，客户端运算优化： 第一类，服务器端优化 服务器端就是对你的网站的动态语言的执行(asp,php)，数据库查询，存储等速度，总的来说就是输入/输出的运算。这些跟前端没关系，但是影响着前端。YSlow里面没有，鬼知道你网站的服务器性能如何，看不出来，就自行优化服务器性能，数据库性能，多买点服务器扩容。 yslow有一条尽早刷新 Buffer (Flush the Buffer Early)，貌似是不等html完成生成就传输。 提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类，暂时放到这里吧。   落后的页面工程师体系，美工代劳的页面代码，唯独IE才能浏览的页面代码，不需要写代码用图形工具直接导出的页面代码，大量的流量消耗的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修改都要打动干戈，重复产生的页面代码，一种让页面工程师和民工一样的页面代码。   我们当然要革命它，取代他，创造全新的页面工程师体系和页面质量，独立的页面工程师完成的页面代码，跨越平台的页面代码，只要能解析页面的设备都能够访问和浏览，手写的页面代码，整齐划一，层次分明，最低流量消耗的页面代码，程序员喜欢的页面代码，访问速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，骄傲的称自己是工程师，书写的也是计算机代码的页面代码。 前端优化正好给Web标准提供了一个检验的机会，用“实践是检验真理的唯一标准”来判断标准化到底好不好，对不对。   第二类，传输优化 这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是google的方案，把首页做的极其精简，图片，html，静态文件都很小，再就是缓存，把文件放到本地缓存区读取。还有http请求数，减少文件传输中的排队等待。 字节优化： 减少冗余html，结构化，语义化的html来实现，行为，表现，结构分离，独立的html文件将变得很小。 压缩文本文件，css，html，js去掉注释、空格、换行等。 降低图片字节，选择合适的图片类型，png-8是一个好东西，再用工具将图片进行压缩去掉，比如png-8的压缩工具。用合适的图片尺寸，不要把大图控制一下宽高就用上了。 gzip压缩一下，减小服务器端传输到客户端时候的字节。 flash文件和flash+xml的动态flash也减小字节 缓存： 服务器端配置一下，提高缓存的命中率和把不经常修改的文件缓存了。 Add Expires headers、Etags、ajax使用get方式便于缓存。 把能分离出来的css，js分离成外部文件便于缓存。 使flash和xml文件可缓存。 打通不同运营商的限制 CDN提高不同类型运营商的网络传输速度，电信，网通，铁通，教育网统统搞定。 请求数： 减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。 分域提高同时加载数，优化排队等待。 避免404无效请求数。 避免重定向。 延迟加载和预载： 把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。 第三类：客户端优化 讨厌的IE的滤镜和CSS expressions少用，小心把浏览器搞挂，CUP 100%死机。 CSS放到前面，js能放到后面的放在代码后面。将页面尽早展示给用户。 [...]]]></description>
			<content:encoded><![CDATA[<p>前端性能优化完全是一个技术话题，但是对于项目的用户体验有非常大的影响，如果你的网站打开要等待三五秒或者等到浏览器提示无法连接，那网站哪来的流量，哪来的品牌影响和用户忠诚度，挣钱就算了。</p>
<p>3s，作为判断一个用户忍受你网站速度的限度，如果超过3s，用户已经对这个网站产生了负面的抵触心理。<br />
前端性能优化和web标准有什么关系，接着第一篇 悟道web标准——统一思想，遵循标准 ，这是对你遵循web标准的一个补偿或者是对标准的一个认可。</p>
<p><strong>引用:</strong></p>
<blockquote><p>落后的页面工程师体系，美工代劳的页面代码，唯独IE才能浏览的页面代码，不需要写代码用图形工具直接导出的页面代码，大量的流量消耗的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修改都要打动干戈，重复产生的页面代码，一种让页面工程师和民工一样的页面代码。<br />
我们当然要革命它，取代他，创造全新的页面工程师体系和页面质量，独立的页面工程师完成的页面代码，跨越平台的页面代码，只要能解析页面的设备都能够访问和浏览，手写的页面代码，整齐划一，层次分明，最低流量消耗的页面代码，程序员喜欢的页面代码，访问速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，骄傲的称自己是工程师，书写的也是计算机代码的页面代码。<br />
前端优化正好给Web标准提供了一个检验的机会，用“实践是检验真理的唯一标准”来判断标准化到底好不好，对不对。
</p></blockquote>
<p><span id="more-542"></span></p>
<p><span> </span></p>
<p>前端性能优化了解yahoo性能优化N条的同学应该不会陌生，安装一个YSlow评分并对照着优化就可以了，但是有没有想过为什么要这么做就可以提升速度，这些与Web标准有没有某种关联或者因果呢。</p>
<p>我把这些个条目分成三类，服务端运算优化，传输优化，客户端运算优化：</p>
<p><strong>第一类，服务器端优化</strong></p>
<p>服务器端就是对你的网站的动态语言的执行(asp,php)，数据库查询，存储等速度，总的来说就是输入/输出的运算。这些跟前端没关系，但是影响着前端。YSlow里面没有，鬼知道你网站的服务器性能如何，看不出来，就自行优化服务器性能，数据库性能，多买点服务器扩容。<br />
yslow有一条尽早刷新 Buffer (Flush the Buffer Early)，貌似是不等html完成生成就传输。<br />
提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类，暂时放到这里吧。</p>
<p> </p>
<p>落后的页面工程师体系，美工代劳的页面代码，唯独IE才能浏览的页面代码，不需要写代码用图形工具直接导出的页面代码，大量的流量消耗的页面代码，速度慢的像蜗牛的页面代码，程序员看到就头大发麻的页面代码，每次改版修改都要打动干戈，重复产生的页面代码，一种让页面工程师和民工一样的页面代码。</p>
<p> </p>
<p>我们当然要革命它，取代他，创造全新的页面工程师体系和页面质量，独立的页面工程师完成的页面代码，跨越平台的页面代码，只要能解析页面的设备都能够访问和浏览，手写的页面代码，整齐划一，层次分明，最低流量消耗的页面代码，程序员喜欢的页面代码，访问速度超快的页面代码，改版可重复利用的页面代码，让页面工程师抬起头来，骄傲的称自己是工程师，书写的也是计算机代码的页面代码。<br />
前端优化正好给Web标准提供了一个检验的机会，用“实践是检验真理的唯一标准”来判断标准化到底好不好，对不对。</p>
<p> </p>
<p><strong>第二类，传输优化</strong></p>
<p>这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是google的方案，把首页做的极其精简，图片，html，静态文件都很小，再就是缓存，把文件放到本地缓存区读取。还有http请求数，减少文件传输中的排队等待。</p>
<p><strong>字节优化</strong>：</p>
<ol>
<li>减少冗余html，结构化，语义化的html来实现，行为，表现，结构分离，独立的html文件将变得很小。</li>
<li>压缩文本文件，css，html，js去掉注释、空格、换行等。</li>
<li>降低图片字节，选择合适的图片类型，png-8是一个好东西，再用工具将图片进行压缩去掉，比如png-8的压缩工具。用合适的图片尺寸，不要把大图控制一下宽高就用上了。</li>
<li>gzip压缩一下，减小服务器端传输到客户端时候的字节。</li>
<li>flash文件和flash+xml的动态flash也减小字节</li>
</ol>
<p><strong>缓存</strong>：<br />
服务器端配置一下，提高缓存的命中率和把不经常修改的文件缓存了。<br />
Add Expires headers、Etags、ajax使用get方式便于缓存。<br />
把能分离出来的css，js分离成外部文件便于缓存。<br />
使flash和xml文件可缓存。<br />
打通不同运营商的限制<br />
CDN提高不同类型运营商的网络传输速度，电信，网通，铁通，教育网统统搞定。</p>
<p><strong>请求数</strong>：<br />
减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。<br />
分域提高同时加载数，优化排队等待。<br />
避免404无效请求数。<br />
避免重定向。</p>
<p><strong>延迟加载和预载</strong>：<br />
把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。</p>
<p><strong>第三类：客户端优化</strong></p>
<ol>
<li>讨厌的IE的滤镜和CSS expressions少用，小心把浏览器搞挂，CUP 100%死机。</li>
<li>CSS放到前面，js能放到后面的放在代码后面。将页面尽早展示给用户。</li>
<li>减少iframe的使用，避免CPU扛不住。</li>
<li>减少DOM个数，减低浏览器解析压力。</li>
<li>使用 &lt;link&gt; 而不是@importChoose &lt;link&gt; over @import，在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。</li>
<li>提高js的执行效率，话题太大不提了</li>
<li>缩小 Cookie，针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)</li>
<li>还有小图片的repeat背景会提高浏览器的CPU占用。</li>
<li>合理的DOM排序，把重要的内容代码前置，优先加载。</li>
</ol>
<p>再就是些没对号入座的雅虎性能优化的条目。至此可以检验到页面工程师不是盖的，需要对代码、文件，http协议，缓存，服务器等精准的学习和控制，达到提供用户最最基本的体验——访问速度的体验。</p>
<p>Web标准的分离思想和结构化语义化html促成了以上很多条的实施，这是美工时代所不能比拟的。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/542.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

