<?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>Lefter &#187; performance</title>
	<atom:link href="http://lefter.net/blog/tag/performance/feed/" rel="self" type="application/rss+xml" />
	<link>http://lefter.net/blog</link>
	<description>blog of lefter</description>
	<lastBuildDate>Wed, 16 May 2012 03:54:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>本博客重构时的随想-Performance</title>
		<link>http://lefter.net/blog/performanc/</link>
		<comments>http://lefter.net/blog/performanc/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 04:19:34 +0000</pubDate>
		<dc:creator>lujo</dc:creator>
				<category><![CDATA[生活及其他]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[performance]]></category>

		<guid isPermaLink="false">http://ilujo.cn/?p=398</guid>
		<description><![CDATA[在进行本博客改版和重构的时候，手头正好有本《Hight Performance Web Site》,改书提到了一下的几个前端性能的优化方案 减少HTTP请求 使用内容发布网络（CDN） 增加EXPIRES头 压缩组建（gzp） 样式放... ]]></description>
			<content:encoded><![CDATA[<p>在进行本博客改版和重构的时候，手头正好有本《Hight Performance Web Site》,改书提到了一下的几个前端性能的优化方案</p>
<ul>
<li>减少HTTP请求</li>
<li>使用内容发布网络（CDN）</li>
<li>增加EXPIRES头</li>
<li>压缩组建（gzp）</li>
<li>样式放在首部</li>
<li>将脚本放在底部</li>
<li>避免CSS执行表达式</li>
<li>外联CSS，JS文件</li>
<li>避免重DNS定向</li>
<li>配置ETA</li>
</ul>
<p>该书开篇提到了一个性能黄金法则</p>
<blockquote><p>仅10%-20%的最终用户响应时间花在HTML文档上，其余时间时间用于下载页面的主键</p></blockquote>
<p>外联css这是没发说的，背景的图片也得到了合并；结合我的博客的结构-主页和博客页面独立，这样我就写了一个公共的style.css，一个blog.css,一个index.css,两个页面都调用style.css然后用@import分别在不同的页面引入blog.css。@import和LINK调用外部样式的区别之一就是，加载顺序的差别，一般来讲：link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载，这样就浏览@import加载CSS的页面时开始会没有样式</p>
<p>然后我去掉所有CSS中的IMAGES发现在整体布局，浏览体验上没的多大的区别，应此我就只是把带有背景图片的CSS样式抽取到单独的CSS文件中，然后@import，目的是让其最后加载！但是这样一来就增加了一个HTTP请求，出于这点我把带有背景图片的样式提取到最后脚本处，目的是让其最后执行！</p>
<p>虽然图片不多，体积也不很小，但是出于追求最优的角度，我思考了！</p>
<p>大多事物都是这样具有不确定性，很多时候，我们寻求的就是在特定条件下的最佳实践，因此我们更应该沉下心来去探原、整理、归纳、总结
<p><ins>在我实践之前才记得，在W3C标准中style定义一般是推荐放在BODY中的应此就没这样干，只是把CSS和图片，感觉加载速度还是不错</ins></p>
]]></content:encoded>
			<wfw:commentRss>http://lefter.net/blog/performanc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

