<br />
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。<br />
一
个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性
必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你
页面的性能产生影响。</p>
<p><strong>19、使用外部JavaScript和CSS</strong></p>
<p>很多性能规则都是关于如何处理外部文件的。但是，在你采取这些措施前你可能会问到一个更基本的问题：JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？<br />
在
实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的
JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，
如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。<br />
关键问题是，外部
JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。如果一
个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。<br />
许多网站没有功能建立这
些指标。对于这些网站来说，最好的坚决方法就是把JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是
网站的主页，如Yahoo!主页和My
Yahoo!。主页在一次会话中拥有较少（可能只有一次）的浏览量，你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时 间。<br />
对
于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置
JavaScript和CSS，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。</p>
<p><strong>20、削减JavaScript和CSS</strong></p>
<p>精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时，所有的注释、不需要的空白字符（空格、换行、tab缩进）等都要去掉。
在
JavaScript中，由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最广泛的两个工具是JSMin和YUI
Compressor。YUI Compressor还可用于精简CSS。<br />
混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并
且在混淆的过程更易产生问题。在对美国前10大网站的调查中发现，精简也可以缩小原来
代码体积的21%，而混淆可以达到25%。尽管混淆法可以更好地缩减代码，但是对于JavaScript来说精简的风险更小。<br />
除消减外部的脚本和
样式表文件外，<script>和<style>代码块也可以并且应该进行消减。即使你用Gzip压缩过脚本
和样式表，精简这些文件仍然可以节省5%以上的空间。由于JavaScript和CSS的功能和体积的增加，消减代码将会获得益处。</p>
<p><strong>21、用<link>代替@import</strong></p>
<p>前面的最佳实现中提到CSS应该放置在顶端以利于有序加载呈现。<br />
在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它。</p>
<p><strong>22、避免使用滤镜</strong></p>
<p>IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的 呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。<br />
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。</p>
<p><strong>23、把脚本置于页面底部</strong></p>
<p>脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1
规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本
时，浏览器就不会同时下载其它文件了，即便是主机名不相同。<br />
在某些情况下把脚本移到页面底部可能不太容易。比如说，如果脚本中使用了[removed]来插入页面内容，它就不能被往下移动了。这里可能还会有作用域的问题。很多情况下，都会遇到这方面的问题。<br />
一
个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含[removed]，它告诉浏览器继续显示。不幸的
是，Firefox并不支持DEFER属性。在Internet
Explorer中，脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟，那么它就可以移到页面的底部。这会让你的页面加载的快一点。</p>
<p><strong>24、剔除重复脚本</strong></p>
<p>在同一个页面中重复引用JavaScript文件会影响页面的性能。你可能会认为这种情况并不多见。对于美国前10大网站的调查显示其中有两家存在
重复引
用脚本的情况。有两种主要因素导致一个脚本被重复引用的奇怪现象发生：团队规模和脚本数量。如果真的存在这种情况，重复脚本会引起不必要的HTTP请求和
无用的JavaScript运算，这降低了网站性能。<br />
在Internet
Explorer中会产生不必要的HTTP请求，而在Firefox却不会。在Internet
Explorer中，如果一个脚本被引用两次而且它又不可缓存，它就会在页面加载过程中产生两次HTTP请求。即时脚本可以缓存，当用户重载页面时也会产
生额外的HTTP请求。<br />
除增加额外的HTTP请求外，多次运算脚本也会浪费时间。在Internet Explorer和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。<br />
一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。在HTML页面中使用<script />标签引用脚本的最常见方法就是：<br />
<script type=”text/javascript” src=”menu_1.0.17.js”></script><br />
在PHP中可以通过创建名为insertScript的方法来替代：
本文地址:
http://www.it300.com/article-1124.html
评论