本文共 2854 字，大约阅读时间需要 9 分钟。
雅虎提出的34条性能优化法则涵盖了从HTML结构到JavaScript实现的多个方面，旨在帮助开发者优化网站加载速度和用户体验。以下是对这些法则的详细解读和实践建议：
减少HTTP请求数
图片、CSS、JavaScript等外部资源的使用会显著增加HTTP请求数量。建议将多个资源合并为一个文件，避免在页面中直接插入图片，而是使用CSS Sprites技术通过背景定位来实现图片的拼接和管理。利用CDN加速
Content Delivery Network（CDN）能够显著提升页面加载速度，但需要注意CDN服务通常会收费。此外，确保CDN服务器的位置与目标用户地理位置相近，以减少延迟。设置合理的缓存策略
通过在HTTP响应头中设置Expires或Cache-Control头字段，可以向浏览器提示缓存时间。这种方式能够减少重复请求，但需要注意如果页面内容变动，必须通过更换文件名或其他方式通知浏览器刷新缓存。使用Gzip压缩
Gzip是一种高效的压缩格式，能够将文件体积减少85%以上。压缩后的文件在传输过程中加载速度更快，建议在服务器端配置自动压缩功能，并在客户端配置支持Gzip解压。将CSS文件放在页面顶部
将CSS文件放置在HTML的开头部分，可以确保浏览器尽早下载并解析样式表，从而加速页面的可用性和美化效果。将JavaScript文件放在页面底部
将脚本文件放在页面的底部可以避免阻塞页面渲染，确保页面内容能够尽快呈现，仅在页面完全加载完成后再执行脚本功能。避免使用CSS表达式
CSS表达式（如background: url(...) + '-something.png'）在IE浏览器中运行时需要频繁重计算，会显著影响页面性能。建议使用更简单的方式实现背景图片拼接，或者直接使用多个CSS文件。使用外部CSS和JavaScript文件
将公共的CSS和JavaScript文件外链管理，可以利用浏览器缓存机制减少重复下载。例如，使用Google的外链资源（如JQuery文件）可以提升多个网站的共同缓存效率。减少DNS查询次数
DNS查询涉及网络域名解析，是一个相对耗时的过程。建议将相关资源（如图片、脚本文件）托管在同一域名下，减少DNS查找次数。压缩和简化JavaScript和CSS
通过优化代码，使用最少的字符实现相同功能，可以显著减少文件体积。例如，使用变量代替重复的硬编码值，或者使用简写语法等技术。避免重定向
重定向操作会增加服务器负载，影响性能。建议使用mod_rewrite或其他Apache模块进行路径重写，避免不必要的HTTP跳转。删除重复脚本
重复加载相同的脚本会浪费资源，增加加载时间。建议使用<script src>标签时进行检查，确保每个脚本文件唯一且必要。配置ETag缓存
ETag头字段可以帮助浏览器判断缓存文件是否过期，但需要妥善配置.htaccess文件，避免过度依赖缓存。缓存Ajax请求
Ajax请求通常会频繁发送HTTP请求，增加服务器负载。可以通过设置缓存策略，将频繁使用的数据存储在客户端，以减少后续请求次数。优化服务器响应缓冲
服务器在处理请求时会将HTML内容缓冲到内存中，为了减少延迟，建议尽早释放缓冲区，使服务器能够快速响应用户请求。使用GET方法进行Ajax请求
GET方法仅需一次HTTP请求，而POST方法则需要两次（头部和内容）。这种优化可以减少服务器负载和网络延迟。延迟加载非必要组件
只有在页面完全加载后，才对非必要的图片、视频等进行延迟加载。例如，使用YUI Image Loader这样的工具来实现高效的延迟加载。预加载可能使用的组件
在页面加载过程中提前加载可能在后续页面中使用的资源，例如图片或视频，减少随后的加载延迟。Google首页的CSS Sprites技术就是很好的实例。减少DOM元素数量
简化页面结构，减少不必要的DOM操作，确保页面架构高效且易于维护。使用更少的标签，避免不必要的嵌套结构。跨域加载静态资源
将静态资源（如图片、视频）托管在不同域名下，可以同时进行多个资源的并行下载，提升加载速度。但需要注意不超过2-4个域名，否则可能引发DNS查找次数过多的问题。优化iframe使用
iframe的优点在于可以独立加载第三方内容，例如广告或模块化应用。但需要注意避免不必要的iframe加载，避免过度占用资源。避免404错误页面
404错误页面会影响用户体验并消耗服务器资源。建议通过重定向或调整URL结构，确保所有访问尝试都能找到正确的页面。减小Cookie体积
Cookie文件通常以文本格式存储，体积较大会影响传输效率。建议减小Cookie的体积，设置合理的过期时间，避免不必要的数据传输。使用无Cookie域名托管静态资源
对于静态资源（如图片、CSS、JavaScript），可以使用无Cookie域名来存储，避免不必要的Cookie传输，提升性能。减少DOM访问次数
JavaScript对DOM元素的频繁访问会显著影响性能。建议避免使用JS进行页面布局设置，尽量通过CSS或其他无缠绳方式实现布局。开发灵活的事件处理句柄
避免在大量DOM元素上添加事件句柄，会导致性能下降。可以使用YUI事件工具有助于灵活管理DOM事件，提高代码效率。使用< link>标签而非@import
在IE浏览器中，@import和< link>标签在样式表加载方面无异，但< link>标签可以更好地控制加载顺序。避免使用过滤器
对于需要Alpha通透的图片，建议使用PNG8格式而非AlphaImageLoader，后者对IE6及以下浏览器支持有限，且效率较低。优化图片格式
将GIF图片转换为PNG8格式可以显著减少文件体积。对于JPG和PNG图片，可以通过压缩工具进一步优化，减少加载时间。优化CSS Sprites
在CSS Sprites中尽量垂直排列图片，紧凑布局，减少每个图片的尺寸。同时，将颜色相似的图片放置在同一块中，可以减少CSS文件的体积。避免在HTML中缩放图片
在HTML中使用固定大小的图片，而非通过缩放来调整，会增加文件体积而不提升显示效果。优化 favicon.ico
将 favicon.ico 设计为小型且可缓存的文件，通常建议使用1K以内的大小，并确保其在服务器上长时间缓存。确保组件文件在25K以内
为了适应移动设备（如iPhone）的缓存限制，确保组件文件在压缩前不超过25KB。将组件打包到多部分文档中
使用类似邮件附件的方式，将多个资源整合到一个HTTP请求中，减少传输次数。但需要确保代理服务器支持此技术，部分设备可能无法处理。通过以上优化策略，可以显著提升网站的加载速度和用户体验。建议结合具体业务需求选择合适的优化方式，并通过工具（如压缩工具、自动化优化脚本）来辅助实现这些改进。
转载地址：http://mnrfk.baihongyu.com/