Yahoo前端优化技巧：减小HTTP请求与DNS查找次数

3星 · 超过75%的资源需积分: 9 30 浏览量更新于2024-07-26 1 收藏 1.79MB PPTX 举报

"Yahoo!前端优化34条规则——2013年1月" 前端优化是提升网站性能的关键，而Yahoo! 提出的这34条规则旨在帮助开发者优化前端资源加载，加快页面渲染速度，提升用户体验。以下是其中一些核心要点： 1. **减少HTTP请求次数** - HTTP请求是页面加载过程中的主要瓶颈。每增加一次请求，就会增加用户的等待时间。通过合并CSS和JavaScript文件，以及使用CSS Sprites技术来减少图像请求，可以显著提高页面加载速度。 - CSS Sprites是将多个小图合并到一张大图中，通过CSS的`background-image`和`background-position`属性定位显示所需的小图部分。这样可以减少HTTP请求次数，例如： ``` .bg_sprite{background-image:url(/整图地址);background-repeat:no-repeat} #ico1{width:容器大小;height:容器高度;background-position:X坐标Y坐标} ``` 2. **减少DNS查找次数** - 每个域名的查找都需要时间，因此减少页面中不同主机名的数量可以减少DNS查找的延迟。通过使用CDN(Content Delivery Network)服务，或者合并来自不同源的资源，可以降低DNS查找的影响。 3. **避免重定向** - 重定向会导致额外的HTTP请求，延长用户等待时间。确保URL直接指向目标页面，避免不必要的HTTP 301或302重定向。 4. **缓存利用** - 使用HTTP缓存机制，如Expires和Cache-Control头部，可以让浏览器缓存静态资源，减少对服务器的请求。 5. **压缩资源** - 使用Gzip压缩技术，减小HTML、CSS和JavaScript文件的大小，从而加快传输速度。 6. **延迟加载非关键内容** - 对于页面下方的内容，如滚动后才可见的图片，可以使用懒加载技术，只在需要时才加载，这样可以优先加载首屏内容。 7. **优化图片** - 使用适当的图片格式，如WebP或JPEG XR，可以提供更好的压缩比。同时，合理设定图片尺寸，避免在页面上加载过大图片。 8. **减少JavaScript阻塞渲染** - 尽可能将JavaScript放在`<body>`标签的底部，或者使用异步加载，防止脚本执行阻塞页面渲染。 9. **利用浏览器缓存** - 设置合适的过期时间，让浏览器可以缓存静态资源，如HTML、CSS和JavaScript文件。 10. **减少DOM元素数量** - 精简HTML结构，减少DOM元素数量，可以提高页面解析速度，进而加快页面加载。 11. **预加载关键资源** - 如果知道用户可能会访问的页面，可以使用link rel="preload"预加载关键资源。 12. **减少Cookie大小和范围** - 避免在非登录页面设置Cookie，因为它们会随每个HTTP请求发送，增加不必要的带宽消耗。 13. **使用CDN服务** - 通过CDN分发静态资源，可以减少延迟，尤其是对于国际用户。以上只是 Yahoo! 前端优化34条规则的一部分，每一条都有其独特的价值，实践中应结合具体项目灵活运用，以实现最佳的性能优化效果。

4 、可缓存的 AJAX



提高 Ajxa 性能的措施中最重要的方法就是使响应具

有可缓存性

剩余33页未读，继续阅读

卡卡卡么

粉丝: 0
资源: 6

Yahoo前端优化技巧：减小HTTP请求与DNS查找次数

WEB前端性能优化测试

前端性能优化工具哪款好用

绘制一个雅虎股票走势图 （yahoo_stock）

高性能网站学习资料书籍

yahoo r3 dataset

用python写一个TimeGAN对股票收盘价的多步预测，并对该多步预测进行优化

用Python 写一个股票交易模型，交易规则是股价上穿10日线买入，下穿10日线卖出

fix_yahoo_finance

TIOBE编程语言排行榜的运行规则

如何调用雅虎财经api并获取数据

最新资源

绘制一个雅虎股票走势图（yahoo_stock）